From d22e4b597f3b9326a9258c0360cc5ba14a1ed935 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Fri, 28 Jun 2024 14:04:20 +0200
Subject: [PATCH] Add field appearance

---
 resources/js/components/form/Editor.vue   | 30 +++++++++---------
 resources/js/components/form/Hint.vue     |  4 +--
 resources/js/components/form/Select.vue   | 28 ++++-------------
 resources/js/components/form/Text.vue     | 11 ++-----
 resources/js/components/form/Textarea.vue | 14 ++++-----
 resources/js/composables/useFieldSize.js  | 37 ++++++-----------------
 6 files changed, 41 insertions(+), 83 deletions(-)

diff --git a/resources/js/components/form/Editor.vue b/resources/js/components/form/Editor.vue
index bfe70706..1a430eb3 100644
--- a/resources/js/components/form/Editor.vue
+++ b/resources/js/components/form/Editor.vue
@@ -1,12 +1,10 @@
 <template>
     <div>
-        <div>
-            <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
+        <div class="flex flex-col group" :for="id" :class="sizeClass(size)">
+            <f-label v-if="label" :required="required" :value="label"></f-label>
             <div class="relative w-full h-full">
-                <div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
-                <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
-                    <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
-                </div>
+                <div :id="id" :class="[fieldAppearance, paddingX, paddingY]"></div>
+                <f-hint v-if="hint" :value="hint"></f-hint>
             </div>
         </div>
 
@@ -34,7 +32,7 @@ import Alert from 'editorjs-alert';
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
-const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
+const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
 
 const props = defineProps({
     required: {
@@ -42,14 +40,15 @@ const props = defineProps({
         default: false,
     },
     size: {
-        default: null,
+        type: String,
+        default: () => 'base',
     },
     rows: {
-        default: function () {
-            return 4;
-        },
+        type: Number,
+        default: () => 4,
     },
     id: {
+        type: String,
         required: true,
     },
     conditions: {
@@ -58,16 +57,15 @@ const props = defineProps({
         default: () => false,
     },
     hint: {
-        default: null,
+        type: String,
+        default: () => '',
     },
     modelValue: {
         default: undefined,
     },
     label: {
-        default: false,
-    },
-    placeholder: {
-        default: '',
+        type: String,
+        default: () => '',
     },
 });
 
diff --git a/resources/js/components/form/Hint.vue b/resources/js/components/form/Hint.vue
index 27189d21..b23cbe02 100644
--- a/resources/js/components/form/Hint.vue
+++ b/resources/js/components/form/Hint.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="h-full items-center flex absolute top-0 right-0">
-        <div v-tooltip="value">
-            <ui-sprite src="info-button" class="w-5 h-5 text-primary-700 mr-2"></ui-sprite>
+        <div v-tooltip="value" class="mr-2">
+            <ui-sprite src="info-button" class="w-5 h-5 text-primary-700"></ui-sprite>
         </div>
     </div>
 </template>
diff --git a/resources/js/components/form/Select.vue b/resources/js/components/form/Select.vue
index f500fb9b..3a410658 100644
--- a/resources/js/components/form/Select.vue
+++ b/resources/js/components/form/Select.vue
@@ -1,38 +1,22 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
-            {{ label }}
-            <span v-show="required" class="text-red-800">&nbsp;*</span>
-        </span>
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="required" :value="label"></f-label>
         <div class="relative flex-none flex">
-            <select
-                v-model="inner"
-                :disabled="disabled"
-                :name="name"
-                class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full"
-            >
+            <select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance]" class="py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full">
                 <option v-if="placeholder" :value="def">{{ placeholder }}</option>
-
                 <option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
             </select>
-            <div class="h-full items-center flex absolute top-0 right-0">
-                <div v-if="hint" v-tooltip="hint">
-                    <ui-sprite src="info-button" class="info-button"></ui-sprite>
-                </div>
-            </div>
+            <f-hint v-if="hint" :value="hint"></f-hint>
         </div>
     </label>
 </template>
 
 <script setup>
 import {computed, ref} from 'vue';
+import useFieldSize from '../../composables/useFieldSize.js';
 import map from 'lodash/map';
 
-const sizes = ref({
-    sm: 'field-sm',
-    base: 'field-base',
-    lg: 'field-lg',
-});
+const {fieldHeight, fieldAppearance, sizeClass} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 
diff --git a/resources/js/components/form/Text.vue b/resources/js/components/form/Text.vue
index de93936f..c4d1bbc9 100644
--- a/resources/js/components/form/Text.vue
+++ b/resources/js/components/form/Text.vue
@@ -1,6 +1,6 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <f-label :required="required" :value="label"></f-label>
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="required" :value="label"></f-label>
         <div class="relative flex-none flex">
             <input
                 :id="id"
@@ -27,7 +27,7 @@ import wNumb from 'wnumb';
 import {ref, computed} from 'vue';
 import useFieldSize from '../../composables/useFieldSize';
 
-const {fieldHeight, fieldAppearance, paddingX} = useFieldSize();
+const {fieldHeight, fieldAppearance, paddingX, sizeClass} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -136,11 +136,6 @@ const props = defineProps({
 });
 
 const focus = ref(false);
-const sizes = ref({
-    sm: 'field-sm',
-    base: 'field-base',
-    lg: 'field-lg',
-});
 
 const transformedValue = computed({
     get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue),
diff --git a/resources/js/components/form/Textarea.vue b/resources/js/components/form/Textarea.vue
index 13dd7f55..698a3fd9 100644
--- a/resources/js/components/form/Textarea.vue
+++ b/resources/js/components/form/Textarea.vue
@@ -1,11 +1,9 @@
 <template>
-    <label class="flex flex-col">
-        <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
-        <div class="relative w-full h-full">
-            <textarea class="h-full w-full outline-none" :class="[defaultFieldClass, fieldClass(size)]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
-            <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
-                <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
-            </div>
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="required" :value="label"></f-label>
+        <div class="relative flex-none flex">
+            <textarea class="w-full h-full" :class="[fieldAppearance, paddingX, paddingY]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
+            <f-hint v-if="hint" :value="hint"></f-hint>
         </div>
     </label>
 </template>
@@ -14,7 +12,7 @@
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
-const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
+const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
 
 const props = defineProps({
     required: {
diff --git a/resources/js/composables/useFieldSize.js b/resources/js/composables/useFieldSize.js
index f30c4926..739af03e 100644
--- a/resources/js/composables/useFieldSize.js
+++ b/resources/js/composables/useFieldSize.js
@@ -1,41 +1,24 @@
-import {ref, inject, computed, onBeforeUnmount} from 'vue';
-import {router} from '@inertiajs/vue3';
-import useQueueEvents from './useQueueEvents.js';
-
 export default function () {
-    const sizes = {
-        sm: {
-            label: 'text-xs',
-            field: 'text-xs',
-        },
-        default: {
-            label: 'text-sm',
-            field: 'text-sm',
-        },
-    };
-
-    const defaultFieldClass = 'border-2 p-2 rounded-lg bg-gray-700 border-gray-600 text-gray-300 border-solid';
+    function sizeClass(size) {
+        return {
+            sm: 'field-sm',
+            base: 'field-base',
+            lg: 'field-lg',
+        }[size];
+    }
 
     const fieldHeight = 'group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px]';
     const fieldAppearance =
         'group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs';
 
     const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1';
-
-    function labelClass(size) {
-        return sizes[size ? size : 'default'].label;
-    }
-
-    function fieldClass(size) {
-        return sizes[size ? size : 'default'].field;
-    }
+    const paddingY = 'group-[.field-base]:py-2 group-[.field-sm]:py-1';
 
     return {
-        labelClass,
-        fieldClass,
-        defaultFieldClass,
         fieldHeight,
         fieldAppearance,
         paddingX,
+        paddingY,
+        sizeClass,
     };
 }