@dative-gpi/foundation-shared-components 0.0.13 → 0.0.15

package/components/FSCalendarTwin.vue

@@ -14,6 +14,7 @@
       :style="style"
     >
       <FSCol
+        align="top-center"
         :class="leftClasses"
         :style="style"
       >
@@ -54,6 +55,7 @@
         </v-locale-provider>
       </FSCol>
       <FSCol
+        align="top-center"
         :class="rightClasses"
         :style="style"
       >

package/components/FSClock.vue

@@ -5,13 +5,13 @@
   >
     <FSRow
       align="center-center"
-      padding="0 16px"
+      :wrap="false"
     >
-      <FSSpan
+      <FSText
         v-if="$props.reminder"
       >
         {{ epochToLongDateFormat($props.date) }}
-      </FSSpan>
+      </FSText>
       <v-spacer v-if="$props.reminder" />
       <FSRow
         align="center-center"
@@ -43,12 +43,8 @@
     <FSCol
       v-if="$props.slider"
     >
-      <FSSpan
-        font="text-overline"
-      >
-        {{ $tr("ui.clock.hours", "Hours") }}
-      </FSSpan>
       <FSSlider
+        :label="$tr('ui.clock.hours', 'Hours')"
         :readonly="!$props.editable"
         :color="$props.color"
         :step="1"
@@ -60,12 +56,8 @@
     <FSCol
       v-if="$props.slider"
     >
-      <FSSpan
-        font="text-overline"
-      >
-        {{ $tr("ui.clock.minutes", "Minutes") }}
-      </FSSpan>
       <FSSlider
+        :label="$tr('ui.clock.minutes', 'Minutes')"
         :readonly="!$props.editable"
         :color="$props.color"
         :step="1"
@@ -85,7 +77,7 @@ import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables"
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
-import FSSpan from "./FSSpan.vue";
+import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -93,7 +85,7 @@ export default defineComponent({
   name: "FSClock",
   components: {
     FSSlider,
-    FSSpan,
+    FSText,
     FSCol,
     FSRow
   },

package/components/FSCol.vue

@@ -107,8 +107,8 @@ export default defineComponent({
     });
 
     return {
-      style,
-      classes
+      classes,
+      style
     };
   }
 });

package/components/FSSlideGroup.vue

@@ -19,6 +19,7 @@ import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSSlideGroup",
@@ -26,12 +27,12 @@ export default defineComponent({
     padding: {
       type: [String, Number],
       required: false,
-      default: 0
+      default: "0"
     },
     gap: {
-      type: Number,
+      type: [String, Number],
       required: false,
-      default: 8
+      default: "8px"
     }
   },
   setup(props) {
@@ -40,14 +41,12 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
-      return {
-        "--fs-group-padding"    : typeof(props.padding) === "string" ? props.padding : `${props.padding}px`,
-        "--fs-group-gap"        : `${props.gap}px`,
-        "--fs-group-color"      : darks.light,
-        "--fs-group-hover-color": darks.dark
-      }
-    });
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+      "--fs-group-padding"    : sizeToVar(props.padding),
+      "--fs-group-gap"        : sizeToVar(props.gap),
+      "--fs-group-color"      : darks.light,
+      "--fs-group-hover-color": darks.dark
+    }));
 
     return {
       style,

package/components/FSWrapGroup.vue

@@ -18,6 +18,7 @@ import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSWrapGroup",
@@ -25,12 +26,12 @@ export default defineComponent({
     padding: {
       type: [String, Number],
       required: false,
-      default: 0
+      default: "0"
     },
     gap: {
-      type: Number,
+      type: [String, Number],
       required: false,
-      default: 8
+      default: "8px"
     }
   },
   setup(props) {
@@ -39,14 +40,12 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
-      return {
-        "--fs-group-padding"    : typeof(props.padding) === "string" ? props.padding : `${props.padding}px`,
-        "--fs-group-gap"        : `${props.gap}px`,
-        "--fs-group-color"      : darks.light,
-        "--fs-group-hover-color": darks.dark
-      }
-    });
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+      "--fs-group-padding"    : sizeToVar(props.padding),
+      "--fs-group-gap"        : sizeToVar(props.gap),
+      "--fs-group-color"      : darks.light,
+      "--fs-group-hover-color": darks.dark
+    }));
 
     return {
       style,

package/components/fields/FSAutocompleteField.vue

@@ -48,7 +48,7 @@
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="onUpdate"
       @blur="blurred = true"
       v-model:search="innerSearch"
       v-bind="$attrs"
@@ -192,6 +192,11 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
+    const onUpdate = (value: string[] | string) => {
+      emit('update:modelValue', value);
+      innerSearch.value = "";
+    };
+
     watch(innerSearch, () => {
       emit("update:search", innerSearch.value);
     });
@@ -203,7 +208,8 @@ export default defineComponent({
       slots,
       style,
       classes,
-      innerSearch
+      innerSearch,
+      onUpdate
     };
   }
 });

package/components/fields/FSColorField.vue

@@ -5,68 +5,80 @@
     @update:modelValue="(value) => menu = value"
   >  
     <template #activator="{ props }">
-      <FSRow
-        height="fill"
-        v-bind="props"
-      >
-        <FSTextField
-          class="fs-color-field"
-          :hideHeader="$props.hideHeader"
-          :required="$props.required"
-          :editable="$props.editable"
-          :clearable="false"
-          :readonly="true"
-          :modelValue="innerColor"
-          v-bind="$attrs"
-        >
-          <template #prepend-inner>
-            <slot name="prepend-inner">
-              <FSIcon
-                size="xl"
-                :color="innerColor"
-              >
-                mdi-circle
-              </FSIcon>
-            </slot>
-          </template>
-          <template #append> 
-            <FSButton
-              prependIcon="mdi-pencil"
-              variant="full"
-              :editable="$props.editable"
-            />
-          </template>
-        </FSTextField>
-        <FSTextField
-          class="fs-color-field-opacity"
-          :label="$tr('ui.color-field.opacity', 'Opacity')"
-          :hideHeader="$props.hideHeader"
-          :required="$props.required"
-          :editable="$props.editable"
-          :clearable="false"
-          :readonly="true"
-          :modelValue="(Math.round(getPercentageFromHex(innerOpacity)*100)) + ' %'"
+      <FSCol>
+        <FSRow
+          height="fill"
+          v-bind="props"
         >
-          <template #prepend-inner>
-            <slot name="prepend-inner">
-              <FSIcon
-                icon="mdi-circle"
-                size="xl"
-                :color="ColorEnum.Dark"
+          <FSTextField
+            class="fs-color-field"
+            :hideHeader="$props.hideHeader"
+            :required="$props.required"
+            :editable="$props.editable"
+            :clearable="false"
+            :readonly="true"
+            :modelValue="innerColor"
+            v-bind="$attrs"
+          >
+            <template #prepend-inner>
+              <slot name="prepend-inner">
+                <FSIcon
+                  size="xl"
+                  :color="innerColor"
+                >
+                  mdi-circle
+                </FSIcon>
+              </slot>
+            </template>
+            <template #append> 
+              <FSButton
+                prependIcon="mdi-pencil"
+                variant="full"
+                :editable="$props.editable"
+              />
+            </template>
+          </FSTextField>
+          <FSTextField
+            class="fs-color-field-opacity"
+            :label="$tr('ui.color-field.opacity', 'Opacity')"
+            :hideHeader="$props.hideHeader"
+            :required="$props.required"
+            :editable="$props.editable"
+            :clearable="false"
+            :readonly="true"
+            :modelValue="(Math.round(getPercentageFromHex(innerOpacity)*100)) + ' %'"
+          >
+            <template #prepend-inner>
+              <slot name="prepend-inner">
+                <FSIcon
+                  icon="mdi-circle"
+                  size="xl"
+                  :color="ColorEnum.Dark"
+                  :editable="$props.editable"
+                  :style="{ opacity: getPercentageFromHex(innerOpacity) }"
+                />
+              </slot>
+            </template>
+            <template #append> 
+              <FSButton
+                prependIcon="mdi-pencil"
+                variant="full"
                 :editable="$props.editable"
-                :style="{ opacity: getPercentageFromHex(innerOpacity) }"
               />
-            </slot>
-          </template>
-          <template #append> 
-            <FSButton
-              prependIcon="mdi-pencil"
-              variant="full"
-              :editable="$props.editable"
-            />
-          </template>
-        </FSTextField>
-      </FSRow>
+            </template>
+          </FSTextField>
+        </FSRow>
+        <slot name="description">
+          <FSSpan
+            v-if="$props.description"
+            class="fs-color-field-description"
+            font="text-underline"
+            :style="style"
+          >
+            {{ $props.description }}
+          </FSSpan>
+        </slot>
+      </FSCol>
     </template> 
     <FSCard
       :elevation="true"
@@ -92,7 +104,7 @@
 import { computed, defineComponent, ref } from "vue";
 
 import { getPercentageFromHex, getHexFromPercentage } from "@dative-gpi/foundation-shared-components/utils";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
@@ -113,6 +125,11 @@ export default defineComponent({
     FSRow
   },
   props: {
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: String,
       required: false,
@@ -141,32 +158,26 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:opacity"],
   setup(props, { emit }) {
-    const innerColor = ref(props.modelValue.toString().substring(0, 7));
-    const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
-    const fullColor = ref(innerColor.value + innerOpacity.value);
+    const { slots } = useSlots();
 
-    const menu = ref(false);
+    delete slots.description;
 
-    const errors = useColors().getColors(ColorEnum.Error);
     const lights = useColors().getColors(ColorEnum.Light);
     const darks = useColors().getColors(ColorEnum.Dark);
 
+    const menu = ref(false);
+    const innerColor = ref(props.modelValue.toString().substring(0, 7));
+    const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
+    const fullColor = ref(innerColor.value + innerOpacity.value);
+
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
         return {
-          "--fs-color-field-cursor"             : "default",
-          "--fs-color-field-border-color"       : lights.base,
-          "--fs-color-field-color"              : lights.dark,
-          "--fs-color-field-active-border-color": lights.base
+          "--fs-color-field-color": lights.dark
         };
       }
       return {
-        "--fs-color-field-cursor"             : "text",
-        "--fs-color-field-border-color"       : lights.dark,
-        "--fs-color-field-color"              : darks.base,
-        "--fs-color-field-active-border-color": darks.dark,
-        "--fs-color-field-error-color"        : errors.base,
-        "--fs-color-field-error-border-color" : errors.base
+        "--fs-color-field-color": darks.base
       };
     });
 
@@ -180,12 +191,12 @@ export default defineComponent({
     };
 
     return {
-      ColorEnum,
       getPercentageFromHex,
-      onSubmit,
-      innerColor,
       innerOpacity,
+      innerColor,
       fullColor,
+      ColorEnum,
+      onSubmit,
       style,
       menu
     };

package/components/fields/FSDateField.vue

@@ -39,7 +39,7 @@
       </FSTextField>
     </template>
     <FSCard
-      width="394"
+      width="346px"
       :elevation="true"
       :border="false"
     >

package/components/fields/FSDateRangeField.vue

@@ -57,8 +57,6 @@ import FSSubmitDialog from "../FSSubmitDialog.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
-import FSCard from "../FSCard.vue";
-import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSDateRangeField",
@@ -66,9 +64,7 @@ export default defineComponent({
     FSSubmitDialog,
     FSCalendarTwin,
     FSTextField,
-    FSButton,
-    FSCard,
-    FSCol
+    FSButton
   },
   props: {
     label: {

package/components/fields/FSDateTimeField.vue

@@ -42,7 +42,7 @@
       :modelValue="tabs"
     >
       <FSCard
-        width="394px"
+        width="346px"
         :elevation="true"
         :border="false"
         :value="0"

package/components/fields/FSDateTimeRangeField.vue

@@ -43,19 +43,29 @@
           :color="$props.color"
           v-model="innerDateRange"
         />
-        <FSRow>
-          <FSClock
-            :reminder="true"
-            :color="$props.color"
-            :date="innerDateLeft"
-            v-model="innerTimeLeft"
-          />
-          <FSClock
-            :reminder="true"
-            :color="$props.color"
-            :date="innerDateRight"
-            v-model="innerTimeRight"
-          />
+        <FSRow
+          width="100%"
+        >
+          <FSCol
+            width="calc(50% - 4px)"
+          >
+            <FSClock
+              :reminder="true"
+              :color="$props.color"
+              :date="innerDateLeft"
+              v-model="innerTimeLeft"
+            />
+          </FSCol>
+          <FSCol
+            width="calc(50% - 4px)"
+          >
+            <FSClock
+              :reminder="true"
+              :color="$props.color"
+              :date="innerDateRight"
+              v-model="innerTimeRight"
+            />
+          </FSCol>
         </FSRow>
       </FSCol>
     </template>
@@ -74,7 +84,6 @@ import FSCalendarTwin from "../FSCalendarTwin.vue";
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
 import FSClock from "../FSClock.vue";
-import FSCard from "../FSCard.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
@@ -86,7 +95,6 @@ export default defineComponent({
     FSTextField,
     FSButton,
     FSClock,
-    FSCard,
     FSCol,
     FSRow
   },

package/components/fields/FSIconField.vue

@@ -170,11 +170,7 @@ export default defineComponent({
       }
       if (props.modelValue) {
         const selectedIcon = innerIcons.find((icon) => icon.id === props.modelValue);
-        if (selectedIcon) {
-          innerIcons.splice(innerIcons.indexOf(selectedIcon), 1);
-          innerIcons.unshift(selectedIcon);
-        }
-        else {
+        if (!selectedIcon) {
           innerIcons.unshift({
             id: props.modelValue,
             prependIcon: props.modelValue

package/components/fields/FSNumberField.vue

@@ -1,9 +1,8 @@
 <template>
   <FSTextField
-    type="number"
     :editable="$props.editable"
     :modelValue="$props.modelValue?.toString()"
-    @update:modelValue="(value) => $emit('update:modelValue', isNaN(parseFloat(value)) ? 0 : parseFloat(value))"
+    @update:modelValue="onUpdate"
     v-bind="$attrs"
   >
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
@@ -34,6 +33,21 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:modelValue"]
+  emits: ["update:modelValue"],
+  setup(_, { emit }) {
+    const onUpdate = (value: string) => {
+      const match = /([0-9 ]*[,\.]?)?[0-9]+/.exec(value);
+      if (match && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
+        emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));
+      }
+      else {
+        emit("update:modelValue", 0);
+      }
+    };
+
+    return {
+      onUpdate
+    };
+  }
 });
 </script>

package/components/fields/FSRichTextField.vue

@@ -292,14 +292,16 @@ export default defineComponent({
     });
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      let minHeight: string | undefined = undefined;
-      const base = isMobileSized.value ? 30 : 42;
-      const row = isMobileSized.value ? 16 : 20;
-      if (props.rows > 1) {
-        minHeight = `${base + (props.rows - 1) * row}px`;
-      }
-      else {
-        minHeight = `${base}px`;
+      let minHeight: string | undefined = "auto";
+      if (!readonly.value) {
+        const base = isMobileSized.value ? 30 : 42;
+        const row = isMobileSized.value ? 16 : 20;
+        if (props.rows > 1) {
+          minHeight = `${base + (props.rows - 1) * row}px`;
+        }
+        else {
+          minHeight = `${base}px`;
+        }
       }
 
       switch (props.variant) {

package/components/fields/FSTagField.vue

@@ -159,14 +159,14 @@ export default defineComponent({
     }
 
     return {
-      ColorEnum,
       innerValue,
       validateOn,
+      ColorEnum,
       messages,
       blurred,
       style,
-      onAdd,
-      onRemove
+      onRemove,
+      onAdd
     };
   }
 });

package/components/fields/FSTextArea.vue

@@ -109,12 +109,12 @@ export default defineComponent({
     resize: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     autoGrow: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     hideHeader: {
       type: Boolean,