@dative-gpi/foundation-shared-components 1.0.66 → 1.0.67-tree-view-02

package/components/FSRangeSlider.vue

@@ -0,0 +1,84 @@
+<template>
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :required="$props.required"
+    :disabled="$props.disabled"
+  >
+    <FSRow>
+      <v-range-slider
+        hide-details
+        width="100%"
+        :disabled="$props.disabled"
+        :ripple="false"
+        :color="$props.color"
+        :trackSize="6"
+        :elevation="0"
+        :tickSize="4"
+        :modelValue="$props.modelValue ?? undefined"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </v-range-slider>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+
+export default defineComponent({
+  name: "FSRangeSlider",
+  components: {
+    FSBaseField,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Object as PropType<[number, number] | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"]
+});
+</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/FSSlider.vue

@@ -1,84 +1,55 @@
 <template>
-  <FSCol>
-    <slot
-      name="label"
-    >
-      <FSRow
-        :wrap="false"
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :style="style"
+  >
+    <FSRow>
+      <v-slider
+        hide-details
+        class="fs-slider"
+        width="100%"
+        :color="$props.color"
+        :disabled="$props.disabled"
+        :ripple="false"
+        :trackSize="6"
+        :elevation="0"
+        :tickSize="4"
+        :modelValue="$props.modelValue ?? undefined"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="$attrs"
       >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-slider-label"
-          font="text-overline"
-          :style="style"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          style="margin-left: -8px;"
-          class="fs-slider-label"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <v-slider
-      class="fs-slider"
-      hide-details
-      :disabled="!$props.editable"
-      :ripple="false"
-      :style="style"
-      :elevation="0"
-      :tickSize="4"
-      :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="slotData"
-        />
-      </template>
-    </v-slider>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-slider-description"
-        font="text-overline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </v-slider>
+    </FSRow>
+  </FSBaseField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { 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";
 
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
 
 export default defineComponent({
   name: "FSSlider",
   components: {
-    FSSpan,
-    FSCol,
-    FSRow
+    FSRow,
+    FSBaseField
   },
   props: {
     label: {
@@ -106,10 +77,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   setup(props) {
@@ -117,26 +88,20 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
-    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,
-          "--fs-slider-thumb-color": lights.base,
-          "--fs-slider-color"      : lights.dark
+          "--fs-slider-thumb-color": lights.base
         };
       }
       return {
-        "--fs-slider-cursor"     : "pointer",
-        "--fs-slider-track-color": colors.value.light,
-        "--fs-slider-thumb-color": colors.value.base,
-        "--fs-slider-color"      : darks.base
+        "--fs-slider-thumb-color": colors.value.base
       };
     });
 
     return {
+      colors,
       style
     };
   } 

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[] => {

package/components/FSSwitch.vue

@@ -1,29 +1,26 @@
 <template>
-  <FSRow
-    width="hug"
-    align="top-left"
-    gap="16px"
+  <FSCol
     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"
-      >
+    <FSRow
+      gap="16px"
+      :wrap="false"
+    >
+      <v-switch
+        v-if="variant == 'left'"
+        class="fs-switch"
+        hide-details
+        inset
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
+        :disabled="$props.disabled"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
+      <FSCol>
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -41,33 +38,32 @@
             class="fs-switch-description"
             font="text-overline"
             :style="style"
+            :lineClamp="2"
           >
             {{ $props.description }}
           </FSSpan>
         </slot>
-        <slot
-          name="footer"
-        />
       </FSCol>
-    </slot>
-    <FSRow
-      v-if="variant == 'right'"
-      align="center-right"
-    >
-      <v-switch
-        class="fs-switch"
-        hide-details
-        inset
-        :validateOn="validateOn"
-        :rules="$props.rules"
-        :ripple="false"
-        :style="style"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onToggle"
-        v-bind="$attrs"
-      />
+      <FSRow
+        v-if="variant == 'right'"
+        align="center-right"
+      >
+        <v-switch
+          class="fs-switch"
+          hide-details
+          inset
+          :disabled="$props.disabled"
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :ripple="false"
+          :style="style"
+          :modelValue="$props.modelValue"
+          @update:modelValue="onToggle"
+          v-bind="$attrs"
+        />
+      </FSRow>
     </FSRow>
-  </FSRow>
+  </FSCol>
 </template>
 
 <script lang="ts">
@@ -123,10 +119,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -141,7 +137,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
           "--fs-switch-cursor"     : "default",
@@ -173,7 +169,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;
       }
       emit("update:modelValue", !props.modelValue);

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

@@ -23,7 +23,7 @@
       v-bind="{ color: $props.color, colors }"
     >
       <v-btn
-        v-if="$props.editable"
+        v-if="$props.showRemove"
         class="fs-tag-button"
         :ripple="false"
         @click="$emit('remove')"
@@ -59,7 +59,7 @@ export default defineComponent({
     height: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "hug"
+      default: () => ["28px", "24px"]
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -81,7 +81,7 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
-    editable: {
+    showRemove: {
       type: Boolean,
       required: false,
       default: true