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

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

@@ -1,162 +1,159 @@
-<template>
-  <div
-    class="vc-card"
-    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
-  >
-    <div
-      v-if="header"
-      class="vc-card__header"
-      @click="onHeaderClick"
-    >
-      <VcIcon
-        v-if="icon"
-        class="vc-card__icon"
-        :icon="icon"
-        size="xl"
-      ></VcIcon>
-      <div class="vc-card__title">{{ header }}</div>
-      <div
-        v-if="$slots['actions']"
-        class="vc-card__actions"
-      >
-        <slot name="actions"></slot>
-      </div>
-      <VcIcon
-        v-if="isCollapsable"
-        class="vc-card__collapse"
-        :icon="`fas fa-chevron-${isCollapsedInternal ? 'down' : 'up'}`"
-        size="s"
-      ></VcIcon>
-    </div>
-    <transition name="fade">
-      <div
-        v-show="!isCollapsedInternal"
-        :class="[{ 'tw-flex': fill }, 'vc-card__body']"
-      >
-        <slot></slot>
-      </div>
-    </transition>
-  </div>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { VcIcon } from "./../vc-icon";
-import { ref, watch } from "vue";
-
-export interface Props {
-  header?: string;
-  icon?: string;
-  isCollapsable?: boolean;
-  isCollapsed?: boolean;
-  /**
-   * Card content will fill the available space
-   */
-  fill?: boolean;
-  variant?: "default" | "success" | "danger";
-}
-
-export interface Emits {
-  (event: "header:click"): void;
-  (event: "state:collapsed", isCollapsedState: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: "default",
-});
-
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  default: (props?: any) => any;
-  actions: (props?: any) => any;
-}>();
-
-const isCollapsedInternal = ref();
-
-function onHeaderClick() {
-  if (props.isCollapsable) {
-    isCollapsedInternal.value = !isCollapsedInternal.value;
-    emit("state:collapsed", isCollapsedInternal.value);
-  }
-  emit("header:click");
-}
-
-watch(
-  () => props.isCollapsed,
-  (value) => {
-    isCollapsedInternal.value = value;
-  },
-  {
-    immediate: true,
-  },
-);
-</script>
-
-<style lang="scss">
-:root {
-  --card-background: var(--additional-50);
-  --card-border-radius: 6px;
-  --card-box-shadow-color: var(--secondary-600);
-  --card-box-shadow: 1px 1px 7px rgb(from var(--card-box-shadow-color) r g b / 15%);
-  --card-header-background: var(--secondary-50);
-  --card-header-color: var(--secondary-600);
-
-  --card-header-background-success: var(--success-100);
-  --card-header-background-danger: var(--danger-100);
-
-  --card-header-color-success: var(--success-600);
-  --card-header-color-danger: var(--danger-600);
-
-  --card-header-padding-hor: 16px;
-  --card-header-padding-vert: 12px;
-
-  --card-border-color: var(--base-border-color, var(--neutrals-200));
-}
-
-$variants: success, danger;
-
-.vc-card {
-  @apply tw-bg-[color:var(--card-background)] tw-border
-  tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
-  tw-shadow-[var(--card-box-shadow)]
-  tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
-  tw-flex-grow tw-flex tw-flex-col;
-
-  &__header {
-    @apply tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
-  }
-
-  &_collapsable &__header {
-    @apply tw-cursor-pointer;
-  }
-
-  &__title {
-    @apply tw-uppercase tw-flex-grow
-   tw-text-[color:var(--card-header-color)]
-   tw-text-sm tw-font-bold;
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--card-header-color)] tw-mr-3;
-  }
-
-  &__collapse {
-    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
-  }
-
-  &__body {
-    @apply tw-flex-grow tw-box-border tw-flex-col;
-  }
-
-  @each $variant in $variants {
-    &_#{$variant} {
-      .vc-card__header {
-        @apply tw-bg-[color:var(--card-header-background-#{$variant})];
-      }
-      .vc-card__title {
-        @apply tw-text-[color:var(--card-header-color-#{$variant})];
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-card"
+    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
+  >
+    <div
+      v-if="header"
+      class="vc-card__header"
+      @click="onHeaderClick"
+    >
+      <VcIcon
+        v-if="icon"
+        class="vc-card__icon"
+        :icon="icon"
+        size="xl"
+      ></VcIcon>
+      <div class="vc-card__title">{{ header }}</div>
+      <div
+        v-if="$slots['actions']"
+        class="vc-card__actions"
+      >
+        <slot name="actions"></slot>
+      </div>
+      <VcIcon
+        v-if="isCollapsable"
+        class="vc-card__collapse"
+        :icon="`fas fa-chevron-${isCollapsedInternal ? 'down' : 'up'}`"
+        size="s"
+      ></VcIcon>
+    </div>
+    <transition name="fade">
+      <div
+        v-show="!isCollapsedInternal"
+        :class="[{ 'tw-flex': fill }, 'vc-card__body']"
+      >
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { VcIcon } from "./../vc-icon";
+import { ref, watch } from "vue";
+
+export interface Props {
+  header?: string;
+  icon?: string;
+  isCollapsable?: boolean;
+  isCollapsed?: boolean;
+  /**
+   * Card content will fill the available space
+   */
+  fill?: boolean;
+  variant?: "default" | "success" | "danger";
+}
+
+export interface Emits {
+  (event: "header:click"): void;
+  (event: "state:collapsed", isCollapsedState: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+});
+
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  default: (props?: any) => any;
+  actions: (props?: any) => any;
+}>();
+
+const isCollapsedInternal = ref();
+
+function onHeaderClick() {
+  if (props.isCollapsable) {
+    isCollapsedInternal.value = !isCollapsedInternal.value;
+    emit("state:collapsed", isCollapsedInternal.value);
+  }
+  emit("header:click");
+}
+
+watch(
+  () => props.isCollapsed,
+  (value) => {
+    isCollapsedInternal.value = value;
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<style lang="scss">
+:root {
+  --card-background: var(--additional-50);
+  --card-border-radius: 6px;
+  --card-header-background: var(--secondary-50);
+  --card-header-color: var(--base-text-color, var(--secondary-950));
+
+  --card-header-background-success: var(--success-100);
+  --card-header-background-danger: var(--danger-100);
+
+  --card-header-color-success: var(--success-600);
+  --card-header-color-danger: var(--danger-600);
+
+  --card-header-padding-hor: 24px;
+  --card-header-padding-vert: 17px;
+
+  --card-border-color: var(--base-border-color, var(--neutrals-200));
+}
+
+$variants: success, danger;
+
+.vc-card {
+  @apply tw-bg-[color:var(--card-background)] tw-border
+  tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
+  tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
+  tw-flex-grow tw-flex tw-flex-col;
+
+  &__header {
+    @apply tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
+  }
+
+  &_collapsable &__header {
+    @apply tw-cursor-pointer;
+  }
+
+  &__title {
+    @apply tw-normal-case tw-flex-grow
+   tw-text-[color:var(--card-header-color)]
+   tw-text-sm tw-font-bold;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--card-header-color)] tw-mr-3;
+  }
+
+  &__collapse {
+    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
+  }
+
+  &__body {
+    @apply tw-flex-grow tw-box-border tw-flex-col;
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      .vc-card__header {
+        @apply tw-bg-[color:var(--card-header-background-#{$variant})];
+      }
+      .vc-card__title {
+        @apply tw-text-[color:var(--card-header-color-#{$variant})];
+      }
+    }
+  }
+}
+</style>

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

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

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

@@ -1,22 +1,22 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcCol } from "./";
-import { VcRow } from "./../vc-row";
-import { VcImage } from "./../../";
-
-export default {
-  title: "atoms/VcCol",
-  component: VcCol,
-} satisfies Meta<typeof VcCol>;
-
-export const Primary: StoryFn<typeof VcCol> = (args) => ({
-  components: { VcCol, VcImage, VcRow },
-  setup() {
-    return { args };
-  },
-  template: `
-      <vc-col v-bind="args">
-        <vc-image src="https://picsum.photos/200" size="xl"/>
-        <vc-image src="https://picsum.photos/200" size="xl"/>
-        <vc-image src="https://picsum.photos/200" size="xl"/>
-      </vc-col>`,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcCol } from "./";
+import { VcRow } from "./../vc-row";
+import { VcImage } from "./../../";
+
+export default {
+  title: "atoms/VcCol",
+  component: VcCol,
+} satisfies Meta<typeof VcCol>;
+
+export const Primary: StoryFn<typeof VcCol> = (args) => ({
+  components: { VcCol, VcImage, VcRow },
+  setup() {
+    return { args };
+  },
+  template: `
+      <vc-col v-bind="args">
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+        <vc-image src="https://picsum.photos/200" size="xl"/>
+      </vc-col>`,
+});

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

@@ -1,29 +1,29 @@
-<template>
-  <div
-    class="vc-col"
-    :style="{ flexGrow: size }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  size?: number;
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 1,
-});
-
-defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: (props: any) => any;
-}>();
-</script>
-
-<style lang="scss">
-.vc-col {
-  @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
-}
-</style>
+<template>
+  <div
+    class="vc-col"
+    :style="{ flexGrow: size }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  size?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 1,
+});
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
+</script>
+
+<style lang="scss">
+.vc-col {
+  @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
+}
+</style>

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

@@ -1,10 +1,10 @@
-import { VNode } from "vue";
-import _Container from "./vc-container.vue";
-
-export const VcContainer = _Container as typeof _Container & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import { VNode } from "vue";
+import _Container from "./vc-container.vue";
+
+export const VcContainer = _Container as typeof _Container & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { VcContainer } from "./";
-
-const meta: Meta<typeof VcContainer> = {
-  title: "atoms/VcContainer",
-  component: VcContainer,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcContainer>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcContainer },
-    setup() {
-      return { args };
-    },
-    template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
-    <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
-    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
-    <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
-    <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
-  </vc-container></div>`,
-  }),
-  args: {
-    shadow: false,
-  },
-};
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcContainer } from "./";
+
+const meta: Meta<typeof VcContainer> = {
+  title: "atoms/VcContainer",
+  component: VcContainer,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcContainer>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcContainer },
+    setup() {
+      return { args };
+    },
+    template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
+    <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
+    <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
+    <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
+  </vc-container></div>`,
+  }),
+  args: {
+    shadow: false,
+  },
+};

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

@@ -1,10 +1,10 @@
-import _Hint from "./vc-hint.vue";
-import { VNode } from "vue";
-
-export const VcHint = _Hint as typeof _Hint & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import _Hint from "./vc-hint.vue";
+import { VNode } from "vue";
+
+export const VcHint = _Hint as typeof _Hint & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -1,23 +1,23 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcHint } from "./";
-
-export default {
-  title: "atoms/VcHint",
-  component: VcHint,
-  args: {
-    default: "This is a hint",
-  },
-  argTypes: {
-    default: {
-      control: "text",
-    },
-  },
-} satisfies Meta<typeof VcHint>;
-
-export const Primary: StoryFn<typeof VcHint> = (args) => ({
-  components: { VcHint },
-  setup() {
-    return { args };
-  },
-  template: '<vc-hint v-bind="args">{{args.default}}</vc-hint>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcHint } from "./";
+
+export default {
+  title: "atoms/VcHint",
+  component: VcHint,
+  args: {
+    default: "This is a hint",
+  },
+  argTypes: {
+    default: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcHint>;
+
+export const Primary: StoryFn<typeof VcHint> = (args) => ({
+  components: { VcHint },
+  setup() {
+    return { args };
+  },
+  template: '<vc-hint v-bind="args">{{args.default}}</vc-hint>',
+});

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

@@ -1,17 +1,17 @@
-<template>
-  <div class="vc-hint">
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss">
-:root {
-  --hint-color: var(--neutrals-500);
-  --hint-font-size: 12px;
-}
-
-.vc-hint {
-  color: var(--hint-color);
-  font-size: var(--hint-font-size);
-}
-</style>
+<template>
+  <div class="vc-hint">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+:root {
+  --hint-color: var(--neutrals-500);
+  --hint-font-size: 12px;
+}
+
+.vc-hint {
+  color: var(--hint-color);
+  font-size: var(--hint-font-size);
+}
+</style>

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

@@ -0,0 +1,15 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+<path d="M3.3335 6.00033V14.0003C3.3335 14.9337 3.3335 15.4002 3.51515 15.7567C3.67494 16.0703 3.92972 16.3256 4.24333 16.4854C4.5995 16.6668 5.06599 16.6668 5.99759 16.6668H14.0027C14.9343 16.6668 15.4002 16.6668 15.7563 16.4854C16.0699 16.3256 16.3256 16.0703 16.4854 15.7567C16.6668 15.4006 16.6668 14.9347 16.6668 14.0031V5.99759C16.6668 5.06599 16.6668 4.5995 16.4854 4.24333C16.3256 3.92972 16.0699 3.67494 15.7563 3.51515C15.3998 3.3335 14.9337 3.3335 14.0003 3.3335H6.00033C5.0669 3.3335 4.59985 3.3335 4.24333 3.51515C3.92972 3.67494 3.67494 3.92972 3.51515 4.24333C3.3335 4.59985 3.3335 5.0669 3.3335 6.00033Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="4.1665" y1="8.1665" x2="15.8332" y2="8.1665" stroke="currentColor" stroke-width="2"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

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

@@ -0,0 +1,20 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10" fill="none" :width="width" :height="height">
+  <path
+    d="M11 5H1M1 5L5 9M1 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>