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

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

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

@@ -1,159 +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-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>
+<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[];
+    };
+  };
+};