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

package/components/FSOptionGroup.vue

@@ -1,22 +1,23 @@
 <template>
   <FSWrapGroup
-    v-if="['wrap'].includes($props.variant)"
+    v-if="['wrap'].includes(props.variant)"
     class="fs-option-group"
-    :padding="$props.padding"
-    :gap="$props.gap"
+    :padding="props.padding"
+    :gap="props.gap"
     :style="style"
   >
     <template
-      v-if="$props.values.length"
+      v-if="props.values.length"
     >
       <template
         v-if="!$slots.item"
       >
         <FSOptionItem
-          v-for="(item, index) in $props.values"
+          v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="$props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -30,7 +31,7 @@
         v-else
       >
         <template
-          v-for="item in $props.values"
+          v-for="item in props.values"
         >
           <slot
             name="item"
@@ -47,21 +48,22 @@
   <FSSlideGroup
     v-else
     class="fs-option-group"
-    :padding="$props.padding"
-    :gap="$props.gap"
+    :padding="props.padding"
+    :gap="props.gap"
     :style="style"
   >
     <template
-      v-if="$props.values.length"
+      v-if="props.values.length"
     >
       <template
         v-if="!$slots.item"
       >
         <FSOptionItem
-          v-for="(item, index) in $props.values"
+          v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="$props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -75,7 +77,7 @@
         v-else
       >
         <template
-          v-for="item in $props.values"
+          v-for="item in props.values"
         >
           <slot
             name="item"
@@ -92,12 +94,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSToggle } 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"; 
 
 import FSOptionItem from "./FSOptionItem.vue";
 import FSSlideGroup from "./FSSlideGroup.vue";
@@ -176,6 +177,11 @@ export default defineComponent({
       required: false,
       default: "3px"
     },
+    optionPadding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "4px"
+    },
     gap: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -202,14 +208,15 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const lights = getColors(ColorEnum.Light);
-
+    const backgrounds = getColors(ColorEnum.Background);
     const colors = getColors(props.optionColor);
 
     const style = computed((): { [key: string] : string | null | 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-background-color": backgrounds.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
       };
     });
 
@@ -289,6 +296,7 @@ export default defineComponent({
     };
 
     return {
+      props,
       style,
       getVariant,
       getColor,

package/components/FSOptionItem.vue

@@ -1,13 +1,12 @@
 <template>
   <FSClickable
-    padding="4px"
     :editable="$props.editable"
     :height="['32px', '28px']"
+    :padding="$props.padding"
     :variant="$props.variant"
     :color="$props.color"
     :load="$props.load"
     :border="false"
-    :width="width"
     @click.stop="onClick"
     v-bind="$attrs"
   >
@@ -52,10 +51,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSClickable from "./FSClickable.vue";
@@ -97,16 +95,16 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
-    ItemWidth: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => ["32px","28px"]
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "4px"
+    },
     load: {
       type: Boolean,
       required: false,
@@ -124,13 +122,6 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const width = computed((): string => {
-      if (props.label) {
-        return "fit-content";
-      }
-      return sizeToVar(varToSize(props.ItemWidth));
-    });
-
     const onClick = (event: MouseEvent) => {
       if (props.editable && !props.load) {
         emit("click", event);
@@ -139,7 +130,6 @@ export default defineComponent({
 
     return {
       colors,
-      width,
       onClick
     };
   }

package/components/FSPagination.vue

@@ -16,9 +16,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } 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 { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 

package/components/FSRadio.vue

@@ -8,16 +8,18 @@
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.selected"
-      @click.prevent
-      @blur="blurred = true"
+      @click.prevent.stop
       v-bind="$attrs"
     >
-      <template #input>
+      <template
+        #input
+      >
         <FSRow
+          class="fs-radio-label"
           align="center-left"
           width="hug"
           :style="style"
-          @click.stop="onToggle"
+          @click.prevent.stop="onToggle"
         >
           <FSIcon
             class="fs-radio"
@@ -26,10 +28,12 @@
           >
             {{ icon }}
           </FSIcon>
-          <slot>
+          <slot
+            name="label"
+            v-bind="{ item: $props.item, font }"
+          >
             <FSSpan
               v-if="$props.label"
-              class="fs-radio-label"
               :style="style"
               :font="font"
             >
@@ -39,7 +43,9 @@
         </FSRow>
       </template>
     </v-radio>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-radio-description"
@@ -53,10 +59,12 @@
 </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 { ColorBase, ColorEnum } 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 FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -72,6 +80,11 @@ export default defineComponent({
     FSRow
   },
   props: {
+    item: {
+      type: Object as PropType<object | null>,
+      required: false,
+      default: null
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -114,7 +127,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -162,7 +175,6 @@ export default defineComponent({
     return {
       validateOn,
       messages,
-      blurred,
       style,
       icon,
       font,

package/components/FSRadioGroup.vue

@@ -5,22 +5,35 @@
   >
     <FSRadio
       v-for="(item, index) in $props.values"
-      :key="index"
-      :label="item.label"
-      :description="item.description"
       :selected="isSelected(item.value)"
-      :color="$props.color"
+      :description="item.description"
       :editable="$props.editable"
+      :color="$props.color"
+      :label="item.label"
+      :item="item.item"
+      :key="index"
       :modelValue="item.value"
       @update:modelValue="onToggle"
-    />
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </FSRadio>
   </FSCol>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } 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 FSRadio from "./FSRadio.vue";
 import FSCol from "./FSCol.vue";
@@ -38,7 +51,7 @@ export default defineComponent({
       default: "8px"
     },
     values: {
-      type: Array as PropType<{ value: string | boolean | number, label?: string, description?: string }[]>,
+      type: Array as PropType<{ value: string | boolean | number, label?: string, description?: string, item: any | null }[]>,
       required: true,
       default: null
     },
@@ -60,11 +73,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const isSelected = (item: String | Boolean | Number): boolean => {
+    const isSelected = (item: string | boolean | number): boolean => {
       return item == props.modelValue;
     };
 
-    const onToggle = (item: String | Boolean | Number): void => {
+    const onToggle = (item: string | boolean | number): void => {
       if (item != props.modelValue) {
         emit("update:modelValue", item);
       }

package/components/FSRow.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -41,6 +42,11 @@ export default defineComponent({
       required: false,
       default: "top-left"
     },
+    overflow: {
+      type: String as PropType<"visible" | "hidden" | "scroll" | "auto" | "inherit" | "initial" | "unset">,
+      required: false,
+      default: "visible"
+    },
     wrap: {
       type: Boolean,
       required: false,
@@ -50,6 +56,7 @@ export default defineComponent({
   setup(props) {
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
+      "--fs-row-overflow" : props.overflow,
       "--fs-row-padding"  : sizeToVar(props.padding),
       "--fs-row-gap"      : sizeToVar(props.gap),
       "--fs-row-width"    : sizeToVar(props.width),

package/components/FSSlideGroup.vue

@@ -12,7 +12,7 @@
     >
       <FSButtonPreviousIcon
         :color="ColorEnum.Dark"
-        @click="goToPrev"
+        @click.prevent.stop="goToPrev"
       />
     </template>
     <template
@@ -33,14 +33,15 @@
       <FSButtonNextIcon
         :color="ColorEnum.Dark"
         :class="nextClasses"
-        @click="goToNext"
+        @click.prevent.stop="goToNext"
       />
     </template>
   </v-slide-group>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -105,14 +106,32 @@ export default defineComponent({
       return classes;
     });
 
-    const goToPrev = () => {
+    const goToStart = () => {
+      if (slideGroupRef.value) {
+        const scrollElement = (slideGroupRef.value as any).$el.children[1];
+        if (scrollElement && scrollElement.scrollTo) {
+          scrollElement.scrollTo({ left: -scrollElement.scrollLeft, behavior: "smooth" });
+        }
+      }
+    };
+
+    const goToEnd = () => {
       if (slideGroupRef.value) {
+        const scrollElement = (slideGroupRef.value as any).$el.children[1];
+        if (scrollElement && scrollElement.scrollTo) {
+          scrollElement.scrollTo({ left: scrollElement.scrollWidth - scrollElement.scrollLeft, behavior: "smooth" });
+        }
+      }
+    };
+
+    const goToPrev = () => {
+      if (slideGroupRef.value && (slideGroupRef.value as any).scrollTo) {
         (slideGroupRef.value as any).scrollTo("prev");
       }
     };
 
     const goToNext = () => {
-      if (slideGroupRef.value) {
+      if (slideGroupRef.value && (slideGroupRef.value as any).scrollTo) {
         (slideGroupRef.value as any).scrollTo("next");
         forceActive.value = false;
       }
@@ -143,8 +162,10 @@ export default defineComponent({
       elementId,
       style,
       getChildren,
+      goToStart,
+      goToNext,
       goToPrev,
-      goToNext
+      goToEnd
     };
   }
 });

package/components/FSSlider.vue

@@ -64,9 +64,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } 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 { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";

package/components/FSSpan.vue

@@ -11,7 +11,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 

package/components/FSSwitch.vue

@@ -20,17 +20,19 @@
       />
       <slot>
         <FSSpan
-            v-if="$props.label"
-            class="fs-switch-label"
-            :style="style"
-            :font="font"
-            @click.stop="onToggle"
+          v-if="$props.label"
+          class="fs-switch-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
         >
           {{ $props.label }}
         </FSSpan>
       </slot>
     </FSRow>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-switch-description"
@@ -44,10 +46,12 @@
 </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 { ColorBase, ColorEnum } 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 FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
@@ -99,7 +103,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -150,7 +154,6 @@ export default defineComponent({
     return {
       validateOn,
       messages,
-      blurred,
       style,
       font,
       onToggle

package/components/FSTab.vue

@@ -55,9 +55,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } 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 FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";

package/components/FSTabs.vue

@@ -10,22 +10,15 @@
     @update:modelValue="$emit('update:tab', $event)"
     v-bind="$attrs"
   >
-    <template
-      v-for="(component, index) in getChildren()"
-      :key="index"
-    >
-      <component
-        :is="component"
-      />
-    </template>
+    <slot/>
   </v-tabs>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSTabs",
@@ -42,7 +35,6 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getChildren } = useSlots();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -60,8 +52,7 @@ export default defineComponent({
     }));
 
     return {
-      style,
-      getChildren
+      style
     };
   }
 });

package/components/FSTag.vue

@@ -7,7 +7,9 @@
     :wrap="false"
     v-bind="$attrs"
   >
-    <slot v-bind="{ color: $props.color, colors }">
+    <slot
+      v-bind="{ color: $props.color, colors }"
+    >
       <FSSpan
         v-if="$props.label"
         class="fs-tag-label"
@@ -15,7 +17,10 @@
         {{ $props.label }}
       </FSSpan>
     </slot>
-    <slot name="button" v-bind="{ color: $props.color, colors }">
+    <slot
+      name="button"
+      v-bind="{ color: $props.color, colors }"
+    >
       <v-btn
         v-if="$props.editable"
         class="fs-tag-button"
@@ -33,9 +38,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } 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 { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIcon from "./FSIcon.vue";

package/components/FSTagGroup.vue

@@ -32,9 +32,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } 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 FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";