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

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

@@ -1,83 +1,83 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcBlade } from "./";
-import { ref } from "vue";
-
-export default {
-  title: "organisms/VcBlade",
-  component: VcBlade,
-  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 },
-    ],
-  },
-  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>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcBlade } from "./";
+import { ref } from "vue";
+
+export default {
+  title: "organisms/VcBlade",
+  component: VcBlade,
+  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 },
+    ],
+  },
+  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

@@ -1,22 +1,21 @@
 <template>
   <div
+    ref="bladeRef"
     class="vc-blade"
     :class="[
       $attrs.class,
       {
         'vc-blade--mobile': $isMobile.value,
         'vc-blade--expanded': expanded,
-        'vc-blade--maximized': maximized,
+        'vc-blade--maximized': blade.maximized,
       },
     ]"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
   >
     <!-- Init blade header -->
     <VcBladeHeader
-      v-if="!$isMobile.value || closable"
+      v-if="!($isMobile.value && blades.length === 1 && !$slots['actions'])"
       class="vc-blade__header"
-      :maximized="maximized"
-      :expandable="expandable"
       :closable="closable"
       :icon="icon"
       :title="title"
@@ -26,6 +25,34 @@
       @expand="$emit('expand')"
       @collapse="$emit('collapse')"
     >
+      <template #prepend>
+        <component
+          :is="backButton"
+          v-if="backButton && $isMobile.value"
+          class="vc-blade__back-button"
+        />
+
+        <div
+          v-if="blade.breadcrumbs?.length && $isDesktop.value"
+          class="vc-blade__breadcrumbs"
+        >
+          <VcBreadcrumbs :items="blade.breadcrumbs">
+            <template #trigger="{ click, isActive }">
+              <VcButton
+                text
+                :icon="VertDotsIcon"
+                icon-size="m"
+                class="vc-blade__breadcrumbs-button"
+                :class="{
+                  'vc-blade__breadcrumbs-button--active': isActive,
+                }"
+                @click="click"
+              />
+            </template>
+          </VcBreadcrumbs>
+        </div>
+      </template>
+
       <template
         v-if="$slots['actions']"
         #actions
@@ -35,13 +62,13 @@
     </VcBladeHeader>
 
     <!-- Show error message -->
-    <template v-if="error">
+    <template v-if="blade.error">
       <div class="vc-blade__error">
         <VcIcon
           size="s"
           icon="fas fa-exclamation-triangle"
         />
-        <div class="vc-blade__error-text">{{ error }}</div>
+        <div class="vc-blade__error-text">{{ blade.error }}</div>
         <VcButton
           text
           class="vc-blade__error-button"
@@ -69,9 +96,16 @@
     <VcBladeToolbar
       class="vc-blade__toolbar"
       :items="toolbarItems"
-    ></VcBladeToolbar>
+    >
+      <template #widgets-container>
+        <VcWidgetContainer :blade-id="blade?.id ?? ''" />
+      </template>
+    </VcBladeToolbar>
 
-    <div class="vc-blade__content">
+    <div
+      ref="contentRef"
+      class="vc-blade__content"
+    >
       <div
         class="vc-blade__main"
         :class="{ 'vc-blade__main--mobile': $isMobile.value }"
@@ -85,66 +119,23 @@
         >
           <slot></slot>
         </div>
-
-        <div
-          v-show="$slots['widgets'] && !isWidgetContainerEmpty"
-          ref="widgetsRef"
-          class="vc-blade__widgets"
-          :class="[
-            {
-              'vc-blade__widgets--desktop': $isDesktop.value,
-              'vc-blade__widgets--not-expanded': $isDesktop.value && !isExpanded,
-              'vc-blade__widgets--expanded': $isDesktop.value && isExpanded,
-              'vc-blade__widgets--mobile': $isMobile.value,
-            },
-          ]"
-        >
-          <div
-            ref="widgetsContainerRef"
-            class="vc-blade__widget-container"
-            :class="{
-              'vc-blade__widget-container--desktop': $isDesktop.value,
-              'vc-blade__widget-container--mobile': $isMobile.value,
-            }"
-          >
-            <slot
-              name="widgets"
-              :is-expanded="isExpanded"
-            ></slot>
-          </div>
-
-          <div
-            class="vc-blade__widget-toggle"
-            :class="{
-              'vc-blade__widget-toggle--desktop': $isDesktop.value,
-              'vc-blade__widget-toggle--mobile': $isMobile.value,
-            }"
-          >
-            <VcIcon
-              class="vc-blade__toggle-icon"
-              :class="{
-                'vc-blade__toggle-icon--desktop': $isDesktop.value,
-              }"
-              :icon="`fas fa-chevron-${$isDesktop.value ? (isExpanded ? 'right' : 'left') : isExpanded ? 'up' : 'down'}`"
-              @click="toggleWidgets"
-            ></VcIcon>
-          </div>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, reactive, useAttrs, toRefs, toValue, ref, onMounted, onUpdated, defineComponent, h } from "vue";
+import { computed, ref, toValue, inject, useSlots, defineComponent, h } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
-import { usePopup } from "./../../../../shared";
+import { usePopup, useBladeNavigation } from "../../../../shared";
 import { useI18n } from "vue-i18n";
-import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
-import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon, VcLink } from "./../../";
+import { default as VcBladeHeader } from "./_internal/vc-blade-header/vc-blade-header.vue";
+import { default as VcBladeToolbar } from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
+import { VcButton, VcIcon, VcLink } from "../../";
 import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
-import { useLocalStorage } from "@vueuse/core";
+import { BladeInstance, BLADE_BACK_BUTTON } from "../../../../injection-keys";
+import { default as VcWidgetContainer } from "./_internal/vc-blade-widget-container/vc-widget-container.vue";
+import VertDotsIcon from "../../atoms/vc-icon/icons/VertDotsIcon.vue";
 
 export interface Props {
   icon?: string;
@@ -152,7 +143,6 @@ export interface Props {
   subtitle?: string;
   width?: number | string;
   expanded?: boolean;
-  expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
   modified?: boolean;
@@ -176,48 +166,66 @@ withDefaults(defineProps<Props>(), {
   modified: undefined,
 });
 
-defineSlots<{
+const slots = defineSlots<{
   actions: void;
   default: void;
+  /**
+   * @deprecated
+   * Use `useWidgets` composable instead
+   * @example
+   * // Register widget in blade:
+   * const blade = inject(BladeInstance);
+   * const widgetService = useWidgets();
+   * widgetService.registerWidget({
+   *   id: "widget-id",
+   *   component: () => import("./MyWidget.vue"),
+   *   props: {
+   *     myProp: '123',
+   *    },
+   *   events: {
+   *     "onChangeProp": (val: unknown) => {
+   *       console.log(val);
+   *     },
+   *   },
+   * }, blade.id);
+   *
+   * // Clear widgets on blade unmount:
+   * onBeforeUnmount(() => {
+   *   if (blade?.value.id) {
+   *     widgetService.clearBladeWidgets(blade.value.id);
+   *   }
+   * });
+   */
   widgets: void;
+  backButton: void;
 }>();
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
 
-const attrs = useAttrs();
-const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } = toRefs(reactive(attrs));
-const { t } = useI18n({ useScope: "global" });
-const widgetsRef = ref<HTMLElement | null>(null);
-const widgetsContainerRef = ref<HTMLElement | null>(null);
-
-const isExpanded = useLocalStorage("VC_BLADE_WIDGETS_IS_EXPANDED", true);
+const blade = inject(
+  BladeInstance,
+  computed(() => ({
+    id: "fallback-blade-id",
+    error: undefined,
+    expandable: false,
+    maximized: false,
+    navigation: undefined,
+    breadcrumbs: undefined,
+  })),
+);
 
-const toggleWidgets = () => {
-  isExpanded.value = !isExpanded.value;
-};
-const isWidgetContainerEmpty = ref(false);
+const backButton = inject(BLADE_BACK_BUTTON);
 
-const checkEmpty = (el: HTMLElement) => {
-  const isEmpty = !el.innerText.trim() && Array.from(el.children).every((node) => node.nodeType === Node.COMMENT_NODE);
-  isWidgetContainerEmpty.value = isEmpty;
-};
-
-onMounted(() => {
-  if (widgetsRef.value) {
-    checkEmpty(widgetsContainerRef.value!);
-  }
-});
+const { t } = useI18n({ useScope: "global" });
+const { blades } = useBladeNavigation();
 
-onUpdated(() => {
-  if (widgetsRef.value) {
-    checkEmpty(widgetsContainerRef.value!);
-  }
-});
+const bladeRef = ref<HTMLElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
 
 const { open } = usePopup({
   component: vcPopupError,
   slots: {
-    default: computed(() => toValue(error)),
+    default: computed(() => toValue(blade.value.error)),
     header: defineComponent({
       render: () =>
         h("div", [
@@ -225,7 +233,7 @@ const { open } = usePopup({
           " ",
           h(
             VcLink,
-            { onClick: () => navigator.clipboard.writeText(toValue(error) ?? "") },
+            { onClick: () => navigator.clipboard.writeText(toValue(blade.value.error) ?? "") },
             `(${t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.COPY_ERROR")})`,
           ),
         ]),
@@ -237,7 +245,6 @@ const { open } = usePopup({
 <style lang="scss">
 :root {
   --blade-background-color: var(--additional-50);
-  --blade-border-radius: 6px;
   --blade-color-error: var(--base-error-color, var(--danger-500));
   --blade-color-unsaved-changes: var(--secondary-600);
 
@@ -252,11 +259,18 @@ const { open } = usePopup({
   --blade-shadow: 2px 2px 8px rgb(from var(--blade-shadow-color) r g b / 14%);
 
   --blade-text-color: var(--additional-50);
+
+  --blade-widgets-bg-color: var(--neutrals-100);
+  --blade-widgets-more-color: var(--neutrals-600);
 }
 
 .vc-blade {
-  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col [box-shadow:var(--blade-shadow)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200;
-  @apply tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)];
+  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col tw-overflow-hidden tw-transition-[width] tw-duration-200;
+  @apply tw-bg-[color:var(--blade-background-color)] tw-border tw-border-solid tw-border-[--blade-border-color];
+
+  &__back-button {
+    @apply tw-mr-[14px];
+  }
 
   &--mobile {
     @apply tw-w-full #{!important};
@@ -269,10 +283,15 @@ const { open } = usePopup({
   &--maximized {
     @apply tw-absolute tw-z-[2] tw-top-0 tw-bottom-0 tw-left-0 tw-shrink #{!important};
     width: -webkit-fill-available !important;
+    width: -moz-available !important;
   }
 
   &__header {
     @apply tw-shrink-0;
+
+    &--hidden {
+      @apply tw-hidden;
+    }
   }
 
   &__error {
@@ -298,6 +317,10 @@ const { open } = usePopup({
 
   &__toolbar {
     @apply tw-shrink-0;
+
+    &--hidden {
+      @apply tw-hidden;
+    }
   }
 
   &__content {
@@ -324,37 +347,57 @@ const { open } = usePopup({
     }
   }
 
-  &__widgets {
-    @apply tw-flex;
+  &__widget-more {
+    @apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-[color:var(--blade-widgets-bg-color)] tw-px-2 tw-text-xs tw-gap-1 tw-text-[color:var(--blade-widgets-more-color)];
+  }
 
-    &--desktop {
-      @apply tw-border-l tw-border-solid tw-border-l-[color:var(--blade-border-color)];
-    }
+  &__widgets {
+    @apply tw-flex tw-flex-row;
+  }
 
-    &--not-expanded {
-      @apply tw-w-12 tw-flex-col;
-    }
+  &__breadcrumbs {
+    @apply tw-mr-3;
 
-    &--expanded {
-      @apply tw-w-32 tw-flex-col;
-    }
+    &-button {
+      @apply tw-text-[color:var(--blade-header-breadcrumbs-button-color)] tw-cursor-pointer hover:tw-text-[color:var(--blade-header-breadcrumbs-button-color-hover)] #{!important};
 
-    &--mobile {
-      @apply tw-w-auto tw-border-t tw-border-solid tw-border-t-[color:var(--blade-border-color)] tw-flex-row;
+      &--active {
+        @apply tw-text-[color:var(--blade-header-breadcrumbs-button-color-hover)] #{!important};
+      }
     }
   }
 
-  &__widget-container {
-    @apply tw-flex tw-overflow-y-auto;
+  // &__widgets {
+  //   @apply tw-flex;
 
-    &--desktop {
-      @apply tw-flex-col tw-overflow-x-clip;
-    }
+  //   &--desktop {
+  //     @apply tw-border-l tw-border-solid tw-border-l-[color:var(--blade-border-color)];
+  //   }
 
-    &--mobile {
-      @apply tw-flex-row;
-    }
-  }
+  //   &--not-expanded {
+  //     @apply tw-w-12 tw-flex-col;
+  //   }
+
+  //   &--expanded {
+  //     @apply tw-w-32 tw-flex-col;
+  //   }
+
+  //   &--mobile {
+  //     @apply tw-w-auto tw-border-t tw-border-solid tw-border-t-[color:var(--blade-border-color)] tw-flex-row;
+  //   }
+  // }
+
+  // &__widget-container {
+  //   @apply tw-flex tw-overflow-y-auto tw-flex-row;
+
+  //   // &--desktop {
+  //   //   @apply tw-flex-col tw-overflow-x-clip;
+  //   // }
+
+  //   // &--mobile {
+  //   //   @apply tw-flex-row;
+  //   // }
+  // }
 
   &__widget-toggle {
     @apply tw-flex;
@@ -375,6 +418,18 @@ const { open } = usePopup({
 
   &__toggle-icon--desktop {
   }
+
+  &__spacer {
+    @apply tw-flex-1;
+  }
+
+  &__toolbar-container-inner {
+    @apply tw-flex-1 tw-justify-end;
+
+    &:empty {
+      @apply tw-hidden;
+    }
+  }
 }
 
 .vc-app_mobile .vc-blade {

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

@@ -1 +1 @@
-export { default as VcDynamicProperty } from "./vc-dynamic-property.vue";
+export { default as VcDynamicProperty } from "./vc-dynamic-property.vue";