@dpa-id-components/dpa-shared-components 23.0.0 → 23.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "23.0.0",
+  "version": "23.1.0",
   "license": "ISC",
   "author": "dpa Deutsche Presse-Agentur GmbH",
   "description": "Shared Vue component library for dpa projects",

package/src/components/UiTShirtSizeIcon/README.md

@@ -0,0 +1,13 @@
+# UiTShirtSizeIcon
+
+## Usage
+
+```vue
+<template>
+  <UiTShirtSizeIcon name="xl" />
+</template>
+
+<script setup>
+import { UiTShirtSizeIcon } from "@dpa-id-components/dpa-shared-components";
+</script>
+```

package/src/components/UiTShirtSizeIcon/UiTShirtSizeIcon.vue

@@ -0,0 +1,42 @@
+<template>
+  <component
+    :is="iconComponent"
+    class="inline-flex"
+    :class="
+      {
+        xs: 'size-3',
+        sm: 'size-4',
+        md: 'size-5',
+        lg: 'size-6',
+        xl: 'size-10',
+        '2xl': 'size-14',
+      }[size]
+    "
+  />
+</template>
+
+<script lang="ts">
+export type UiTShirtSizeIconName = keyof typeof icons;
+</script>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
+
+import { icons } from "./icons.ts";
+import UiTShirtSizeIconLoading from "./UiTShirtSizeIconLoading.vue";
+
+const { name, size = "lg" } = defineProps<{
+  name: UiTShirtSizeIconName;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+}>();
+
+const iconComponent = computed(() =>
+  defineAsyncComponent({
+    loader: icons[name],
+    // Render a substitute element while loading for classes to attach to.
+    loadingComponent: UiTShirtSizeIconLoading,
+    // Immediately render the loadingComponent so that it can receive classes.
+    delay: 0,
+  }),
+);
+</script>

package/src/components/UiTShirtSizeIcon/UiTShirtSizeIconLoading.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  ></svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons/l.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M5.78906 12V4H7.23828V10.7852H10.7617V12H5.78906Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons/m.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M3.78906 4H5.5625L7.9375 9.79687H8.03125L10.4063 4H12.1797V12H10.7891V6.50391H10.7148L8.50391 11.9766H7.46484L5.25391 6.49219H5.17969V12H3.78906V4Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons/xl.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M4.76278 4.81818L6.00941 6.92507H6.05771L7.31037 4.81818H8.7864L6.89986 7.90909L8.82866 11H7.32546L6.05771 8.89009H6.00941L4.74165 11H3.2445L5.17933 7.90909L3.28072 4.81818H4.76278ZM9.61346 11V4.81818H10.9205V9.92241H13.5707V11H9.61346Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/UiTShirtSizeIcon/icons.ts

@@ -0,0 +1,5 @@
+export const icons = {
+  m: () => import("./icons/m.vue"),
+  l: () => import("./icons/l.vue"),
+  xl: () => import("./icons/xl.vue"),
+} as const;