@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/fields/FSTextArea.vue

@@ -13,6 +13,7 @@
       :style="style"
       :class="classes"
       :rows="$props.rows"
+      :persistentClear="true"
       :hideDetails="true"
       :noResize="true"
       :autoGrow="$props.autoGrow"
@@ -22,7 +23,6 @@
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="$emit('update:modelValue', $event)"
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
@@ -54,7 +54,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -127,7 +128,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
@@ -184,7 +185,6 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
-      blurred,
       classes,
       style
     };

package/components/fields/FSTextField.vue

@@ -7,11 +7,30 @@
     :editable="$props.editable"
     :messages="messages"
   >
+    <template
+      v-if="$slots.label"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="label"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      v-if="$slots.description"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="description"
+        v-bind="slotData"
+      />
+    </template>
     <v-text-field
       class="fs-text-field"
       variant="outlined"
       :style="style"
       :type="$props.type"
+      :persistentClear="true"
       :hideDetails="true"
       :readonly="!$props.editable"
       :clearable="$props.clearable && $props.editable && !!$props.modelValue"
@@ -19,11 +38,10 @@
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="$emit('update:modelValue', $event)"
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -47,9 +65,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { useColors, useRules } 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 FSBaseField from "./FSBaseField.vue";
@@ -115,8 +134,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -146,7 +169,7 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
-      blurred,
+      slots,
       style
     };
   }

package/components/fields/FSTimeField.vue

@@ -1,26 +1,26 @@
 <template>
   <FSBaseField
-    :label="$props.label"
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
     :editable="$props.editable"
+    :label="$props.label"
     :messages="messages"
   >
     <FSRow>
       <FSNumberField
+        :validationValue="$props.modelValue"
         :editable="$props.editable"
-        :hideHeader="true"
+        :validateOn="validateOn"
         :rules="$props.rules"
+        :hideHeader="true"
         :messages="messages"
-        :validateOn="validateOn"
-        :validationValue="$props.modelValue"
         :modelValue="innerTime"
         @update:modelValue="onSubmitValue"
         v-bind="$attrs"
       >
         <template
-          v-for="(_, name) in $slots"
+          v-for="(_, name) in numberSlots"
           v-slot:[name]="slotData"
         >
           <slot
@@ -37,16 +37,26 @@
         :items="timeScale"
         :modelValue="selectedUnit.id"
         @update:modelValue="onSubmitTimeScale"
-      />
+      >
+        <template
+          v-for="(_, name) in selectSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSSelectField>
     </FSRow>
   </FSBaseField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSNumberField from "./FSNumberField.vue";
@@ -106,8 +116,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -116,16 +130,6 @@ export default defineComponent({
     const innerTime = ref(0);
     const selectedUnit = ref(timeScale[0]);
 
-    if (props.modelValue) {
-      if (getTimeScaleIndex(props.modelValue) !== 0) {
-        selectedUnit.value = timeScale[getTimeScaleIndex(props.modelValue)];
-        innerTime.value = props.modelValue / selectedUnit.value.id;
-      }
-      else {
-        innerTime.value = props.modelValue;
-      }
-    }
-
     const style = computed((): { [key: string] : string | null | undefined } => {
       if (!props.editable) {
         return {
@@ -145,6 +149,20 @@ export default defineComponent({
       };
     });
 
+    const numberSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
+        acc[key.substring("number-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const selectSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
+        acc[key.substring("select-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onSubmitValue = (value: number): void => {
@@ -157,13 +175,30 @@ export default defineComponent({
       emit("update:modelValue", innerTime.value * selectedUnit.value.id);
     };
 
+    const reset = (): void => {
+      if (props.modelValue) {
+        if (getTimeScaleIndex(props.modelValue) !== 0) {
+          selectedUnit.value = timeScale[getTimeScaleIndex(props.modelValue)];
+          innerTime.value = props.modelValue / selectedUnit.value.id;
+        }
+        else {
+          innerTime.value = props.modelValue;
+        }
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
     return {
       selectedUnit,
+      numberSlots,
+      selectSlots,
       validateOn,
       innerTime,
       timeScale,
       messages,
-      blurred,
       style,
       onSubmitTimeScale,
       onSubmitValue

package/components/fields/FSTimeSlotField.vue

@@ -1,10 +1,10 @@
 <template>
   <FSBaseField
-    :label="$props.label"
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
     :editable="$props.editable"
+    :label="$props.label"
     :messages="messages"
   >
     <FSRow>
@@ -12,14 +12,14 @@
         :wrap="false"
       >
         <FSSelectField
+          :validationValue="$props.modelValue"
           :editable="$props.editable"
+          :validateOn="validateOn"
+          :rules="$props.rules"
           :items="daysObject"
           :hideHeader="true"
           :clearable="false"
           :style="style"
-          :rules="$props.rules"
-          :validateOn="validateOn"
-          :validationValue="$props.modelValue"
           :modelValue="dayStart"
           @update:modelValue="onChangeDayStart"
         />
@@ -61,7 +61,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/fields/FSTranslateField.vue

@@ -0,0 +1,234 @@
+<template>
+  <FSTextField
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #append
+    >
+      <FSButton
+        :prependIcon="$props.buttonPrependIcon"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        :label="$props.buttonLabel"
+        @click="dialog = true"
+      />
+      <slot
+        name="append"
+      />
+    </template>
+  </FSTextField>
+  <FSDialogSubmit
+    :title="$tr('ui.translate-field.title', 'Handle translations')"
+    :submitButtonColor="$props.buttonColor"
+    @click:submitButton="onSubmit"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="32px"
+      >
+        <FSTextField
+          :label="$tr('ui.translate-field.default-value', 'Default value')"
+          :editable="false"
+          :modelValue="$props.modelValue"
+        />
+        <FSCol
+          gap="16px"
+        >
+          <FSTextField
+            v-for="(language, index) in languages"
+            :editable="$props.editable"
+            :key="index"
+            :modelValue="getTranslation(language.code)"
+            @update:modelValue="setTranslation(language.code, $event)"
+          >
+            <template
+              #label
+            >
+              <FSRow
+                :wrap="false"
+              >
+                <FSSpan
+                  class="fs-translate-field-label"
+                  font="text-overline"
+                  :style="style"
+                >
+                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                </FSSpan>
+                <FSIcon>
+                  {{ language.icon }}
+                </FSIcon>
+              </FSRow>
+            </template>
+          </FSTextField>
+        </FSCol>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors, useSlots } from "../../composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSTextField from "./FSTextField.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTranslateField",
+  components: {
+    FSDialogSubmit,
+    FSTextField,
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    buttonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "mdi-translate"
+    },
+    buttonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    property: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      required: false,
+      default: () => []
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:translations"],
+  setup(props, { emit }) {
+    const { languages } = useAppLanguages();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.append;
+    
+    const dialog = ref(false);
+
+    const innerTranslations = ref(props.translations);
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): { [key: string] : string | null | undefined } => {
+      if (!props.editable) {
+        return {
+          "--fs-translate-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-translate-field-color": darks.base
+      };
+    });
+
+    const getTranslation = (languageCode: string): string => {
+      if (!innerTranslations.value) {
+        return "";
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (!translation || !translation[props.property]) {
+        return "";
+      }
+      return translation[props.property];
+    };
+
+    const setTranslation = (languageCode: string, value: string): void => {
+      if (!innerTranslations.value) {
+        innerTranslations.value = [{
+          languageCode,
+          [props.property]: value
+        }]
+        return;
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (translation) {
+        translation[props.property] = value;
+      }
+      else {
+        innerTranslations.value.push({
+          languageCode,
+          [props.property]: value
+        });
+      }
+    };
+
+    const onSubmit = (): void => {
+      dialog.value = false;
+      if (props.editable) {
+        emit("update:translations", innerTranslations.value);
+      }
+    };
+
+    return {
+      innerTranslations,
+      ColorEnum,
+      languages,
+      dialog,
+      slots,
+      style,
+      getTranslation,
+      setTranslation,
+      onSubmit
+    };
+  }
+});
+</script>