@dative-gpi/foundation-shared-components 0.0.11 → 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,10 +135,12 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToShortTimeFormat } = useTimeZone();
+    const { validateOn, blurred, getMessages } = useRules();
+    const { getColors } = useColors();
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
 
@@ -203,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];
@@ -246,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;
@@ -268,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,9 +122,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const {validateOn, blurred, getMessages} = useRules();
+    const { getColors } = useColors();
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const innerValue = ref(null);
 
@@ -169,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) {
@@ -221,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,
@@ -76,8 +52,10 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const { getColors } = useColors();
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const stars = ref(true);
 

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

@@ -141,10 +141,10 @@
       :contenteditable="!readonly && $props.editable"
     />
     <FSTextField
-      v-if="isLink && $props.editable"
-      v-model="linkUrl"
+      v-if="isLink && !readonly && $props.editable"
       :hideHeader="true"
       @keypress.enter.stop="toggleLink"
+      v-model="linkUrl"
     />
     <slot name="description">
       <FSSpan
@@ -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",
@@ -229,10 +229,11 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
+    const { getColors } = useColors();
 
-    const linkColors = computed(()=> useColors().getColors(props.linkColor));
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const linkColors = computed(()=> getColors(props.linkColor));
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const canUndo = ref(false);
     const isLink = ref(false);
@@ -287,7 +288,7 @@ export default defineComponent({
     });
 
     const readonly = computed((): boolean => {
-      return props.variant === "readonly";
+      return ["readonly"].includes(props.variant);
     });
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {

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

@@ -6,18 +6,27 @@
     :hideHeader="$props.hideHeader"
     :required="$props.required"
     :editable="$props.editable"
+    :placeholder="placeholder"
     @keydown.enter="$emit('update:modelValue', innerValue)"
     v-model="innerValue"
     v-bind="$attrs"
   >
-    <template
-      v-if="!$props.instant"
-      #append
-    >
+    <template v-if="$props.prependInnerIcon" #prepend-inner>
+      <slot name="prepend-inner">
+        <FSButton
+          variant="icon"
+          :icon="$props.prependInnerIcon"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="$emit('update:modelValue', innerValue)"
+        />
+      </slot>
+    </template>
+    <template v-if="!['instant'].includes($props.variant)" #append>
       <slot name="append">
         <FSButton
           :prependIcon="$props.buttonPrependIcon"
-          :label="$props.buttonLabel"
+          :label="buttonLabel"
           :appendIcon="$props.buttonAppendIcon"
           :variant="$props.buttonVariant"
           :color="$props.buttonColor"
@@ -33,12 +42,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from "vue";
+import { computed, defineComponent, PropType, ref, watch } from "vue";
 
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 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",
@@ -57,11 +67,26 @@ export default defineComponent({
       required: false,
       default: null
     },
-    buttonPrependIcon: {
+    placeholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+    prependInnerIcon: {
       type: String,
       required: false,
       default: "mdi-magnify"
     },
+    variant: {
+      type: String as PropType<"standard" | "instant">,
+      required: false,
+      default: "instant"
+    },
+    buttonPrependIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
     buttonLabel: {
       type: String,
       required: false,
@@ -97,11 +122,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    instant: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     required: {
       type: Boolean,
       required: false,
@@ -115,15 +135,28 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
     const innerValue = ref(props.modelValue);
 
+    const placeholder = computed(() => {
+      return props.placeholder ?? $tr('ui.search.placeholder', 'Search...');
+    });
+
+    const buttonLabel = computed(() => {
+      return props.buttonLabel ?? $tr('ui.button.search', 'Search');
+    });
+
     watch(innerValue, () => {
-      if (props.instant) {
+      if (["instant"].includes(props.variant)) {
         emit("update:modelValue", innerValue.value);
       }
     });
 
     return {
+      ColorEnum,
+      placeholder,
+      buttonLabel,
       innerValue
     };
   }

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,13 +142,16 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { validateOn, blurred, getMessages } = useRules();
+    const { getColors } = useColors();
     const { slots } = useSlots();
+    
     delete slots.label;
     delete slots.description;
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
@@ -167,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
     };