@dative-gpi/foundation-shared-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-1

package/components/FSEditImageUI.vue

@@ -135,36 +135,25 @@
         />
       </FSRow>
     </FSRow>
-    <FSClickable
+    <template
       v-else
-      borderStyle="dashed"
-      variant="background"
-      :height="$props.height"
-      :width="$props.width"
-      @click="() => invisibleButtonRef.input.click()"
     >
-      <FSRow
-        align="center-center"
-        :wrap="false"
-      >
-        <FSIcon>
-          mdi-plus-box-outline
-        </FSIcon>
-        <FSText
-          font="text-body"
-          :lineClamp="2"
-        >
-          {{ $tr('edit-image.add-image', 'Add an image.') }}
-        </FSText>
-        <FSButtonFileMini
-          class="fs-edit-image-hidden-button"
-          ref="invisibleButtonRef"
-          accept=".jpg,.jpeg,.png"
-          :readFile="false"
-          @update:metadata="onUpload"
-        />
-      </FSRow>
-    </FSClickable>
+      <FSButtonFileMini
+        class="fs-edit-image-hidden-button"
+        ref="invisibleButtonRef"
+        accept=".jpg,.jpeg,.png"
+        :readFile="false"
+        @update:metadata="onUpload"
+      />
+      <FSCardPlaceholder
+        v-if="invisibleButtonRef"
+        :height="$props.height"
+        :width="$props.width"
+        icon="mdi-plus-box-outline"
+        :label="$tr('edit-image.add-image', 'Add an image.')"
+        @click="() => invisibleButtonRef!.input.click()"
+      />
+    </template>
   </FSCol>
 </template>
 
@@ -177,10 +166,11 @@ import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
 import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
-import FSClickable from "./FSClickable.vue";
+import FSCardPlaceholder from "./FSCardPlaceholder.vue";
 import FSImageUI from "./FSImageUI.vue";
 import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
+import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -188,11 +178,12 @@ export default defineComponent({
   name: "FSEditImageUI",
   components: {
     FSButtonRemoveMini,
+    FSCardPlaceholder,
     FSButtonFileMini,
-    FSClickable,
     FSImageUI,
     FSCard,
     FSText,
+    FSSpan,
     FSCol,
     FSRow
   },

package/components/FSGridMosaic.vue

@@ -40,6 +40,7 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import type { FSGridMosaic } from "@dative-gpi/foundation-shared-components/models";
 
 import FSGrid from "./FSGrid.vue";
+import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -47,6 +48,7 @@ export default defineComponent({
   name: "FSGridMosaic",
   components: {
     FSGrid,
+    FSText,
     FSCol,
     FSRow
   },

package/components/FSGroupingChip.vue

@@ -0,0 +1,115 @@
+<template>
+  <FSChip
+    :height="$props.height"
+    :width="$props.width"
+    :variant="$props.variant"
+    :color="chipColor"
+    :disableHoverStyle="$props.disableHoverStyle"
+  >
+    <FSRow
+      align="center-center"
+      width="hug"
+      :wrap="false"
+    >
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :color="$props.iconColor"
+          :size="$props.iconSize"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSText
+          font="text-overline"
+          :color="textColor"
+        >
+          {{ $props.label }}
+        </FSText>
+      </FSRow>
+    </FSRow>
+  </FSChip>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSChip from "./FSChip.vue";
+import FSRow from "./FSRow.vue";
+
+import { useColors } from "../composables";
+
+export default defineComponent({
+  name: "FSSubgroupingChip",
+  components: {
+    FSChip,
+    FSIcon,
+    FSText,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string>,
+      required: true
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: true
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [24, 20]
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    variant: {
+      type: String as PropType<CardVariant>,
+      required: false,
+      default: CardVariants.Background
+    },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "18px"
+    },
+    disableHoverStyle: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    
+    const chipColor = getColors(props.color).dark;
+    const textColor = getColors(ColorEnum.Dark).dark;
+
+    return {
+      chipColor,
+      textColor,
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/FSIconCard.vue

@@ -30,12 +30,14 @@ import { sizeToVar } from "../utils";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSIconCard",
   components: {
     FSCard,
-    FSIcon
+    FSIcon,
+    FSRow
   },
   props: {
     size: {

package/components/FSIconCheck.vue

@@ -28,10 +28,18 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    variant: {
+      type: String as () => "fill" | "outline",
+      required: false,
+      default: "outline"
     }
   },
   setup(props) {
     const icon = computed((): string => {
+      if (props.variant === "fill") {
+        return props.value ? "mdi-check-circle" : "mdi-close-circle";
+      }
       return props.value ? "mdi-check-circle-outline" : "mdi-close-circle-outline";
     });
 

package/components/FSImageCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSClickable
+  <FSCard
     class="fs-image-card"
     :height="height"
     :width="width"
@@ -22,20 +22,20 @@
         </FSSpan>
       </FSRow>
     </FSRow>
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import FSClickable from "./FSClickable.vue";
+import FSCard from "./FSCard.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSImageCard",
   components: {
-    FSClickable,
+    FSCard,
     FSSpan,
     FSRow
   },

package/components/FSInstantPicker.vue

@@ -89,6 +89,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { computeTicks, TimePrecision } from '@dative-gpi/foundation-shared-components/utils';
 
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.vue';
@@ -100,6 +101,7 @@ export default defineComponent({
   name: "FSInstantPicker",
   components: {
     FSCol,
+    FSRow,
     FSSpan,
     FSText,
     FSSlider,

package/components/FSLink.vue

@@ -1,19 +1,7 @@
 <template>
-  <a
-    v-if="$props.href"
-    :href="$props.href"
-    :class="classes"
-    :style="style"
-  >
-    <slot>
-      <FSSpan>
-        {{ $props.label }}
-      </FSSpan>
-    </slot>
-  </a>
   <FSRouterLink
-    v-else-if="$props.to"
     :to="$props.to"
+    :href="$props.href"
     :class="classes"
     :style="style"
     v-bind="$attrs"

package/components/FSOptionItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSClickable
+  <FSCard
     :disabled="$props.disabled"
     :height="['32px', '28px']"
     :padding="$props.padding"
@@ -47,7 +47,7 @@
         </FSIcon>
       </slot>
     </FSRow>
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -56,7 +56,7 @@ import { computed, defineComponent, type PropType } from "vue";
 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";
+import FSCard from "./FSCard.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
@@ -64,7 +64,7 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSOptionItem",
   components: {
-    FSClickable,
+    FSCard,
     FSSpan,
     FSIcon,
     FSRow

package/components/FSOptionsMenu.vue

@@ -41,12 +41,13 @@
             :scrollOutside="false"
             maxHeight="80dvh"
           >
-            <FSClickable
+            <FSCard
               v-for="(item, index) in $props.items"
               width="100%"
               padding="8px"
               height="40px"
               :key="index"
+              :color="ColorEnum.Light"
               :border="false"
               @click="onClickItem(item)"
             >
@@ -68,7 +69,7 @@
                   </FSText>
                 </FSRow>
               </slot>
-            </FSClickable>
+            </FSCard>
           </FSFadeOut>
         </FSCol>
       </slot>
@@ -81,7 +82,7 @@ import { defineComponent, ref, type PropType } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+import { CardVariants, ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
 
 import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
@@ -90,7 +91,6 @@ import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.v
 import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
-import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
 
 export default defineComponent({
   name: "FSInformationsMenu",
@@ -101,8 +101,7 @@ export default defineComponent({
     FSText,
     FSButton,
     FSCol,
-    FSIcon,
-    FSClickable
+    FSIcon
   },
   props: {
     items: {
@@ -158,6 +157,7 @@ export default defineComponent({
       ColorEnum,
       modelValue,
       lightColors,
+      CardVariants,
       onClickItem
     };
   }

package/components/FSPlayButtons.vue

@@ -3,7 +3,7 @@
     width="hug"
     gap="4px"
   >
-    <FSClickable
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -14,8 +14,8 @@
         size="18px"
         icon="mdi-skip-backward"
       />
-    </FSClickable>
-    <FSClickable
+    </FSCard>
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -26,8 +26,8 @@
         size="18px"
         :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
       />
-    </FSClickable>
-    <FSClickable
+    </FSCard>
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -38,7 +38,7 @@
         size="18px"
         icon="mdi-skip-forward"
       />
-    </FSClickable>
+    </FSCard>
   </FSRow>
 </template>
 
@@ -48,13 +48,15 @@ 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';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 
 export default defineComponent({
   name: "FSPlayButtons",
   components: {
-    FSClickable,
-    FSIcon
+    FSCard,
+    FSIcon,
+    FSRow
   },
   props: {
     modelValue: {

package/components/FSProgressBar.vue

@@ -4,21 +4,62 @@
     :style="style"
   >
     <div
-      class="fs-progress-bar-gradient"
+      class="fs-progress-bar-wrapper"
     >
-      <div></div>
+      <div
+        class="fs-progress-bar-track"
+      >
+        <div
+          v-if="$props.cursor && isValueInRange"
+          class="fs-progress-bar-cursor"
+        >
+          <FSText
+            v-if="$props.showValue"
+            class="fs-progress-bar-cursor-label"
+            font="text-overline"
+            :ellipsis="false"
+          >
+            {{ displayValue }}
+          </FSText>
+        </div>
+        <div
+          v-if="!$props.cursor"
+          class="fs-progress-bar-fill"
+        ></div>
+      </div>
+      <div
+        v-if="positionedLabels.length"
+        class="fs-progress-bar-labels"
+      >
+        <div
+          v-for="label in positionedLabels"
+          :key="label.value"
+          class="fs-progress-bar-label"
+          :class="{
+            'fs-progress-bar-label--start': label.percent === 0,
+            'fs-progress-bar-label--end': label.percent === 100
+          }"
+          :style="{ left: `${label.percent}%` }"
+        >
+          <FSText
+            font="text-overline"
+          >
+            {{ label.display }}
+          </FSText>
+        </div>
+      </div>
     </div>
     <FSText
-      v-if="$props.showValue"
+      v-if="$props.showValue && !$props.cursor"
       font="text-button"
     >
-      {{ fixedRate }}%
+      {{ displayValue }}
     </FSText>
   </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors } from '@dative-gpi/foundation-shared-components/composables';
 
@@ -50,6 +91,31 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    valueFormat: {
+      type: String as PropType<"percentage" | "raw">,
+      required: false,
+      default: "percentage"
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    labels: {
+      type: Array as PropType<Array<{ value: number; text?: string }>>,
+      required: false,
+      default: () => []
+    },
+    cursor: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   setup(props) {
@@ -58,37 +124,85 @@ export default defineComponent({
     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 isValid = computed(() => props.max > props.min);
+
+    const range = computed(() => props.max - props.min);
+
+    const clampedValue = computed(() => {
+      if (!isValid.value) { 
+        return props.min; 
+      }
+      return Math.min(Math.max(props.modelValue, props.min), props.max);
+    });
+
+    const valuePercent = computed(() => {
+      if (!isValid.value) { 
+        return 0; 
+      }
+      return ((clampedValue.value - props.min) / range.value) * 100;
+    });
+
+    const isValueInRange = computed(() => {
+      return props.modelValue >= props.min && props.modelValue <= props.max;
+    });
+
+    const zeroPercent = computed(() => {
+      if (!isValid.value) { return 0; }
+      const zero = Math.min(Math.max(0, props.min), props.max);
+      return ((zero - props.min) / range.value) * 100;
     });
 
-    const relativeWidth = computed(() => {
-      return props.modelValue ? 100 / props.modelValue : 0;
+    const fillLeft = computed(() => Math.min(zeroPercent.value, valuePercent.value));
+
+    const fillWidth = computed(() => Math.abs(valuePercent.value - zeroPercent.value));
+
+    const gradientStartStop = computed(() => {
+      if (fillWidth.value === 0) { return "0%"; }
+      return `${-(fillLeft.value / fillWidth.value) * 100}%`;
     });
-    
-    const startColor = computed(() => {
-      return props.startColor ?? errorColors.base;
+
+    const gradientEndStop = computed(() => {
+      if (fillWidth.value === 0) { return "100%"; }
+      return `${((100 - fillLeft.value) / fillWidth.value) * 100}%`;
     });
 
-    const endColor = computed(() => {
-      return props.endColor ?? successColors.base;
+    const positionedLabels = computed(() => {
+      return props.labels.map(label => {
+        const percent = isValid.value
+          ? ((label.value - props.min) / range.value) * 100
+          : 0;
+
+        return {
+          value: label.value,
+          display: label.text ?? label.value,
+          percent: Math.min(Math.max(percent, 0), 100)
+        };
+      });
     });
 
-    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}%`
-      };
+    const displayValue = computed(() => {
+      if (props.valueFormat === "raw") { return props.modelValue.toFixed(2); }
+      return `${Math.round(valuePercent.value)}%`;
     });
 
+    const style = computed((): StyleValue => ({
+      "--progress-bar-background": lightColors.dark,
+      "--progress-bar-gradient-start": props.startColor ?? errorColors.base,
+      "--progress-bar-gradient-start-stop": gradientStartStop.value,
+      "--progress-bar-gradient-end": props.endColor ?? successColors.base,
+      "--progress-bar-gradient-end-stop": gradientEndStop.value,
+      "--progress-bar-fill-left": `${fillLeft.value}%`,
+      "--progress-bar-fill-width": `${fillWidth.value}%`,
+      "--progress-bar-cursor-position": `${valuePercent.value}%`
+    }));
+
     return {
-      style,
-      fixedRate
-    }
-  },
+      positionedLabels,
+      isValueInRange,
+      displayValue,
+      style
+    };
+  }
 });
-</script>
+</script>