@vc-shell/framework 1.0.327 → 1.0.328-0

package/shared/utilities/assets.ts

@@ -1,42 +1,42 @@
-const fileThumbnails = [
-  { image: "fas fa-file-pdf", extensions: ["pdf"] },
-  { image: "fas fa-file-word", extensions: ["doc", "docx"] },
-  { image: "fas fa-file-excel", extensions: ["xls", "xlsx"] },
-  { image: "fas fa-file-powerpoint", extensions: ["ppt", "pptx"] },
-  { image: "fas fa-file-csv", extensions: ["csv"] },
-  { image: "fas fa-file-archive", extensions: ["zip"] },
-  { image: "fas fa-file-music", extensions: ["mp3", "aac"] },
-  { image: "fas fa-file-video", extensions: ["mp4", "avi"] },
-];
-
-const imageExtensions = new Set(["png", "jpg", "jpeg", "svg", "gif"]);
-
-function getExtension(fileName: string) {
-  return fileName.split(".").pop()?.toLowerCase();
-}
-
-function isImage(name: string | undefined) {
-  if (!name) return false;
-  return imageExtensions.has(getExtension(name) ?? "");
-}
-
-function getFileThumbnail(name: string | undefined) {
-  if (!name) return "fas fa-file";
-  return (
-    fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image || "fas fa-file"
-  );
-}
-
-function readableSize(bytes: number | undefined, decimals = 2) {
-  if (!bytes) return "0 Bytes";
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-
-export { isImage, getFileThumbnail, readableSize };
+const fileThumbnails = [
+  { image: "fas fa-file-pdf", extensions: ["pdf"] },
+  { image: "fas fa-file-word", extensions: ["doc", "docx"] },
+  { image: "fas fa-file-excel", extensions: ["xls", "xlsx"] },
+  { image: "fas fa-file-powerpoint", extensions: ["ppt", "pptx"] },
+  { image: "fas fa-file-csv", extensions: ["csv"] },
+  { image: "fas fa-file-archive", extensions: ["zip"] },
+  { image: "fas fa-file-music", extensions: ["mp3", "aac"] },
+  { image: "fas fa-file-video", extensions: ["mp4", "avi"] },
+];
+
+const imageExtensions = new Set(["png", "jpg", "jpeg", "svg", "gif"]);
+
+function getExtension(fileName: string) {
+  return fileName.split(".").pop()?.toLowerCase();
+}
+
+function isImage(name: string | undefined) {
+  if (!name) return false;
+  return imageExtensions.has(getExtension(name) ?? "");
+}
+
+function getFileThumbnail(name: string | undefined) {
+  if (!name) return "fas fa-file";
+  return (
+    fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image || "fas fa-file"
+  );
+}
+
+function readableSize(bytes: number | undefined, decimals = 2) {
+  if (!bytes) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+
+export { isImage, getFileThumbnail, readableSize };

package/shared/utilities/vueUtils.ts

@@ -1,50 +1,50 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-types */
-
-import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
-
-type RemoveOnVnodePrefix<T> = {
-  [K in keyof T as K extends `onVnode${string}`
-    ? never
-    : K extends `on${infer Event}`
-      ? Uncapitalize<`on${Event}`>
-      : K]: T[K];
-};
-
-type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;
-
-export type ComponentProps<T> = T extends new () => { $props: infer P }
-  ? NonNullable<P>
-  : T extends (props: infer P, ...args: any) => any
-    ? P
-    : {};
-
-export type ComponentSlots<T> = T extends (...args: any) => any
-  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
-    ? NonNullable<Slots>
-    : {}
-  : T extends new () => { $slots: infer S }
-    ? NonNullable<S>
-    : {};
-
-export type ComponentEmit<T> = T extends (...args: any) => any
-  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
-    ? EmitsExtractor<Props>
-    : {}
-  : T extends new () => { $props: infer Props }
-    ? EmitsExtractor<Props>
-    : never;
-
-export type ComponentPublicInstanceConstructor<
-  T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
-  Props = any,
-  RawBindings = any,
-  D = any,
-  C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions,
-> = {
-  __isFragment?: never;
-  __isTeleport?: never;
-  __isSuspense?: never;
-  new (...args: any[]): T;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
+
+type RemoveOnVnodePrefix<T> = {
+  [K in keyof T as K extends `onVnode${string}`
+    ? never
+    : K extends `on${infer Event}`
+      ? Uncapitalize<`on${Event}`>
+      : K]: T[K];
+};
+
+type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;
+
+export type ComponentProps<T> = T extends new () => { $props: infer P }
+  ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any
+    ? P
+    : {};
+
+export type ComponentSlots<T> = T extends (...args: any) => any
+  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
+    ? NonNullable<Slots>
+    : {}
+  : T extends new () => { $slots: infer S }
+    ? NonNullable<S>
+    : {};
+
+export type ComponentEmit<T> = T extends (...args: any) => any
+  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
+    ? EmitsExtractor<Props>
+    : {}
+  : T extends new () => { $props: infer Props }
+    ? EmitsExtractor<Props>
+    : never;
+
+export type ComponentPublicInstanceConstructor<
+  T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
+  Props = any,
+  RawBindings = any,
+  D = any,
+  C extends ComputedOptions = ComputedOptions,
+  M extends MethodOptions = MethodOptions,
+> = {
+  __isFragment?: never;
+  __isTeleport?: never;
+  __isSuspense?: never;
+  new (...args: any[]): T;
+};

package/tailwind.config.ts

@@ -1,126 +1,126 @@
-/** @type { import('tailwindcss').Config } */
-
-export const content = [
-  "../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}",
-  "./ui/components/**/*.{vue,js,ts,jsx,tsx}",
-  "./shared/**/*.{vue,js,ts,jsx,tsx}",
-];
-
-export default {
-  prefix: "tw-",
-  theme: {
-    fontFamily: {
-      roboto: ["Roboto", "sans-serif"],
-    },
-    fontSize: {
-      xxs: [
-        "0.625rem", //10px
-        {
-          lineHeight: "0.75rem", //12px
-        },
-      ],
-      xs: [
-        "0.75rem", //12px
-        {
-          lineHeight: "0.875rem", //14px
-        },
-      ],
-      sm: [
-        "0.875rem", //14px
-        {
-          lineHeight: "1rem", //18px
-        },
-      ],
-      s: [
-        "0.875rem", //14px
-        {
-          lineHeight: "1rem", //18px
-        },
-      ],
-      base: [
-        "1rem", //16px
-        {
-          lineHeight: "1.25rem", //20px
-        },
-      ],
-      lg: [
-        "1.125rem", //18px
-        {
-          lineHeight: "1.375rem", //22px
-        },
-      ],
-      xl: [
-        "1.25rem", //20px
-        {
-          lineHeight: "1.75rem", //28px
-        },
-      ],
-      "2xl": [
-        "1.5rem", //24px
-        {
-          lineHeight: "2rem", //32px
-        },
-      ],
-      "3xl": [
-        "1.875rem", //30px
-        {
-          lineHeight: "2.25rem", //36px
-        },
-      ],
-      "4xl": [
-        "2.25rem", //36px
-        {
-          lineHeight: "2.5rem", //40px
-        },
-      ],
-      "5xl": [
-        "3rem", //48px
-        {
-          lineHeight: "3rem", //48px
-        },
-      ],
-      "6xl": [
-        "3.75rem", //60px
-        {
-          lineHeight: "3.75rem", //60px
-        },
-      ],
-      "7xl": [
-        "4.5rem", //72px
-        {
-          lineHeight: "4.5rem", //72px
-        },
-      ],
-      "8xl": [
-        "6rem", //96px
-        {
-          lineHeight: "6rem", //96px
-        },
-      ],
-    },
-    extend: {
-      keyframes: {
-        loadingMarker: {
-          "50%": { transform: "translateX(96px)" },
-        },
-        loadingMarkers: {
-          "50%": { transform: "translateX(-31px)" },
-        },
-        loadingProgress: {
-          from: {
-            "background-position": "0 0, left",
-          },
-          to: {
-            "background-position": "30px 0, left",
-          },
-        },
-      },
-      animation: {
-        loadingMarker: "loadingMarker 3s infinite",
-        loadingMarkers: "loadingMarkers 3s infinite",
-        loadingProgress: "loadingProgress 1s linear infinite",
-      },
-    },
-  },
-  content,
-};
+/** @type { import('tailwindcss').Config } */
+
+export const content = [
+  "../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}",
+  "./ui/components/**/*.{vue,js,ts,jsx,tsx}",
+  "./shared/**/*.{vue,js,ts,jsx,tsx}",
+];
+
+export default {
+  prefix: "tw-",
+  theme: {
+    fontFamily: {
+      jakarta: ["Plus Jakarta Sans", "sans-serif"],
+    },
+    fontSize: {
+      xxs: [
+        "0.625rem", //10px
+        {
+          lineHeight: "0.75rem", //12px
+        },
+      ],
+      xs: [
+        "0.75rem", //12px
+        {
+          lineHeight: "0.875rem", //14px
+        },
+      ],
+      sm: [
+        "0.875rem", //14px
+        {
+          lineHeight: "1rem", //18px
+        },
+      ],
+      s: [
+        "0.875rem", //14px
+        {
+          lineHeight: "1rem", //18px
+        },
+      ],
+      base: [
+        "1rem", //16px
+        {
+          lineHeight: "1.25rem", //20px
+        },
+      ],
+      lg: [
+        "1.125rem", //18px
+        {
+          lineHeight: "1.375rem", //22px
+        },
+      ],
+      xl: [
+        "1.25rem", //20px
+        {
+          lineHeight: "1.75rem", //28px
+        },
+      ],
+      "2xl": [
+        "1.5rem", //24px
+        {
+          lineHeight: "2rem", //32px
+        },
+      ],
+      "3xl": [
+        "1.875rem", //30px
+        {
+          lineHeight: "2.25rem", //36px
+        },
+      ],
+      "4xl": [
+        "2.25rem", //36px
+        {
+          lineHeight: "2.5rem", //40px
+        },
+      ],
+      "5xl": [
+        "3rem", //48px
+        {
+          lineHeight: "3rem", //48px
+        },
+      ],
+      "6xl": [
+        "3.75rem", //60px
+        {
+          lineHeight: "3.75rem", //60px
+        },
+      ],
+      "7xl": [
+        "4.5rem", //72px
+        {
+          lineHeight: "4.5rem", //72px
+        },
+      ],
+      "8xl": [
+        "6rem", //96px
+        {
+          lineHeight: "6rem", //96px
+        },
+      ],
+    },
+    extend: {
+      keyframes: {
+        loadingMarker: {
+          "50%": { transform: "translateX(96px)" },
+        },
+        loadingMarkers: {
+          "50%": { transform: "translateX(-31px)" },
+        },
+        loadingProgress: {
+          from: {
+            "background-position": "0 0, left",
+          },
+          to: {
+            "background-position": "30px 0, left",
+          },
+        },
+      },
+      animation: {
+        loadingMarker: "loadingMarker 3s infinite",
+        loadingMarkers: "loadingMarkers 3s infinite",
+        loadingProgress: "loadingProgress 1s linear infinite",
+      },
+    },
+  },
+  content,
+};

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

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

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

@@ -1,53 +1,53 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import VcBadge from "./vc-badge.vue";
-
-export default {
-  title: "atoms/VcBadge",
-  component: VcBadge,
-  args: {
-    content: "42",
-  },
-  argTypes: {
-    content: {
-      control: "text",
-    },
-    active: {
-      control: "boolean",
-      type: {
-        name: "boolean",
-        required: false,
-      },
-    },
-    disabled: {
-      control: "boolean",
-      type: {
-        name: "boolean",
-        required: false,
-      },
-    },
-    clickable: {
-      control: "boolean",
-      type: {
-        name: "boolean",
-        required: false,
-      },
-    },
-  },
-} satisfies Meta<typeof VcBadge>;
-
-const Template: StoryFn<typeof VcBadge> = (args) => ({
-  components: { VcBadge },
-  setup: () => ({ args }),
-  template: `<VcBadge v-bind="args"></VcBadge>`,
-});
-
-export const Basic = Template.bind({});
-
-export const Active = Template.bind({});
-Active.args = { active: true };
-
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-
-export const Clickable = Template.bind({});
-Clickable.args = { clickable: true };
+import type { Meta, StoryFn } from "@storybook/vue3";
+import VcBadge from "./vc-badge.vue";
+
+export default {
+  title: "atoms/VcBadge",
+  component: VcBadge,
+  args: {
+    content: "42",
+  },
+  argTypes: {
+    content: {
+      control: "text",
+    },
+    active: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+    disabled: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+    clickable: {
+      control: "boolean",
+      type: {
+        name: "boolean",
+        required: false,
+      },
+    },
+  },
+} satisfies Meta<typeof VcBadge>;
+
+const Template: StoryFn<typeof VcBadge> = (args) => ({
+  components: { VcBadge },
+  setup: () => ({ args }),
+  template: `<VcBadge v-bind="args"></VcBadge>`,
+});
+
+export const Basic = Template.bind({});
+
+export const Active = Template.bind({});
+Active.args = { active: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Clickable = Template.bind({});
+Clickable.args = { clickable: true };

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

@@ -61,33 +61,33 @@ function onClick(): void {
 
 <style lang="scss">
 :root {
-  --badge-background-color: var(--additional-50);
+  --badge-background-color: var(--accent-500);
   --badge-background-color-hover: var(--neutrals-200);
   --badge-background-color-active: var(--neutrals-200);
   --badge-background-color-disabled: var(--neutrals-300);
 
-  --badge-text-color: var(--neutrals-700);
+  --badge-text-color: var(--additional-50);
   --badge-text-color-hover: var(--neutrals-800);
   --badge-text-color-active: var(--neutrals-800);
   --badge-text-color-disabled: var(--neutrals-500);
 
   --badge-border-radius: 9999px;
 
-  --badge-border-color: var(--primary-400);
+  --badge-border-color: var(--additional-50);
   --badge-border-color-hover: var(--primary-300);
   --badge-border-color-active: var(--primary-300);
   --badge-border-color-disabled: var(--primary-200);
 
-  --badge-width-small: 18px;
-  --badge-width-medium: 18px;
+  --badge-width-small: 16px;
+  --badge-width-medium: 16px;
 
   --badge-padding-small: 0px 4px;
   --badge-padding-medium: 0 4px;
 
-  --badge-distance-top-small: -10px;
-  --badge-distance-right-small: -6px;
+  --badge-distance-top-small: -8px;
+  --badge-distance-right-small: -10px;
 
-  --badge-distance-top-medium: -10px;
+  --badge-distance-top-medium: -8px;
   --badge-distance-right-medium: -10px;
 }
 
@@ -101,6 +101,7 @@ $sizes: small, medium;
         padding: var(--badge-padding-#{$size});
         top: var(--badge-distance-top-#{$size});
         right: var(--badge-distance-right-#{$size});
+        width: 100%;
         @apply tw-text-xs tw-leading-snug;
       }
     }
@@ -112,7 +113,7 @@ $sizes: small, medium;
 }
 
 .vc-badge__badge {
-  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-semibold tw-text-xxs tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
 }
 
 .vc-badge__badge--active {

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

@@ -20,10 +20,10 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, type Component } from "vue";
 import { VcIcon } from "./../vc-icon";
 export interface Props {
-  icon?: string;
+  icon?: string | Component;
   iconClass?: string;
   iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
   variant?: "primary" | "warning" | "danger";

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

@@ -1,3 +1,3 @@
-import _Card from "./vc-card.vue";
-
-export const VcCard = _Card as typeof _Card;
+import _Card from "./vc-card.vue";
+
+export const VcCard = _Card as typeof _Card;