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

package/components/FSImage.vue

@@ -5,12 +5,14 @@
     :height="computedHeight"
     :width="computedWidth"
     :cover="$props.cover"
+    :src="realSource"
     :style="style"
-    :src="source"
     @error="onError"
     v-bind="$attrs"
   >
-    <template #placeholder>
+    <template
+      #placeholder
+    >
       <FSLoader
         v-if="$props.imageId"
         class="fs-image-load"
@@ -19,7 +21,9 @@
         :borderRadius="$props.borderRadius"
       />
     </template>
-    <template #error>
+    <template
+      #error
+    >
       <FSLoader
         v-if="!blurHash"
         class="fs-image-load"
@@ -70,6 +74,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    source: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     aspectRatio: {
       type: String as PropType<string | null>,
       required: false,
@@ -146,7 +155,7 @@ export default defineComponent({
       return undefined;
     });
 
-    const source = computed((): string | undefined => {
+    const realSource = computed((): string | null => {
       if (props.imageB64) {
         if (imageType.value && imageData.value) {
           return `${imageType.value},${imageData.value}`;
@@ -158,6 +167,7 @@ export default defineComponent({
         }
         return IMAGE_RAW_URL(props.imageId);
       }
+      return props.source;
     });
 
     const imageData = computed((): string | null => {
@@ -192,8 +202,12 @@ export default defineComponent({
         if (blurHash.value && isBlurhashValid(blurHash.value.blurHash).result) {
           const ctx = canvasRef.value.getContext("2d");
           if (ctx) {
-            const pixels = decode(blurHash.value.blurHash, (imageRef.value as any).$el.clientWidth, (imageRef.value as any).$el.clientHeight);
-            const imageData = ctx.createImageData((imageRef.value as any).$el.clientWidth, (imageRef.value as any).$el.clientHeight);
+            const width = (imageRef.value as any).$el.clientWidth;
+            const height = (imageRef.value as any).$el.clientHeight;
+            const pixels = decode(blurHash.value.blurHash, width, height);
+            const imageData = ctx.createImageData(width, height);
+            canvasRef.value.width = width;
+            canvasRef.value.height = height;
             imageData.data.set(pixels);
             ctx.putImageData(imageData, 0, 0);
           }
@@ -204,10 +218,10 @@ export default defineComponent({
     return {
       computedHeight,
       computedWidth,
+      realSource,
       canvasRef,
       imageRef,
       blurHash,
-      source,
       style,
       onError
     };

package/components/FSLink.vue

@@ -13,10 +13,12 @@
     :to="$props.to"
     :class="classes"
     :style="style"
-    v-slot="props"
     v-bind="$attrs"
+    v-slot="props"
   >
-    <slot v-bind="props">
+    <slot
+      v-bind="props"
+    >
       {{ $props.label }}
     </slot>
   </router-link>

package/components/FSOptionGroup.vue

@@ -6,8 +6,12 @@
     :gap="$props.gap"
     :style="style"
   >
-    <template v-if="$props.values.length">
-      <template v-if="!firstChild">
+    <template
+      v-if="$props.values.length"
+    >
+      <template
+        v-if="!$slots.item"
+      >
         <FSOptionItem
           v-for="(item, index) in $props.values"
           :prependIcon="item.prependIcon"
@@ -22,24 +26,23 @@
           @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
+        v-else
+      >
+        <template
+          v-for="item in $props.values"
+        >
+          <slot
+            name="item"
+            v-bind="{ item, toggle, getVariant, getColor, getClass }"
+          />
+        </template>
       </template>
     </template>
-    <slot v-else />
+    <slot
+      v-else
+      v-bind="{ toggle, getVariant, getColor, getClass }"
+    />
   </FSWrapGroup>
   <FSSlideGroup
     v-else
@@ -48,8 +51,12 @@
     :gap="$props.gap"
     :style="style"
   >
-    <template v-if="$props.values.length">
-      <template v-if="!firstChild">
+    <template
+      v-if="$props.values.length"
+    >
+      <template
+        v-if="!$slots.item"
+      >
         <FSOptionItem
           v-for="(item, index) in $props.values"
           :prependIcon="item.prependIcon"
@@ -64,32 +71,31 @@
           @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
+        v-else
+      >
+        <template
+          v-for="item in $props.values"
+        >
+          <slot
+            name="item"
+            v-bind="{ item, toggle, getVariant, getColor, getClass }"
+          />
+        </template>
       </template>
     </template>
-    <slot v-else />
+    <slot
+      v-else
+      v-bind="{ toggle, getVariant, getColor, getClass }"
+    />
   </FSSlideGroup>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
 
@@ -126,12 +132,12 @@ export default defineComponent({
       default: "wrap"
     },
     optionVariant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<"standard" | "background" | "full">,
       required: false,
-      default: "full"
+      default: "standard"
     },
     activeVariant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<"standard" | "background" | "full">,
       required: false,
       default: "full"
     },
@@ -193,43 +199,21 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getFirstChild } = useSlots();
     const { getColors } = useColors();
 
     const lights = getColors(ColorEnum.Light);
 
     const colors = getColors(props.optionColor);
 
-    const firstChild = getFirstChild("item");
-
     const style = computed((): { [key: string] : string | undefined } => {
       return {
-          "--fs-option-group-border-size"  : props.border ? "1px" : "0",
-          "--fs-option-group-border-radius": sizeToVar(props.borderRadius),
-          "--fs-option-group-border-color" : lights.base
+        "--fs-option-group-border-size"  : props.border ? "1px" : "0",
+        "--fs-option-group-border-radius": sizeToVar(props.borderRadius),
+        "--fs-option-group-border-color" : lights.base
       };
-    })
-
-    const getFromFirstChild = (prop: string, value: FSToggle): any => {
-      switch (prop) {
-        case "prependIcon":
-          return firstChild.props.prependIcon ?? value.prependIcon;
-        case "label":
-          return firstChild.props.label ?? value.label;
-        case "appendIcon":
-          return firstChild.props.appendIcon ?? value.appendIcon;
-        case "icon":
-          return firstChild.props.icon ?? value.icon;
-        case "variant":
-          return firstChild.props.variant ?? getVariant(value);
-        case "color":
-          return firstChild.props.color ?? getColor(value);
-        default:
-          return firstChild.props[prop];
-      }
-    }
+    });
 
-    const getVariant = (value: FSToggle): "standard" | "full" => {
+    const getVariant = (value: FSToggle): "standard" | "background" | "full" => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
         return props.activeVariant;
       }
@@ -305,9 +289,7 @@ export default defineComponent({
     };
 
     return {
-      firstChild,
       style,
-      getFromFirstChild,
       getVariant,
       getColor,
       getClass,

package/components/FSOptionItem.vue

@@ -6,6 +6,7 @@
     :variant="$props.variant"
     :color="$props.color"
     :load="$props.load"
+    :border="false"
     :width="width"
     @click.stop="onClick"
     v-bind="$attrs"
@@ -15,7 +16,10 @@
       width="fill"
       :wrap="false"
     >
-      <slot name="prepend" v-bind="{ color: $props.color, colors }">
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
+      >
         <FSIcon
           v-if="$props.prependIcon || $props.icon"
           size="l"
@@ -23,14 +27,19 @@
           {{ $props.prependIcon ?? $props.icon }}
         </FSIcon>
       </slot>
-      <slot v-bind="{ color: $props.color, colors }">
+      <slot
+        v-bind="{ color: $props.color, colors }"
+      >
         <FSSpan
           v-if="$props.label"
         >
           {{ $props.label }}
         </FSSpan>
       </slot>
-      <slot name="append" v-bind="{ color: $props.color, colors }">
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
+      >
         <FSIcon
           v-if="$props.appendIcon"
           size="l"
@@ -84,14 +93,14 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<"standard" | "background" | "full">,
       required: false,
-      default: "full"
+      default: "standard"
     },
     ItemWidth: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: ["32px","28px"]
+      default: () => ["32px","28px"]
     },
     color: {
       type: String as PropType<ColorBase>,

package/components/FSRadioGroup.vue

@@ -1,5 +1,8 @@
 <template>
-  <FSCol width="hug">
+  <FSCol
+    width="hug"
+    :gap="$props.gap"
+  >
     <FSRadio
       v-for="(item, index) in $props.values"
       :key="index"
@@ -29,10 +32,15 @@ export default defineComponent({
     FSCol
   },
   props: {
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
     values: {
       type: Array as PropType<{ value: string | boolean | number, label?: string, description?: string }[]>,
       required: true,
-      default: false
+      default: null
     },
     modelValue: {
       type: [String, Boolean, Number],
@@ -48,7 +56,7 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {

package/components/FSToggleSet.vue

@@ -15,7 +15,7 @@
         v-if="$props.values.length"
       >
         <template
-          v-if="!firstChild"
+          v-if="!$slots.item"
         >
           <FSButton
             v-for="(item, index) in $props.values"
@@ -34,24 +34,18 @@
         <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
+            v-for="item in $props.values"
+          >
+            <slot
+              name="item"
+              v-bind="{ item, toggle, getVariant, getColor, getClass }"
+            />
+          </template>
         </template>
       </template>
       <slot
-        v-else
+        v-bind="{ toggle, getVariant, getColor, getClass }"
       />
     </FSWrapGroup>
     <FSSlideGroup
@@ -64,7 +58,7 @@
         v-if="$props.values.length"
       >
         <template
-          v-if="!firstChild"
+          v-if="!$slots.item"
         >
           <FSButton
             v-for="(item, index) in $props.values"
@@ -83,24 +77,18 @@
         <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
+            v-for="item in $props.values"
+          >
+            <slot
+              name="item"
+              v-bind="{ item, toggle, getVariant, getColor, getClass }"
+            />
+          </template>
         </template>
       </template>
       <slot
-        v-else
+        v-bind="{ toggle, getVariant, getColor, getClass }"
       />
     </FSSlideGroup>
   </v-input>
@@ -110,7 +98,6 @@
 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 FSSlideGroup from "./FSSlideGroup.vue";
@@ -203,31 +190,8 @@ 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 => {
-      switch (prop) {
-        case "prependIcon":
-          return firstChild.props.prependIcon ?? value.prependIcon;
-        case "label":
-          return firstChild.props.label ?? value.label;
-        case "appendIcon":
-          return firstChild.props.appendIcon ?? value.appendIcon;
-        case "icon":
-          return firstChild.props.icon ?? value.icon;
-        case "variant":
-          return firstChild.props.variant ?? getVariant(value);
-        case "color":
-          return firstChild.props.color ?? getColor(value);
-        default:
-          return firstChild.props[prop];
-      }
-    }
+    const inputRef = ref(null);
 
     const getVariant = (value: FSToggle): "standard" | "full" | "icon" => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
@@ -329,10 +293,8 @@ export default defineComponent({
     };
 
     return {
-      inputRef,
       toggleSetRef,
-      firstChild,
-      getFromFirstChild,
+      inputRef,
       getVariant,
       goToStart,
       getColor,

package/components/FSWindow.vue

@@ -2,11 +2,13 @@
   <v-window
     class="fs-window"
     :style="style"
+    :touch="false"
     v-bind="$attrs"
   >
     <v-window-item
       v-for="(component, index) in getChildren()"
       :value="value(component, index)"
+      :key="index"
     >
       <component
         :is="component"

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -6,16 +6,19 @@
     :items="languages"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
-    v-model:search="search"
     v-bind="$attrs"
   >
     <template
-      #selection="{ item }"
+      #autocomplete-selection="{ item }"
     >
       <FSRow
+        v-if="$props.modelValue"
         align="center-center"
+        :wrap="false"
       >
-        <FSIcon>
+        <FSIcon
+          v-if="item.raw.icon"
+        >
           {{ item.raw.icon }}
         </FSIcon>
         <FSSpan>
@@ -24,7 +27,7 @@
       </FSRow>
     </template>
     <template
-      #item="{ props, item }"
+      #autocomplete-item="{ props, item }"
     >
       <v-list-item
         v-bind="{ ...props, title: '' }"
@@ -34,9 +37,12 @@
         >
           <FSCheckbox
             v-if="$props.multiple"
-            :modelValue="isSelected(item.value)"
+            :modelValue="$props.modelValue?.includes(item.value)"
+            @click="props.onClick"
           />
-          <FSIcon>
+          <FSIcon
+            v-if="item.raw.icon"
+          >
             {{ item.raw.icon }}
           </FSIcon>
           <FSSpan>
@@ -49,20 +55,26 @@
 </template>
 
 <script lang="ts">
-import { computed, PropType, defineComponent } from "vue"
+import { computed, defineComponent, PropType } 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"
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteLanguage",
   components: {
     FSAutocompleteField,
-    FSCheckbox
+    FSCheckbox,
+    FSIcon,
+    FSSpan,
+    FSRow
   },
   props: {
     languageFilters: {
@@ -90,33 +102,27 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
 
+    const loading = computed((): boolean => {
+      return init.value && fetchingLanguages.value;
+    });
+
     const innerFetch = (search: string | null) => {
       return getManyLanguages({ ...props.languageFilters, search: search ?? undefined });
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, 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>