@vc-shell/framework 1.0.181 → 1.0.183

package/ui/components/molecules/vc-slider/vc-slider.stories.ts

@@ -1,48 +1,61 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcSlider } from ".";
 import { VcImage, VcIcon } from "../..";
 
-const meta: Meta<typeof VcSlider> = {
+export default {
   title: "molecules/VcSlider",
   component: VcSlider,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcSlider>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcSlider, VcImage, VcIcon },
-    setup() {
-      return { args };
-    },
-    template:
-      '<div class="tw-flex tw-h-[400px] tw-w-full"><vc-slider v-bind="args" class="tw-w-full"><template v-slot:default="{slide}"><div class="tw-w-10"><vc-image :src="slide.url" size="xl"></vc-image></div></template></vc-slider></div>',
-  }),
   args: {
     navigation: true,
     slidesPerView: "2",
+    overflow: false,
     slides: [
       {
         title: "Title1",
         name: "Name1",
-        url: "https://placekitten.com/200/150",
+        url: "https://picsum.photos/400",
       },
       {
         title: "Title2",
         name: "Name2",
-        url: "https://placekitten.com/200/150",
+        url: "https://picsum.photos/400",
       },
       {
         title: "Title3",
         name: "Name3",
-        url: "https://placekitten.com/200/150",
+        url: "https://picsum.photos/400",
       },
       {
         title: "Title4",
         name: "Name4",
-        url: "https://placekitten.com/200/150",
+        url: "https://picsum.photos/400",
       },
     ],
   },
-};
+  argTypes: {
+    navigation: {
+      control: {
+        type: "boolean",
+      },
+    },
+    slidesPerView: {
+      control: {
+        type: "text",
+      },
+    },
+    slides: {
+      control: {
+        type: "object",
+      },
+    },
+  },
+} satisfies Meta<typeof VcSlider>;
+
+export const Primary: StoryFn<typeof VcSlider> = (args) => ({
+  components: { VcSlider, VcImage, VcIcon },
+  setup() {
+    return { args };
+  },
+  template:
+    '<vc-slider v-bind="args" class="tw-w-full"><template v-slot:default="{slide}"><vc-image :src="slide.url"></vc-image></template></vc-slider>',
+});

package/ui/components/molecules/vc-textarea/vc-textarea.stories.ts

@@ -1,21 +1,53 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcTextarea } from "./";
 
-const meta: Meta<typeof VcTextarea> = {
+export default {
   title: "molecules/VcTextarea",
   component: VcTextarea,
+  args: {
+    placeholder: "Placeholder",
+  },
+} satisfies Meta<typeof VcTextarea>;
+
+export const Primary: StoryFn<typeof VcTextarea> = (args) => ({
+  components: { VcTextarea },
+  setup() {
+    return { args };
+  },
+  template: '<vc-textarea v-bind="args"></vc-textarea>',
+});
+
+export const Label = Primary.bind({});
+Label.args = {
+  label: "Textarea Label",
+};
+
+export const Disabled = Primary.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Error = Primary.bind({});
+Error.args = {
+  errorMessage: "This is an error",
+  error: true,
+};
+
+export const Required = Primary.bind({});
+Required.args = {
+  label: "Textarea Label",
+  required: true,
+};
+
+export const Tooltip = Primary.bind({});
+Tooltip.args = {
+  tooltip: "This is a tooltip",
+  label: "Textarea Label",
 };
 
-export default meta;
-type Story = StoryObj<typeof VcTextarea>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcTextarea },
-    setup() {
-      return { args };
-    },
-    template: '<vc-textarea v-bind="args"></vc-textarea>',
-  }),
-  args: {},
+export const MaximumCharacters = Primary.bind({});
+MaximumCharacters.args = {
+  label: "Textarea Label",
+  maxchars: "10",
+  modelValue: "1234567890",
 };

package/ui/components/organisms/vc-app/vc-app.stories.ts

@@ -1,61 +1,214 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcApp } from "./";
+import { usePopup } from "../../../..";
+import { VcPopup } from "..";
+import { useMenuService } from "../../../../core/composables/useMenuService";
 
-const meta: Meta<typeof VcApp> = {
+export default {
   title: "organisms/VcApp",
   component: VcApp,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcApp>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcApp },
-    setup() {
-      return { args };
-    },
-    template: '<vc-app v-bind="args"></vc-app>',
-  }),
   args: {
-    // menuItems: [
-    //   {
-    //     title: "Dashboard",
-    //     icon: "fas fa-home",
-    //     isVisible: true,
-    //   },
-    //   {
-    //     title: "Orders",
-    //     icon: "fas fa-file-alt",
-    //     isVisible: true,
-    //   },
-    //   {
-    //     title: "Products",
-    //     icon: "fas fa-box-open",
-    //     isVisible: true,
-    //   },
-    //   {
-    //     title: "Offers",
-    //     icon: "fas fa-file-invoice",
-    //     isVisible: true,
-    //   },
-    //   {
-    //     title: "Import",
-    //     icon: "fas fa-file-import",
-    //     isVisible: true,
-    //   },
-    //   {
-    //     title: "Logout",
-    //     icon: "fas fa-sign-out-alt",
-    //   },
-    // ],
-    // toolbarItems: [
-    //   { id: "1", icon: "fas fa-globe", title: "Language selector" },
-    //   { id: "2", icon: "fas fa-bell", title: "Notifications", isAccent: true },
-    // ],
     isReady: true,
-    // isAuthorized: true,
     version: "0.0.100",
+    title: "VC-Shell Application",
     logo: "images/main-logo.svg",
   },
+  decorators: [
+    () => ({
+      template: `
+      <div
+        class="tw-h-[600px]"
+        style="--app-bar-divider-color: #ffffff;">
+        <story/>
+      </div>`,
+    }),
+  ],
+} satisfies Meta<typeof VcApp>;
+
+export const Primary: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { addMenuItem } = useMenuService();
+
+    addMenuItem({
+      title: "SHELL.MENU.DASHBOARD",
+      icon: "fas fa-home",
+      priority: 0,
+      url: "/",
+    });
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args"></vc-app>
+`,
+});
+
+export const CustomAppSwitcherSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #app-switcher>
+      <VcButton>Custom App Switcher</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomAppSwitcherSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `app-switcher` slot to customize the app switcher or to remove it.",
+    },
+  },
+};
+
+export const CustomToolbarSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar="{
+      LanguageSelector,
+      UserDropdownButton,
+      NotificationDropdown
+    }">
+      <div class="tw-flex tw-items-center tw-space-x-4">
+        <component :is="LanguageSelector" />
+        <component :is="UserDropdownButton" />
+        <component :is="NotificationDropdown" />
+
+        <VcButton>Custom Toolbar</VcButton>
+      </div>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomToolbarSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar` slot to customize the toolbar or to remove it.",
+    },
+  },
+};
+
+export const CustomToolbarPrependSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:prepend>
+      <VcButton>Custom Toolbar Prepend</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomToolbarPrependSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar:prepend` slot to prepend content to the toolbar.",
+    },
+  },
+};
+
+export const CustomToolbarLanguageSelectorSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { open } = usePopup({
+      component: VcPopup,
+      props: {
+        title: "Select a language",
+      },
+      slots: {
+        content: "Lorem ipsum dolor",
+      },
+    });
+    return { args, open };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:language-selector>
+      <VcButton @click="open">Click me!</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomToolbarLanguageSelectorSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar:language-selector` slot to customize the language selector or to remove it.",
+    },
+  },
+};
+
+export const CustomNotificationsDropdownSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { open } = usePopup({
+      component: VcPopup,
+      props: {
+        title: "Notifications",
+      },
+      slots: {
+        content: "Lorem ipsum dolor",
+      },
+    });
+    return { args, open };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:notifications-dropdown>
+      <VcButton @click="open">Click me!</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomNotificationsDropdownSlot.parameters = {
+  docs: {
+    description: {
+      story:
+        "You could use the `toolbar:notifications-dropdown` slot to customize the notifications dropdown or to remove it.",
+    },
+  },
+};
+
+export const CustomUserDropdownButtonSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { open } = usePopup({
+      component: VcPopup,
+      props: {
+        title: "User",
+      },
+      slots: {
+        content: "Lorem ipsum dolor",
+      },
+    });
+    return { args, open };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:user-dropdown>
+      <VcButton @click="open">Click me!</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomUserDropdownButtonSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar:user-dropdown` slot to customize the user dropdown button or to remove it.",
+    },
+  },
 };

package/ui/components/organisms/vc-app/vc-app.vue

@@ -8,7 +8,6 @@
     v-else
     class="vc-app tw-flex tw-flex-col tw-w-full tw-h-full tw-box-border tw-m-0 tw-overflow-hidden tw-text-base"
     :class="[
-      `vc-theme_${theme}`,
       {
         'vc-app_touch': $isTouch,
         'vc-app_phone': $isPhone.value,
@@ -27,10 +26,7 @@
       @logo:click="openRoot"
     >
       <template #app-switcher>
-        <slot
-          v-if="!$slots['app-switcher']"
-          name="app-switcher"
-        >
+        <slot name="app-switcher">
           <VcAppSwitcher
             :apps-list="appsList"
             @on-click="switchApp($event)"
@@ -41,26 +37,34 @@
       <!-- Toolbar slot -->
       <template #toolbar>
         <slot
-          v-if="$slots['toolbar:prepend']"
-          name="toolbar:prepend"
-        ></slot>
-        <slot
-          v-if="!$slots['toolbar:language-selector']"
-          name="toolbar:language-selector"
+          name="toolbar"
+          v-bind="{
+            LanguageSelector,
+            UserDropdownButton,
+            NotificationDropdown,
+          }"
         >
-          <LanguageSelector v-if="$isDesktop.value ? $isDesktop.value : $isMobile.value ? route.path === '/' : false" />
-        </slot>
-        <slot name="toolbar:notifications-dropdown">
-          <NotificationDropdown />
-        </slot>
-        <template v-if="$isDesktop.value">
           <slot
-            name="toolbar:user-dropdown"
-            :user-dropdown="UserDropdownButton"
-          >
-            <UserDropdownButton />
+            v-if="$slots['toolbar:prepend']"
+            name="toolbar:prepend"
+          ></slot>
+          <slot name="toolbar:language-selector">
+            <LanguageSelector
+              v-if="$isDesktop.value ? $isDesktop.value : $isMobile.value ? route.path === '/' : false"
+            />
           </slot>
-        </template>
+          <slot name="toolbar:notifications-dropdown">
+            <NotificationDropdown />
+          </slot>
+          <template v-if="$isDesktop.value">
+            <slot
+              name="toolbar:user-dropdown"
+              :user-dropdown="UserDropdownButton"
+            >
+              <UserDropdownButton />
+            </slot>
+          </template>
+        </slot>
       </template>
     </VcAppBar>
 
@@ -116,7 +120,6 @@ export interface Props {
   isReady: boolean;
   logo?: string;
   version?: string;
-  theme?: "light" | "dark";
   title?: string;
   disableMenu?: boolean;
 }
@@ -127,7 +130,11 @@ defineOptions({
 
 defineSlots<{
   "app-switcher": void;
-  toolbar: void;
+  toolbar: (props: {
+    UserDropdownButton: typeof UserDropdownButton;
+    LanguageSelector: typeof LanguageSelector;
+    NotificationDropdown: typeof NotificationDropdown;
+  }) => void;
   "toolbar:prepend": void;
   "toolbar:language-selector": void;
   "toolbar:notifications-dropdown": void;

package/ui/components/organisms/vc-blade/index.ts

@@ -1,11 +1 @@
-import { VNode } from "vue";
-import _Blade from "./vc-blade.vue";
-
-export const VcBlade = _Blade as typeof _Blade & {
-  new (): {
-    $slots: {
-      actions: () => VNode[];
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcBlade } from "./vc-blade.vue";

package/ui/components/organisms/vc-blade/vc-blade.stories.ts

@@ -1,22 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcBlade } from "./";
+import { onMounted, ref } from "vue";
 
-const meta: Meta<typeof VcBlade> = {
+export default {
   title: "organisms/VcBlade",
   component: VcBlade,
-};
-
-export default meta;
-type Story = StoryObj<typeof VcBlade>;
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { VcBlade },
-    setup() {
-      return { args };
-    },
-    template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
-  }),
   args: {
     icon: "fas fa-star",
     title: "My Awesome Blade",
@@ -36,4 +24,60 @@ export const Primary: Story = {
       { id: "8", icon: "fas fa-cubes", title: "Bulk export", disabled: true },
     ],
   },
-};
+  decorators: [() => ({ template: "<div><VcPopupContainer/><story/></div>" })],
+} satisfies Meta<typeof VcBlade>;
+
+export const Primary: StoryFn<typeof VcBlade> = (args) => ({
+  components: { VcBlade },
+  setup() {
+    return { args };
+  },
+  template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
+});
+
+export const BladeWithError: StoryFn<typeof VcBlade> = (args) => ({
+  components: { VcBlade },
+  setup() {
+    const error = ref("This is an error message");
+    return { args, error };
+  },
+  template: '<vc-blade v-bind="args" :error="error"><div class="p-4">Blade Contents</div></vc-blade>',
+});
+
+export const BladeWithLoading: StoryFn<typeof VcBlade> = (args) => ({
+  components: { VcBlade },
+  setup() {
+    return { args };
+  },
+  template: '<vc-blade v-bind="args" v-loading="true"><div class="p-4">Blade Contents</div></vc-blade>',
+});
+
+export const ClosableBlade: StoryFn<typeof VcBlade> = (args) => ({
+  components: { VcBlade },
+  setup() {
+    const closeBlade = () => {
+      alert("Blade Closed");
+    };
+    return { args, closeBlade };
+  },
+  template: '<vc-blade v-bind="args" closable @close="closeBlade"><div class="p-4">Blade Contents</div></vc-blade>',
+});
+
+export const ExpandableBlade: StoryFn<typeof VcBlade> = (args) => ({
+  components: { VcBlade },
+  setup() {
+    const expandBlade = () => {
+      alert("Blade Expanded");
+    };
+    return { args, expandBlade };
+  },
+  template: '<vc-blade v-bind="args" expandable @expand="expandBlade"><div class="p-4">Blade Contents</div></vc-blade>',
+});
+
+export const bladeWithoutToolbar: StoryFn<typeof VcBlade> = (args) => ({
+  components: { VcBlade },
+  setup() {
+    return { args };
+  },
+  template: '<vc-blade v-bind="args" :toolbarItems="[]"><div class="p-4">Blade Contents</div></vc-blade>',
+});

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, reactive, useAttrs, toRefs } from "vue";
+import { computed, Ref, reactive, useAttrs, toRefs, toValue } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
@@ -97,6 +97,11 @@ withDefaults(defineProps<Props>(), {
   toolbarItems: () => [],
 });
 
+defineSlots<{
+  actions: void;
+  default: void;
+}>();
+
 defineEmits<Emits>();
 const attrs = useAttrs();
 const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } = toRefs(reactive(attrs));
@@ -108,7 +113,7 @@ const { open } = usePopup({
     title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
   },
   slots: {
-    content: computed(() => error?.value),
+    default: computed(() => toValue(error)),
   },
 });
 </script>