@vc-shell/framework 1.0.59 → 1.0.61

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

@@ -1,75 +1,61 @@
-/**
- * App component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcApp from "./vc-app.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcApp } from "./";
 
-export default {
-  title: "organisms/vc-app",
+const meta: Meta<typeof VcApp> = {
+  title: "organisms/VcApp",
   component: VcApp,
-  parameters: {
-    backgrounds: {
-      default: "default",
-      values: [
-        {
-          name: "default",
-          value:
-            "linear-gradient(180deg, #E4F5FB 5.06%, #E8F3F2 100%), linear-gradient(0deg, #E8F2F3, #E8F2F3), #EEF2F8;",
-        },
-      ],
-    },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcApp },
-  setup() {
-    return { args };
-  },
-  template: '<vc-app v-bind="args"></vc-app>',
-});
+export default meta;
+type Story = StoryObj<typeof VcApp>;
 
-export const App = Template.bind({});
-App.storyName = "vc-app";
-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,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcApp },
+    setup() {
+      return { args };
     },
-    {
-      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",
-  logo: "images/main-logo.svg",
+    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",
+    logo: "images/main-logo.svg",
+  },
 };

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

@@ -19,7 +19,7 @@
       @toolbarbutton:click="onToolbarButtonClick"
       @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
-      @logo:click="openDashboard"
+      @logo:click="$emit('logo:click')"
       :title="title"
     >
       <template v-slot:appSwitcher>
@@ -39,7 +39,7 @@
       ></VcAppMenu>
 
       <!-- Workspace blades -->
-      <div class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0">
+      <div class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative">
         <slot name="bladeNavigation"></slot>
       </div>
 
@@ -68,7 +68,7 @@ export default defineComponent({
 import { useRouter } from "vue-router";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
-import { ExtendedComponent, IBladeElement, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
+import { ExtendedComponent, IBladeRef, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
 
 export interface Props {
   pages?: ExtendedComponent[];
@@ -80,7 +80,7 @@ export interface Props {
   logo?: string;
   version?: string;
   theme?: "light" | "dark";
-  bladesRefs?: IBladeElement[];
+  bladesRefs?: IBladeRef[];
   title?: string;
 }
 
@@ -88,15 +88,9 @@ export interface Emits {
   (event: "open", args: IOpenBlade): void;
   (event: "close", index: number): void;
   (event: "backlink:click", index: number): void;
+  (event: "logo:click"): void;
 }
 
-// defineSlots<{
-//   appSwitcher: unknown;
-//   bladeNavigation: unknown;
-//   notifications: unknown;
-//   passwordChange: unknown;
-// }>();
-
 withDefaults(defineProps<Props>(), {
   pages: () => [],
   menuItems: () => [],
@@ -112,8 +106,6 @@ console.debug("vc-app: Init vc-app");
 
 const instance = getCurrentInstance();
 
-const router = useRouter();
-
 const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
   console.debug(`vc-app#onMenuItemClick() called.`);
   if (item.clickHandler && typeof item.clickHandler === "function") {
@@ -131,17 +123,7 @@ const onToolbarButtonClick = function (item: Record<string, unknown>) {
   }
 };
 
-const openDashboard = async () => {
-  console.debug(`openDashboard() called.`);
-
-  // Close all opened pages with onBeforeClose callback
-  await emit("close", 0);
-
-  router.push("/");
-};
-
 defineExpose({
-  openDashboard,
   onToolbarButtonClick,
   onMenuItemClick,
 });

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

@@ -39,7 +39,7 @@
     >
       <template v-if="expandable">
         <div
-          v-if="expanded"
+          v-if="maximized"
           class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onCollapse"
         >
@@ -71,15 +71,15 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../../../../ui/components";
+import { VcIcon } from "./../../../../";
 
 export interface Props {
-  expandable?: boolean | undefined;
-  expanded?: boolean | undefined;
-  closable?: boolean | undefined;
-  title?: string | undefined;
-  subtitle?: string | undefined;
-  icon?: string | undefined;
+  expandable?: boolean;
+  maximized?: boolean;
+  closable?: boolean;
+  title?: string;
+  subtitle?: string;
+  icon?: string;
 }
 const props = defineProps<Props>();
 

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

@@ -27,6 +27,7 @@
           class="vc-blade-toolbar-button__dropdown"
           v-if="isDropActive"
           ref="bladeDropRef"
+          :style="dropStyle"
         >
           <div
             class="vc-blade-toolbar-button__dropdown-item"
@@ -47,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, ref } from "vue";
+import { defineComponent, ref, computed, nextTick } from "vue";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -55,8 +56,8 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../../../../../components";
-import { createPopper, Instance } from "@popperjs/core";
+import { VcIcon } from "./../../../../../../";
+import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 
 export interface Props {
@@ -65,7 +66,7 @@ export interface Props {
   title?: string | unknown;
   bladeOptions?: Record<string, unknown>;
   disabled?: boolean;
-  dropdownItems?: { id: number; title: string; icon?: string; clickHandler?(): void }[];
+  dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;
 }
 
@@ -84,13 +85,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const popper = ref<Instance>();
+const popper = ref<ComputePositionReturn>();
 const isWaiting = ref(false);
 const isDropActive = ref(false);
 const bladeDropToggle = ref();
 const dropButtonRef = ref();
 const bladeDropRef = ref();
 
+const dropStyle = computed(() => ({
+  top: `${popper.value?.y ?? 0}px`,
+  left: `${popper.value?.x ?? 0}px`,
+}));
+
 async function onClick(): Promise<void> {
   console.debug("vc-blade-toolbar-item#onClick()");
 
@@ -114,21 +120,14 @@ function toggleDropdown() {
   if (props.dropdownItems?.length) {
     if (isDropActive.value) {
       isDropActive.value = false;
-      popper.value?.destroy();
     } else {
       isDropActive.value = true;
+
       nextTick(() => {
-        popper.value = createPopper(bladeDropToggle.value, bladeDropRef.value, {
+        computePosition(bladeDropToggle.value, bladeDropRef.value, {
           placement: "bottom",
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [70, 5],
-              },
-            },
-          ],
-        });
+          middleware: [offset(10)],
+        }).then((item) => (popper.value = item));
       });
     }
   }

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

@@ -33,6 +33,7 @@
 import { IBladeToolbar } from "./../../../../../../core/types";
 import { ref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
+import { VcIcon } from "./../../../../";
 
 export interface Props {
   items: IBladeToolbar[];

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

@@ -1,45 +1,39 @@
-/**
- * Blade component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcBlade from "./vc-blade.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcBlade } from "./";
 
-export default {
-  title: "organisms/vc-blade",
+const meta: Meta<typeof VcBlade> = {
+  title: "organisms/VcBlade",
   component: VcBlade,
-  argTypes: {
-    collapse: { action: "collapse", name: "collapse" },
-    expand: { action: "expand", name: "expand" },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcBlade },
-  setup() {
-    return { args };
-  },
-  template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
-});
+export default meta;
+type Story = StoryObj<typeof VcBlade>;
 
-export const Blade = Template.bind({});
-Blade.storyName = "vc-blade";
-Blade.args = {
-  icon: "fas fa-star",
-  title: "My Awesome Blade",
-  subtitle: "Optional Subtitle",
-  width: 700,
-  closable: false,
-  searchable: false,
+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",
+    subtitle: "Optional Subtitle",
+    width: 700,
+    closable: false,
+    expandable: false,
 
-  toolbarItems: [
-    { id: 1, icon: "fas fa-sync-alt", title: "Refresh" },
-    { id: 2, icon: "fas fa-plus", title: "Add" },
-    { id: 3, icon: "fas fa-trash", title: "Delete", disabled: true },
-    { id: 4, icon: "fas fa-download", title: "Import" },
-    { id: 5, icon: "fas fa-upload", title: "Export" },
-    { id: 6, icon: "fas fa-cut", title: "Cut", disabled: true },
-    { id: 7, icon: "fas fa-paste", title: "Paste", disabled: true },
-    { id: 8, icon: "fas fa-cubes", title: "Bulk export", disabled: true },
-  ],
+    toolbarItems: [
+      { id: "1", icon: "fas fa-sync-alt", title: "Refresh" },
+      { id: "2", icon: "fas fa-plus", title: "Add" },
+      { id: "3", icon: "fas fa-trash", title: "Delete", disabled: true },
+      { id: "4", icon: "fas fa-download", title: "Import" },
+      { id: "5", icon: "fas fa-upload", title: "Export" },
+      { id: "6", icon: "fas fa-cut", title: "Cut", disabled: true },
+      { id: "7", icon: "fas fa-paste", title: "Paste", disabled: true },
+      { id: "8", icon: "fas fa-cubes", title: "Bulk export", disabled: true },
+    ],
+  },
 };

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

@@ -1,19 +1,30 @@
 <template>
   <div
     class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
+    :class="[
+      $attrs.class,
+      {
+        '!tw-w-full': $isMobile.value,
+        '!tw-w-full !tw-shrink': expanded,
+        '!tw-absolute !tw-z-[2] !tw-top-0 !tw-bottom-0 !tw-left-0 ![width:-webkit-fill-available] !tw-mx-4 !tw-shrink':
+          maximized,
+      },
+    ]"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[$attrs.class, { '!tw-w-full !tw-shrink': $isMobile.value || expanded }]"
   >
     <!-- Init blade header -->
     <VcBladeHeader
       class="tw-shrink-0"
       v-if="!$isMobile.value || closable"
-      :expanded="expanded"
+      :maximized="maximized"
+      :expandable="isExpandable"
       :closable="closable"
       :icon="icon"
       :title="title"
       :subtitle="subtitle"
       @close="$emit('close')"
+      @expand="$emit('expand')"
+      @collapse="$emit('collapse')"
     >
       <template
         v-slot:actions
@@ -34,8 +45,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
+import { IBladeContainer } from "./../../../../shared";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -52,22 +64,35 @@ export interface Props {
   subtitle?: string;
   width?: number | string;
   expanded?: boolean;
+  maximized?: boolean;
+  expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
   onClose?: () => void;
+  blades?: IBladeContainer[];
 }
 
 export interface Emits {
   (event: "close"): void;
+  (event: "expand"): void;
+  (event: "collapse"): void;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   width: "30%",
   closable: true,
+  expandable: true,
   toolbarItems: () => [],
 });
 
 defineEmits<Emits>();
+
+const isExpandable = computed(() => {
+  if (!props.expandable) {
+    return props.expandable;
+  }
+  return props.blades?.length !== 0;
+});
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1,4 +1,3 @@
-import { VNode } from "vue";
 import _DynamicProperty from "./vc-dynamic-property.vue";
 
 export const VcDynamicProperty = _DynamicProperty as typeof _DynamicProperty;

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -58,9 +58,10 @@
       :disabled="disabled"
       option-label="alias"
       option-value="id"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       :multiple="true"
       :emit-value="false"
-      :clearable="false"
     ></VcSelect>
   </Field>
 
@@ -92,11 +93,12 @@
       :options="items"
       option-label="alias"
       option-value="id"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       @search="onSearch"
       @close="onClose"
       :multiple="property.multivalue"
       :emit-value="false"
-      :clearable="false"
     ></VcSelect>
   </Field>
 
@@ -154,6 +156,8 @@
       :options="items"
       option-value="id"
       :option-label="handleDisplayProperty"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       multiple
     ></VcSelect>
   </Field>
@@ -323,8 +327,9 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed } from "vue";
-import { useI18n } from "./../../../../core/composables";
 import { Field } from "vee-validate";
+import { useI18n } from "vue-i18n";
+import { VcSelect, VcInput, VcTextarea, VcCheckbox, VcCodeEditor } from "./../../";
 
 export interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -348,6 +353,13 @@ export interface Props {
   ) => void | undefined;
   culture?: string;
   disabled?: boolean;
+  /**
+   * @description Used only with multiple selection **only** in rare cases, where we need to display selection with other value-label pair
+   */
+  displayedValueLabel?: {
+    value: string;
+    label: string;
+  };
 }
 
 export interface PropertyItem {

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -71,6 +71,7 @@
 import { ref } from "vue";
 import { clickOutside as vClickOutside } from "./../../../../../../core/directives";
 import { IImage } from "./../../../../../../core/types";
+import { VcImage, VcIcon } from "./../../../../";
 
 export interface Props {
   image: IImage;

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -61,7 +61,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { VcPopup } from "./../../../../../components";
+import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
 import { IImage } from "./../../../../../../core/types";
 
 export interface Props {

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcGallery } from "./";
+import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
+import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { VcLabel, VcFileUpload, VcHint } from "./../../";
+
+const meta: Meta<typeof VcGallery> = {
+  title: "organisms/VcGallery",
+  component: VcGallery,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcGallery>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: {
+      VcGallery,
+      VcGalleryItem,
+      VcGalleryPreview,
+      VcLabel,
+      VcFileUpload,
+      VcHint,
+    },
+    setup() {
+      return { args };
+    },
+    template: '<div class="tw-flex tw-h-[400px] tw-overflow-hidden"><vc-gallery v-bind="args"></vc-gallery></div>',
+  }),
+  args: {
+    images: [
+      {
+        title: "Title",
+        name: "Name",
+        url: "https://placekitten.com/800/600",
+        sortOrder: 0,
+      },
+      {
+        title: "Title",
+        name: "Name",
+        url: "https://placekitten.com/800/600",
+        sortOrder: 1,
+      },
+    ],
+    variant: "gallery",
+  },
+};