@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/ui/components/atoms/vc-icon/icons/ArrowRightIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10" fill="none" :width="width" :height="height">
+  <path d="M1 5H11M11 5L7 1M11 5L7 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>  
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/BellIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 20" fill="none" :width="width" :height="height">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.25178 3.30157C5.55825 4.09224 5.16667 5.23859 5.16667 6.60195V8.33529C5.16667 9.19582 4.77938 9.91075 4.36882 10.4555C3.99335 10.9537 3.52576 11.4009 3.15857 11.7522C3.12774 11.7817 3.09761 11.8105 3.06831 11.8386C2.72481 12.1681 2.5 12.6156 2.5 13.1353C2.5 13.6605 2.89364 14.002 3.27778 14.002H15.7222C16.1064 14.002 16.5 13.6605 16.5 13.1353C16.5 12.6156 16.2752 12.1681 15.9317 11.8386C15.9024 11.8105 15.8723 11.7817 15.8414 11.7522C15.4742 11.4009 15.0066 10.9536 14.6312 10.4555C14.2206 9.91075 13.8333 9.19582 13.8333 8.33529V6.60195C13.8333 5.23859 13.4417 4.09224 12.7482 3.30157C12.0713 2.52978 11.0251 2.00195 9.5 2.00195C7.97494 2.00195 6.92875 2.52978 6.25178 3.30157ZM4.74822 1.98274C5.84903 0.727732 7.4695 0.00195312 9.5 0.00195312C11.5305 0.00195312 13.151 0.727732 14.2518 1.98274C15.336 3.21887 15.8333 4.87252 15.8333 6.60195V8.33529C15.8333 8.57932 15.9428 8.87289 16.2283 9.2517C16.502 9.61482 16.8573 9.95538 17.2498 10.3316C17.2718 10.3527 17.294 10.374 17.3163 10.3954C18 11.0513 18.5 12.0016 18.5 13.1353C18.5 14.672 17.3018 16.002 15.7222 16.002H3.27778C1.69824 16.002 0.5 14.672 0.5 13.1353C0.5 12.0016 0.999968 11.0513 1.68372 10.3954C1.706 10.374 1.72817 10.3527 1.75022 10.3316C2.1427 9.95539 2.49798 9.61482 2.77166 9.25171C3.05716 8.8729 3.16667 8.57932 3.16667 8.33529V6.60195C3.16667 4.87252 3.66397 3.21887 4.74822 1.98274Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.94301 17.1715C7.4017 16.8639 8.02291 16.9864 8.33051 17.4451C8.4299 17.5933 8.5843 17.7331 8.79191 17.8365C8.99975 17.9401 9.24442 17.9985 9.49998 17.9985C9.75554 17.9985 10.0002 17.9401 10.2081 17.8365C10.4157 17.7331 10.5701 17.5933 10.6694 17.4451C10.9771 16.9864 11.5983 16.8639 12.057 17.1715C12.5156 17.4791 12.6381 18.1003 12.3305 18.559C12.0234 19.017 11.5943 19.3803 11.0999 19.6266C10.6058 19.8729 10.0545 19.9985 9.49998 19.9985C8.94542 19.9985 8.39418 19.8729 7.90002 19.6266C7.40562 19.3803 6.97656 19.017 6.66945 18.559C6.36184 18.1003 6.48432 17.4791 6.94301 17.1715Z" fill="currentColor"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronDownIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M14 7L9.5 11.5L5 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronLeftIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 11" fill="none" :width="width" :height="height">
+<path d="M5 9.5L1 5.5L5 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronRightIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 11" fill="none" :width="width" :height="height">
+  <path d="M1 1.5L5 5.5L1 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ChevronUpIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M5 11.5L9.5 7L14 11.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/CircleDotsIcon.vue

@@ -0,0 +1,16 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2Z" fill="#737373"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6998 6.0002C8.6998 6.71817 9.28183 7.3002 9.9998 7.3002C10.7178 7.3002 11.2998 6.71817 11.2998 6.0002C11.2998 5.28223 10.7178 4.7002 9.9998 4.7002C9.28183 4.7002 8.6998 5.28222 8.6998 6.0002Z" fill="#737373"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6998 14.0002C8.6998 14.7182 9.28183 15.3002 9.9998 15.3002C10.7178 15.3002 11.2998 14.7182 11.2998 14.0002C11.2998 13.2822 10.7178 12.7002 9.9998 12.7002C9.28183 12.7002 8.6998 13.2822 8.6998 14.0002Z" fill="#737373"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6998 10.0002C8.6998 10.7182 9.28183 11.3002 9.9998 11.3002C10.7178 11.3002 11.2998 10.7182 11.2998 10.0002C11.2998 9.28223 10.7178 8.7002 9.9998 8.7002C9.28183 8.7002 8.6998 9.28222 8.6998 10.0002Z" fill="#737373"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/CrossSignIcon.vue

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
+  <path
+    d="M11 11L6.00001 6.00001M6.00001 6.00001L1 1M6.00001 6.00001L11 1M6.00001 6.00001L1 11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/DoubleArrowLeftIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M11 9L7 5L11 1M5 9L1 5L5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/DoubleArrowRightIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M7 1L11 5L7 9M1 1L5 5L1 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/LogoutIcon.vue

@@ -0,0 +1,13 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M9 12L12 9M12 9L9 6M12 9H1M1 4.24802V4.2002C1 3.08009 1 2.51962 1.21799 2.0918C1.40973 1.71547 1.71547 1.40973 2.0918 1.21799C2.51962 1 3.08009 1 4.2002 1H13.8002C14.9203 1 15.4796 1 15.9074 1.21799C16.2837 1.40973 16.5905 1.71547 16.7822 2.0918C17 2.5192 17 3.07899 17 4.19691V13.8036C17 14.9215 17 15.4805 16.7822 15.9079C16.5905 16.2842 16.2837 16.5905 15.9074 16.7822C15.48 17 14.921 17 13.8031 17H4.19691C3.07899 17 2.5192 17 2.0918 16.7822C1.71547 16.5905 1.40973 16.2839 1.21799 15.9076C1 15.4798 1 14.9201 1 13.8V13.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/MenuBurgerIcon.vue

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
+  <path
+    d="M6 11H11M1 6H11M1 1H11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/MinusSignIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M4.5 9H13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/PlusSignIcon.vue

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path
+    d="M4.5 9H9M9 9H13.5M9 9V13.5M9 9V4.5"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/SearchIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M13 13L19 19M8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/SettingsBoltIcon.vue

@@ -0,0 +1,21 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none" :width="width" :height="height">
+<path d="M11.6006 20.0761L17.0608 16.9236C17.6437 16.5871 17.9346 16.4188 18.1465 16.1834C18.3341 15.9751 18.4759 15.7297 18.5625 15.4632C18.6602 15.1626 18.6602 14.8267 18.6602 14.1568V7.84268C18.6602 7.17277 18.6602 6.83694 18.5625 6.53638C18.4759 6.26982 18.3341 6.02428 18.1465 5.816C17.9355 5.58161 17.6453 5.41405 17.0674 5.08043L11.5996 1.92359C11.0167 1.58706 10.7259 1.41913 10.416 1.35328C10.1419 1.295 9.85843 1.295 9.58427 1.35328C9.27443 1.41914 8.98259 1.58706 8.39971 1.92359L2.93843 5.07666C2.35623 5.41279 2.06535 5.58073 1.85352 5.816C1.66597 6.02428 1.52434 6.26982 1.43773 6.53638C1.33984 6.83765 1.33984 7.17436 1.33984 7.84742V14.1524C1.33984 14.8254 1.33984 15.1619 1.43773 15.4632C1.52434 15.7297 1.66597 15.9751 1.85352 16.1834C2.06548 16.4188 2.35657 16.5871 2.93945 16.9236L8.39971 20.0761C8.98258 20.4126 9.27443 20.5806 9.58427 20.6465C9.85843 20.7047 10.1419 20.7047 10.416 20.6465C10.7259 20.5806 11.0177 20.4126 11.6006 20.0761Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M7 10.9998C7 12.6566 8.34315 13.9998 10 13.9998C11.6569 13.9998 13 12.6566 13 10.9998C13 9.34291 11.6569 7.99976 10 7.99976C8.34315 7.99976 7 9.34291 7 10.9998Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/VertDotsIcon.vue

@@ -0,0 +1,19 @@
+
+<template>
+<svg viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M1 14C1 14.5523 1.44772 15 2 15C2.55228 15 3 14.5523 3 14C3 13.4477 2.55228 13 2 13C1.44772 13 1 13.4477 1 14Z" fill="currentColor"/>
+<path d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8C3 7.44772 2.55228 7 2 7C1.44772 7 1 7.44772 1 8Z" fill="currentColor"/>
+<path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" fill="currentColor"/>
+<path d="M1 14C1 14.5523 1.44772 15 2 15C2.55228 15 3 14.5523 3 14C3 13.4477 2.55228 13 2 13C1.44772 13 1 13.4477 1 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8C3 7.44772 2.55228 7 2 7C1.44772 7 1 7.44772 1 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/index.ts

@@ -0,0 +1,19 @@
+export { default as AppWindowIcon } from "./AppWindowIcon.vue"
+export { default as ArrowLeftIcon } from "./ArrowLeftIcon.vue"
+export { default as ArrowRightIcon } from "./ArrowRightIcon.vue"
+export { default as BellIcon } from "./BellIcon.vue"
+export { default as ChevronDownIcon } from "./ChevronDownIcon.vue"
+export { default as ChevronLeftIcon } from "./ChevronLeftIcon.vue"
+export { default as ChevronRightIcon } from "./ChevronRightIcon.vue"
+export { default as ChevronUpIcon } from "./ChevronUpIcon.vue"
+export { default as CircleDotsIcon } from "./CircleDotsIcon.vue"
+export { default as CrossSignIcon } from "./CrossSignIcon.vue"
+export { default as DoubleArrowLeftIcon } from "./DoubleArrowLeftIcon.vue"
+export { default as DoubleArrowRightIcon } from "./DoubleArrowRightIcon.vue"
+export { default as LogoutIcon } from "./LogoutIcon.vue"
+export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue"
+export { default as MinusSignIcon } from "./MinusSignIcon.vue"
+export { default as PlusSignIcon } from "./PlusSignIcon.vue"
+export { default as SearchIcon } from "./SearchIcon.vue"
+export { default as SettingsBoltIcon } from "./SettingsBoltIcon.vue"
+export { default as VertDotsIcon } from "./VertDotsIcon.vue"

package/ui/components/atoms/vc-icon/index.ts

@@ -1 +1,2 @@
 export { default as VcIcon } from "./vc-icon.vue";
+export * from "./icons";

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -1,49 +1,82 @@
-<template>
-  <i :class="[`vc-icon vc-icon_${size} ${(icon as string).toLowerCase()}`, variant ? `vc-icon_${variant}` : '']" />
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  icon?: string;
-  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-  variant?: "warning" | "danger" | "success";
-}
-
-withDefaults(defineProps<Props>(), {
-  icon: "fas fa-square-full",
-  size: "m",
-});
-</script>
-
-<style lang="scss">
-:root {
-  --icon-size-xs: 12px;
-  --icon-size-s: 14px;
-  --icon-size-m: 18px;
-  --icon-size-l: 20px;
-  --icon-size-xl: 22px;
-  --icon-size-xxl: 30px;
-  --icon-size-xxxl: 64px;
-
-  --icon-color-success: var(--success-500);
-  --icon-color-danger: var(--danger-500);
-  --icon-color-warning: var(--warning-500);
-}
-
-$sizes: xs, s, m, l, xl, xxl, xxxl;
-$variants: warning, danger, success;
-
-.vc-icon {
-  @each $size in $sizes {
-    &_#{$size} {
-      @apply tw-text-[length:var(--icon-size-#{$size})];
-    }
-  }
-
-  @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-text-[color:var(--icon-color-#{$variant})];
-    }
-  }
-}
-</style>
+<template>
+  <component
+    :is="isCustomIcon ? safeIcon : 'i'"
+    :class="[
+      'vc-icon',
+      `vc-icon_${size}`,
+      variant ? `vc-icon_${variant}` : '',
+      !isCustomIcon ? (icon as string).toLowerCase() : '',
+    ]"
+    v-bind="isCustomIcon ? { width: iconSize, height: iconSize } : {}"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, markRaw } from "vue";
+import type { Component } from "vue";
+
+export interface Props {
+  icon?: string | Component;
+  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+  variant?: "warning" | "danger" | "success";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: "fas fa-square-full",
+  size: "m",
+});
+
+const isCustomIcon = computed(() => typeof props.icon !== "string");
+
+const safeIcon = computed(() => (typeof props.icon !== "string" ? markRaw(props.icon) : props.icon));
+
+const sizeMap = {
+  xs: 12,
+  s: 14,
+  m: 18,
+  l: 20,
+  xl: 22,
+  xxl: 30,
+  xxxl: 64,
+} as const;
+
+const iconSize = computed(() => sizeMap[props.size]);
+</script>
+
+<style lang="scss">
+:root {
+  --icon-size-xs: 12px;
+  --icon-size-s: 14px;
+  --icon-size-m: 18px;
+  --icon-size-l: 20px;
+  --icon-size-xl: 22px;
+  --icon-size-xxl: 30px;
+  --icon-size-xxxl: 64px;
+
+  --icon-color-success: var(--success-500);
+  --icon-color-danger: var(--danger-500);
+  --icon-color-warning: var(--warning-500);
+}
+
+$sizes: xs, s, m, l, xl, xxl, xxxl;
+$variants: warning, danger, success;
+
+.vc-icon {
+  @apply tw-overflow-visible;
+  @each $size in $sizes {
+    &_#{$size} {
+      @apply tw-text-[length:var(--icon-size-#{$size})];
+    }
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      @apply tw-text-[color:var(--icon-color-#{$variant})];
+
+      :deep(path) {
+        stroke: var(--icon-color-#{$variant});
+      }
+    }
+  }
+}
+</style>

package/ui/components/atoms/vc-image/index.ts

@@ -1 +1 @@
-export { default as VcImage } from "./vc-image.vue";
+export { default as VcImage } from "./vc-image.vue";

package/ui/components/atoms/vc-image/vc-image.stories.ts

@@ -1,85 +1,85 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcImage } from "./";
-
-const ASPECT = ["1x1", "3x2", "4x3", "16x9"];
-const SIZE = ["auto", "xs", "s", "m", "l", "xl", "xxl"];
-const BACKGROUND = ["cover", "contain", "auto"];
-
-export default {
-  title: "atoms/VcImage",
-  component: VcImage,
-  args: {
-    aspect: "1x1",
-    rounded: false,
-    clickable: false,
-    src: "https://picsum.photos/600",
-    size: "auto",
-    background: "cover",
-  },
-  argTypes: {
-    aspect: {
-      control: "radio",
-      options: ASPECT,
-      table: {
-        type: {
-          summary: ASPECT.join(" | "),
-        },
-      },
-    },
-    size: {
-      options: SIZE,
-      control: "radio",
-      table: {
-        type: {
-          summary: SIZE.join(" | "),
-        },
-      },
-    },
-    background: {
-      options: BACKGROUND,
-      control: "radio",
-      table: {
-        type: {
-          summary: BACKGROUND.join(" | "),
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcImage>;
-
-export const Primary: StoryFn<typeof VcImage> = (args) => ({
-  components: { VcImage },
-  setup() {
-    return { args };
-  },
-  template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
-});
-
-export const AllStates: StoryFn<typeof VcImage> = (args) => ({
-  components: { VcImage },
-  setup() {
-    return { args, aspects: ASPECT, sizes: SIZE, backgrounds: BACKGROUND };
-  },
-  template: `
-      <div>
-        <div v-for="aspect in aspects" :key="aspect">
-          <h2 class="tw-font-bold">Aspect: {{aspect}}</h2>
-          <div class="tw-space-x-4 tw-flex tw-flex-row">
-            <div v-for="size in sizes" :key="size" >
-              <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
-              <vc-image v-bind="{...args, aspect, size}"></vc-image>
-            </div>
-          </div>
-        </div>
-        <div>
-          <h2 class="tw-font-bold">Bordered and Rounded</h2>
-          <div class="tw-space-x-4 tw-flex tw-flex-row">
-            <div v-for="size in sizes" :key="size" >
-              <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
-              <vc-image v-bind="{...args, aspect: '1x1', size, bordered: true, rounded: true}"></vc-image>
-            </div>
-          </div>
-        </div>
-      </div>
-    `,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcImage } from "./";
+
+const ASPECT = ["1x1", "3x2", "4x3", "16x9"];
+const SIZE = ["auto", "xs", "s", "m", "l", "xl", "xxl"];
+const BACKGROUND = ["cover", "contain", "auto"];
+
+export default {
+  title: "atoms/VcImage",
+  component: VcImage,
+  args: {
+    aspect: "1x1",
+    rounded: false,
+    clickable: false,
+    src: "https://picsum.photos/600",
+    size: "auto",
+    background: "cover",
+  },
+  argTypes: {
+    aspect: {
+      control: "radio",
+      options: ASPECT,
+      table: {
+        type: {
+          summary: ASPECT.join(" | "),
+        },
+      },
+    },
+    size: {
+      options: SIZE,
+      control: "radio",
+      table: {
+        type: {
+          summary: SIZE.join(" | "),
+        },
+      },
+    },
+    background: {
+      options: BACKGROUND,
+      control: "radio",
+      table: {
+        type: {
+          summary: BACKGROUND.join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcImage>;
+
+export const Primary: StoryFn<typeof VcImage> = (args) => ({
+  components: { VcImage },
+  setup() {
+    return { args };
+  },
+  template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
+});
+
+export const AllStates: StoryFn<typeof VcImage> = (args) => ({
+  components: { VcImage },
+  setup() {
+    return { args, aspects: ASPECT, sizes: SIZE, backgrounds: BACKGROUND };
+  },
+  template: `
+      <div>
+        <div v-for="aspect in aspects" :key="aspect">
+          <h2 class="tw-font-bold">Aspect: {{aspect}}</h2>
+          <div class="tw-space-x-4 tw-flex tw-flex-row">
+            <div v-for="size in sizes" :key="size" >
+              <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
+              <vc-image v-bind="{...args, aspect, size}"></vc-image>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h2 class="tw-font-bold">Bordered and Rounded</h2>
+          <div class="tw-space-x-4 tw-flex tw-flex-row">
+            <div v-for="size in sizes" :key="size" >
+              <h3 class="">Size: <span class="tw-font-bold">{{size}}</span></h3>
+              <vc-image v-bind="{...args, aspect: '1x1', size, bordered: true, rounded: true}"></vc-image>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+});

package/ui/components/atoms/vc-label/index.ts

@@ -1 +1 @@
-export { default as VcLabel } from "./vc-label.vue";
+export { default as VcLabel } from "./vc-label.vue";