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

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

@@ -41,13 +41,15 @@
       :items="$props.items"
       :autoSelectFirst="true"
       :multiple="$props.multiple"
-      :error="messages.length > 0"
       :itemTitle="$props.itemTitle"
       :itemValue="$props.itemValue"
       :readonly="!$props.editable"
-      :clearable="$props.editable"
+      :clearable="$props.editable && !!$props.modelValue"
+      :rules="$props.rules"
+      :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @blur="blurred = true"
       v-model:search="innerSearch"
       v-bind="$attrs"
     >
@@ -71,12 +73,12 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } 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: "FSAutocompleteField",
@@ -135,6 +137,11 @@ export default defineComponent({
       required: false,
       default: () => []
     },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -142,16 +149,19 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue", "update:search"],
-  setup: (props, { emit }) => {    
+  setup: (props, { emit }) => {
+    const { validateOn, blurred, getMessages } = useRules();
+    const { getColors } = useColors();
     const { slots } = useSlots();
+
     delete slots.label;
     delete slots.description;
 
-    const innerSearch = ref("");
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
 
-    const errors = useColors().getColors(ColorEnum.Error);
-    const lights = useColors().getColors(ColorEnum.Light);
-    const darks = useColors().getColors(ColorEnum.Dark);
+    const innerSearch = ref("");
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
@@ -172,17 +182,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 classes = computed((): string[] => {
       const classNames = ["fs-autocomplete-field"];
       if (props.multiple) {
@@ -191,12 +190,16 @@ export default defineComponent({
       return classNames;
     });
 
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
     watch(innerSearch, () => {
       emit("update:search", innerSearch.value);
     });
 
     return {
+      validateOn,
       messages,
+      blurred,
       slots,
       style,
       classes,

package/components/fields/FSColorField.vue

@@ -0,0 +1,194 @@
+<template> 
+  <v-menu
+    :closeOnContentClick="false"
+    :modelValue="menu && $props.editable"
+    @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)) + ' %'"
+        >
+          <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"
+            />
+          </template>
+        </FSTextField>
+      </FSRow>
+    </template> 
+    <FSCard
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        width="fill"
+      >
+        <v-color-picker
+          class="fs-color-field-picker"
+          mode="hexa"
+          :elevation="0"
+          :modes="['hexa', 'rgba']"
+          :modelValue="fullColor"
+          @update:modelValue="onSubmit"
+        />
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+  
+<script lang="ts">
+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 { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSTextField from "./FSTextField.vue";
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSIcon.vue";
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSColorField",
+  components: {
+    FSTextField,
+    FSButton,
+    FSCard,
+    FSIcon,
+    FSCol,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: "#000000"
+    },
+    opacityValue: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  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 menu = ref(false);
+
+    const errors = useColors().getColors(ColorEnum.Error);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    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
+        };
+      }
+      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
+      };
+    });
+
+
+    const onSubmit = (value: string) => {
+      innerColor.value = value.substring(0, 7);
+      innerOpacity.value = value.length === 9 ? value.substring(7, 9) : "FF";
+      fullColor.value = innerColor.value + innerOpacity.value;
+      emit("update:modelValue", innerColor.value);
+      emit("update:opacity", getPercentageFromHex(innerOpacity.value));
+    };
+
+    return {
+      ColorEnum,
+      getPercentageFromHex,
+      onSubmit,
+      innerColor,
+      innerOpacity,
+      fullColor,
+      style,
+      menu
+    };
+  }
+});
+</script>

package/components/{FSDateField.vue → fields/FSDateField.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="epochToLongDateFormat($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
@@ -91,15 +62,15 @@
 <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 FSTextField from "./FSTextField.vue";
-import FSCalendar from "./FSCalendar.vue";
-import FSButton from "./FSButton.vue";
-import FSCard from "./FSCard.vue";
-import FSCol from "./FSCol.vue";
+import FSCalendar from "../FSCalendar.vue";
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSDateField",
@@ -154,11 +125,13 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const {validateOn, blurred, getMessages} = useRules();
     const { epochToLongDateFormat } = useTimeZone();
+    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 menu = ref(false);
     const innerDate = ref(props.modelValue);
@@ -175,16 +148,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);
@@ -199,7 +163,9 @@ export default defineComponent({
     return {
       ColorEnum,
       innerDate,
+      validateOn,
       messages,
+      blurred,
       style,
       menu,
       onClear,

package/components/{FSDateRangeField.vue → fields/FSDateRangeField.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="toShortDateFormat"
     @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
@@ -78,16 +49,16 @@
 <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 FSCard from "./FSCard.vue";
-import FSCol from "./FSCol.vue";
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSDateRangeField",
@@ -143,11 +114,13 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { epochToShortDateFormat } = useTimeZone();
+    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);
     const innerDateRange = ref(props.modelValue);
@@ -164,34 +137,14 @@ export default defineComponent({
       };
     });
 
-    const placeholder = computed((): string => {
+    const toShortDateFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
       }
       return props.modelValue.map((epoch) => epochToShortDateFormat(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 messages = computed((): string[] => getMessages(props.modelValue, props.rules, true));
 
     const onClick = (): void => {
       if (props.editable) {
@@ -211,10 +164,12 @@ export default defineComponent({
 
     return {
       ColorEnum,
+      validateOn,
       messages,
+      blurred,
       style,
       dialog,
-      placeholder,
+      toShortDateFormat,
       innerDateRange,
       onClick,
       onClear,

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
@@ -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,10 +154,12 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToLongTimeFormat } = 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 menu = ref(false);
     const tabs = ref(0);
@@ -212,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);
@@ -244,7 +208,9 @@ export default defineComponent({
       ColorEnum,
       innerDate,
       innerTime,
+      validateOn,
       messages,
+      blurred,
       style,
       menu,
       tabs,