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

package/components/FSCard.vue

@@ -30,6 +30,14 @@
         </FSRow>
       </FSCol>
     </slot>
+    <FSRow
+      v-if="$slots['top-right']"
+      class="fs-card-top-right"
+    >
+      <slot
+        name="top-right"
+      />
+    </FSRow>
   </div>
 </template>
 
@@ -60,6 +68,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -95,17 +108,27 @@ export default defineComponent({
       required: false,
       default: "solid"
     },
+    borderColor: {
+      type: [Array, String] as PropType<ColorBase | null | string>,
+      required: false,
+      default: null
+    },
     elevation: {
       type: Boolean,
       required: false,
       default: false
+    },
+    topRightPadding: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
     }
   },
   setup(props) {
     const { getColors, getGradients } = useColors();
 
     const colors = computed(() => {
-      if(Array.isArray(props.color)) {
+      if (Array.isArray(props.color)) {
         return getColors(props.color[0]);
       }
       return getColors(props.color);
@@ -115,6 +138,27 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const borderColor = computed((): ColorBase => {
+      if (props.borderColor) {
+        return getColors(props.borderColor).base;
+      }
+
+      switch (props.variant) {
+        case "background":
+          return lights.dark;
+        case "standard"  :
+          if (Array.isArray(props.color)) {
+            return colors.value.lightContrast!;
+          }
+          if (([ColorEnum.Background, ColorEnum.Light, ColorEnum.Dark] as ColorBase[]).includes(props.color)) {
+            return lights.dark;
+          }
+          return colors.value.lightContrast!;
+        case "full"      : return colors.value.base;
+        case "gradient"  : return colors.value.lightContrast!;
+      }
+    });
+
     const style = computed((): StyleValue => {
       switch (props.variant) {
         case "background": return {
@@ -124,9 +168,11 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": backgrounds.base,
-          "--fs-card-border-color"    : lights.dark,
-          "--fs-card-color"           : darks.base
+          "--fs-card-border-color"    : borderColor.value,
+          "--fs-card-color"           : darks.base,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -135,9 +181,11 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.light,
-          "--fs-card-border-color"    : colors.value.lightContrast!,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-border-color"    : borderColor.value,
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "full": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -146,9 +194,11 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": colors.value.base,
-          "--fs-card-border-color"    : colors.value.base,
-          "--fs-card-color"           : colors.value.baseContrast!
+          "--fs-card-border-color"    : borderColor.value,
+          "--fs-card-color"           : colors.value.baseContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -157,9 +207,11 @@ export default defineComponent({
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
           "--fs-card-background-color": gradients.value.base,
-          "--fs-card-border-color"    : colors.value.lightContrast!,
-          "--fs-card-color"           : colors.value.lightContrast!
+          "--fs-card-border-color"    : borderColor.value,
+          "--fs-card-color"           : colors.value.lightContrast!,
+          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
         }
       }
     });

package/components/FSCardPlaceholder.vue

@@ -1,11 +1,11 @@
 <template>
-  <FSClickable
+  <component
+    :is="$attrs.onClick ? FSClickable : FSCard"
     borderStyle="dashed"
     padding="24px"
     :height="$props.height"
     :width="$props.width"
     :border="true"
-    @click="$emit('click')"
     v-bind="$attrs"
   >
     <FSRow
@@ -26,7 +26,7 @@
         {{ $props.label }}
       </FSText>
     </FSRow>
-  </FSClickable>
+  </component>
 </template>
 
 <script lang="ts">
@@ -35,6 +35,7 @@ import { defineComponent, type PropType } from "vue";
 import { ColorEnum } from "../models";
 
 import FSClickable from "./FSClickable.vue";
+import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 import FSText from "./FSText.vue";
 import FSRow from "./FSRow.vue";
@@ -43,6 +44,7 @@ export default defineComponent({
   name: "FSCardPlaceholder",
   components: {
     FSClickable,
+    FSCard,
     FSIcon,
     FSText,
     FSRow
@@ -69,10 +71,11 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ["click"],
   setup() {
     return {
-      ColorEnum
+      ColorEnum,
+      FSClickable,
+      FSCard,
     };
   }
 });

package/components/FSCheckbox.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-checkbox-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}
@@ -113,10 +114,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -130,7 +131,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-checkbox-cursor"        : "default",
           "--fs-checkbox-checkbox-color": (props.modelValue || props.indeterminate) ? colors.value.light : lights.base,
@@ -158,7 +159,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/FSChip.vue

@@ -1,50 +1,58 @@
 <template>
-  <FSRow
-    width="hug"
-    align="center-left"
-    :class="classes"
-    :style="style"
-    :wrap="false"
-    v-bind="$attrs"
+  <component
+    :is="$props.to && $props.clickable ? 'FSRouterLink' : 'div'"
+    class="fs-chip-container"
+    v-bind="$props.to ? { to: $props.to } : {}"
+    @click="$emit('click', $event)"
   >
-    <slot
-      name="prepend"
-      v-bind="{ color: $props.color, colors }"
+    <FSRow
+      :align="$props.align"
+      :width="$props.width"
+      :class="classes"
+      :style="style"
+      :wrap="false"
+      v-bind="$attrs"
     >
-      <FSIcon
-        v-if="$props.prependIcon"
-        size="s"
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.prependIcon }}
-      </FSIcon>
-    </slot>
-    <slot
-      v-bind="{ color: $props.color, colors }"
-    >
-      <FSSpan
-        v-if="$props.label"
-        font="text-overline"
-        class="fs-chip-label"
+        <FSIcon
+          v-if="$props.prependIcon"
+          size="s"
+        >
+          {{ $props.prependIcon }}
+        </FSIcon>
+      </slot>
+      <slot
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.label }}
-      </FSSpan>
-    </slot>
-    <slot
-      name="append"
-      v-bind="{ color: $props.color, colors }"
-    >
-      <FSIcon
-        v-if="$props.appendIcon"
-        size="s"
+        <FSSpan
+          v-if="$props.label"
+          font="text-overline"
+          class="fs-chip-label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
       >
-        {{ $props.appendIcon }}
-      </FSIcon>
-    </slot>
-  </FSRow>
+        <FSIcon
+          v-if="$props.appendIcon"
+          size="s"
+        >
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSRow>
+  </component>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -53,10 +61,12 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
+import FSRouterLink from '@dative-gpi/foundation-shared-components/components/FSRouterLink.vue';
 
 export default defineComponent({
   name: "FSChip",
   components: {
+    FSRouterLink,
     FSIcon,
     FSSpan,
     FSRow
@@ -82,6 +92,11 @@ export default defineComponent({
       required: false,
       default: () => [24, 20]
     },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
     variant: {
       type: String as PropType<"standard" | "full" | "borderless">,
       required: false,
@@ -92,12 +107,24 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    editable: {
+    clickable: {
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    align: {
+      type: String as PropType<"center-center" | "center-left">,
+      required: false,
+      default: "center-center"
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      required: false,
+      default: null
+    },
   },
+  inheritsAttrs: false,
+  emits: ['click'],
   setup(props) {
     const { getColors } = useColors();
 
@@ -112,9 +139,9 @@ export default defineComponent({
           "--fs-chip-background-color"       : backgrounds.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.base,
-          "--fs-chip-hover-background-color" : backgrounds.base,
+          "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.base,
+          "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": backgrounds.base,
           "--fs-chip-active-border-color"    : colors.value.dark,
           "--fs-chip-active-color"           : colors.value.dark
@@ -124,8 +151,8 @@ export default defineComponent({
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast!,
-          "--fs-chip-hover-background-color" : colors.value.base,
-          "--fs-chip-hover-border-color"     : colors.value.base,
+          "--fs-chip-hover-background-color" : colors.value.soft,
+          "--fs-chip-hover-border-color"     : colors.value.soft,
           "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": colors.value.dark,
           "--fs-chip-active-border-color"    : colors.value.darkContrast!,
@@ -148,13 +175,14 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames: string[] = ["fs-chip"];
-      if (props.editable) {
-        classNames.push("fs-chip-editable");
+      if (props.clickable) {
+        classNames.push("fs-chip-clickable");
       }
       return classNames;
     });
 
     return {
+      FSRouterLink,
       classes,
       colors,
       style

package/components/FSChipGroup.vue

@@ -0,0 +1,69 @@
+<template>
+  <FSWrapGroup
+    v-if="$props.variant === 'wrap'"
+    v-bind="$attrs"
+  >
+    <FSChip
+      v-for="(label, index) in $props.labels"
+      :key="index"
+      :variant="$props.chipVariant"
+      :color="$props.color"
+      :label="label"
+    />
+    <slot />
+  </FSWrapGroup>
+  <FSSlideGroup
+    v-if="$props.variant === 'slide'"
+    v-bind="$attrs"
+  >
+    <FSChip
+      v-for="(label, index) in $props.labels"
+      :key="index"
+      :variant="$props.chipVariant"
+      :color="$props.color"
+      :label="label"
+    />
+    <slot />
+  </FSSlideGroup>
+</template>
+  
+  <script lang="ts">
+import { defineComponent, type PropType } from "vue";
+  
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+  
+import FSSlideGroup from "./FSSlideGroup.vue";
+import FSWrapGroup from "./FSWrapGroup.vue";
+import FSChip from "./FSChip.vue";
+  
+export default defineComponent({
+  name: "FSChipGroup",
+  components: {
+    FSSlideGroup,
+    FSWrapGroup,
+    FSChip
+  },
+  props: {
+    labels: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    variant: {
+      type: String as PropType<"wrap" | "slide">,
+      required: false,
+      default: "wrap"
+    },
+    chipVariant: {
+      type: String as PropType<"standard" | "full" | "borderless">,
+      required: false,
+      default: "full"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    }
+  }
+});
+  </script>

package/components/FSClickable.vue

@@ -40,7 +40,7 @@
       />
     </template>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
@@ -80,12 +80,13 @@
         :color="loadColor"
       />
     </template>
-  </router-link>
+  </FSRouterLink>
   <button
     v-else
     :type="$props.type"
     :style="style"
     :class="$props.class"
+    :disabled="$props.load || $props.disabled"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -115,7 +116,6 @@
       v-if="$props.load"
     >
       <v-progress-circular
-        :class="$props.class"
         class="fs-clickable-load"
         width="2"
         size="24"
@@ -134,11 +134,13 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSClickable",
   components: {
+    FSRouterLink,
     FSCard
   },
   props: {
@@ -163,7 +165,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },
@@ -207,10 +209,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click"],
@@ -226,7 +228,7 @@ export default defineComponent({
     const active = ref(false);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",
           "--fs-clickable-border-style"    : props.borderStyle,
@@ -326,7 +328,7 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames: string[] = ["fs-clickable"];
-      if (!props.editable) {
+      if (props.disabled) {
         classNames.push("fs-clickable-disabled");
       }
       return classNames;
@@ -343,7 +345,7 @@ export default defineComponent({
     });
 
     const onClick = (event: MouseEvent) => {
-      if (!props.to && !props.href && props.editable && !props.load) {
+      if (!props.to && !props.href && !props.disabled && !props.load) {
         emit("click", event);
       }
     };

package/components/FSClock.vue

@@ -10,7 +10,8 @@
         type="number"
         hide-details
         :style="style"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :modelValue="innerHours.toString().padStart(2, '0')"
         @update:modelValue="onChangeHours"
       />
@@ -21,7 +22,8 @@
         type="number"
         hide-details
         :style="style"
-        :readonly="!$props.editable"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :modelValue="innerMinutes.toString().padStart(2, '0')"
         @update:modelValue="onChangeMinutes"
       />
@@ -30,8 +32,9 @@
       v-if="$props.slider"
     >
       <FSSlider
-        :label="$tr('ui.clock.hours', 'Hours')"
-        :readonly="!$props.editable"
+        :label="$tr('ui.common.hours', 'Hours')"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :color="$props.color"
         :step="1"
         :max="23"
@@ -39,8 +42,9 @@
         v-model="innerHours"
       />
       <FSSlider
-        :label="$tr('ui.clock.minutes', 'Minutes')"
-        :readonly="!$props.editable"
+        :label="$tr('ui.common.minutes', 'Minutes')"
+        :disabled="$props.disabled"
+        :readonly="$props.readonly"
         :color="$props.color"
         :step="1"
         :max="59"
@@ -54,9 +58,9 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
 import FSCol from "./FSCol.vue";
@@ -85,10 +89,15 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
     },
     slider: {
       type: Boolean,
@@ -99,6 +108,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { epochToLongDateFormat } = useDateFormat();
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -110,13 +120,17 @@ export default defineComponent({
     const innerMinutes = ref(0);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-clock-field-cursor"             : "default",
           "--fs-clock-field-background-color"   : backgrounds.base,
           "--fs-clock-field-border-color"       : lights.base,
           "--fs-clock-field-color"              : lights.dark,
-          "--fs-clock-field-active-border-color": lights.base
+          "--fs-clock-field-active-border-color": lights.base,
+          "--fs-font-font-size"                 : isMobileSized.value ? "12px" : "14px",
+          "--fs-font-line-height"               : isMobileSized.value ? "16px" : "20px",
+          "--fs-font-letter-spacing"            : isMobileSized.value ? "-0.36px" : "-0.42px",
+          "--fs-base-field-input-height"        : isMobileSized.value ? "34px" : "38px"
         };
       }
       return {
@@ -124,7 +138,11 @@ export default defineComponent({
         "--fs-clock-field-background-color"   : colors.value.light,
         "--fs-clock-field-border-color"       : colors.value.base,
         "--fs-clock-field-color"              : darks.base,
-        "--fs-clock-field-active-border-color": colors.value.dark
+        "--fs-clock-field-active-border-color": colors.value.dark,
+        "--fs-font-font-size"                 : isMobileSized.value ? "12px" : "14px",
+        "--fs-font-line-height"               : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-letter-spacing"            : isMobileSized.value ? "-0.36px" : "-0.42px",
+        "--fs-base-field-input-height"        : isMobileSized.value ? "34px" : "38px"
       };
     });