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

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;
 });
@@ -82,7 +98,7 @@ function onClick(): void {
   --image-size-xxl: 145px;
 
   --image-border-radius: 3px;
-  --image-border-color: var(--base-border-color, var(--neutrals-200));
+  --image-border-color: var(--neutrals-200);
   --image-empty-icon-color: var(--secondary-500);
 }
 

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>`,
+});

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="vc-label">
+  <div
+    class="vc-label"
+    :class="{
+      'vc-label_error': error,
+    }"
+  >
     <div class="vc-label__text">
       <span class="vc-label__content">
         <slot></slot>
@@ -43,6 +48,7 @@ export interface Props {
   tooltipIcon?: string;
   multilanguage?: boolean;
   currentLanguage?: string;
+  error?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -60,6 +66,7 @@ defineSlots<{
   --label-required-color: var(--danger-500);
   --label-tooltip-color: var(--info-400);
   --label-lang-color: var(--neutrals-500);
+  --label-error-color: var(--danger-500);
 }
 
 .vc-label {
@@ -88,5 +95,9 @@ defineSlots<{
   &__language {
     @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-sm;
   }
+
+  &_error &__text {
+    @apply tw-text-[color:var(--label-error-color)];
+  }
 }
 </style>

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

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

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

@@ -1,37 +1,37 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcLink } from "./";
-
-export default {
-  title: "atoms/VcLink",
-  component: VcLink,
-  args: {
-    active: false,
-    disabled: false,
-    default: "This is a link",
-  },
-  argTypes: {
-    default: {
-      control: "text",
-      table: {
-        type: {
-          summary: "text",
-        },
-      },
-    },
-    onClick: {
-      table: {
-        type: {
-          summary: "function",
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcLink>;
-
-export const Primary: StoryFn<typeof VcLink> = (args) => ({
-  components: { VcLink },
-  setup() {
-    return { args };
-  },
-  template: '<vc-link v-bind="args">{{args.default}}</vc-link>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcLink } from "./";
+
+export default {
+  title: "atoms/VcLink",
+  component: VcLink,
+  args: {
+    active: false,
+    disabled: false,
+    default: "This is a link",
+  },
+  argTypes: {
+    default: {
+      control: "text",
+      table: {
+        type: {
+          summary: "text",
+        },
+      },
+    },
+    onClick: {
+      table: {
+        type: {
+          summary: "function",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcLink>;
+
+export const Primary: StoryFn<typeof VcLink> = (args) => ({
+  components: { VcLink },
+  setup() {
+    return { args };
+  },
+  template: '<vc-link v-bind="args">{{args.default}}</vc-link>',
+});

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

@@ -1,54 +1,54 @@
-<template>
-  <div
-    class="vc-link"
-    :class="{
-      'vc-link--active': active,
-      'vc-link--disabled': disabled,
-    }"
-    @click="onClickFn"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  active?: boolean;
-  disabled?: boolean;
-  onClick?: () => void;
-}
-
-export interface Emits {
-  (event: "click"): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-function onClickFn(): void {
-  if (!props.disabled) {
-    emit("click");
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --link-text-color: var(--primary-500);
-  --link-text-color-hover: var(--primary-400);
-  --link-text-color-active: var(--primary-700);
-  --link-text-color-disabled: var(--neutrals-300);
-}
-
-.vc-link {
-  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
-
-  &--active {
-    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
-  }
-
-  &--disabled {
-    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-link"
+    :class="{
+      'vc-link--active': active,
+      'vc-link--disabled': disabled,
+    }"
+    @click="onClickFn"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  active?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+function onClickFn(): void {
+  if (!props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --link-text-color: var(--primary-500);
+  --link-text-color-hover: var(--primary-400);
+  --link-text-color-active: var(--primary-700);
+  --link-text-color-disabled: var(--neutrals-300);
+}
+
+.vc-link {
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+
+  &--active {
+    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
+  }
+
+  &--disabled {
+    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
+  }
+}
+</style>

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

@@ -1,3 +1,3 @@
-import _Loading from "./vc-loading.vue";
-
-export const VcLoading = _Loading as typeof _Loading;
+import _Loading from "./vc-loading.vue";
+
+export const VcLoading = _Loading as typeof _Loading;

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

@@ -1,18 +1,18 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcLoading } from "./";
-
-export default {
-  title: "atoms/VcLoading",
-  component: VcLoading,
-  args: {
-    active: true,
-  },
-} satisfies Meta<typeof VcLoading>;
-
-export const Primary: StoryFn<typeof VcLoading> = (args) => ({
-  components: { VcLoading },
-  setup() {
-    return { args };
-  },
-  template: `<div class="tw-h-20"><vc-loading v-bind="args"></vc-loading></div>`,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcLoading } from "./";
+
+export default {
+  title: "atoms/VcLoading",
+  component: VcLoading,
+  args: {
+    active: true,
+  },
+} satisfies Meta<typeof VcLoading>;
+
+export const Primary: StoryFn<typeof VcLoading> = (args) => ({
+  components: { VcLoading },
+  setup() {
+    return { args };
+  },
+  template: `<div class="tw-h-20"><vc-loading v-bind="args"></vc-loading></div>`,
+});