@dative-gpi/foundation-shared-components 0.0.83 → 0.0.85

package/components/FSDialogForm.vue

@@ -32,6 +32,7 @@
       #body
     >
       <FSForm
+        ref="formRef"
         :variant="$props.variant"
         @submit="onSubmit"
         v-model="valid"
@@ -198,6 +199,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
+    const formRef = ref<HTMLElement | null>(null);
     const valid = ref(false);
 
     const height = computed(() => {
@@ -227,6 +229,7 @@ export default defineComponent({
       cancelButtonLabel,
       submitButtonLabel,
       ColorEnum,
+      formRef,
       height,
       valid,
       onSubmit

package/components/FSForm.vue

@@ -36,7 +36,7 @@ export default defineComponent({
       switch (props.variant) {
         case "standard": return "input";
         case "lazy":     return "blur";
-        case "submit":   return "submit";
+        default:         return "submit";
       }
     });
 

package/components/FSToggleSet.vue

@@ -1,86 +1,109 @@
 <template>
-  <FSWrapGroup
-    v-if="['wrap'].includes($props.variant)"
-    ref="toggleSetRef"
-    :padding="$props.padding"
-    :gap="$props.gap"
+  <v-input
+    class="fs-toggle-set"
+    ref="inputRef"
+    :modelValue="$props.modelValue"
+    :rules="$props.rules"
   >
-    <template v-if="$props.values.length">
-      <template v-if="!firstChild">
-        <FSButton
-          v-for="(item, index) in $props.values"
-          :prependIcon="item.prependIcon"
-          :appendIcon="item.appendIcon"
-          :editable="$props.editable"
-          :variant="getVariant(item)"
-          :color="getColor(item)"
-          :class="getClass(item)"
-          :label="item.label"
-          :icon="item.icon"
-          :key="index"
-          @click="toggle(item)"
-        />
+    <FSWrapGroup
+      v-if="['wrap'].includes($props.variant)"
+      ref="toggleSetRef"
+      :padding="$props.padding"
+      :gap="$props.gap"
+    >
+      <template
+        v-if="$props.values.length"
+      >
+        <template
+          v-if="!firstChild"
+        >
+          <FSButton
+            v-for="(item, index) in $props.values"
+            :prependIcon="item.prependIcon"
+            :appendIcon="item.appendIcon"
+            :editable="$props.editable"
+            :variant="getVariant(item)"
+            :color="getColor(item)"
+            :class="getClass(item)"
+            :label="item.label"
+            :icon="item.icon"
+            :key="index"
+            @click="toggle(item)"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <component
+            v-for="(item, index) in $props.values"
+            :key="index"
+            :is="firstChild"
+            :prependIcon="getFromFirstChild('prependIcon', item)"
+            :appendIcon="getFromFirstChild('appendIcon', item)"
+            :variant="getFromFirstChild('variant', item)"
+            :color="getFromFirstChild('color', item)"
+            :class="getFromFirstChild('class', item)"
+            :label="getFromFirstChild('label', item)"
+            :icon="getFromFirstChild('icon', item)"
+            :editable="$props.editable"
+            @click="toggle(item)"
+          />
+        </template>
       </template>
-      <template v-else>
-        <component
-          v-for="(item, index) in $props.values"
-          :key="index"
-          :is="firstChild"
-          :prependIcon="getFromFirstChild('prependIcon', item)"
-          :appendIcon="getFromFirstChild('appendIcon', item)"
-          :variant="getFromFirstChild('variant', item)"
-          :color="getFromFirstChild('color', item)"
-          :class="getFromFirstChild('class', item)"
-          :label="getFromFirstChild('label', item)"
-          :icon="getFromFirstChild('icon', item)"
-          :editable="$props.editable"
-          @click="toggle(item)"
-        />
+      <slot
+        v-else
+      />
+    </FSWrapGroup>
+    <FSSlideGroup
+      v-else
+      ref="toggleSetRef"
+      :padding="$props.padding"
+      :gap="$props.gap"
+    >
+      <template
+        v-if="$props.values.length"
+      >
+        <template
+          v-if="!firstChild"
+        >
+          <FSButton
+            v-for="(item, index) in $props.values"
+            :prependIcon="item.prependIcon"
+            :appendIcon="item.appendIcon"
+            :editable="$props.editable"
+            :variant="getVariant(item)"
+            :color="getColor(item)"
+            :class="getClass(item)"
+            :label="item.label"
+            :icon="item.icon"
+            :key="index"
+            @click="toggle(item)"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <component
+            v-for="(item, index) in $props.values"
+            :key="index"
+            :is="firstChild"
+            :prependIcon="getFromFirstChild('prependIcon', item)"
+            :appendIcon="getFromFirstChild('appendIcon', item)"
+            :variant="getFromFirstChild('variant', item)"
+            :color="getFromFirstChild('color', item)"
+            :class="getFromFirstChild('class', item)"
+            :label="getFromFirstChild('label', item)"
+            :icon="getFromFirstChild('icon', item)"
+            :editable="$props.editable"
+            @click="toggle(item)"
+          />
+        </template>
       </template>
-    </template>
-    <slot v-else />
-  </FSWrapGroup>
-  <FSSlideGroup
-    v-else
-    ref="toggleSetRef"
-    :padding="$props.padding"
-    :gap="$props.gap"
-  >
-    <template v-if="$props.values.length">
-      <template v-if="!firstChild">
-        <FSButton
-          v-for="(item, index) in $props.values"
-          :prependIcon="item.prependIcon"
-          :appendIcon="item.appendIcon"
-          :editable="$props.editable"
-          :variant="getVariant(item)"
-          :color="getColor(item)"
-          :class="getClass(item)"
-          :label="item.label"
-          :icon="item.icon"
-          :key="index"
-          @click="toggle(item)"
-        />
-      </template>
-      <template v-else>
-        <component
-          v-for="(item, index) in $props.values"
-          :key="index"
-          :is="firstChild"
-          :prependIcon="getFromFirstChild('prependIcon', item)"
-          :appendIcon="getFromFirstChild('appendIcon', item)"
-          :variant="getFromFirstChild('variant', item)"
-          :color="getFromFirstChild('color', item)"
-          :class="getFromFirstChild('class', item)"
-          :label="getFromFirstChild('label', item)"
-          :icon="getFromFirstChild('icon', item)"
-          :editable="$props.editable"
-          @click="toggle(item)"
-        />
-      </template>
-    </template>
-    <slot v-else />
-  </FSSlideGroup>
+      <slot
+        v-else
+      />
+    </FSSlideGroup>
+  </v-input>
 </template>
 
 <script lang="ts">
@@ -88,7 +111,7 @@ import { defineComponent, PropType, ref } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
+import { FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
@@ -157,6 +180,11 @@ export default defineComponent({
       required: false,
       default: "8px"
     },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -176,9 +204,10 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getFirstChild } = useSlots();
-
+    
     const firstChild = getFirstChild("item");
-
+    
+    const inputRef = ref(null);
     const toggleSetRef = ref(null);
 
     const getFromFirstChild = (prop: string, value: FSToggle): any => {
@@ -264,11 +293,23 @@ export default defineComponent({
       else {
         if (props.modelValue === value.id) {
           if (!props.required) {
+            if (props.multiple) {
+              emit("update:modelValue", []);
+              return;
+            }
             emit("update:modelValue", null);
             return;
           }
         }
         else {
+          if (props.multiple) {
+            if (props.modelValue) {
+              emit("update:modelValue", [props.modelValue, value.id]);
+              return;
+            }
+            emit("update:modelValue", [value.id]);
+            return;
+          }
           emit("update:modelValue", value.id);
           return;
         }
@@ -288,6 +329,7 @@ export default defineComponent({
     };
 
     return {
+      inputRef,
       toggleSetRef,
       firstChild,
       getFromFirstChild,

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -0,0 +1,122 @@
+<template>
+  <FSAutocompleteField
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :loading="loading"
+    :items="languages"
+    :modelValue="$props.modelValue"
+    @update:modelValue="onUpdate"
+    v-model:search="search"
+    v-bind="$attrs"
+  >
+    <template
+      #selection="{ item }"
+    >
+      <FSRow
+        align="center-center"
+      >
+        <FSIcon>
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="{ ...props, title: '' }"
+      >
+        <FSRow
+          align="center-left"
+        >
+          <FSCheckbox
+            v-if="$props.multiple"
+            :modelValue="isSelected(item.value)"
+          />
+          <FSIcon>
+            {{ item.raw.icon }}
+          </FSIcon>
+          <FSSpan>
+            {{ item.raw.label }}
+          </FSSpan>
+        </FSRow>
+      </v-list-item>
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, PropType, defineComponent } from "vue"
+
+import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
+import { LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSCheckbox from "../FSCheckbox.vue"
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue"
+
+export default defineComponent({
+  name: "FSAutocompleteLanguage",
+  components: {
+    FSAutocompleteField,
+    FSCheckbox
+  },
+  props: {
+    languageFilters: {
+      type: Object as PropType<LanguageFilters>,
+      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
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
+
+    const innerFetch = (search: string | null) => {
+      return getManyLanguages({ ...props.languageFilters, search: search ?? undefined });
+    };
+
+    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+      languages,
+      [() => props.languageFilters],
+      emit,
+      innerFetch
+    );
+
+    const isSelected = (id: any) => {
+      return props.modelValue?.includes(id);
+    }
+
+    const loading = computed((): boolean => {
+      return init.value && fetchingLanguages.value;
+    });
+
+    return {
+      languages,
+      toggleSet,
+      loading,
+      search,
+      isSelected,
+      onUpdate
+    };
+  }
+})
+</script>

package/components/autocompletes/FSAutocompleteOrganisation.vue

@@ -0,0 +1,43 @@
+<template>
+  <FSAutocompleteField 
+    :loading="fetching"
+    :items="organisations"
+    v-bind="$attrs" />
+</template>
+<script lang="ts">
+import { PropType, defineComponent, watch } from 'vue'
+import _ from 'lodash';
+
+import { OrganisationFilters } from '@dative-gpi/foundation-shared-domain/models';
+import { useOrganisations } from '@dative-gpi/foundation-shared-services/composables';
+
+import FSAutocompleteField from '../fields/FSAutocompleteField.vue'
+
+export default defineComponent({
+  name: 'FSAutocompleteOrganisation',
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    organisationFilters: {
+      type: Object as PropType<OrganisationFilters>,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { entities: organisations, fetching, getMany } = useOrganisations();
+
+    watch(() => props.organisationFilters, async (newValue, oldValue) => {
+      if (!_.isEqual(newValue, oldValue)) {
+        await getMany(newValue);
+      }
+    }, { immediate: true });
+
+    return {
+      organisations,
+      fetching
+    }
+  }
+})
+</script>

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -0,0 +1,49 @@
+<template>
+  <FSAutocompleteField
+    :loading="fetchingTimeZones"
+    :items="timeZones"
+    v-model:search="search"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from "vue";
+import _ from "lodash";
+
+import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
+import { TimeZoneFilters } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  name: "FSAutocompleteTimeZone",
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    timeZoneFilters: {
+      type: Object as PropType<TimeZoneFilters>,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { getMany: getManyTimeZones, fetching: fetchingTimeZones, entities: timeZones } = useTimeZones();
+
+    const search = ref<string | null>(null);
+
+    watch([() => props.timeZoneFilters, () => search.value], async (newValue, oldValue) => {
+      if (!_.isEqual(newValue, oldValue)) {
+        await getManyTimeZones({ ...props.timeZoneFilters, search: search.value ?? undefined });
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingTimeZones,
+      timeZones,
+      search
+    }
+  }
+});
+</script>