@dative-gpi/foundation-shared-components 1.0.189-update-fs-card → 1.0.190-feat-time-normalization

package/components/FSCardPlaceholder.vue

@@ -1,46 +1,40 @@
 <template>
-  <FSCard
+  <component
+    :is="$attrs.onClick ? FSClickable : FSCard"
     borderStyle="dashed"
     padding="24px"
     :height="$props.height"
-    :variant="CardVariants.Standard"
-    :color="ColorEnum.Light"
     :width="$props.width"
     :border="true"
     v-bind="$attrs"
   >
-    <template
-      #default
+    <FSRow
+      align="center-center"
     >
-      <slot>
-        <FSRow
-          align="center-center"
-        >
-          <FSIcon
-            v-if="$props.icon"
-            :color="ColorEnum.Light"
-            variant="dark"
-          >
-            {{ $props.icon }}
-          </FSIcon>
-          <FSText
-            v-if="$props.label"
-            :color="ColorEnum.Light"
-            variant="dark"
-          >
-            {{ $props.label }}
-          </FSText>
-        </FSRow>
-      </slot>
-    </template>
-  </FSCard>
+      <FSIcon
+        v-if="$props.icon"
+        :color="ColorEnum.Light"
+        variant="dark"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+      <FSText
+        v-if="$props.label"
+        :color="ColorEnum.Light"
+        variant="dark"
+      >
+        {{ $props.label }}
+      </FSText>
+    </FSRow>
+  </component>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
-import { CardVariants, ColorEnum } from "../models";
+import { ColorEnum } from "../models";
 
+import FSClickable from "./FSClickable.vue";
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 import FSText from "./FSText.vue";
@@ -49,6 +43,7 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSCardPlaceholder",
   components: {
+    FSClickable,
     FSCard,
     FSIcon,
     FSText,
@@ -79,7 +74,8 @@ export default defineComponent({
   setup() {
     return {
       ColorEnum,
-      CardVariants
+      FSClickable,
+      FSCard,
     };
   }
 });

package/components/FSChip.vue

@@ -1,72 +1,72 @@
 <template>
-  <FSCard
-    class="fs-chip"
-    padding="2px 20px"
-    :borderRadius="50"
-    :color="$props.color"
-    :variant="$props.variant"
-    :height="$props.height"
+  <component
+    :is="$props.to && $props.clickable ? 'FSRouterLink' : 'div'"
+    class="fs-chip-container"
+    v-bind="$props.to ? { to: $props.to } : {}"
     @click="$emit('click', $event)"
-    v-bind="$attrs"
   >
-    <template
-      #default="{ contentVariant }"
+    <FSRow
+      :align="$props.align"
+      :width="$props.width"
+      :class="classes"
+      :style="style"
+      :wrap="false"
+      v-bind="$attrs"
     >
-      <FSRow
-        :align="$props.align"
-        :wrap="false"
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
       >
-        <slot
-          name="prepend"
-          v-bind="{ color: $props.color, contentVariant }"
+        <FSIcon
+          v-if="$props.prependIcon"
+          size="s"
         >
-          <FSIcon
-            v-if="$props.prependIcon"
-            size="s"
-          >
-            {{ $props.prependIcon }}
-          </FSIcon>
-        </slot>
-        <slot
-          v-bind="{ color: $props.color, contentVariant }"
+          {{ $props.prependIcon }}
+        </FSIcon>
+      </slot>
+      <slot
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSSpan
+          v-if="$props.label"
+          font="text-overline"
+          class="fs-chip-label"
         >
-          <FSSpan
-            v-if="$props.label"
-            font="text-overline"
-          >
-            {{ $props.label }}
-          </FSSpan>
-        </slot>
-        <slot
-          name="append"
-          v-bind="{ color: $props.color, contentVariant }"
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSIcon
+          v-if="$props.appendIcon"
+          size="s"
         >
-          <FSIcon
-            v-if="$props.appendIcon"
-            size="s"
-          >
-            {{ $props.appendIcon }}
-          </FSIcon>
-        </slot>
-      </FSRow>
-    </template>
-  </FSCard>
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSRow>
+  </component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
-import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+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 FSCard from './FSCard.vue';
+import FSRouterLink from '@dative-gpi/foundation-shared-components/components/FSRouterLink.vue';
 
 export default defineComponent({
   name: "FSChip",
   components: {
-    FSCard,
+    FSRouterLink,
     FSIcon,
     FSSpan,
     FSRow
@@ -92,27 +92,100 @@ 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<CardVariant>,
+      type: String as PropType<"standard" | "full" | "borderless">,
       required: false,
-      default: CardVariants.Full
+      default: "full"
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
+    clickable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     align: {
-      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      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() {
+  setup(props) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => {
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-chip-height"                 : sizeToVar(props.height),
+          "--fs-chip-background-color"       : backgrounds.base,
+          "--fs-chip-border-color"           : colors.value.base,
+          "--fs-chip-color"                  : colors.value.base,
+          "--fs-chip-hover-background-color" : colors.value.base,
+          "--fs-chip-hover-border-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
+        };
+        case "full": return {
+          "--fs-chip-height"                 : sizeToVar(props.height),
+          "--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.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!,
+          "--fs-chip-active-color"           : colors.value.darkContrast!
+        };
+        case "borderless": return {
+          "--fs-chip-height"                 : sizeToVar(props.height),
+          "--fs-chip-background-color"       : backgrounds.base,
+          "--fs-chip-border-color"           : backgrounds.base,
+          "--fs-chip-color"                  : darks.base,
+          "--fs-chip-hover-background-color" : colors.value.light,
+          "--fs-chip-hover-border-color"     : colors.value.light,
+          "--fs-chip-hover-color"            : colors.value.base,
+          "--fs-chip-active-background-color": colors.value.light,
+          "--fs-chip-active-border-color"    : colors.value.light,
+          "--fs-chip-active-color"           : colors.value.base
+        };
+      }
+    });
+
+    const classes = computed((): string[] => {
+      const classNames: string[] = ["fs-chip"];
+      if (props.clickable) {
+        classNames.push("fs-chip-clickable");
+      }
+      return classNames;
+    });
 
     return {
+      FSRouterLink,
+      classes,
+      colors,
+      style
     };
   }
 });

package/components/FSChipGroup.vue

@@ -30,7 +30,7 @@
   <script lang="ts">
 import { defineComponent, type PropType } from "vue";
   
-import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
   
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
@@ -55,9 +55,9 @@ export default defineComponent({
       default: "wrap"
     },
     chipVariant: {
-      type: String as PropType<CardVariant>,
+      type: String as PropType<"standard" | "full" | "borderless">,
       required: false,
-      default: CardVariants.Full
+      default: "full"
     },
     color: {
       type: String as PropType<ColorBase>,