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

package/components/fields/FSGradientField.vue

@@ -0,0 +1,143 @@
+<template>
+  <FSCol
+    class="fs-gradient-field"
+  >
+    <FSBaseField
+      :label="$props.label"
+      :description="$props.description"
+      :required="$props.required"
+      :editable="$props.editable"
+      v-bind="$attrs"
+    >
+      <FSRow>
+        <FSColorField
+          v-for="colorIndex in $props.colorCount"
+          :allowOpacity="$props.allowOpacity"
+          :modelValue="$props.modelValue[colorIndex - 1]"
+          :required="$props.required"
+          :editable="$props.editable"
+          :key="colorIndex"
+          @update:modelValue="$emit('update:modelValue', $props.modelValue.map((color, i) => colorIndex === i + 1 ? $event : color))"
+        />
+      </FSRow>
+      <FSSelectField
+        class="fs-gradient-select-field"
+        :clearable="false"
+        :editable="$props.editable"
+        :items="items"
+        :modelValue="JSON.stringify($props.modelValue)"
+        @update:modelValue="$emit('update:modelValue', presetGradients[$event])"
+      >
+        <template
+          v-slot:selection="{ item }"
+        >
+          <FSRow
+            class="fs-gradient-field-preview"
+            height="fill"
+            width="100%"
+            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(JSON.parse(item.value))})` }"
+          >
+            <span />
+          </FSRow>
+        </template>
+        <template
+          v-slot:item="{ item, props }"
+        >
+          <v-list-item
+            v-bind="props"
+          >
+            <template
+              #title
+            >
+              <FSRow
+                class="fs-gradient-field-preview"
+                height="fill"
+                width="100%"
+                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(presetGradients[item.value])})` }"
+              >
+                <span />
+              </FSRow>
+            </template>
+          </v-list-item>
+        </template>
+      </FSSelectField>
+    </FSBaseField>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from "vue";
+
+import { groupedGradients } from "../../utils";
+import { useColors } from "../../composables";
+
+import FSSelectField from "./FSSelectField.vue";
+import FSColorField from "./FSColorField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSGradientField",
+  components: {
+    FSSelectField,
+    FSColorField,
+    FSBaseField,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    colorCount: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    allowOpacity: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getColors } = useColors();
+
+    const presetGradients = groupedGradients[props.colorCount];
+    const items = Object.keys(presetGradients)
+
+    const encodeGradientCssColors = (colors: string[]) => {
+      return colors.map((color) => getColors(color).base).join(", ");
+    };
+
+    return {
+      presetGradients,
+      items,
+      encodeGradientCssColors
+    };
+  }
+});
+</script>

package/components/fields/FSIconField.vue

@@ -10,7 +10,6 @@
       :messages="messages"
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
-      @blur="blurred = true"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -23,6 +22,9 @@
         >
           {{ $props.modelValue }}
         </FSIcon>
+        <slot
+          name="append-inner"
+        />
       </template>
     </FSTextField>
     <FSToggleSet
@@ -41,12 +43,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref, watch } 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 { FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
 import FSToggleSet from "../FSToggleSet.vue";
 import FSTextField from "./FSTextField.vue";
@@ -125,7 +129,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -201,7 +205,6 @@ export default defineComponent({
       innerValue,
       validateOn,
       messages,
-      blurred,
       style,
       icons
     };

package/components/fields/FSMagicConfigField.vue

@@ -0,0 +1,154 @@
+<template>
+  <FSRow>
+    <component
+      class="fs-magic-config-field-value"
+      :is="get($props.type)"
+      :label="$tr('ui.magic-config-field.value', 'Value')"
+      :editable="$props.editable"
+      :required="true"
+      :rules="rules"
+      :modelValue="valueToInput"
+      @update:modelValue="inputToValue"
+    />
+    <FSRow
+      gap="24px"
+    >
+      <FSTranslateField
+        :label="$tr('ui.magic-config-field.label', 'Label')"
+        :editable="$props.editable"
+        :modelValue="$props.labelDefault"
+        :translations="$props.translations"
+        @update:modelValue="$emit('update:labelDefault', $event)"
+        @update:translations="$emit('update:translations', $event)"
+      />
+      <FSRow
+        class="fs-magic-config-field-actions"
+        width="hug"
+        :wrap="false"
+      >
+        <FSButtonRemoveIcon
+          @click="$emit('click:remove')"
+        />
+        <FSButtonAddIcon
+          @click="$emit('click:add')"
+        />
+      </FSRow>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
+
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules } from "../../models";
+import { useMagicFieldProvider } from "../../composables";
+import { MagicFieldType } from "../../models/magicFields";
+
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+import FSButtonAddIcon from "../buttons/FSButtonAddIcon.vue";
+import FSTranslateField from "./FSTranslateField.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicConfigField",
+  components: {
+    FSButtonRemoveIcon,
+    FSTranslateField,
+    FSButtonAddIcon,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    labelDefault: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    value: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["click:remove", "click:add", "update:value", "update:labelDefault", "update:translations"],
+  setup(props, { emit }) {
+    const { get } = useMagicFieldProvider();
+
+    const rules = computed((): Function[] => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return [NumberRules.required()];
+        case MagicFieldType.TextField:
+          return [TextRules.required()];
+        case MagicFieldType.DateTimeField:
+          return [DateRules.required()];
+        case MagicFieldType.IconField:
+          return [IconRules.required()];
+        case MagicFieldType.TimeField:
+          return [TimeRules.required()];
+      }
+      return [];
+    });
+
+    const valueToInput = computed((): any => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (props.value == null || isNaN(parseFloat(props.value))) {
+            return null;
+          }
+          return parseFloat(props.value);
+        case MagicFieldType.Switch: 
+          if (props.value == null) {
+            return null;
+          }
+          return props.value === "true";
+        default:
+          return props.value;
+      }
+    });
+
+    const inputToValue = (value: any) => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (value == null) {
+            emit("update:value", null);
+            break;
+          }
+          emit("update:value", value.toString());
+          break;
+        default:
+          emit("update:value", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      rules,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/fields/FSMagicField.vue

@@ -0,0 +1,185 @@
+<template>
+  <component
+    v-if="!$props.useOnlyAllowedValues"
+    :is="get($props.type)"
+    :modelValue="valueToInput"
+    @update:modelValue="inputToValue"
+    v-bind="$attrs"
+  />
+  <FSSelectField
+    v-else
+    itemValue="value"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #selection="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #item-label="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useMagicFieldProvider } from "../../composables";
+import { MagicFieldType } from "../../models/magicFields";
+import { getTimeBestString } from "../../utils";
+
+import FSSelectField from "./FSSelectField.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicField",
+  components: {
+    FSSelectField,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    allowedValues: {
+      type: Array as PropType<{ value: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    useOnlyAllowedValues: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { epochToShortTimeFormat } = useAppTimeZone();
+    const { $tr } = useTranslationsProvider();
+    const { get } = useMagicFieldProvider();
+
+    const items = computed(() => props.allowedValues.map((av) => ({
+      value: av.value,
+      label: av.label || asString(av.value),
+    })));
+
+    const valueToInput = computed((): any => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (props.modelValue == null || isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          if (props.modelValue == null) {
+            return null;
+          }
+          return props.modelValue === "true";
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const asString = (value: any): string | null => {
+      if (value == null) {
+        return null;
+      }
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return value.toString();
+        case MagicFieldType.Switch:
+          if (value) {
+            return $tr("ui.magic-field.true", "True");
+          }
+          return $tr("ui.magic-field.false", "False");
+        case MagicFieldType.DateTimeField:
+          return epochToShortTimeFormat(value);
+        case MagicFieldType.TimeField:
+          return getTimeBestString(value);
+        default:
+          return value;
+      }
+    }
+
+    const inputToValue = (value: any) => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (value == null) {
+            emit("update:modelValue", null);
+            break;
+          }
+          emit("update:modelValue", value.toString());
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      items,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/fields/FSNumberField.vue

@@ -1,5 +1,6 @@
 <template>
   <FSTextField
+    class="fs-number-field"
     :editable="$props.editable"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"
@@ -18,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
 import FSTextField from "./FSTextField.vue";
 

package/components/fields/FSPasswordField.vue

@@ -18,23 +18,23 @@
     <template
       #append-inner
     >
+      <FSButton
+        variant="icon"
+        :editable="$props.editable"
+        :color="ColorEnum.Dark"
+        :icon="icon"
+        @click="onToggle"
+      />
       <slot
         name="append-inner"
-      >
-        <FSButton
-          variant="icon"
-          :editable="$props.editable"
-          :color="ColorEnum.Dark"
-          :icon="icon"
-          @click="onToggle"
-        />
-      </slot>
+      />
     </template>
   </FSTextField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";