@dative-gpi/foundation-shared-components 0.0.88 → 0.0.89

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -1,49 +1,149 @@
 <template>
   <FSAutocompleteField
-    :loading="fetchingTimeZones"
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :loading="loading"
     :items="timeZones"
-    v-model:search="search"
+    :modelValue="$props.modelValue"
+    @update:modelValue="onUpdate"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #autocomplete-selection="{ item }"
+    >
+      <FSRow
+        v-if="$props.modelValue"
+        align="center-center"
+        :wrap="false"
+      >
+        <FSChip
+          :label="item.raw.offset"
+        />
+        <FSSpan>
+          {{ item.raw.id }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      #autocomplete-item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="{ ...props, title: '' }"
+      >
+        <FSRow
+          align="center-left"
+        >
+          <FSCheckbox
+            v-if="$props.multiple"
+            :modelValue="$props.modelValue?.includes(item.value)"
+            @click="props.onClick"
+          />
+          <FSChip
+            :label="item.raw.offset"
+          />
+          <FSSpan>
+            {{ item.raw.id }}
+          </FSSpan>
+        </FSRow>
+      </v-list-item>
+    </template>
+    <template
+      #toggle-set-item="props"
+    >
+      <FSButton
+        :variant="props.getVariant(props.item)"
+        :color="props.getColor(props.item)"
+        :class="props.getClass(props.item)"
+        :label="props.item.id"
+        @click="props.toggle(props.item)"
+      >
+        <template
+          #prepend
+        >
+          <FSChip
+            :label="props.item.offset.split(':')[0]"
+          />
+        </template>
+      </FSButton>
+    </template>
+  </FSAutocompleteField>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from "vue";
-import _ from "lodash";
+import { computed, defineComponent, PropType } from "vue";
 
+import { TimeZoneFilters, TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
+import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
-import { TimeZoneFilters } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+import FSCheckbox from "../FSCheckbox.vue"
+import FSButton from "../FSButton.vue";
+import FSChip from "../FSChip.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteTimeZone",
   components: {
-    FSAutocompleteField
+    FSAutocompleteField,
+    FSCheckbox,
+    FSButton,
+    FSChip,
+    FSSpan,
+    FSRow
   },
   props: {
     timeZoneFilters: {
       type: Object as PropType<TimeZoneFilters>,
       required: false,
       default: null
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSetDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup(props) {
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
     const { getMany: getManyTimeZones, fetching: fetchingTimeZones, entities: timeZones } = useTimeZones();
 
-    const search = ref<string | null>(null);
+    const loading = computed((): boolean => {
+      return init.value && fetchingTimeZones.value;
+    });
 
-    watch([() => props.timeZoneFilters, () => search.value], async (newValue, oldValue) => {
-      if (!_.isEqual(newValue, oldValue)) {
-        await getManyTimeZones({ ...props.timeZoneFilters, search: search.value ?? undefined });
-      }
-    }, { immediate: true });
+    const innerFetch = (search: string | null) => {
+      return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
+    };
+
+    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+      timeZones,
+      [() => props.timeZoneFilters],
+      emit,
+      innerFetch,
+      null,
+      (item: TimeZoneInfos) => item.id,
+      (item: TimeZoneInfos) => item.id
+    );
 
     return {
-      fetchingTimeZones,
       timeZones,
-      search
-    }
+      toggleSet,
+      loading,
+      search,
+      onUpdate
+    };
   }
 });
 </script>

package/components/buttons/FSButtonFileMini.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <FSButton
-      prependIcon="mdi-upload-outline"
+      :prependIcon="$props.icon"
       :color="ColorEnum.Light"
       @click="onClick"
       v-bind="$attrs"
@@ -41,6 +41,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-upload-outline"
     }
   },
   emits: ["update:modelValue"],

package/components/fields/FSAutocompleteField.vue

@@ -1,44 +1,42 @@
 <template>
-  <FSCol>
-    <slot v-if="!$props.hideHeader"
-      name="label">
-      <FSRow :wrap="false">
-        <FSSpan v-if="$props.label"
-          class="fs-autocomplete-field-label"
-          font="text-overline"
-          :style="style">
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan v-if="$props.label && $props.required"
-          class="fs-autocomplete-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-autocomplete-field-messages"
-          font="text-overline"
-          :style="style">
-          {{ messages.join(", ") }}
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <FSLoader v-if="$props.loading"
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :messages="messages"
+  >
+    <FSLoader
+      v-if="$props.loading"
       width="100%"
-      :height="['40px', '36px']" />
-    <template v-else>
-      <FSToggleSet v-if="$props.toggleSet"
+      :height="['40px', '36px']"
+    />
+    <template
+      v-else
+    >
+      <FSToggleSet
+        v-if="$props.toggleSet"
         variant="slide"
-        :multiple="$props.multiple"
         :values="$props.items"
+        :multiple="$props.multiple"
         :rules="$props.rules"
         :modelValue="$props.modelValue"
         @update:modelValue="onUpdate"
-        v-bind="$attrs" />
-      <v-autocomplete v-else
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in toggleSetSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="`toggle-set-${name}`"
+            v-bind="slotData"
+          />
+        </template>
+      </FSToggleSet>
+      <v-autocomplete
+        v-else
         class="fs-autocomplete-field"
         variant="outlined"
         :menuIcon="null"
@@ -53,7 +51,7 @@
         :itemValue="$props.itemValue"
         :readonly="!$props.editable"
         :loading="$props.loading"
-        :clearable="$props.editable && !!$props.modelValue"
+        :clearable="$props.clearable && $props.editable && !!$props.modelValue"
         :returnObject="$props.returnObject"
         :rules="$props.rules"
         :validateOn="validateOn"
@@ -61,40 +59,81 @@
         @update:modelValue="onUpdate"
         @blur="blurred = true"
         v-model:search="innerSearch"
-        v-bind="$attrs">
-        <template v-for="(_, name) in slots"
-          v-slot:[name]="slotData">
-          <slot :name="name"
-            v-bind="slotData" />
+        v-bind="$attrs"
+      >
+        <template
+          #item="{ props, item }"
+        >
+          <v-list-item
+            v-bind="{ ...props, title: '' }"
+          >
+            <FSRow
+              align="center-left"
+              :wrap="false"
+            >
+              <FSCheckbox
+                v-if="$props.multiple"
+                :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                @click="test(props, item)"
+              />
+              <FSSpan>
+                {{ item.raw[$props.itemTitle] }}
+              </FSSpan>
+            </FSRow>
+          </v-list-item>
         </template>
-        <template #clear>
-          <slot name="clear">
-            <FSButton v-if="$props.editable && $props.modelValue"
+        <template
+          v-for="(_, name) in autocompleteSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="`autocomplete-${name}`"
+            v-bind="slotData"
+          />
+        </template>
+        <template
+          #clear
+        >
+          <slot
+            name="clear"
+          >
+            <FSButton
+              v-if="$props.clearable && $props.editable && !!$props.modelValue"
               icon="mdi-close"
               variant="icon"
               :color="ColorEnum.Dark"
-              @click="$emit('update:modelValue', null)" />
+              @click="$emit('update:modelValue', null)"
+            />
           </slot>
         </template>
-        <template #append-inner>
-          <slot name="append-inner">
-            <FSButton icon="mdi-chevron-down"
+        <template
+          #append-inner
+        >
+          <slot
+            name="append-inner"
+          >
+            <FSButton
+              icon="mdi-chevron-down"
               variant="icon"
               :editable="$props.editable"
-              :color="ColorEnum.Dark" />
+              :color="ColorEnum.Dark"
+            />
           </slot>
         </template>
+        <template
+          #no-data
+        >
+          <FSRow
+            padding="17px"
+          >
+            <FSSpan>
+              {{ $tr("ui.common.no-data", "No data") }}
+            </FSSpan>
+          </FSRow>
+        </template>
       </v-autocomplete>
     </template>
-    <slot name="description">
-      <FSSpan v-if="$props.description"
-        class="fs-autocomplete-field-description"
-        font="text-underline"
-        :style="style">
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
@@ -103,22 +142,24 @@ import { computed, defineComponent, PropType, ref, watch } from "vue";
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSToggleSet from "../FSToggleSet.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSCheckbox from "../FSCheckbox.vue";
 import FSButton from "../FSButton.vue";
+import FSLoader from "../FSLoader.vue";
 import FSSpan from "../FSSpan.vue";
-import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
-import FSLoader from "../FSLoader.vue";
-import FSToggleSet from "../FSToggleSet.vue";
 
 export default defineComponent({
   name: "FSAutocompleteField",
   components: {
     FSToggleSet,
+    FSBaseField,
+    FSCheckbox,
     FSButton,
     FSLoader,
     FSSpan,
-    FSCol,
-    FSRow,
+    FSRow
   },
   props: {
     label: {
@@ -180,6 +221,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -215,23 +261,37 @@ export default defineComponent({
     const style = computed((): { [key: string]: string | undefined } => {
       if (!props.editable) {
         return {
-          "--fs-autocomplete-field-cursor": "default",
-          "--fs-autocomplete-field-border-color": lights.base,
-          "--fs-autocomplete-field-color": lights.dark,
+          "--fs-autocomplete-field-cursor":              "default",
+          "--fs-autocomplete-field-border-color":        lights.base,
+          "--fs-autocomplete-field-color":               lights.dark,
           "--fs-autocomplete-field-active-border-color": lights.base
         };
       }
       return {
-        "--fs-autocomplete-field-cursor": "text",
-        "--fs-autocomplete-field-background-color": backgrounds.base,
-        "--fs-autocomplete-field-border-color": lights.dark,
-        "--fs-autocomplete-field-color": darks.base,
+        "--fs-autocomplete-field-cursor":              "text",
+        "--fs-autocomplete-field-background-color":    backgrounds.base,
+        "--fs-autocomplete-field-border-color":        lights.dark,
+        "--fs-autocomplete-field-color":               darks.base,
         "--fs-autocomplete-field-active-border-color": darks.dark,
-        "--fs-autocomplete-field-error-color": errors.base,
-        "--fs-autocomplete-field-error-border-color": errors.base
+        "--fs-autocomplete-field-error-color":         errors.base,
+        "--fs-autocomplete-field-error-border-color":  errors.base
       };
     });
 
+    const autocompleteSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("autocomplete-")).reduce((acc, key) => {
+        acc[key.substring("autocomplete-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const toggleSetSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("toggle-set-")).reduce((acc, key) => {
+        acc[key.substring("toggle-set-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
     const listStyle = computed((): any => {
       return {
         style: style.value
@@ -252,11 +312,17 @@ export default defineComponent({
       emit('update:modelValue', value);
     };
 
+    const test = (props: any, item: any) => {
+      console.log(props, item);
+    };
+
     watch(innerSearch, () => {
       emit("update:search", innerSearch.value);
     });
 
     return {
+      autocompleteSlots,
+      toggleSetSlots,
       innerSearch,
       validateOn,
       ColorEnum,
@@ -266,7 +332,8 @@ export default defineComponent({
       classes,
       slots,
       style,
-      onUpdate
+      onUpdate,
+      test
     };
   }
 });

package/components/fields/FSBaseField.vue

@@ -0,0 +1,134 @@
+<template>
+  <FSCol>
+    <slot
+      v-if="!$props.hideHeader"
+      name="label"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSSpan
+          class="fs-base-field-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-base-field-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+        <v-spacer
+          style="min-width: 40px;"
+        />
+        <FSSpan
+          v-if="$props.messages.length > 0"
+          class="fs-base-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <slot />
+    <slot
+      name="description"
+    >
+      <FSSpan
+        v-if="$props.description"
+        class="fs-base-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, 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";
+
+export default defineComponent({
+  name: "FSBaseField",
+  components: {
+    FSSpan,
+    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
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    messages: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): { [key: string] : string | undefined } => {
+      if (!props.editable) {
+        return {
+          "--fs-base-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-base-field-color"      : darks.base,
+        "--fs-base-field-error-color": errors.base
+      };
+    });
+
+    return {
+      style,
+      slots
+    };
+  }
+});
+</script>

package/components/fields/FSColorField.vue

@@ -2,7 +2,7 @@
   <v-menu
     :closeOnContentClick="false"
     :modelValue="menu && $props.editable"
-    @update:modelValue="(value) => menu = value"
+    @update:modelValue="menu = $event"
   >
     <template
       #activator="{ props }"