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

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="bladeRef"
     class="vc-blade"
     :class="[
       $attrs.class,
@@ -13,7 +14,7 @@
   >
     <!-- Init blade header -->
     <VcBladeHeader
-      v-if="!$isMobile.value || closable"
+      v-if="!($isMobile.value && blades.length === 1 && !$slots['actions'])"
       class="vc-blade__header"
       :closable="closable"
       :icon="icon"
@@ -24,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
@@ -68,69 +97,15 @@
       class="vc-blade__toolbar"
       :items="toolbarItems"
     >
-      <template
-        v-if="$slots['widgets'] && !isWidgetContainerEmpty"
-        #widgets-container
-      >
-        <div
-          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-more">
-            <VcIcon :icon="CircleDotsIcon" />
-            <!-- TODO: More localization -->
-            More
-          </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>
+      <template #widgets-container>
+        <VcWidgetContainer :blade-id="blade?.id ?? ''" />
       </template>
-      <!-- <template #custom-container>
-        <div
-          id="vc-blade-toolbar-container"
-          class="vc-blade__toolbar-container-inner"
-        />
-      </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 }"
@@ -144,78 +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,
-  inject,
-  ComputedRef,
-} 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, CircleDotsIcon } 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;
@@ -246,50 +166,78 @@ 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 blade = inject("$blade") as ComputedRef<{ expandable: boolean; maximized: boolean; error?: string }>;
-const { t } = useI18n({ useScope: "global" });
-const widgetsRef = ref<HTMLElement | null>(null);
-const widgetsContainerRef = ref<HTMLElement | null>(null);
+const emit = defineEmits<Emits>();
 
-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,
-  props: {
-    title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
-  },
   slots: {
     default: computed(() => toValue(blade.value.error)),
+    header: defineComponent({
+      render: () =>
+        h("div", [
+          t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
+          " ",
+          h(
+            VcLink,
+            { onClick: () => navigator.clipboard.writeText(toValue(blade.value.error) ?? "") },
+            `(${t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.COPY_ERROR")})`,
+          ),
+        ]),
+    }),
   },
 });
 </script>
@@ -317,9 +265,13 @@ const { open } = usePopup({
 }
 
 .vc-blade {
-  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col [box-shadow:var(--blade-shadow)] tw-overflow-hidden tw-transition-[width] tw-duration-200;
+  @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};
   }
@@ -331,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 {
@@ -360,6 +317,10 @@ const { open } = usePopup({
 
   &__toolbar {
     @apply tw-shrink-0;
+
+    &--hidden {
+      @apply tw-hidden;
+    }
   }
 
   &__content {
@@ -391,7 +352,19 @@ const { open } = usePopup({
   }
 
   &__widgets {
-    @apply tw-flex tw-flex-auto tw-h-full tw-bg-[color:var(--blade-widgets-bg-color)] tw-justify-between;
+    @apply tw-flex tw-flex-row;
+  }
+
+  &__breadcrumbs {
+    @apply tw-mr-3;
+
+    &-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};
+
+      &--active {
+        @apply tw-text-[color:var(--blade-header-breadcrumbs-button-color-hover)] #{!important};
+      }
+    }
   }
 
   // &__widgets {
@@ -414,17 +387,17 @@ const { open } = usePopup({
   //   }
   // }
 
-  &__widget-container {
-    @apply tw-flex tw-overflow-y-auto tw-flex-row;
+  // &__widget-container {
+  //   @apply tw-flex tw-overflow-y-auto tw-flex-row;
 
-    // &--desktop {
-    //   @apply tw-flex-col tw-overflow-x-clip;
-    // }
+  //   // &--desktop {
+  //   //   @apply tw-flex-col tw-overflow-x-clip;
+  //   // }
 
-    // &--mobile {
-    //   @apply tw-flex-row;
-    // }
-  }
+  //   // &--mobile {
+  //   //   @apply tw-flex-row;
+  //   // }
+  // }
 
   &__widget-toggle {
     @apply tw-flex;

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";