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

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/FSSubmitDialog.vue

@@ -143,7 +143,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "click:rightButton"],
   setup(props) {
     const { $tr } = useTranslationsProvider();
 

package/components/FSSwitch.vue

@@ -48,15 +48,15 @@ import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/m
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
-import FSRow from "./FSRow.vue";
 import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSSwitch",
   components: {
     FSSpan,
-    FSRow,
-    FSCol
+    FSCol,
+    FSRow
   },
   props: {
     label: {

package/components/FSText.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   name: "FSText",
   props: {
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
       required: false,
       default: "text-body"
     },

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/{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)"
+      @update:modelValue="onUpdate"
+      @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,
@@ -143,6 +150,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:search"],
   setup: (props, { emit }) => {
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -174,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) {
@@ -193,16 +190,26 @@ export default defineComponent({
       return classNames;
     });
 
+    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);
     });
 
     return {
+      validateOn,
       messages,
+      blurred,
       slots,
       style,
       classes,
-      innerSearch
+      innerSearch,
+      onUpdate
     };
   }
 });

package/components/fields/FSColorField.vue

@@ -0,0 +1,205 @@
+<template> 
+  <v-menu
+    :closeOnContentClick="false"
+    :modelValue="menu && $props.editable"
+    @update:modelValue="(value) => menu = value"
+  >  
+    <template #activator="{ props }">
+      <FSCol>
+        <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>
+        <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"
+      :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, useSlots } 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: {
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    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 { slots } = useSlots();
+
+    delete slots.description;
+
+    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-color": lights.dark
+        };
+      }
+      return {
+        "--fs-color-field-color": darks.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 {
+      getPercentageFromHex,
+      innerOpacity,
+      innerColor,
+      fullColor,
+      ColorEnum,
+      onSubmit,
+      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
@@ -68,7 +39,7 @@
       </FSTextField>
     </template>
     <FSCard
-      width="394"
+      width="346px"
       :elevation="true"
       :border="false"
     >
@@ -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,6 +125,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const {validateOn, blurred, getMessages} = useRules();
     const { epochToLongDateFormat } = useTimeZone();
     const { getColors } = useColors();
 
@@ -176,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);
@@ -200,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,14 @@
 <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";
 
 export default defineComponent({
   name: "FSDateRangeField",
@@ -95,9 +64,7 @@ export default defineComponent({
     FSSubmitDialog,
     FSCalendarTwin,
     FSTextField,
-    FSButton,
-    FSCard,
-    FSCol
+    FSButton
   },
   props: {
     label: {
@@ -143,6 +110,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { epochToShortDateFormat } = useTimeZone();
     const { getColors } = useColors();
 
@@ -165,34 +133,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) {
@@ -212,10 +160,12 @@ export default defineComponent({
 
     return {
       ColorEnum,
+      validateOn,
       messages,
+      blurred,
       style,
       dialog,
-      placeholder,
+      toShortDateFormat,
       innerDateRange,
       onClick,
       onClear,