@vc-shell/framework 1.0.68 → 1.0.70

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -0,0 +1,25 @@
+<template>
+  <component
+    :is="popup.component"
+    v-for="popup in popupPlugin.popups"
+    :key="popup.id"
+    v-bind="{ ...popup.props, ...popup.emits }"
+    @close="() => popup.close()"
+  >
+    <template
+      v-for="(slot, key) in popup.slots"
+      :key="key"
+    >
+      <div v-if="typeof slot === 'string'">{{ slot }}</div>
+      <component
+        :is="slot"
+        v-else
+      ></component>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { getPopupPlugin } from "./../../utils";
+const popupPlugin = getPopupPlugin();
+</script>

package/shared/components/popup-handler/composables/index.ts

@@ -0,0 +1 @@
+export { usePopup } from "./usePopup";

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -0,0 +1,129 @@
+import { VcPopup } from "./../../../../../ui/components";
+import { markRaw, getCurrentInstance, inject, reactive, shallowRef, nextTick, Ref } from "vue";
+import { UsePopupInternal, UsePopupProps } from "./../../types";
+import { popupPluginInstance } from "./../../plugin";
+import { useI18n } from "vue-i18n";
+
+interface IUsePopup {
+  open(): void;
+  close(): void;
+  showConfirmation(message: string | Ref<string>): Promise<boolean>;
+  showError(message: string | Ref<string>): void;
+}
+
+export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: UsePopupProps<T>): IUsePopup {
+  const { t } = useI18n({ useScope: "global" });
+  const instance = getCurrentInstance();
+  const popupInstance = (instance && inject("popupPlugin")) || popupPluginInstance;
+  const rawPopup = createInstance(props);
+
+  async function open(customInstance?: UsePopupProps<unknown>) {
+    let activeInstance;
+    await nextTick();
+    if (popupInstance) {
+      activeInstance = popupInstance;
+    }
+
+    activeInstance.popups.push(rawPopup || customInstance);
+  }
+
+  function close(customInstance?: UsePopupProps<unknown>) {
+    let activeInstance;
+    if (popupInstance) {
+      activeInstance = popupInstance;
+    }
+    const index = activeInstance.popups.indexOf(rawPopup || customInstance);
+    if (index !== -1) activeInstance.popups.splice(index, 1);
+  }
+
+  async function showConfirmation(message: string | Ref<string>): Promise<boolean> {
+    let resolvePromise;
+    const confirmation = createInstance({
+      component: VcPopup,
+      props: {
+        type: "warning",
+        variant: "small",
+        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION"),
+      },
+      emits: {
+        onClose() {
+          resolvePromise(false);
+          close(confirmation);
+        },
+        onConfirm() {
+          resolvePromise(true);
+          close(confirmation);
+        },
+      },
+      slots: {
+        default: message,
+      },
+    });
+
+    popupInstance.popups.push(confirmation);
+
+    return new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+  }
+
+  function showError(message: string | Ref<string>) {
+    const confirmation = createInstance({
+      component: VcPopup,
+      props: {
+        type: "error",
+        variant: "small",
+        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"),
+      },
+      emits: {
+        onClose() {
+          close(confirmation);
+        },
+      },
+      slots: {
+        default: message,
+      },
+    });
+
+    popupInstance.popups.push(confirmation);
+  }
+
+  function createInstance<T>(props: UsePopupProps<T>) {
+    return (
+      props &&
+      (reactive({
+        id: Symbol("usePopup"),
+        ...createComponent(props),
+        close: close,
+        open: open,
+      }) as UsePopupProps<unknown> & UsePopupInternal)
+    );
+  }
+
+  return {
+    open,
+    close,
+    showConfirmation,
+    showError,
+  };
+}
+
+function createComponent<T>(props: UsePopupProps<T>) {
+  const slots =
+    typeof props.slots === "undefined"
+      ? {}
+      : Object.fromEntries(
+          Object.entries(props.slots).map(([slotName, slotContent]) => {
+            if (typeof slotContent === "string") {
+              return [slotName, slotContent];
+            }
+            return [slotName, markRaw(slotContent)];
+          })
+        );
+
+  return {
+    ...props,
+    slots,
+    component: markRaw(shallowRef(props.component)),
+  };
+}

package/shared/components/popup-handler/index.ts

@@ -0,0 +1,19 @@
+import * as components from "./components";
+import { PopupPlugin } from "./types";
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    VcPopupContainer: (typeof components)["VcPopupContainer"];
+  }
+
+  export interface ComponentCustomProperties {
+    $popupPlugin: PopupPlugin;
+  }
+}
+
+export * from "./plugin";
+export * from "./components";
+export * from "./composables";
+export * from "./types";
+export * from "./utils";

package/shared/components/popup-handler/plugin.ts

@@ -0,0 +1,24 @@
+import { App, shallowReactive } from "vue";
+import * as components from "./components";
+import { PopupPlugin, UsePopupProps, UsePopupInternal } from "./types";
+import { createModule } from "./../../../core/plugins";
+
+export let popupPluginInstance;
+
+export const VcPopupHandler = {
+  install(app: App) {
+    // Register components
+    createModule(components).install(app);
+
+    // Plugin
+    const popups = shallowReactive<(UsePopupProps<unknown> & UsePopupInternal)[]>([]);
+
+    const popupPlugin: PopupPlugin = {
+      popups,
+    };
+
+    app.config.globalProperties.$popupPlugin = popupPlugin;
+    app.provide("popupPlugin", popupPlugin);
+    popupPluginInstance = popupPlugin;
+  },
+};

package/shared/components/popup-handler/types/index.ts

@@ -0,0 +1,28 @@
+import { Component, Slot as VueSlot } from "vue";
+
+export type RawProps<T> = Omit<T, `on${string}`>;
+export type RawEmits<T> = Pick<T, Extract<keyof T, `on${string}`>>;
+export type Slot = string | Component | VueSlot;
+
+export interface UsePopupInternal {
+  id: symbol;
+  open: () => void;
+  close: () => void;
+}
+
+export interface PopupPlugin {
+  popups: (UsePopupProps<unknown> & UsePopupInternal)[];
+}
+
+export interface ComponentPublicInstanceConstructor<T = unknown> {
+  new (...args: unknown[]): { $props: T };
+}
+
+export interface UsePopupProps<T> {
+  component: ComponentPublicInstanceConstructor<T>;
+  emits?: RawEmits<T>;
+  props?: RawProps<T>;
+  slots?: {
+    [key: string]: Slot;
+  };
+}

package/shared/components/popup-handler/utils/index.ts

@@ -0,0 +1,9 @@
+import { getCurrentInstance, inject } from "vue";
+import { PopupPlugin } from "../types";
+
+export function getPopupPlugin() {
+  const instance = getCurrentInstance();
+  if (instance) {
+    return inject<PopupPlugin>("popupPlugin");
+  }
+}

package/shared/index.ts

@@ -3,7 +3,7 @@ import { AssetsDetailsModule } from "./modules/assets";
 import { VcAppSwitcherComponent } from "./components/app-switcher";
 import { VcBladeNavigationComponent } from "./components/blade-navigation";
 import { AssetsManagerModule } from "./modules/assets-manager";
-import { VcNotificationComponent } from "./components/notifications";
+import { VcPopupHandler } from "./components/popup-handler";
 
 export const SharedModule = {
   install(app: App): void {
@@ -12,7 +12,7 @@ export const SharedModule = {
       .use(AssetsManagerModule)
       .use(VcBladeNavigationComponent)
       .use(VcAppSwitcherComponent)
-      .use(VcNotificationComponent);
+      .use(VcPopupHandler);
   },
 };
 
@@ -22,3 +22,5 @@ export * from "./modules/assets-manager";
 export * from "./components/app-switcher";
 export * from "./components/blade-navigation";
 export * from "./components/notifications";
+export * from "./components/error-interceptor";
+export * from "./components/popup-handler";

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -4,14 +4,14 @@
     :subtitle="$t('ASSETS.PAGES.DETAILS.SUBTITLE')"
     :expanded="expanded"
     :closable="closable"
-    :toolbarItems="bladeToolbar"
+    :toolbar-items="bladeToolbar"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
     <template
-      v-slot:error
       v-if="$slots['error']"
+      #error
     >
       <slot name="error"></slot>
     </template>
@@ -63,8 +63,8 @@
                           size="m"
                           class="tw-ml-2"
                           variant="onlytext"
-                          @click="copyLink(defaultAsset.url)"
                           title="Copy link"
+                          @click="copyLink(defaultAsset.url)"
                         ></VcButton>
                       </div>
                     </VcCol>
@@ -73,39 +73,39 @@
               </VcRow>
 
               <Field
+                v-slot="{ errorMessage, handleChange, errors }"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
                 name="asset_name"
                 rules="required"
-                :modelValue="defaultAsset.name"
-                v-slot="{ errorMessage, handleChange, errors }"
+                :model-value="defaultAsset.name"
               >
                 <VcInput
+                  v-model="assetNameClean"
                   class="tw-mb-4"
                   :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
-                  v-model="assetNameClean"
-                  @update:modelValue="handleChange"
                   clearable
                   required
                   :error="!!errors.length"
                   :error-message="errorMessage"
                   :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')"
                   :disabled="readonly"
+                  @update:model-value="handleChange"
                 ></VcInput>
               </Field>
               <VcInput
+                v-if="assetType === 'Image'"
+                v-model="defaultAsset.altText"
                 class="tw-mb-4"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TITLE')"
-                v-model="defaultAsset.altText"
                 clearable
                 :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.PLACEHOLDER')"
                 :tooltip="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TOOLTIP')"
-                v-if="assetType === 'Image'"
                 :disabled="readonly"
               ></VcInput>
               <VcTextarea
+                v-model="defaultAsset.description"
                 class="tw-mb-4"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
-                v-model="defaultAsset.description"
                 :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.PLACEHOLDER')"
                 :disabled="readonly"
               ></VcTextarea>
@@ -139,6 +139,8 @@ export interface Props {
 
 export interface Emits {
   (event: "close:blade"): void;
+  (event: "expand:blade"): void;
+  (event: "collapse:blade"): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -3,15 +3,15 @@
     :title="$t('ASSETS_MANAGER.TITLE')"
     :expanded="expanded"
     :closable="closable"
-    :toolbarItems="bladeToolbar"
-    @close="$emit('close:blade')"
+    :toolbar-items="bladeToolbar"
     width="70%"
+    @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
   >
     <template
-      v-slot:error
       v-if="$slots['error']"
+      #error
     >
       <slot name="error"></slot>
     </template>
@@ -25,20 +25,20 @@
       <VcTable
         :columns="columns"
         :expanded="expanded"
-        stateKey="assets_manager"
-        :reorderableRows="!readonly"
+        state-key="assets_manager"
+        :reorderable-rows="!readonly"
         :items="defaultAssets"
         :header="false"
         :footer="false"
-        :itemActionBuilder="!readonly && actionBuilder"
+        :item-action-builder="!readonly && actionBuilder"
         :multiselect="!readonly"
         class="tw-h-full tw-w-full"
         @item-click="onItemClick"
         @row:reorder="sortAssets"
-        @selectionChanged="onSelectionChanged"
+        @selection-changed="onSelectionChanged"
       >
         <!-- Empty template -->
-        <template v-slot:empty>
+        <template #empty>
           <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
             <VcIcon
               icon="fas fa-cloud-upload-alt"
@@ -52,14 +52,14 @@
         </template>
 
         <!-- Override size column -->
-        <template v-slot:item_size="{ item }">
+        <template #item_size="{ item }">
           <div>
             {{ readableSize(item.size) }}
           </div>
         </template>
 
         <!-- Override url column -->
-        <template v-slot:item_url="{ item }">
+        <template #item_url="{ item }">
           <div class="tw-flex tw-items-center tw-justify-center">
             <template v-if="isImage(item.name)">
               <VcImage
@@ -80,14 +80,14 @@
         </template>
 
         <!-- Overide order column -->
-        <template v-slot:item_sortOrder="{ item }">
+        <template #item_sortOrder="{ item }">
           <div>
             {{ item.sortOrder }}
           </div>
         </template>
 
         <!-- Mobile -->
-        <template v-slot:mobile-item="{ item }">
+        <template #mobile-item="{ item }">
           <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-p-3 tw-flex tw-flex-nowrap">
             <template v-if="isImage(item.name)">
               <VcImage
@@ -112,19 +112,19 @@
               </div>
               <div class="tw-mt-3 tw-w-full tw-flex tw-justify-between">
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
-                  <VcHint>{{ $t("ASSETS_MANAGER.TABLE.SIZE") }}</VcHint>
+                  <VcHint>{{ $t("ASSETS_MANAGER.TABLE.HEADER.SIZE") }}</VcHint>
                   <div class="tw-truncate tw-mt-1">
                     {{ readableSize(item.size) }}
                   </div>
                 </div>
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
-                  <VcHint>{{ $t("ASSETS_MANAGER.TABLE.CREATED_DATE") }}</VcHint>
+                  <VcHint>{{ $t("ASSETS_MANAGER.TABLE.HEADER.CREATED_DATE") }}</VcHint>
                   <div class="tw-truncate tw-mt-1">
                     {{ item.createdDate && moment(item.createdDate).fromNow() }}
                   </div>
                 </div>
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
-                  <VcHint>{{ $t("ASSETS_MANAGER.TABLE.SORT_ORDER") }}</VcHint>
+                  <VcHint>{{ $t("ASSETS_MANAGER.TABLE.HEADER.SORT_ORDER") }}</VcHint>
                   <div class="tw-truncate tw-mt-1">
                     {{ item.sortOrder }}
                   </div>
@@ -140,18 +140,18 @@
       ref="uploader"
       type="file"
       hidden
-      @change="inputUpload"
       multiple
       name="assets_manager"
+      @change="inputUpload"
     />
   </VcBlade>
 </template>
 
 <script setup lang="ts">
 import { Asset, IActionBuilderResult, IBladeToolbar, ITableColumns } from "../../../../../core/types";
-import { ref, computed, onMounted, shallowRef, unref, watch } from "vue";
+import { ref, computed, onMounted, unref, watch, markRaw } from "vue";
 import { useI18n } from "vue-i18n";
-import { IBladeEvent, IParentCallArgs } from "./../../../../../shared";
+import { IParentCallArgs, useBladeNavigation } from "./../../../../../shared";
 import moment from "moment";
 import Assets from "./../../../assets/components/assets-details/assets-details.vue";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
@@ -164,7 +164,7 @@ export interface Props {
     assets: Asset[];
     assetsEditHandler: (assets: Asset[]) => Asset[];
     assetsUploadHandler: (files: FileList) => Promise<Asset[]>;
-    assetsRemoveHandler: (assets: Asset[]) => Asset[];
+    assetsRemoveHandler: (assets: Asset[]) => Promise<Asset[]>;
     disabled: boolean;
   };
 }
@@ -172,7 +172,8 @@ export interface Props {
 export interface Emits {
   (event: "parent:call", args: IParentCallArgs): void;
   (event: "close:blade"): void;
-  (event: "open:blade", blade: IBladeEvent): void;
+  (event: "expand:blade"): void;
+  (event: "collapse:blade"): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -195,6 +196,8 @@ const readonly = computed(() => props.options.disabled);
 let assetsCopy;
 const modified = ref(false);
 
+const { openBlade } = useBladeNavigation();
+
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "save",
@@ -218,9 +221,9 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     id: "delete",
     title: computed(() => t("ASSETS_MANAGER.TOOLBAR.DELETE")),
     icon: "fas fa-trash",
-    clickHandler() {
+    async clickHandler() {
       if (props.options.assetsRemoveHandler && typeof props.options.assetsRemoveHandler === "function") {
-        defaultAssets.value = props.options.assetsRemoveHandler(selectedItems.value);
+        defaultAssets.value = await props.options.assetsRemoveHandler(selectedItems.value);
       }
     },
     disabled: computed(() => !selectedItems.value.length || readonly.value),
@@ -338,9 +341,9 @@ async function inputUpload(event: Event) {
 }
 
 function onItemClick(item: Asset) {
-  emit("open:blade", {
-    component: shallowRef(Assets),
-    bladeOptions: {
+  openBlade({
+    blade: markRaw(Assets),
+    options: {
       asset: unref(item),
       disabled: readonly.value,
       assetEditHandler: (asset: Asset) => {
@@ -355,8 +358,8 @@ function onItemClick(item: Asset) {
           defaultAssets.value = props.options.assetsEditHandler(mutated);
         }
       },
-      assetRemoveHandler: (asset: Asset) => {
-        defaultAssets.value = props.options.assetsRemoveHandler([asset]);
+      assetRemoveHandler: async (asset: Asset) => {
+        defaultAssets.value = await props.options.assetsRemoveHandler([asset]);
       },
     },
   });
@@ -367,7 +370,7 @@ const onSelectionChanged = (items: Asset[]) => {
 };
 
 const actionBuilder = (): IActionBuilderResult[] => {
-  let result = [];
+  const result = [];
 
   result.push({
     icon: "fas fa-edit",
@@ -382,8 +385,8 @@ const actionBuilder = (): IActionBuilderResult[] => {
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.DELETE")),
     variant: "danger",
     leftActions: true,
-    clickHandler(item: Asset) {
-      defaultAssets.value = props.options.assetsRemoveHandler([item]);
+    async clickHandler(item: Asset) {
+      defaultAssets.value = await props.options.assetsRemoveHandler([item]);
       selectedItems.value = [];
     },
   });

package/ui/components/atoms/vc-button/vc-button.vue

@@ -9,8 +9,8 @@
         'vc-button_selected': selected,
       },
     ]"
-    @click="onClick"
     :disabled="disabled"
+    @click="onClick"
   >
     <VcIcon
       v-if="icon"

package/ui/components/atoms/vc-card/vc-card.vue

@@ -4,8 +4,8 @@
     :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
   >
     <div
-      class="vc-card__header"
       v-if="header"
+      class="vc-card__header"
       @click="onHeaderClick"
     >
       <VcIcon
@@ -30,8 +30,8 @@
     </div>
     <transition name="fade">
       <div
-        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
         v-show="!isCollapsedInternal"
+        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
       >
         <slot></slot>
       </div>

package/ui/components/atoms/vc-info-row/vc-info-row.vue

@@ -6,15 +6,15 @@
           <span>{{ label }}</span>
           <template
             v-if="tooltip"
-            v-slot:tooltip
+            #tooltip
             >{{ tooltip }}</template
           >
         </VcLabel>
       </VcCol>
       <VcCol size="2">
         <p
-          class="tw-m-0"
           v-if="type === 'default'"
+          class="tw-m-0"
         >
           {{ value }}
         </p>

package/ui/components/atoms/vc-label/vc-label.vue

@@ -18,8 +18,8 @@
         @mouseleave="tooltipVisible = false"
       ></VcIcon>
       <span
-        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
         v-if="tooltipVisible"
+        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
       >
         <slot name="tooltip"></slot>
       </span>

package/ui/components/atoms/vc-loading/vc-loading.vue

@@ -11,9 +11,9 @@
       ></span>
       <div class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers">
         <span
-          class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
           v-for="item in 3"
           :key="`marker_${item}`"
+          class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
         ></span>
       </div>
     </div>

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -20,8 +20,8 @@
         <span class="vc-switch__slider"></span>
       </label>
       <VcHint
-        class="tw-mt-2 tw-w-max"
         v-if="tooltip"
+        class="tw-mt-2 tw-w-max"
       >
         {{ tooltip }}
       </VcHint>

package/ui/components/index.ts

@@ -42,3 +42,5 @@ export * from "./organisms/vc-gallery";
 export * from "./organisms/vc-login-form";
 export * from "./organisms/vc-popup";
 export * from "./organisms/vc-table";
+export * from "./organisms/vc-notification-dropdown";
+export * from "./organisms/vc-notification-template";

package/ui/components/molecules/vc-code-editor/vc-code-editor.vue

@@ -17,15 +17,15 @@
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
-        v-slot:tooltip
+        #tooltip
         >{{ tooltip }}</template
       >
     </VcLabel>
 
     <!-- Editor field -->
     <v-ace-editor
-      class="tw-border tw-border-solid tw-border-[color:var(--code-editor-border-color)] tw-rounded-[var(--code-editor-border-radius)] tw-h-[200px]"
       v-model:value="content"
+      class="tw-border tw-border-solid tw-border-[color:var(--code-editor-border-color)] tw-rounded-[var(--code-editor-border-radius)] tw-h-[200px]"
       lang="html"
       theme="chrome"
       @input="onInput"
@@ -45,7 +45,7 @@
 import { VAceEditor } from "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/theme-chrome";
-import { ref, unref, watch, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { VcLabel, VcHint } from "./../../";
 
 export interface Props {