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

package/components/FSCardPlaceholder.vue

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

package/components/FSChip.vue

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

package/components/FSChipGroup.vue

@@ -1,69 +1,187 @@
 <template>
   <FSWrapGroup
-    v-if="$props.variant === 'wrap'"
+    v-if="$props.variant == ChipGroupVariants.Wrap"
     v-bind="$attrs"
   >
-    <FSChip
-      v-for="(label, index) in $props.labels"
+    <template
+      v-for="(item, index) in $props.items"
       :key="index"
-      :variant="$props.chipVariant"
-      :color="$props.color"
-      :label="label"
-    />
+    >
+      <slot
+        name="item.chip"
+        v-bind="{ index, item }"
+      >
+        <FSChip
+          :variant="$props.chipVariant"
+          :color="$props.color"
+          :label="item.label ?? item"
+        />
+      </slot>
+    </template>
     <slot />
   </FSWrapGroup>
   <FSSlideGroup
-    v-if="$props.variant === 'slide'"
+    v-else-if="$props.variant == ChipGroupVariants.Slide"
     v-bind="$attrs"
   >
-    <FSChip
-      v-for="(label, index) in $props.labels"
+    <template
+      v-for="(item, index) in $props.items"
       :key="index"
-      :variant="$props.chipVariant"
-      :color="$props.color"
-      :label="label"
-    />
+    >
+      <slot
+        name="item.chip"
+        v-bind="{ index, item }"
+      >
+        <FSChip
+          :variant="$props.chipVariant"
+          :color="$props.color"
+          :label="item.label ?? item"
+        />
+      </slot>
+    </template>
     <slot />
   </FSSlideGroup>
+  <FSRow
+    v-else-if="$props.variant == ChipGroupVariants.Menu && $props.items"
+    :wrap="false"
+  >
+    <template
+      v-for="(item, index) in $props.items.slice(0, $props.maxItems ?? $props.items.length)"
+      :key="index"
+    >
+      <slot
+        name="item.chip"
+        v-bind="{ index, item }"
+      >
+        <FSChip
+          :variant="$props.chipVariant"
+          :color="$props.color"
+          :label="item.label ?? item"
+        />
+      </slot>
+    </template>
+    <FSMenu
+      v-if="$props.maxItems && $props.items.length > $props.maxItems"
+      location="bottom end"
+      v-model="menuOpen"
+    >
+      <template
+        #activator="{ props: activatorProps }"
+      >
+        <FSChip
+          v-bind="activatorProps"
+          variant="full"
+          :label="`+${$props.items.length - $props.maxItems}`"
+          :color="menuActivatorColor"
+          :clickable="true"
+        />
+      </template>
+      <FSCard
+        padding="16px 24px"
+      >
+        <template
+          #top-right
+        >
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            iconSize="18px"
+            :color="ColorEnum.Dark"
+            @click="menuOpen = false"
+          />
+        </template>
+        <FSCol
+          gap="12px"
+        >
+          <template
+            v-for="(item, index) in $props.items"
+            :key="index"
+          >
+            <slot
+              name="item.chip"
+              v-bind="{ index, item }"
+            >
+              <FSChip
+                :variant="$props.chipVariant"
+                :color="$props.color"
+                :label="item.label ?? item"
+              />
+            </slot>
+          </template>
+        </FSCol>
+      </FSCard>
+    </FSMenu>
+    <slot />
+  </FSRow>
 </template>
   
   <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, ref, type PropType, computed } from "vue";
   
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ChipGroupVariant, ChipGroupVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
   
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
+import FSButton from "./FSButton.vue";
 import FSChip from "./FSChip.vue";
+import FSCard from "./FSCard.vue";
+import FSMenu from "./FSMenu.vue";
+import FSCol from "./FSCol.vue";
+
+import { useColors } from "../composables";
   
 export default defineComponent({
   name: "FSChipGroup",
   components: {
     FSSlideGroup,
     FSWrapGroup,
-    FSChip
+    FSButton,
+    FSChip,
+    FSCard,
+    FSMenu,
+    FSCol
   },
   props: {
-    labels: {
-      type: Array as PropType<string[]>,
+    items: {
+      type: Array as PropType<any[] | string[]>,
       required: false,
       default: () => []
     },
     variant: {
-      type: String as PropType<"wrap" | "slide">,
+      type: String as PropType<ChipGroupVariant>,
       required: false,
-      default: "wrap"
+      default: ChipGroupVariants.Wrap
     },
     chipVariant: {
-      type: String as PropType<"standard" | "full" | "borderless">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "full"
+      default: CardVariants.Full
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Light
+    },
+    maxItems: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
     }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    const menuOpen = ref(false);
+
+    const menuActivatorColor = computed((): string => {
+      return getColors(props.color).dark;
+    });
+
+    return {
+      menuActivatorColor,
+      ChipGroupVariants,
+      ColorEnum,
+      menuOpen
+    };
   }
 });
   </script>