@dative-gpi/foundation-shared-components 1.0.70 → 1.0.71-groupings-2

package/components/fields/FSTextArea.vue

@@ -4,7 +4,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :messages="messages"
   >
     <template
@@ -26,8 +26,8 @@
       :hideDetails="true"
       :noResize="true"
       :autoGrow="$props.autoGrow"
-      :readonly="!$props.editable"
-      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+      :disabled="$props.disabled"
+      :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -50,7 +50,7 @@
           align="center-center"
         >
           <FSButton
-            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
             icon="mdi-close"
             variant="icon"
             :color="ColorEnum.Dark"
@@ -128,16 +128,16 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
-    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -152,7 +152,7 @@ export default defineComponent({
       let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {
         const base = isMobileSized.value ? 34 : 38;
-        const row = isMobileSized.value ? 14 : 16;
+        const row = isMobileSized.value ? 18 : 20;
         if (props.rows > 1) {
           height = `${base + (props.rows - 1) * row}px`;
         }
@@ -161,14 +161,17 @@ export default defineComponent({
         }
         fieldHeight = `${props.rows * row}px`;
       }
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-text-area-cursor"             : "default",
           "--fs-text-area-border-color"       : lights.base,
           "--fs-text-area-color"              : lights.dark,
           "--fs-text-area-active-border-color": lights.base,
           "--fs-text-area-height"             : height,
-          "--fs-text-area-field-height"       : fieldHeight
+          "--fs-text-area-field-height"       : fieldHeight,
+          "--fs-text-area-padding"            : isMobileSized.value ? "10px 16px" : "11px 16px",
+          "--fs-base-field-input-height"      : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -178,7 +181,10 @@ export default defineComponent({
         "--fs-text-area-active-border-color": darks.dark,
         "--fs-text-area-error-border-color" : errors.base,
         "--fs-text-area-height"             : height,
-        "--fs-text-area-field-height"       : fieldHeight
+        "--fs-text-area-field-height"       : fieldHeight,
+        "--fs-text-area-padding"            : isMobileSized.value ? "10px 16px" : "11px 16px",
+        "--fs-base-field-input-height"      : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 

package/components/fields/FSTextField.vue

@@ -4,7 +4,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :messages="messages"
   >
     <template
@@ -32,8 +32,8 @@
       :type="$props.type"
       :persistentClear="true"
       :hideDetails="true"
-      :readonly="!$props.editable"
-      :clearable="$props.clearable && $props.editable && !!$props.modelValue"
+      :disabled="$props.disabled"
+      :clearable="$props.clearable && !$props.disabled && !!$props.modelValue"
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
@@ -56,7 +56,7 @@
           name="clear"
         >
           <FSButton
-            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            v-if="$props.clearable && !$props.disabled && !!$props.modelValue"
             icon="mdi-close"
             variant="icon"
             :color="ColorEnum.Dark"
@@ -71,7 +71,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -129,14 +129,15 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
@@ -149,12 +150,14 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-text-field-cursor"             : "default",
           "--fs-text-field-border-color"       : lights.base,
           "--fs-text-field-color"              : lights.dark,
-          "--fs-text-field-active-border-color": lights.base
+          "--fs-text-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"       : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -162,7 +165,9 @@ export default defineComponent({
         "--fs-text-field-border-color"       : lights.dark,
         "--fs-text-field-color"              : darks.base,
         "--fs-text-field-active-border-color": darks.dark,
-        "--fs-text-field-error-border-color" : errors.base
+        "--fs-text-field-error-border-color" : errors.base,
+        "--fs-base-field-input-height"       : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 

package/components/fields/FSTimeField.vue

@@ -3,14 +3,14 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
     <FSRow>
       <FSNumberField
         :validationValue="$props.modelValue"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :validateOn="validateOn"
         :rules="$props.rules"
         :hideHeader="true"
@@ -31,7 +31,7 @@
       </FSNumberField>
       <FSSelectField
         class="fs-time-field-select"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :hideHeader="true"
         :clearable="false"
         :items="timeScale"
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, watch, type StyleValue } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
@@ -108,10 +108,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -131,7 +131,7 @@ export default defineComponent({
     const selectedUnit = ref(timeScale[0]);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-time-field-cursor"             : "default",
           "--fs-time-field-border-color"       : lights.base,
@@ -153,14 +153,14 @@ export default defineComponent({
       return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
         acc[key.substring("number-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as Record<string, any>);
     });
 
     const selectSlots = computed((): any => {
       return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
         acc[key.substring("select-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as Record<string, any>);
     });
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
@@ -171,7 +171,11 @@ export default defineComponent({
     };
 
     const onSubmitTimeScale = (value: number): void => {
-      selectedUnit.value = timeScale.find((item) => item.id === value);
+      const newUnit = timeScale.find((item) => item.id === value);
+      if(!newUnit) {
+        return;
+      }
+      selectedUnit.value = newUnit;
       emit("update:modelValue", innerTime.value * selectedUnit.value.id);
     };