@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

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/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/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",
@@ -37,13 +39,21 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    align: {
+      type: String as PropType<"left" | "center" | "right">,
+      required: false,
+      default: "left"
     }
   },
   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[] => {

package/components/FSSwitch.vue

@@ -1,10 +1,58 @@
 <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"
@@ -18,31 +66,8 @@
         @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-overline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -78,6 +103,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    variant: {
+      type: String as PropType<"left" | "right">,
+      required: false,
+      default: "left"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,

package/components/FSTab.vue

@@ -26,19 +26,6 @@
             {{ $props.label }}
           </FSSpan>
         </slot>
-        <v-spacer
-          v-if="$props.tag"
-        />
-        <slot
-          name="tag"
-        >
-          <FSSpan
-            v-if="$props.tag"
-            class="fs-tab-tag"
-          >
-            {{ $props.tag }}
-          </FSSpan>
-        </slot>
         <slot
           name="append"
         >
@@ -49,6 +36,21 @@
             {{ $props.appendIcon }}
           </FSIcon>
         </slot>
+        <FSRow
+          align="center-right"
+          :wrap="false"
+        >
+          <slot
+            name="tag"
+          >
+            <FSSpan
+              v-if="$props.tag"
+              class="fs-tab-tag"
+            >
+              {{ $props.tag }}
+            </FSSpan>
+          </slot>
+        </FSRow>
       </FSRow>
     </slot>
   </v-tab>

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,16 +15,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
+import { useRouter } from "vue-router";
 
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 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",
   props: {
     tab: {
-      type: Number,
+      type: [String, Number, Object] as PropType<any>,
       required: false,
       default: 0
     },
@@ -32,10 +33,18 @@ 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 { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -48,11 +57,27 @@ export default defineComponent({
       "--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!
+      "--fs-tab-tag-color"              : colors.value.baseContrast!,
+      "--fs-tab-height"                 : isMobileSized.value ? "40px" : "48px",
+      "--fs-tab-tag-size"               : isMobileSized.value ? "24px" : "28px"
     }));
 
+    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
     };
   }
 });

package/components/FSTag.vue

@@ -1,8 +1,9 @@
 <template>
   <FSRow
+    align="center-center"
     class="fs-tag"
-    width="hug"
-    align="center-left"
+    :height="$props.height"
+    :width="$props.width"
     :style="style"
     :wrap="false"
     v-bind="$attrs"
@@ -55,6 +56,16 @@ export default defineComponent({
     FSRow
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["28px", "24px"]
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -68,7 +79,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     editable: {
       type: Boolean,

package/components/FSTagGroup.vue

@@ -64,7 +64,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     editable: {
       type: Boolean,

package/components/FSText.vue

@@ -1,20 +1,22 @@
 <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 { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSText",
@@ -51,6 +53,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -58,7 +61,8 @@ export default defineComponent({
 
     const style = computed((): StyleValue => ({
       "--fs-span-line-clamp": props.lineClamp.toString(),
-      "--fs-text-color"     : colors.value[props.variant]!
+      "--fs-text-color"     : colors.value[props.variant]!,
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {