@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/FSOptionGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <FSWrapGroup
-    v-if="['wrap'].includes(props.variant)"
+    v-if="props.variant === 'wrap'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
@@ -46,7 +46,7 @@
     />
   </FSWrapGroup>
   <FSSlideGroup
-    v-else
+    v-else-if="props.variant === 'slide'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
@@ -91,10 +91,58 @@
       v-bind="{ toggle, getVariant, getColor, getClass }"
     />
   </FSSlideGroup>
+  <FSRow
+    v-else
+    class="fs-option-group-full-width"
+    width="100%"
+    :padding="props.padding"
+    :gap="props.gap"
+    :style="style"
+    :wrap="false"
+  >
+    <template
+      v-if="props.values.length"
+    >
+      <template
+        v-if="!$slots.item"
+      >
+        <FSOptionItem
+          v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :icon="item.icon"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <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
+      v-bind="{ toggle, getVariant, getColor, getClass }"
+    />
+  </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -128,7 +176,7 @@ export default defineComponent({
       default: "4px"
     },
     variant: {
-      type: String as PropType<"wrap" | "slide">,
+      type: String as PropType<"wrap" | "slide" | "fullwidth">,
       required: false,
       default: "wrap"
     },
@@ -211,14 +259,12 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const colors = getColors(props.optionColor);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--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
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--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
+    }));
 
     const getVariant = (value: FSToggle): "standard" | "background" | "full" => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {

package/components/FSPagination.vue

@@ -16,11 +16,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { 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";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -65,7 +63,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.color) {
         case ColorEnum.Light:
         case ColorEnum.Dark: return {

package/components/FSRadio.vue

@@ -49,7 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-radio-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}
@@ -59,12 +59,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -135,7 +133,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-radio-cursor"     : "default",
@@ -159,7 +157,7 @@ export default defineComponent({
 
     const icon = computed((): string => props.selected ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
 
-    const font = computed((): string => props.selected ? "text-button" : "text-body");
+    const font = computed((): "text-button" | "text-body" => props.selected ? "text-button" : "text-body");
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 

package/components/FSRadioGroup.vue

@@ -29,11 +29,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRadio from "./FSRadio.vue";
 import FSCol from "./FSCol.vue";

package/components/FSRow.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    :style="style"
     :class="classes"
+    :style="style"
     v-bind="$attrs"
   >
     <slot />
@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -54,7 +53,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-row-flex-wrap": props.wrap ? "wrap" : "nowrap",
       "--fs-row-overflow" : props.overflow,
       "--fs-row-padding"  : sizeToVar(props.padding),

package/components/FSSlideGroup.vue

@@ -40,8 +40,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -60,6 +59,16 @@ export default defineComponent({
     FSButton
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -89,11 +98,13 @@ export default defineComponent({
     
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-group-padding"     : sizeToVar(props.padding),
       "--fs-group-gap"         : sizeToVar(props.gap),
       "--fs-group-color"       : darks.soft,
-      "--fs-group-hover-color" : darks.dark
+      "--fs-group-hover-color" : darks.dark,
+      "--fs-group-width"       : sizeToVar(props.width),
+      "--fs-group-height"      : sizeToVar(props.height)
     }));
 
     const nextClasses = computed((): string[] => {

package/components/FSSlider.vue

@@ -16,8 +16,8 @@
         </FSSpan>
         <FSSpan
           v-if="$props.label && $props.required"
-          class="fs-slider-label"
           style="margin-left: -8px;"
+          class="fs-slider-label"
           font="text-overline"
           :ellipsis="false"
           :style="style"
@@ -29,12 +29,12 @@
     <v-slider
       class="fs-slider"
       hide-details
-      :tickSize="4"
+      :disabled="!$props.editable"
+      :ripple="false"
       :style="style"
       :elevation="0"
-      :ripple="false"
-      :disabled="!$props.editable"
-      :modelValue="$props.modelValue"
+      :tickSize="4"
+      :modelValue="$props.modelValue ?? undefined"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
       v-bind="$attrs"
     >
@@ -54,7 +54,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-slider-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}
@@ -64,11 +64,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { 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";
 
 import FSSpan from "./FSSpan.vue";
@@ -121,7 +119,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-slider-cursor"     : "default",

package/components/FSSpan.vue

@@ -11,8 +11,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
@@ -25,7 +24,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },
@@ -38,11 +37,20 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    align: {
+      type: String as PropType<"left" | "center" | "right">,
+      required: false,
+      default: "left"
     }
   },
   setup(props) {
     const { slots } = useSlots();
 
+    const style = computed((): StyleValue => ({
+      "--fs-span-line-clamp": props.lineClamp.toString()
+    }));
+
     const classes = computed((): string[] => {
       const classNames = ["fs-span", props.font];
       if (!slots.default) {
@@ -57,12 +65,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-span-line-clamp": props.lineClamp.toString()
-      };
-    });
-
     return {
       classes,
       style

package/components/FSSwitch.vue

@@ -1,57 +1,80 @@
 <template>
-  <FSCol
+  <FSRow
     width="hug"
+    align="top-left"
+    gap="16px"
+    padding="8px 0px"
+    :wrap="false"
   >
+    <v-switch
+      v-if="variant == 'left'"
+      class="fs-switch"
+      hide-details
+      inset
+      :validateOn="validateOn"
+      :rules="$props.rules"
+      :ripple="false"
+      :style="style"
+      :modelValue="$props.modelValue"
+      @update:modelValue="onToggle"
+      v-bind="$attrs"
+    />
+    <slot>
+      <FSCol
+        width="hug"
+        v-if="$props.label || $props.description || $slots.description"
+      >
+        <FSSpan
+          v-if="$props.label"
+          class="fs-switch-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <slot
+          name="description"
+        >
+          <FSSpan
+            v-if="$props.description"
+            class="fs-switch-description"
+            font="text-overline"
+            :style="style"
+          >
+            {{ $props.description }}
+          </FSSpan>
+        </slot>
+        <slot
+          name="footer"
+        />
+      </FSCol>
+    </slot>
     <FSRow
-      width="hug"
-      align="center-left"
+      v-if="variant == 'right'"
+      align="center-right"
     >
       <v-switch
         class="fs-switch"
         hide-details
         inset
-        :style="style"
-        :ripple="false"
-        :rules="$props.rules"
         :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
         :modelValue="$props.modelValue"
         @update:modelValue="onToggle"
         v-bind="$attrs"
       />
-      <slot>
-        <FSSpan
-          v-if="$props.label"
-          class="fs-switch-label"
-          :style="style"
-          :font="font"
-          @click.stop="onToggle"
-        >
-          {{ $props.label }}
-        </FSSpan>
-      </slot>
     </FSRow>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-switch-description"
-        font="text-underline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSRow>
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-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";
@@ -76,10 +99,15 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: Boolean,
+      type: Boolean as PropType<boolean | null>,
       required: false,
       default: false
     },
+    variant: {
+      type: String as PropType<"left" | "right">,
+      required: false,
+      default: "left"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -112,7 +140,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
@@ -140,7 +168,7 @@ export default defineComponent({
       };
     });
 
-    const font = computed((): string => props.modelValue ? "text-button" : "text-body");
+    const font = computed((): "text-button" | "text-body" => props.modelValue ? "text-button" : "text-body");
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 

package/components/FSTab.vue

@@ -55,11 +55,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";

package/components/FSTabs.vue

@@ -7,7 +7,7 @@
     :style="style"
     :grow="true"
     :modelValue="$props.tab"
-    @update:modelValue="$emit('update:tab', $event)"
+    @update:modelValue="onUpdateTab($event)"
     v-bind="$attrs"
   >
     <slot/>
@@ -15,18 +15,17 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
+import { useRouter } from "vue-router";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSTabs",
   props: {
     tab: {
-      type: Number,
+      type: [String, Number, Object] as PropType<any>,
       required: false,
       default: 0
     },
@@ -34,27 +33,48 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    recordNavigation: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup(props) {
+  emits: ["update:tab"],
+  setup(props, { emit }) {
     const { getColors } = useColors();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-group-color"                 : darks.soft,
-      "--fs-group-hover-color"           : darks.dark,
-      "--fs-tab-border-color"            : lights.dark,
-      "--fs-tab-hover-border-color"      : darks.dark,
-      "--fs-tab-active-background-color" : colors.value.light,
-      "--fs-tab-tag-background-color"    : colors.value.base,
-      "--fs-tab-tag-color"               : colors.value.baseContrast
+    const style = computed((): StyleValue => ({
+      "--fs-group-color"                : darks.soft,
+      "--fs-group-hover-color"          : darks.dark,
+      "--fs-tab-border-color"           : lights.dark,
+      "--fs-tab-hover-border-color"     : darks.dark,
+      "--fs-tab-active-background-color": colors.value.light,
+      "--fs-tab-tag-background-color"   : colors.value.base,
+      "--fs-tab-tag-color"              : colors.value.baseContrast!
     }));
 
+    const onUpdateTab = (tab: number): void => {
+      if (props.recordNavigation) {
+        router.replace({ query: { tab: tab.toString() } });
+      }
+      emit("update:tab", tab);
+    }
+
+    onMounted((): void => {
+      if (props.recordNavigation && router.currentRoute.value.query.tab) {
+        emit("update:tab", router.currentRoute.value.query.tab);
+      }
+    });
+
     return {
-      style
+      style,
+      onUpdateTab
     };
   }
 });