@vc-shell/framework 1.0.59 → 1.0.61

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "main": "./dist/framework.mjs",
   "module": "./dist/framework.mjs",
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/index.d.ts",
   "style": "./dist/index.css",
   "files": [
     "dist",
@@ -15,10 +15,7 @@
   "exports": {
     ".": {
       "import": "./dist/framework.mjs",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./client": {
-      "types": "./dist/ui/services/types/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./dist/index.css": "./dist/index.css",
     "./tailwind.config": "./tailwind.config.js",
@@ -27,15 +24,15 @@
   "scripts": {
     "build": "yarn build:lib & yarn build:types",
     "build:lib": "vite build",
-    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "dev": "vite",
     "development": "vite build --watch -m development",
     "watch": "vite build --watch",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "generate-api-client": "cross-env APP_PLATFORM_URL=https://vcmp-dev.paas.govirto.com/ api-client-generator --color"
   },
   "dependencies": {
     "@floating-ui/vue": "^0.2.1",
-    "@popperjs/core": "^2.11.0",
     "@vee-validate/i18n": "^4.7.3",
     "@vee-validate/rules": "^4.7.3",
     "@vueup/vue-quill": "^1.1.1",
@@ -45,6 +42,7 @@
     "client-oauth2": "^4.3.3",
     "moment": "^2.29.1",
     "normalize.css": "^8.0.1",
+    "querystring-es3": "^0.2.1",
     "quill-image-uploader": "^1.2.4",
     "swiper": "^6.8.4",
     "vee-validate": "^4.7.3",
@@ -56,8 +54,8 @@
     "vue3-touch-events": "^4.1.0"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.59",
-    "@vc-shell/config-generator": "^1.0.59",
+    "@vc-shell/api-client-generator": "^1.0.61",
+    "@vc-shell/config-generator": "^1.0.61",
     "sass": "^1.49.0",
     "typescript": "^4.9.5",
     "url-pattern": "^1.0.3"
@@ -66,5 +64,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "aef25f0aa06a93c8d9265e5ffd7f73a088a0bca9"
+  "gitHead": "cc48043a60c219e1b788a5f91ed4fdda681512ff"
 }

package/shared/components/app-switcher/components/index.ts

@@ -1 +1 @@
-export { VcAppSwitcher } from "./vc-app-switcher";
+export * from "./vc-app-switcher";

package/shared/components/app-switcher/composables/index.ts

@@ -1 +1 @@
-export { default as useAppSwitcher } from "./useAppSwitcher";
+export { useAppSwitcher } from "./useAppSwitcher";

package/shared/components/app-switcher/composables/useAppSwitcher/index.ts

@@ -8,7 +8,7 @@ interface IUseAppSwitcher {
   switchApp: (app: AppDescriptor) => void;
 }
 
-export default (): IUseAppSwitcher => {
+export function useAppSwitcher(): IUseAppSwitcher {
   const { checkPermission } = usePermissions();
   const appsList = ref<AppDescriptor[]>([]);
 
@@ -46,4 +46,4 @@ export default (): IUseAppSwitcher => {
     getApps,
     switchApp,
   };
-};
+}

package/shared/components/app-switcher/index.ts

@@ -8,7 +8,7 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export default createModule(components);
+export const VcAppSwitcherComponent = createModule(components);
 
 export * from "./components";
 export * from "./composables";

package/shared/components/blade-navigation/components/index.ts

@@ -1 +1 @@
-export { VcBladeNavigation } from "./vc-blade-navigation";
+export * from "./vc-blade-navigation";

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -4,36 +4,43 @@
       :is="Component"
       :closable="false"
       v-show="$isMobile.value ? !blades.length : blades.length <= 1"
-      @open:blade="$emit('onOpen', { blade: $event, id: 0 })"
+      @open:blade="onBladeOpen($event, 0)"
       :options="parentBladeOptions"
       :expanded="blades.length === 0"
+      :maximized="findStateById(0)"
+      :blades="blades"
       :param="resolveParam"
       :key="route"
-      ref="parentRef"
+      :ref="(el: IBladeElement) => setParentRef(el, Component)"
+      @expand:blade="handleMaximizeBlade(0, true)"
+      @collapse:blade="handleMaximizeBlade(0, false)"
     >
     </component>
   </router-view>
   <component
     v-for="(blade, i) in blades"
     v-show="i >= blades.length - ($isMobile.value ? 1 : 2)"
-    :key="`blade_${i}`"
+    :key="`blade_${i + 1}`"
     :is="blade.component"
     :param="blade.param"
     :closable="i >= 0"
     :expanded="i === blades.length - 1"
+    :maximized="findStateById(blade.idx)"
     :options="blade.bladeOptions"
-    @open:blade="$emit('onOpen', { blade: $event, id: blade.idx })"
-    @close:blade="$emit('onClose', i)"
-    @close:children="$emit('onClose', i + 1)"
+    @open:blade="onBladeOpen($event, blade.idx)"
+    @close:blade="onBladeClose(blade.idx)"
+    @close:children="$emit('onClose', blade.idx + 1)"
     @parent:call="$emit('onParentCall', { id: i, args: $event })"
-    :ref="setBladesRef"
+    @expand:blade="handleMaximizeBlade(blade.idx, true)"
+    @collapse:blade="handleMaximizeBlade(blade.idx, false)"
+    :ref="(el: IBladeElement) => setBladesRef(el, blade)"
   ></component>
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUpdate, ref } from "vue";
+import { computed, ref, VNode } from "vue";
 import { useRoute } from "vue-router";
-import { IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "./../../../../../shared";
+import { IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs, IBladeRef } from "./../../../../../shared";
 
 export interface Props {
   blades: IBladeContainer[];
@@ -47,7 +54,7 @@ export interface Emits {
   (event: "onParentCall", args: { id: number; args: IParentCallArgs }): void;
 }
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
 
 const props = withDefaults(defineProps<Props>(), {
   blades: () => [],
@@ -56,18 +63,56 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const route = useRoute();
-const bladesRefs = ref([]);
-const parentRef = ref();
+const bladesRefs = ref<IBladeRef[]>([]);
+const state = ref<(IBladeRef & { expanded: boolean })[]>([]);
 
-onBeforeUpdate(() => {
-  bladesRefs.value = [parentRef.value];
-});
+const visibleBlades = computed(() => bladesRefs.value.slice(-2));
+
+function handleMaximizeBlade(id: number, expand: boolean) {
+  state.value = visibleBlades.value?.map((x: IBladeRef & { expanded: boolean }) => {
+    if (x.blade.idx === id) {
+      x.expanded = expand;
+    }
+    return x;
+  });
+}
 
-const setBladesRef = (el: IBladeElement) => {
+function findStateById(id: number) {
+  return state.value?.find((item) => item.blade.idx === id)?.expanded;
+}
+
+function setParentRef(el: IBladeElement, bladeNode: VNode) {
+  if (el) {
+    bladesRefs.value = [
+      {
+        exposed: el,
+        blade: {
+          component: bladeNode.type as VNode,
+          param: bladeNode.props?.param as string,
+          idx: 0,
+        },
+      },
+    ];
+  }
+}
+
+function setBladesRef(el: IBladeElement, blade: IBladeContainer) {
   if (el && el !== null) {
-    bladesRefs.value.push(el);
+    const isExists = bladesRefs.value.some((item) => item.blade.idx === blade.idx);
+    if (!isExists) {
+      bladesRefs.value.push({ exposed: el, blade });
+    }
   }
-};
+}
+
+function onBladeClose(idx: number) {
+  emit("onClose", idx);
+}
+
+function onBladeOpen(event: IBladeEvent, idx: number) {
+  state.value = [];
+  emit("onOpen", { blade: event, id: idx });
+}
 
 const resolveParam = computed(() => {
   return props.parentBladeParam ? props.parentBladeParam : route.params.param;

package/shared/components/blade-navigation/composables/index.ts

@@ -1 +1 @@
-export { default as useBladeNavigation } from "./useBladeNavigation";
+export { useBladeNavigation } from "./useBladeNavigation";

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -1,29 +1,29 @@
-import { computed, ref, unref, watch, Ref } from "vue";
-import { isEqual } from "lodash-es";
+import { computed, ref, unref, watch, Ref, shallowRef } from "vue";
+import * as _ from "lodash-es";
 import { useRouter, useRoute, NavigationFailure } from "vue-router";
 import { usePermissions } from "../../../../../core/composables";
-import { ExtendedComponent, IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "../../../..";
+import { ExtendedComponent, IBladeContainer, IBladeRef, IBladeEvent, IParentCallArgs } from "../../../..";
 
 interface IUseBladeNavigation {
   readonly blades: Ref<IBladeContainer[]>;
   readonly parentBladeOptions: Ref<Record<string, unknown>>;
   readonly parentBladeParam: Ref<string>;
-  bladesRefs: Ref<IBladeElement[]>;
+  bladesRefs: Ref<IBladeRef[]>;
   openBlade: (
     { parentBlade, component, param, bladeOptions, onOpen, onClose }: IBladeEvent,
-    index?: number,
+    idx?: number,
     navigationCb?: () => Promise<void | NavigationFailure>
   ) => void;
-  closeBlade: (index: number) => void;
+  closeBlade: (idx: number) => void;
   onParentCall: (index: number, args: IParentCallArgs) => void;
 }
 
-const blades = ref<IBladeContainer[]>([]);
-const bladesRefs = ref<IBladeElement[]>([]);
-const parentBladeOptions = ref<Record<string, unknown>>();
-const parentBladeParam = ref<string>();
+const blades: Ref<IBladeContainer[]> = ref([]);
+const bladesRefs: Ref<IBladeRef[]> = ref([]);
+const parentBladeOptions: Ref<Record<string, unknown>> = ref();
+const parentBladeParam: Ref<string> = ref();
 
-export default (): IUseBladeNavigation => {
+export function useBladeNavigation(): IUseBladeNavigation {
   const router = useRouter();
   const route = useRoute();
   const { checkPermission } = usePermissions();
@@ -49,7 +49,7 @@ export default (): IUseBladeNavigation => {
 
   async function openBlade(
     { parentBlade, component: blade, param, bladeOptions, onOpen, onClose }: IBladeEvent,
-    index?: number,
+    idx?: number,
     navigationCb?: () => Promise<void | NavigationFailure>
   ) {
     console.debug(`openBlade called.`);
@@ -59,7 +59,7 @@ export default (): IUseBladeNavigation => {
     const existingChild = findBlade(child);
 
     if (parent && parent.url) {
-      await closeBlade(0);
+      await closeBlade(1);
 
       if (!isPrevented.value) {
         parentBladeOptions.value = unref(bladeOptions);
@@ -80,25 +80,24 @@ export default (): IUseBladeNavigation => {
 
     if (child) {
       if (existingChild === undefined) {
-        child.idx = index + 1;
+        child.idx = idx + 1;
       } else if (existingChild) {
-        await closeBlade(blades.value.findIndex((x) => x.idx === existingChild.idx));
+        await closeBlade(blades.value.find((x) => x.idx === existingChild.idx).idx);
         child.idx = existingChild.idx;
       }
 
-      await addBlade(child, param, bladeOptions, onOpen, onClose, index);
+      await addBlade(child, param, bladeOptions, onOpen, onClose, idx);
     }
   }
 
-  async function closeBlade(index: number) {
-    const refsIndex = index + 1;
-    if (refsIndex < bladesRefs.value.length) {
-      const children = bladesRefs.value.slice(refsIndex).reverse();
+  async function closeBlade(idx: number) {
+    if (idx < bladesRefs.value.length) {
+      const children = bladesRefs.value.slice(idx).reverse();
 
       isPrevented.value = false;
       for (let i = 0; i < children.length; i++) {
-        if (children[i]?.onBeforeClose && typeof children[i].onBeforeClose === "function") {
-          const result = await children[i].onBeforeClose();
+        if (children[i]?.exposed.onBeforeClose && typeof children[i].exposed.onBeforeClose === "function") {
+          const result = await children[i].exposed.onBeforeClose();
           if (result === false) {
             isPrevented.value = true;
             break;
@@ -106,10 +105,11 @@ export default (): IUseBladeNavigation => {
         }
       }
       if (!isPrevented.value) {
-        if (typeof blades.value[index]?.onClose === "function") {
-          blades.value[index]?.onClose?.();
+        const blade = blades.value.find((x) => x.idx === idx);
+        if (blade && typeof blade.onClose === "function") {
+          blade.onClose?.();
         }
-        blades.value.splice(index);
+        blades.value.splice(blades.value.indexOf(blade));
       } else {
         throw "Closing prevented";
       }
@@ -130,7 +130,7 @@ export default (): IUseBladeNavigation => {
 
     if (blade && checkPermission(blade.permissions)) {
       blades.value.push({
-        component: blade,
+        component: shallowRef(blade),
         bladeOptions,
         param,
         onOpen,
@@ -154,8 +154,8 @@ export default (): IUseBladeNavigation => {
       const currentParent = unref(bladesRefs.value[index]);
 
       if (currentParent) {
-        if (args.method && typeof currentParent[args.method] === "function") {
-          const method = currentParent[args.method] as (args: unknown) => Promise<unknown>;
+        if (args.method && typeof currentParent.exposed[args.method] === "function") {
+          const method = currentParent.exposed[args.method] as (args: unknown) => Promise<unknown>;
           const result = await method(args.args);
           if (typeof args.callback === "function") {
             args.callback(result);
@@ -173,7 +173,7 @@ export default (): IUseBladeNavigation => {
   }
 
   function findBlade(blade: ExtendedComponent) {
-    return blades.value.find((x) => isEqual(x.component, blade));
+    return blades.value.find((x) => _.isEqual(x.component, blade));
   }
 
   return {
@@ -185,4 +185,4 @@ export default (): IUseBladeNavigation => {
     closeBlade,
     onParentCall,
   };
-};
+}

package/shared/components/blade-navigation/index.ts

@@ -8,7 +8,7 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export default createModule(components);
+export const VcBladeNavigationComponent = createModule(components);
 
 export * from "./components";
 export * from "./composables";

package/shared/components/blade-navigation/types/index.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentPublicInstance } from "vue";
+import { Component, ComponentPublicInstance, VNode } from "vue";
 import { IMenuItems } from "../../../../core/types";
 import { NavigationFailure } from "vue-router";
 
@@ -10,7 +10,7 @@ export interface IParentCallArgs {
 }
 
 /* extended component */
-export type ExtendedComponent = Component & {
+export type ExtendedComponent = (VNode | Component) & {
   url?: string;
   permissions?: string | string[];
   idx?: number;
@@ -50,3 +50,8 @@ export interface IOpenBlade extends IBladeEvent {
   id?: number;
   navigationCb?: () => Promise<void | NavigationFailure>;
 }
+
+export interface IBladeRef {
+  exposed: IBladeElement;
+  blade: IBladeContainer;
+}

package/shared/index.ts

@@ -1,10 +1,10 @@
 import { App } from "vue";
-import { default as AssetsDetailsModule } from "./modules/assets";
-import { default as VcAppSwitcherComponent } from "./components/app-switcher";
-import { default as VcBladeNavigationComponent } from "./components/blade-navigation";
-import { default as AssetsManagerModule } from "./modules/assets-manager";
+import { AssetsDetailsModule } from "./modules/assets";
+import { VcAppSwitcherComponent } from "./components/app-switcher";
+import { VcBladeNavigationComponent } from "./components/blade-navigation";
+import { AssetsManagerModule } from "./modules/assets-manager";
 
-export default {
+export const SharedModule = {
   install(app: App): void {
     app.use(AssetsDetailsModule).use(AssetsManagerModule).use(VcBladeNavigationComponent).use(VcAppSwitcherComponent);
   },

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

@@ -6,10 +6,12 @@
     :closable="closable"
     :toolbarItems="bladeToolbar"
     @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
   >
     <!-- Blade contents -->
     <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
-      <div class="assets-details__content tw-grow tw-basis-0">
+      <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">
         <VcContainer :no-padding="true">
           <div class="tw-p-4">
             <VcForm>
@@ -19,12 +21,13 @@
                     :src="defaultAsset.url"
                     size="xl"
                     :bordered="true"
+                    class="tw-shrink-0"
                   ></VcImage>
                 </template>
                 <template v-else>
                   <VcIcon
                     :icon="getFileThumbnail(defaultAsset.name)"
-                    class="tw-text-[#a9bfd2] tw-text-[128px]"
+                    class="tw-text-[#a9bfd2] tw-text-[128px] tw-shrink-0"
                   ></VcIcon>
                 </template>
                 <VcCol class="tw-ml-6">
@@ -39,14 +42,16 @@
                         (defaultAsset.createdDate && moment(defaultAsset.createdDate).fromNow()) || "N/A"
                       }}</VcHint>
                     </VcCol>
-                    <VcCol>
+                    <VcCol class="tw-w-full">
                       <VcLabel>{{ $t("ASSETS.PAGES.DETAILS.FIELDS.URL") }}</VcLabel>
-                      <VcRow>
-                        <VcLink
-                          class="vc-link tw-text-s tw-max-w-10 tw-truncate tw-w-max tw-max-w-[100px]"
-                          @click="openLink(defaultAsset.url)"
-                          >{{ defaultAsset.name }}</VcLink
-                        >
+                      <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+                        <div class="tw-truncate">
+                          <VcLink
+                            class="vc-link tw-text-s tw-truncate tw-w-full"
+                            @click="openLink(defaultAsset.url)"
+                            >{{ props.options?.asset.name }}</VcLink
+                          >
+                        </div>
                         <VcButton
                           icon="far fa-copy"
                           size="m"
@@ -55,20 +60,32 @@
                           @click="copyLink(defaultAsset.url)"
                           title="Copy link"
                         ></VcButton>
-                      </VcRow>
+                      </div>
                     </VcCol>
                   </VcCol>
                 </VcCol>
               </VcRow>
 
-              <VcInput
-                class="tw-mb-4"
+              <Field
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
-                v-model="defaultAsset.name"
-                clearable
-                required
-                :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')"
-              ></VcInput>
+                name="asset_name"
+                rules="required"
+                :modelValue="defaultAsset.name"
+                v-slot="{ errorMessage, handleChange, errors }"
+              >
+                <VcInput
+                  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"
+                ></VcInput>
+              </Field>
               <VcInput
                 class="tw-mb-4"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TITLE')"
@@ -76,15 +93,15 @@
                 clearable
                 :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.PLACEHOLDER')"
                 :tooltip="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TOOLTIP')"
-                required
                 v-if="assetType === 'Image'"
+                :disabled="readonly"
               ></VcInput>
               <VcTextarea
                 class="tw-mb-4"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
                 v-model="defaultAsset.description"
                 :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.PLACEHOLDER')"
-                required
+                :disabled="readonly"
               ></VcTextarea>
             </VcForm>
           </div>
@@ -95,18 +112,20 @@
 </template>
 
 <script lang="ts" setup>
-import { Asset } from "./../../../../../core/types";
+import { Asset, IBladeToolbar } from "./../../../../../core/types";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { VcBlade, VcContainer, VcForm, VcImage, VcInput, VcTextarea } from "./../../../../../ui/components";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
 import moment from "moment";
+import { useIsFormValid, Field, useForm, useIsFormDirty } from "vee-validate";
 
 export interface Props {
   expanded?: boolean;
   closable?: boolean;
   options?: {
     asset: Asset;
+    disabled?: boolean;
     assetEditHandler?: (defaultAsset: Asset) => void;
     assetRemoveHandler?: (defaultAsset: Asset) => void;
   };
@@ -122,10 +141,29 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<Emits>();
+useForm({ validateOnMount: false });
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
 const { t } = useI18n();
 const defaultAsset = ref<Asset>({ ...props.options?.asset });
 
-const bladeToolbar = [
+const readonly = computed(() => props.options.disabled);
+
+const assetNameClean = computed({
+  get() {
+    return defaultAsset.value.name.split(".").shift();
+  },
+  set(value: string) {
+    const fileExtension = defaultAsset.value.name.split(".").pop();
+    defaultAsset.value.name = value + "." + fileExtension;
+  },
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isValid.value;
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "save",
     title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
@@ -136,6 +174,7 @@ const bladeToolbar = [
         emit("close:blade");
       }
     },
+    disabled: computed(() => isDisabled.value || readonly.value),
   },
   {
     id: "delete",
@@ -147,8 +186,9 @@ const bladeToolbar = [
         emit("close:blade");
       }
     },
+    disabled: computed(() => readonly.value),
   },
-];
+]);
 
 const assetType = computed(() => defaultAsset.value?.typeId);
 

package/shared/modules/assets/components/index.ts

@@ -1 +1 @@
-export { AssetsDetails } from "./assets-details";
+export * from "./assets-details";

package/shared/modules/assets/index.ts

@@ -9,6 +9,6 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export default createModule(components, locales);
+export const AssetsDetailsModule = createModule(components, locales);
 
 export * from "./components";