@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/FSOptionGroup.vue

@@ -1,13 +1,13 @@
 <template>
   <FSWrapGroup
-    v-if="['wrap'].includes(props.variant)"
+    v-if="props.variant === 'wrap'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
     :style="style"
   >
     <template
-      v-if="props.values.length"
+      v-if="props.values && props.values.length"
     >
       <template
         v-if="!$slots.item"
@@ -15,7 +15,7 @@
         <FSOptionItem
           v-for="(item, index) in props.values"
           :padding="props.optionPadding"
-          :editable="props.editable"
+          :disabled="props.disabled"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
           :variant="getVariant(item)"
@@ -46,14 +46,14 @@
     />
   </FSWrapGroup>
   <FSSlideGroup
-    v-else
+    v-else-if="props.variant === 'slide'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
     :style="style"
   >
     <template
-      v-if="props.values.length"
+      v-if="props.values && props.values.length"
     >
       <template
         v-if="!$slots.item"
@@ -61,7 +61,7 @@
         <FSOptionItem
           v-for="(item, index) in props.values"
           :padding="props.optionPadding"
-          :editable="props.editable"
+          :disabled="props.disabled"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
           :variant="getVariant(item)"
@@ -91,6 +91,54 @@
       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 && props.values.length"
+    >
+      <template
+        v-if="!$slots.item"
+      >
+        <FSOptionItem
+          v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :disabled="props.disabled"
+          :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">
@@ -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"
     },
@@ -197,10 +245,10 @@ export default defineComponent({
       required: false,
       default: true
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/FSOptionItem.vue

@@ -1,6 +1,6 @@
 <template>
   <FSClickable
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :height="['32px', '28px']"
     :padding="$props.padding"
     :variant="$props.variant"
@@ -110,10 +110,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click"],
@@ -123,7 +123,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
 
     const onClick = (event: MouseEvent) => {
-      if (props.editable && !props.load) {
+      if (!props.disabled && !props.load) {
         emit("click", event);
       }
     };

package/components/FSPagination.vue

@@ -32,7 +32,7 @@ export default defineComponent({
   props: {
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
+      required: true,
       default: null
     },
     gap: {

package/components/FSPlayButtons.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSRow
+    width="hug"
+    gap="4px"
+  >
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('click:backward')"
+    >
+      <FSIcon
+        size="18px"
+        icon="mdi-skip-backward"
+      />
+    </FSClickable>
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('update:modelValue', !$props.modelValue)"
+    >
+      <FSIcon
+        size="18px"
+        :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
+      />
+    </FSClickable>
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('click:forward')"
+    >
+      <FSIcon
+        size="18px"
+        icon="mdi-skip-forward"
+      />
+    </FSClickable>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+
+export default defineComponent({
+  name: "FSPlayButtons",
+  components: {
+    FSClickable,
+    FSIcon
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    }
+  },
+  emits: ['update:modelValue', 'click:backward', 'click:forward'],
+  setup() {
+    return {
+      ColorEnum
+    };
+  },
+});
+</script>

package/components/FSProgressBar.vue

@@ -0,0 +1,94 @@
+<template>
+  <FSRow
+    align="center-center"
+    :style="style"
+  >
+    <div
+      class="fs-progress-bar-gradient"
+    >
+      <div></div>
+    </div>
+    <FSText
+      v-if="$props.showValue"
+      font="text-button"
+    >
+      {{ fixedRate }}%
+    </FSText>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type StyleValue } from "vue";
+
+import { useColors } from '@dative-gpi/foundation-shared-components/composables';
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+
+export default defineComponent({
+  name: "FSProgressBar",
+  components: {
+    FSText,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    startColor: {
+      type: String,
+      required: false
+    },
+    endColor: {
+      type: String,
+      required: false
+    },
+    showValue: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const successColors = getColors(ColorEnum.Success);
+    const errorColors = getColors(ColorEnum.Error);
+ 
+    const fixedRate = computed(() => {
+      return (props.modelValue * 100).toFixed(0);
+    });
+
+    const relativeWidth = computed(() => {
+      return props.modelValue ? 100 / props.modelValue : 0;
+    });
+    
+    const startColor = computed(() => {
+      return props.startColor ?? errorColors.base;
+    });
+
+    const endColor = computed(() => {
+      return props.endColor ?? successColors.base;
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--progress-bar-background-color': lightColors.dark,
+        '--progress-bar-gradient-start-color': startColor.value,
+        '--progress-bar-gradient-end-color': endColor.value,
+        '--progress-bar-gradient-width': `min(100%, ${fixedRate.value}%)`,
+        '--progress-bar-total-relative-width': `${relativeWidth.value}%`
+      };
+    });
+
+    return {
+      style,
+      fixedRate
+    }
+  },
+});
+</script>

package/components/FSRadio.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-radio-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}
@@ -117,10 +118,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -134,7 +135,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-radio-cursor"     : "default",
           "--fs-radio-radio-color": props.selected ? colors.value.light : lights.base,
@@ -162,7 +163,7 @@ export default defineComponent({
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       if (!props.selected) {

package/components/FSRadioGroup.vue

@@ -7,7 +7,7 @@
       v-for="(item, index) in $props.values"
       :selected="isSelected(item.value)"
       :description="item.description"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :color="$props.color"
       :label="item.label"
       :item="item.item"
@@ -63,10 +63,10 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
   },
   emits: ["update:modelValue"],

package/components/FSRouterLink.vue

@@ -0,0 +1,42 @@
+<template>
+  <router-link
+    :to="$props.to"
+    @auxclick="handleRoutingEvent($event, $props.to)"
+    @click="handleRoutingEvent($event, $props.to)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="{ ...slotData }"
+      />
+    </template>
+  </router-link>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { type RouteLocation } from "vue-router";
+
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
+
+export default defineComponent({
+  name: "FSRouterLink",
+  props: {
+    to: {
+      type: Object as PropType<RouteLocation>,
+      required: true
+    }
+  },
+  setup() {
+    const { handleRoutingEvent } = useRouting();
+
+    return {
+      handleRoutingEvent
+    };
+  }
+});
+</script>

package/components/FSSlideGroup.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid";
@@ -59,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,
@@ -76,6 +86,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { getChildren } = useSlots();
     const { getColors } = useColors();
 
@@ -89,10 +100,13 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     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-padding"    : sizeToVar(props.padding),
+      "--fs-group-gap"        : sizeToVar(props.gap),
+      "--fs-group-color"      : darks.soft,
+      "--fs-group-hover-color": darks.dark,
+      "--fs-group-width"      : sizeToVar(props.width),
+      "--fs-group-height"     : sizeToVar(props.height),
+      "--fs-group-icon-size"  : isMobileSized.value ? "20px" : "24px",
     }));
 
     const nextClasses = computed((): string[] => {

package/components/FSSlider.vue

@@ -29,13 +29,13 @@
     <v-slider
       class="fs-slider"
       hide-details
-      :disabled="!$props.editable"
+      :disabled="$props.disabled"
       :ripple="false"
       :style="style"
       :elevation="0"
       :tickSize="4"
       :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="$emit('update:modelValue', $event)"
       v-bind="$attrs"
     >
       <template
@@ -55,6 +55,7 @@
         v-if="$props.description"
         class="fs-slider-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}
@@ -106,10 +107,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   setup(props) {
@@ -120,7 +121,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-slider-cursor"     : "default",
           "--fs-slider-track-color": lights.base,

package/components/FSSpan.vue

@@ -1,19 +1,21 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSSpan",
@@ -45,10 +47,13 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { slots } = useSlots();
 
     const style = computed((): StyleValue => ({
-      "--fs-span-line-clamp": props.lineClamp.toString()
+      "--fs-span-text-align": props.align,
+      "--fs-span-line-clamp": props.lineClamp.toString(),
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {