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

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
@@ -94,17 +65,18 @@
 <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 FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSDateTimeRangeField",
@@ -115,7 +87,8 @@ export default defineComponent({
     FSButton,
     FSClock,
     FSCard,
-    FSCol
+    FSCol,
+    FSRow
   },
   props: {
     label: {
@@ -162,6 +135,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 +178,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 +199,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 +223,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) {
@@ -223,9 +184,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,10 +1,6 @@
 <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))"
@@ -27,31 +23,11 @@ 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,

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",

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",

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

@@ -36,16 +36,18 @@
       menuIcon="mdi-chevron-down"
       clearIcon="mdi-close"
       variant="outlined"
+      :style="style"
       :hideDetails="true"
       :items="$props.items"
       :itemTitle="$props.itemTitle"
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
       :clearable="$props.editable && $props.clearable"
-      :error="messages.length > 0"
-      :style="style"
+      :rules="$props.rules"
+      :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template v-for="(_, name) in slots" v-slot:[name]="slotData">
@@ -68,12 +70,12 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSSelectField",
@@ -122,16 +124,16 @@ export default defineComponent({
       required: false,
       default: false
     },
-    clearable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     rules: {
       type: Array as PropType<Function[]>,
       required: false,
       default: () => []
     },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -140,6 +142,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
     
@@ -169,19 +172,12 @@ 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 messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     return {
+      validateOn,
       messages,
+      blurred,
       slots,
       style
     };

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

@@ -6,44 +6,15 @@
       :hideHeader="$props.hideHeader"
       :required="$props.required"
       :editable="$props.editable"
-      :error="messages.length > 0"
+      :rules="$props.rules"
+      :messages="messages"
+      :validateOn="validateOn"
+      :validationValue="$props.modelValue"
       @keydown.enter="onAdd"
+      @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-tag-field-label"
-              font="text-overline"
-              :style="style"
-            >
-              {{ $props.label }}
-            </FSSpan>
-            <FSSpan
-              v-if="$props.label && $props.required"
-              class="fs-tag-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-tag-field-messages"
-              font="text-overline"
-              :style="style"
-            >
-              {{ messages.join(", ") }}
-            </FSSpan>
-          </FSRow>
-        </slot>
-      </template>
       <template #append-inner>
         <slot name="append-inner">
           <FSButton
@@ -73,14 +44,14 @@
 import { computed, defineComponent, PropType, ref } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSTextField from "./FSTextField.vue";
-import FSTagGroup from "./FSTagGroup.vue";
-import FSButton from "./FSButton.vue";
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSTagGroup from "../FSTagGroup.vue";
+import FSButton from "../FSButton.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTagField",
@@ -141,6 +112,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const {validateOn, blurred, getMessages} = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -161,16 +133,7 @@ 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 messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const onAdd = (): void => {
       if (!props.editable) {
@@ -198,7 +161,9 @@ export default defineComponent({
     return {
       ColorEnum,
       innerValue,
+      validateOn,
       messages,
+      blurred,
       style,
       onAdd,
       onRemove