@vc-shell/framework 1.1.44 → 1.1.45

package/ui/components/molecules/vc-form/vc-form.vue

@@ -1,5 +1,7 @@
-<template>
-  <form>
-    <slot>vc-form</slot>
-  </form>
-</template>
+<script lang="ts" setup></script>
+
+<template>
+  <form>
+    <slot>vc-form</slot>
+  </form>
+</template>

package/ui/components/molecules/vc-input/vc-input.vue

@@ -144,7 +144,7 @@
               @keydown.space="onReset"
             >
               <VcIcon
-                size="s"
+                size="m"
                 icon="material-close"
               ></VcIcon>
             </div>

package/ui/components/molecules/vc-pagination/vc-pagination.vue

@@ -8,10 +8,7 @@
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
         @click="localCurrentPage !== 1 && setPage(1)"
       >
-        <VcIcon
-          size="xs"
-          :icon="DoubleArrowLeftIcon"
-        ></VcIcon>
+        <VcIcon icon="material-keyboard_double_arrow_left"></VcIcon>
       </div>
 
       <!-- Previous page button -->
@@ -20,10 +17,7 @@
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
         @click="localCurrentPage !== 1 && setPage(localCurrentPage - 1)"
       >
-        <VcIcon
-          size="xs"
-          :icon="ArrowLeftIcon"
-        ></VcIcon>
+        <VcIcon icon="material-arrow_left_alt"></VcIcon>
       </div>
 
       <div
@@ -45,10 +39,7 @@
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
         @click="localCurrentPage !== pages && setPage(localCurrentPage + 1)"
       >
-        <VcIcon
-          size="xs"
-          :icon="ArrowRightIcon"
-        ></VcIcon>
+        <VcIcon icon="material-arrow_right_alt"></VcIcon>
       </div>
 
       <!-- Last page button -->
@@ -57,10 +48,7 @@
         :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
         @click="localCurrentPage !== pages && setPage(pages)"
       >
-        <VcIcon
-          size="xs"
-          :icon="DoubleArrowRightIcon"
-        ></VcIcon>
+        <VcIcon icon="material-keyboard_double_arrow_right"></VcIcon>
       </div>
     </div>
   </div>
@@ -69,7 +57,6 @@
 <script lang="ts" setup>
 import { ref, computed, toRefs, inject, type Ref, watch } from "vue";
 import { VcIcon } from "./../../";
-import { ArrowLeftIcon, ArrowRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from "./../../atoms/vc-icon/icons";
 
 export interface Props {
   expanded?: boolean;

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarMobileActions.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcButton } from "../../../../../../..";
+import { VcButton } from "../../../../../.././components";
 import { useAppBarMobileButtons } from "../../../../../../../core/composables/useAppBarMobileButtons";
 import AppBarOverlay from "./AppBarOverlay.vue";
 import { useAppBarMobileActions } from "./../composables/useAppBarMobileActions";

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/MenuSidebar.vue

@@ -31,8 +31,7 @@
           >
             <VcButton
               icon-class="menu-sidebar__close-button-icon"
-              :icon="CrossSignIcon"
-              icon-size="xs"
+              icon="material-close"
               text
               @click.stop="$emit('update:isOpened', false)"
             />
@@ -65,7 +64,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Sidebar } from "../../../../../../../shared/components/sidebar";
-import { CrossSignIcon } from "../../../../../atoms/vc-icon/icons";
 import { MaybeRef } from "vue";
 
 defineProps<{

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

@@ -24,10 +24,8 @@
         <div class="vc-app-bar__collapse-button-wrap">
           <Transition name="rotate">
             <VcIcon
-              v-show="true"
               class="vc-app-bar__collapse-button-icon"
-              :icon="state.isSidebarExpanded ? ChevronLeftIcon : ChevronRightIcon"
-              size="xs"
+              :icon="state.isSidebarExpanded ? 'lucide-chevron-left' : 'lucide-chevron-right'"
             />
           </Transition>
         </div>
@@ -111,7 +109,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "../../../../";
-import { ChevronLeftIcon, ChevronRightIcon } from "../../../../atoms/vc-icon/icons";
 import { useAppMenuState } from "../composables/useAppMenuState";
 import { useAppBarWidgets } from "./composables/useAppBarWidgets";
 import AppBarHeader from "./_internal/AppBarHeader.vue";

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -51,7 +51,7 @@
             >
               <VcIcon
                 class="vc-app-menu-item__title-icon"
-                :icon="isOpened ? ChevronUpIcon : ChevronDownIcon"
+                :icon="isOpened ? 'lucide-chevron-up' : 'lucide-chevron-down'"
                 size="m"
               ></VcIcon>
             </div>
@@ -142,8 +142,6 @@ import { ref, watch, computed, onMounted, Component, MaybeRef, unref } from "vue
 import { MenuItem } from "./../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 import { useRoute } from "vue-router";
-import ChevronUpIcon from "./../../../../../../../atoms/vc-icon/icons/ChevronUpIcon.vue";
-import ChevronDownIcon from "./../../../../../../../atoms/vc-icon/icons/ChevronDownIcon.vue";
 
 export interface Props {
   children?: MenuItem[];

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

@@ -1,214 +1,214 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcApp } from "./";
-import { usePopup } from "../../../..";
-import { VcPopup } from "..";
-import { useMenuService } from "../../../../core/composables/useMenuService";
-
-export default {
-  title: "organisms/VcApp",
-  component: VcApp,
-  args: {
-    isReady: 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.",
-    },
-  },
-};
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcApp } from "./";
+import { usePopup } from "../../../../shared/components/popup-handler/composables/usePopup";
+import { VcPopup } from "..";
+import { useMenuService } from "../../../../core/composables/useMenuService";
+
+export default {
+  title: "organisms/VcApp",
+  component: VcApp,
+  args: {
+    isReady: 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

@@ -76,11 +76,11 @@ import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
 import {
   VcPopupContainer,
   UserDropdownButton,
-  useAppSwitcher,
   useBladeNavigation,
   NotificationDropdown,
   BladeRoutesRecord,
 } from "./../../../../shared/components";
+import { useAppSwitcher } from "../../../../shared/components/app-switcher/composables/useAppSwitcher";
 import { provideAppBarWidget, useNotifications } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
 import { watchOnce } from "@vueuse/core";
@@ -95,10 +95,8 @@ import { provideGlobalSearch } from "../../../../core/composables/useGlobalSearc
 import { provideDashboardService } from "../../../../core/composables/useDashboard";
 import { DynamicModulesKey } from "../../../../injection-keys";
 import { provideMenuService } from "../../../../core/composables/useMenuService";
-import { BellIcon } from "../../atoms/vc-icon/icons";
 import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
 import { useUserManagement } from "../../../../core/composables/useUserManagement";
-import { BladeRegistryKey } from "../../../../core/composables/useBladeRegistry";
 
 export interface Props {
   isReady: boolean;
@@ -182,7 +180,7 @@ registerMenuItem({
 registerAppBarWidget({
   id: "notification-dropdown",
   component: NotificationDropdown,
-  icon: BellIcon,
+  icon: "lucide-bell",
   order: 10,
   badge: () => hasUnreadNotifications.value,
 });
@@ -190,7 +188,7 @@ registerAppBarWidget({
 registerMobileButton({
   id: "notification-dropdown",
   component: NotificationDropdown,
-  icon: BellIcon,
+  icon: "lucide-bell",
   order: 10,
 });
 

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

@@ -81,17 +81,14 @@
             class="vc-blade-header__button"
             @click="onCollapse"
           >
-            <VcIcon
-              icon="fas fa-window-minimize"
-              size="s"
-            />
+            <VcIcon icon="material-minimize" />
           </div>
           <div
             v-else
             class="vc-blade-header__button"
             @click="onExpand"
           >
-            <VcIcon :icon="AppWindowIcon" />
+            <VcIcon icon="material-toolbar" />
           </div>
         </template>
         <div
@@ -99,10 +96,7 @@
           class="vc-blade-header__button"
           @click="onClose"
         >
-          <VcIcon
-            :icon="CrossSignIcon"
-            size="xs"
-          />
+          <VcIcon icon="material-close" />
         </div>
       </div>
     </div>
@@ -113,7 +107,6 @@
 import { VcIcon } from "./../../../../";
 import { computed, inject, ref } from "vue";
 import { useFloating, shift } from "@floating-ui/vue";
-import { CrossSignIcon, AppWindowIcon } from "../../../../atoms/vc-icon/icons";
 import { BladeInstance } from "../../../../../../injection-keys";
 import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
 

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/mobile/vc-blade-toolbar-mobile.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { VcIcon } from "../../../../../../../../../";
+import { VcIcon } from "../../../../../../../atoms";
 import type { IBladeToolbar } from "../../../../../../../../../core/types";
 import VcBladeToolbarCircleButton from "../_internal/vc-blade-toolbar-button/vc-blade-toolbar-circle-button.vue";