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

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;

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

@@ -1,102 +1,102 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcCard } from ".";
-import { VcInput, VcCol, VcButton } from "./../../";
-
-const VARIANT = ["default", "success", "danger"];
-
-export default {
-  title: "atoms/VcCard",
-  component: VcCard,
-  args: {
-    header: "Card Title",
-    variant: "default",
-    default: "Text",
-  },
-  argTypes: {
-    default: {
-      control: "radio",
-      options: ["Text", "Component"],
-      mapping: {
-        Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!",
-        Component: VcInput,
-      },
-    },
-    header: { control: "text" },
-    icon: { control: "text" },
-    isCollapsable: { control: "boolean" },
-    isCollapsed: { control: "boolean" },
-    variant: {
-      control: "radio",
-      options: VARIANT,
-      table: {
-        type: {
-          summary: VARIANT.join(" | "),
-        },
-      },
-    },
-    fill: { control: "boolean" },
-  },
-} satisfies Meta<typeof VcCard>;
-
-export const Template: StoryFn<typeof VcCard> = (args) => ({
-  components: { VcCard, VcInput, VcCol },
-  setup() {
-    return { args };
-  },
-  template: `
-    <vc-card v-bind="args">
-      <template v-if="typeof args.default === 'string'">
-        <p class="tw-p-4">{{args.default}}</p>
-      </template>
-      <template v-else>
-        <component class="tw-p-4" :is="args.default" label="Input Field" placeholder="Input some text" />
-      </template>
-
-    </vc-card>`,
-});
-
-export const Header = Template.bind({});
-Header.args = { header: "Card Title" };
-
-export const Icon = Template.bind({});
-Icon.args = { icon: "fas fa-warehouse" };
-
-export const Collapsable = Template.bind({});
-Collapsable.args = { isCollapsable: true };
-
-export const Collapsed = Template.bind({});
-Collapsed.args = { isCollapsable: true, isCollapsed: true };
-
-export const Fill = Template.bind({});
-Fill.args = { fill: true, header: "Card Title" };
-
-export const Actions: StoryFn<typeof VcCard> = (args) => ({
-  components: {
-    VcCard,
-    VcButton,
-  },
-  setup: () => ({ args }),
-  template: `
-      <vc-card  :variant="variant" header="Card Title">
-        <p class="tw-p-4">{{args.default}}</p>
-
-        <template #actions>
-          <VcButton variant="danger">Action button</VcButton>
-        </template>
-      </vc-card>
-    `,
-});
-
-export const Variants: StoryFn<typeof VcCard> = (args) => ({
-  components: {
-    VcCard,
-  },
-  setup: () => ({ variants: VARIANT, args }),
-  template: `
-    <div class="tw-space-x-8 tw-flex tw-flex-row">
-      <vc-card v-for="variant in variants" :variant="variant" header="Card Title">
-        <p class="tw-p-4">{{args.default}}</p>
-      </vc-card>
-    </div>
-    `,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcCard } from ".";
+import { VcInput, VcCol, VcButton } from "./../../";
+
+const VARIANT = ["default", "success", "danger"];
+
+export default {
+  title: "atoms/VcCard",
+  component: VcCard,
+  args: {
+    header: "Card Title",
+    variant: "default",
+    default: "Text",
+  },
+  argTypes: {
+    default: {
+      control: "radio",
+      options: ["Text", "Component"],
+      mapping: {
+        Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!",
+        Component: VcInput,
+      },
+    },
+    header: { control: "text" },
+    icon: { control: "text" },
+    isCollapsable: { control: "boolean" },
+    isCollapsed: { control: "boolean" },
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(" | "),
+        },
+      },
+    },
+    fill: { control: "boolean" },
+  },
+} satisfies Meta<typeof VcCard>;
+
+export const Template: StoryFn<typeof VcCard> = (args) => ({
+  components: { VcCard, VcInput, VcCol },
+  setup() {
+    return { args };
+  },
+  template: `
+    <vc-card v-bind="args">
+      <template v-if="typeof args.default === 'string'">
+        <p class="tw-p-4">{{args.default}}</p>
+      </template>
+      <template v-else>
+        <component class="tw-p-4" :is="args.default" label="Input Field" placeholder="Input some text" />
+      </template>
+
+    </vc-card>`,
+});
+
+export const Header = Template.bind({});
+Header.args = { header: "Card Title" };
+
+export const Icon = Template.bind({});
+Icon.args = { icon: "fas fa-warehouse" };
+
+export const Collapsable = Template.bind({});
+Collapsable.args = { isCollapsable: true };
+
+export const Collapsed = Template.bind({});
+Collapsed.args = { isCollapsable: true, isCollapsed: true };
+
+export const Fill = Template.bind({});
+Fill.args = { fill: true, header: "Card Title" };
+
+export const Actions: StoryFn<typeof VcCard> = (args) => ({
+  components: {
+    VcCard,
+    VcButton,
+  },
+  setup: () => ({ args }),
+  template: `
+      <vc-card  :variant="variant" header="Card Title">
+        <p class="tw-p-4">{{args.default}}</p>
+
+        <template #actions>
+          <VcButton variant="danger">Action button</VcButton>
+        </template>
+      </vc-card>
+    `,
+});
+
+export const Variants: StoryFn<typeof VcCard> = (args) => ({
+  components: {
+    VcCard,
+  },
+  setup: () => ({ variants: VARIANT, args }),
+  template: `
+    <div class="tw-space-x-8 tw-flex tw-flex-row">
+      <vc-card v-for="variant in variants" :variant="variant" header="Card Title">
+        <p class="tw-p-4">{{args.default}}</p>
+      </vc-card>
+    </div>
+    `,
+});