@dative-gpi/foundation-shared-components 0.0.12 → 0.0.14

package/components/{FSDateTimeField.vue → fields/FSDateTimeField.vue}

@@ -13,45 +13,16 @@
         :hideHeader="$props.hideHeader"
         :required="$props.required"
         :editable="$props.editable"
-        :error="messages.length > 0"
         :readonly="true"
+        :rules="$props.rules"
+        :messages="messages"
+        :validateOn="validateOn"
+        :validationValue="$props.modelValue"
         :modelValue="epochToLongTimeFormat($props.modelValue)"
         @click:clear="onClear"
+        @blur="blurred = true"
         v-bind="props"
       >
-        <template v-if="!$props.hideHeader" #label>
-          <slot name="label">
-            <FSRow :wrap="false">
-              <FSSpan
-                v-if="$props.label"
-                class="fs-date-field-label"
-                font="text-overline"
-                :style="style"
-              >
-                {{ $props.label }}
-              </FSSpan>
-              <FSSpan
-                v-if="$props.label && $props.required"
-                class="fs-date-field-label"
-                style="margin-left: -8px;"
-                font="text-overline"
-                :ellipsis="false"
-                :style="style"
-              >
-                *
-              </FSSpan>
-              <v-spacer style="min-width: 40px;" />
-              <FSSpan
-                v-if="messages.length > 0"
-                class="fs-date-field-messages"
-                font="text-overline"
-                :style="style"
-              >
-                {{ messages.join(", ") }}
-              </FSSpan>
-            </FSRow>
-          </slot>
-        </template>
         <template #prepend-inner>
           <slot name="prepend-inner">
             <FSButton
@@ -71,7 +42,7 @@
       :modelValue="tabs"
     >
       <FSCard
-        width="394px"
+        width="346px"
         :elevation="true"
         :border="false"
         :value="0"
@@ -115,17 +86,17 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from "vue";
 
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSTextField from "./FSTextField.vue";
-import FSCalendar from "./FSCalendar.vue";
-import FSWindow from "./FSWindow.vue";
-import FSButton from "./FSButton.vue";
-import FSClock from "./FSClock.vue";
-import FSCard from "./FSCard.vue";
-import FSCol from "./FSCol.vue";
+import FSCalendar from "../FSCalendar.vue";
+import FSWindow from "../FSWindow.vue";
+import FSButton from "../FSButton.vue";
+import FSClock from "../FSClock.vue";
+import FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSDateTimeField",
@@ -183,6 +154,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToLongTimeFormat } = useTimeZone();
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -213,16 +185,7 @@ export default defineComponent({
       };
     });
 
-    const messages = computed((): string[] => {
-      const messages = [];
-      for (const rule of props.rules) {
-        const message = rule(props.modelValue ?? null);
-        if (typeof(message) === "string") {
-          messages.push(message);
-        }
-      }
-      return messages;
-    });
+    const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const onClear = (): void => {
       emit("update:modelValue", null);
@@ -245,7 +208,9 @@ export default defineComponent({
       ColorEnum,
       innerDate,
       innerTime,
+      validateOn,
       messages,
+      blurred,
       style,
       menu,
       tabs,

package/components/{FSDateTimeRangeField.vue → fields/FSDateTimeRangeField.vue}

@@ -7,45 +7,16 @@
     :hideHeader="$props.hideHeader"
     :required="$props.required"
     :editable="$props.editable"
-    :error="messages.length > 0"
     :readonly="true"
-    :modelValue="placeholder"
+    :rules="$props.rules"
+    :messages="messages"
+    :validateOn="validateOn"
+    :validationValue="$props.modelValue"
+    :modelValue="toShortTimeFormat"
     @click="onClick"
     @click:clear="onClear"
+    @blur="blurred = true"
   >
-    <template v-if="!$props.hideHeader" #label>
-      <slot name="label">
-        <FSRow :wrap="false">
-          <FSSpan
-            v-if="$props.label"
-            class="fs-date-field-label"
-            font="text-overline"
-            :style="style"
-          >
-            {{ $props.label }}
-          </FSSpan>
-          <FSSpan
-            v-if="$props.label && $props.required"
-            class="fs-date-field-label"
-            style="margin-left: -8px;"
-            font="text-overline"
-            :ellipsis="false"
-            :style="style"
-          >
-            *
-          </FSSpan>
-          <v-spacer style="min-width: 40px;" />
-          <FSSpan
-            v-if="messages.length > 0"
-            class="fs-date-field-messages"
-            font="text-overline"
-            :style="style"
-          >
-            {{ messages.join(", ") }}
-          </FSSpan>
-        </FSRow>
-      </slot>
-    </template>
     <template #prepend-inner>
       <slot name="prepend-inner">
         <FSButton
@@ -72,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>
@@ -94,17 +75,17 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSSubmitDialog from "./FSSubmitDialog.vue";
-import FSCalendarTwin from "./FSCalendarTwin.vue";
+import FSSubmitDialog from "../FSSubmitDialog.vue";
+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 FSButton from "../FSButton.vue";
+import FSClock from "../FSClock.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSDateTimeRangeField",
@@ -114,8 +95,8 @@ export default defineComponent({
     FSTextField,
     FSButton,
     FSClock,
-    FSCard,
-    FSCol
+    FSCol,
+    FSRow
   },
   props: {
     label: {
@@ -162,6 +143,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToShortTimeFormat } = useTimeZone();
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -204,35 +186,13 @@ export default defineComponent({
       };
     });
 
-    const placeholder = computed((): string => {
+    const toShortTimeFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
       }
       return props.modelValue.map((epoch) => epochToShortTimeFormat(epoch)).join(" - ");
     });
 
-    const messages = computed((): string[] => {
-      const messages = [];
-      for (const rule of props.rules) {
-        if (props.modelValue && Array.isArray(props.modelValue)) {
-          for (const value of props.modelValue) {
-            const message = rule(value);
-            if (typeof(message) === "string") {
-              messages.push(message);
-              break;
-            }
-          }
-        }
-        else {
-          const message = rule(null);
-          if (typeof(message) === "string") {
-            messages.push(message);
-          }
-        }
-      }
-      return messages;
-    });
-
     const innerDateLeft = computed((): number | null => {
       if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length) {
         return innerDateRange.value[0];
@@ -247,6 +207,8 @@ export default defineComponent({
       return null;
     });
 
+    const messages = computed((): string[] => getMessages(props.modelValue, props.rules, true));
+
     const onClick = (): void => {
       if (props.editable) {
         dialog.value = true;
@@ -269,10 +231,12 @@ export default defineComponent({
 
     return {
       ColorEnum,
+      validateOn,
       messages,
+      blurred,
       style,
       dialog,
-      placeholder,
+      toShortTimeFormat,
       innerDateLeft,
       innerTimeLeft,
       innerDateRight,

package/components/{FSIconField.vue → fields/FSIconField.vue}

@@ -6,43 +6,14 @@
       :hideHeader="$props.hideHeader"
       :required="$props.required"
       :editable="$props.editable"
-      :error="messages.length > 0"
+      :rules="$props.rules"
+      :messages="messages"
+      :validateOn="validateOn"
+      :validationValue="$props.modelValue"
+      @blur="blurred = true"
       v-model="innerValue"
       v-bind="$attrs"
     >
-      <template v-if="!$props.hideHeader" #label>
-        <slot name="label">
-          <FSRow :wrap="false">
-            <FSSpan
-              v-if="$props.label"
-              class="fs-icon-field-label"
-              font="text-overline"
-              :style="style"
-            >
-              {{ $props.label }}
-            </FSSpan>
-            <FSSpan
-              v-if="$props.label && $props.required"
-              class="fs-icon-field-label"
-              style="margin-left: -8px;"
-              font="text-overline"
-              :ellipsis="false"
-              :style="style"
-            >
-              *
-            </FSSpan>
-            <v-spacer style="min-width: 40px;" />
-            <FSSpan
-              v-if="messages.length > 0"
-              class="fs-icon-field-messages"
-              font="text-overline"
-              :style="style"
-            >
-              {{ messages.join(", ") }}
-            </FSSpan>
-          </FSRow>
-        </slot>
-      </template>
       <template #append-inner>
         <FSIcon
           v-if="$props.modelValue"
@@ -70,20 +41,20 @@
 import { computed, defineComponent, PropType, ref } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
+import FSToggleSet from "../FSToggleSet.vue";
 import FSTextField from "./FSTextField.vue";
-import FSToggleSet from "./FSToggleSet.vue";
-import FSIcon from "./FSIcon.vue";
-import FSCol from "./FSCol.vue";
+import FSIcon from "../FSIcon.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSIconField",
   components: {
-    FSTextField,
     FSToggleSet,
+    FSTextField,
     FSIcon,
     FSCol,
   },
@@ -151,6 +122,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const {validateOn, blurred, getMessages} = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -171,17 +143,6 @@ export default defineComponent({
       };
     });
 
-    const messages = computed((): string[] => {
-      const messages = [];
-      for (const rule of props.rules) {
-        const message = rule(props.modelValue);
-        if (typeof(message) === "string") {
-          messages.push(message);
-        }
-      }
-      return messages;
-    });
-
     const icons = computed((): FSToggle[] => {
       const innerIcons: FSToggle[] = [];
       if (!innerValue.value || innerValue.value.length < 3) {
@@ -209,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
@@ -223,9 +180,13 @@ export default defineComponent({
       return innerIcons;
     });
 
+    const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
+
     return {
       innerValue,
+      validateOn,
       messages,
+      blurred,
       style,
       icons
     };

package/components/{FSNumberField.vue → fields/FSNumberField.vue}

@@ -1,13 +1,8 @@
 <template>
   <FSTextField
-    type="number"
-    :label="$props.label"
-    :description="$props.description"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
     :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">
@@ -27,37 +22,32 @@ export default defineComponent({
     FSTextField
   },
   props: {
-    label: {
-      type: String,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String,
-      required: false,
-      default: null
-    },
     modelValue: {
       type: Number,
       required: false,
       default: null
     },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     editable: {
       type: Boolean,
       required: false,
       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/{FSPasswordField.vue → fields/FSPasswordField.vue}

@@ -1,29 +1,25 @@
 <template>
   <FSTextField
-    :label="$props.label"
-    :description="$props.description"
     :type="type"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"
     v-bind="$attrs"
   >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
     <template #append-inner>
       <slot name="append-inner">
         <FSButton
           variant="icon"
-          :icon="icon"
           :editable="$props.editable"
           :color="ColorEnum.Dark"
+          :icon="icon"
           @click="onToggle"
         />
       </slot>
     </template>
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
-    </template>
   </FSTextField>
 </template>
 
@@ -34,7 +30,7 @@ import { useColors } from "@dative-gpi/foundation-shared-components/composables"
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
-import FSButton from "./FSButton.vue";
+import FSButton from "../FSButton.vue";
 
 export default defineComponent({
   name: "FSPasswordField",
@@ -43,31 +39,11 @@ export default defineComponent({
     FSButton
   },
   props: {
-    label: {
-      type: String,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String,
-      required: false,
-      default: null
-    },
     modelValue: {
       type: String,
       required: false,
       default: null
     },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     editable: {
       type: Boolean,
       required: false,

package/components/{FSRichTextField.vue → fields/FSRichTextField.vue}

@@ -172,9 +172,9 @@ import { getAncestor, getSelectedNode } from "@dative-gpi/foundation-shared-comp
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
-import FSIcon from "./FSIcon.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSIcon from "../FSIcon.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSRichTextField",
@@ -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/{FSSearchField.vue → fields/FSSearchField.vue}

@@ -48,7 +48,7 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
-import FSButton from "./FSButton.vue";
+import FSButton from "../FSButton.vue";
 
 export default defineComponent({
   name: "FSSearchField",