@vc-shell/framework 1.0.57 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.57",
+  "version": "1.0.60",
   "main": "./dist/framework.mjs",
   "module": "./dist/framework.mjs",
   "types": "./dist/types/index.d.ts",
@@ -53,12 +53,11 @@
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.1.6",
     "vue3-ace-editor": "^2.2.2",
-    "vue3-touch-events": "^4.1.0",
-    "vuedraggable": "^4.1.0"
+    "vue3-touch-events": "^4.1.0"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.57",
-    "@vc-shell/config-generator": "^1.0.57",
+    "@vc-shell/api-client-generator": "^1.0.60",
+    "@vc-shell/config-generator": "^1.0.60",
     "sass": "^1.49.0",
     "typescript": "^4.9.5",
     "url-pattern": "^1.0.3"
@@ -67,5 +66,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "ca294492c2aa439befaba5ee3899dd867c50e35b"
+  "gitHead": "0b80b6ecc59e3dbef598932343cafd6ea63a56d2"
 }

package/shared/{app-switcher → components/app-switcher}/components/vc-app-switcher/vc-app-switcher.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { AppDescriptor } from "./../../../../core/api";
+import { AppDescriptor } from "../../../../../core/api";
 
 export interface Props {
   appsList: AppDescriptor[];

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

@@ -1,6 +1,6 @@
 import { computed, Ref, ref } from "vue";
-import { AppDescriptor, AppsClient } from "./../../../../core/api";
-import { useUser, usePermissions } from "./../../../../core/composables";
+import { AppDescriptor, AppsClient } from "../../../../../core/api";
+import { useUser, usePermissions } from "../../../../../core/composables";
 
 interface IUseAppSwitcher {
   readonly appsList: Ref<AppDescriptor[]>;

package/shared/{app-switcher → components/app-switcher}/index.ts

@@ -1,4 +1,4 @@
-import { createModule } from "../../core/plugins/modularity";
+import { createModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 
 // Declare globally

package/shared/{blade-navigation → components/blade-navigation}/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -33,7 +33,7 @@
 <script lang="ts" setup>
 import { computed, onBeforeUpdate, ref } from "vue";
 import { useRoute } from "vue-router";
-import { IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "./../../../../shared";
+import { IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "./../../../../../shared";
 
 export interface Props {
   blades: IBladeContainer[];
@@ -64,7 +64,7 @@ onBeforeUpdate(() => {
 });
 
 const setBladesRef = (el: IBladeElement) => {
-  if (el && Object.keys(el).length) {
+  if (el && el !== null) {
     bladesRefs.value.push(el);
   }
 };

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

@@ -1,8 +1,8 @@
 import { computed, ref, unref, watch, Ref } from "vue";
 import { isEqual } from "lodash-es";
 import { useRouter, useRoute, NavigationFailure } from "vue-router";
-import { usePermissions } from "./../../../../core/composables";
-import { ExtendedComponent, IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "./../../../../shared";
+import { usePermissions } from "../../../../../core/composables";
+import { ExtendedComponent, IBladeContainer, IBladeElement, IBladeEvent, IParentCallArgs } from "../../../..";
 
 interface IUseBladeNavigation {
   readonly blades: Ref<IBladeContainer[]>;
@@ -52,7 +52,7 @@ export default (): IUseBladeNavigation => {
     index?: number,
     navigationCb?: () => Promise<void | NavigationFailure>
   ) {
-    console.debug(`openBlade(${1}) called.`);
+    console.debug(`openBlade called.`);
 
     const parent = unref(parentBlade);
     const child = unref(blade);
@@ -91,8 +91,9 @@ export default (): IUseBladeNavigation => {
   }
 
   async function closeBlade(index: number) {
-    if (index < bladesRefs.value.length) {
-      const children = bladesRefs.value.slice(index).reverse();
+    const refsIndex = index + 1;
+    if (refsIndex < bladesRefs.value.length) {
+      const children = bladesRefs.value.slice(refsIndex).reverse();
 
       isPrevented.value = false;
       for (let i = 0; i < children.length; i++) {

package/shared/{blade-navigation → components/blade-navigation}/index.ts

@@ -1,4 +1,4 @@
-import { createModule } from "../../core/plugins/modularity";
+import { createModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 
 // Declare globally

package/shared/{blade-navigation → components/blade-navigation}/types/index.ts

@@ -1,5 +1,5 @@
 import { Component, ComponentPublicInstance } from "vue";
-import { IMenuItems } from "./../../../core/types";
+import { IMenuItems } from "../../../../core/types";
 import { NavigationFailure } from "vue-router";
 
 /* onParentCall event interface */

package/shared/index.ts

@@ -1,14 +1,17 @@
 import { App } from "vue";
-import { default as AssetsDetailsModule } from "./assets";
-import { default as VcAppSwitcherModule } from "./app-switcher";
-import { default as VcBladeNavigationModule } from "./blade-navigation";
+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";
 
 export default {
   install(app: App): void {
-    app.use(AssetsDetailsModule).use(VcAppSwitcherModule).use(VcBladeNavigationModule);
+    app.use(AssetsDetailsModule).use(AssetsManagerModule).use(VcBladeNavigationComponent).use(VcAppSwitcherComponent);
   },
 };
 
-export * from "./assets";
-export * from "./app-switcher";
-export * from "./blade-navigation";
+export * from "./modules/assets";
+export * from "./modules/assets-manager";
+
+export * from "./components/app-switcher";
+export * from "./components/blade-navigation";

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

@@ -0,0 +1,204 @@
+<template>
+  <VcBlade
+    :title="options?.asset?.name"
+    :subtitle="$t('ASSETS.PAGES.DETAILS.SUBTITLE')"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbarItems="bladeToolbar"
+    @close="$emit('close: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 tw-w-full">
+        <VcContainer :no-padding="true">
+          <div class="tw-p-4">
+            <VcForm>
+              <VcRow class="tw-mb-4 !tw-flex">
+                <template v-if="isImage(defaultAsset.name)">
+                  <VcImage
+                    :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] tw-shrink-0"
+                  ></VcIcon>
+                </template>
+                <VcCol class="tw-ml-6">
+                  <VcCol>
+                    <VcCol>
+                      <VcLabel>{{ $t("ASSETS.PAGES.DETAILS.FIELDS.SIZE") }}</VcLabel>
+                      <VcHint class="tw-text-s">{{ readableSize(defaultAsset.size) }}</VcHint>
+                    </VcCol>
+                    <VcCol>
+                      <VcLabel>{{ $t("ASSETS.PAGES.DETAILS.FIELDS.CREATED_DATE") }}</VcLabel>
+                      <VcHint class="tw-text-s">{{
+                        (defaultAsset.createdDate && moment(defaultAsset.createdDate).fromNow()) || "N/A"
+                      }}</VcHint>
+                    </VcCol>
+                    <VcCol class="tw-w-full">
+                      <VcLabel>{{ $t("ASSETS.PAGES.DETAILS.FIELDS.URL") }}</VcLabel>
+                      <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"
+                          class="tw-ml-2"
+                          variant="onlytext"
+                          @click="copyLink(defaultAsset.url)"
+                          title="Copy link"
+                        ></VcButton>
+                      </div>
+                    </VcCol>
+                  </VcCol>
+                </VcCol>
+              </VcRow>
+
+              <Field
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
+                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')"
+                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
+                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>
+            </VcForm>
+          </div>
+        </VcContainer>
+      </div>
+    </div>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+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;
+  };
+}
+
+export interface Emits {
+  (event: "close:blade"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+const emit = defineEmits<Emits>();
+useForm({ validateOnMount: false });
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const { t } = useI18n();
+const defaultAsset = ref<Asset>({ ...props.options?.asset });
+
+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"),
+    icon: "fas fa-save",
+    clickHandler() {
+      if (props.options?.assetEditHandler && typeof props.options?.assetEditHandler === "function") {
+        props.options?.assetEditHandler(defaultAsset.value);
+        emit("close:blade");
+      }
+    },
+    disabled: computed(() => isDisabled.value || readonly.value),
+  },
+  {
+    id: "delete",
+    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.DELETE"),
+    icon: "fas fa-trash",
+    clickHandler() {
+      if (props.options?.assetRemoveHandler && typeof props.options?.assetRemoveHandler === "function") {
+        props.options?.assetRemoveHandler(defaultAsset.value);
+        emit("close:blade");
+      }
+    },
+    disabled: computed(() => readonly.value),
+  },
+]);
+
+const assetType = computed(() => defaultAsset.value?.typeId);
+
+function copyLink(link: string) {
+  if (link.charAt(0) === "/") {
+    navigator.clipboard?.writeText(`${location.origin}${link}`);
+  } else {
+    navigator.clipboard?.writeText(link);
+  }
+}
+
+function openLink(link: string) {
+  location.href = link;
+}
+</script>

package/shared/{assets → modules/assets}/index.ts

@@ -1,4 +1,4 @@
-import { createModule } from "../../core/plugins/modularity";
+import { createModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 import * as locales from "./locales";
 

package/shared/{assets → modules/assets}/locales/en.json

@@ -2,15 +2,18 @@
   "ASSETS": {
     "PAGES": {
       "DETAILS": {
-        "SUBTITLE": "Image edit",
+        "SUBTITLE": "Asset edit",
         "TOOLBAR": {
           "SAVE": "Save",
           "DELETE": "Delete"
         },
         "FIELDS": {
+          "SIZE": "Size",
+          "CREATED_DATE": "Created date",
+          "URL": "Url",
           "NAME": {
-            "TITLE": "Image name",
-            "PLACEHOLDER": "Enter image name"
+            "TITLE": "Asset name",
+            "PLACEHOLDER": "Enter asset name"
           },
           "ALT": {
             "TITLE": "Image alternative text",
@@ -21,8 +24,7 @@
             "TITLE": "Meta description",
             "PLACEHOLDER": "Enter meta description"
           }
-        },
-        "DELETE_CONFIRMATION": "Are you sure you want to delete this image?"
+        }
       }
     }
   }

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

@@ -0,0 +1,2 @@
+import * as en from "./en.json";
+export { en };