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

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

@@ -1,24 +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>
+<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;
-}>();
+  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

@@ -1,31 +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>
+<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;
-}>();
+  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

@@ -1,11 +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 CircleDotsIcon } from "./CircleDotsIcon.vue";
-export { default as CrossSignIcon } from "./CrossSignIcon.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 SettingsBoltIcon } from "./SettingsBoltIcon.vue";
+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/vc-icon.vue

@@ -1,79 +1,82 @@
-<template>
-  <component
-    :is="isCustomIcon ? icon : '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 } 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 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 {
-  @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>
+<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-image/vc-image.vue

@@ -57,9 +57,25 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+function ensureHttps(url: string): string {
+  if (!url) return url;
+
+  try {
+    const urlObject = new URL(url);
+    if (urlObject.protocol === "http:" && window.location.protocol === "https:") {
+      urlObject.protocol = "https:";
+      return urlObject.href;
+    }
+  } catch (e) {
+    console.warn("Invalid URL:", url);
+  }
+  return url;
+}
+
 const imageHandler = computed(() => {
   if (props.src) {
-    return `background: url(${CSS.escape(props.src)}) center / ${props.background} no-repeat`;
+    const secureUrl = ensureHttps(props.src);
+    return `background: url(${CSS.escape(secureUrl)}) center / ${props.background} no-repeat`;
   }
   return undefined;
 });

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";

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

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