@vc-shell/framework 1.0.57 → 1.0.59

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

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

@@ -0,0 +1,372 @@
+<template>
+  <VcBlade
+    :title="$t('ASSETS_MANAGER.TITLE')"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbarItems="bladeToolbar"
+    @close="$emit('close:blade')"
+    width="50%"
+  >
+    <div
+      class="tw-relative tw-h-full"
+      @dragover.prevent.stop="dragOver"
+      @dragleave.prevent="dragLeave"
+      @drop.prevent.stop="onDrop"
+    >
+      <VcLoading :active="loading"></VcLoading>
+      <VcTable
+        :columns="columns"
+        :expanded="expanded"
+        stateKey="assets_manager"
+        :reorderableRows="true"
+        :items="defaultAssets"
+        :header="false"
+        :footer="false"
+        :itemActionBuilder="actionBuilder"
+        multiselect
+        class="tw-h-full tw-w-full"
+        @item-click="onItemClick"
+        @row:reorder="sortAssets"
+        @selectionChanged="onSelectionChanged"
+      >
+        <!-- Empty template -->
+        <template v-slot: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"
+              class="tw-text-[100px] tw-text-[#41afe6]"
+            ></VcIcon>
+            <div class="tw-m-4 tw-text-xl tw-font-medium">
+              {{ $t("ASSETS_MANAGER.EMPTY.NO_ASSETS") }}
+            </div>
+            <VcButton @click="toggleUploader">{{ $t("ASSETS_MANAGER.EMPTY.UPLOAD") }}</VcButton>
+          </div>
+        </template>
+
+        <!-- Override size column -->
+        <template v-slot:item_size="{ item }">
+          <div>
+            {{ readableSize(item.size) }}
+          </div>
+        </template>
+
+        <!-- Override url column -->
+        <template v-slot:item_url="{ item }">
+          <div class="tw-flex tw-items-center tw-justify-center">
+            <template v-if="isImage(item.name)">
+              <VcImage
+                :bordered="true"
+                size="s"
+                aspect="1x1"
+                :src="item.url"
+                background="contain"
+              ></VcImage>
+            </template>
+            <template v-else>
+              <VcIcon
+                :icon="getFileThumbnail(item.name)"
+                class="tw-text-[#a9bfd2] tw-text-[38px]"
+              ></VcIcon>
+            </template>
+          </div>
+        </template>
+
+        <!-- Overide order column -->
+        <template v-slot:item_sortOrder="{ item }">
+          <div>
+            {{ item.sortOrder }}
+          </div>
+        </template>
+
+        <!-- Mobile -->
+        <template v-slot: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
+                :bordered="true"
+                size="s"
+                aspect="1x1"
+                :src="item.url"
+                background="contain"
+              ></VcImage>
+            </template>
+            <template v-else>
+              <div class="tw-w-12 tw-flex tw-items-center tw-justify-center">
+                <VcIcon
+                  :icon="getFileThumbnail(item.name)"
+                  class="tw-text-[#a9bfd2] tw-w-12 tw-text-[48px]"
+                ></VcIcon>
+              </div>
+            </template>
+            <div class="tw-grow tw-basis-0 tw-ml-3 tw-truncate">
+              <div class="tw-font-bold tw-text-lg tw-truncate">
+                {{ item.name }}
+              </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>
+                  <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>
+                  <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>
+                  <div class="tw-truncate tw-mt-1">
+                    {{ item.sortOrder }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </VcTable>
+    </div>
+
+    <input
+      ref="uploader"
+      type="file"
+      hidden
+      @change="inputUpload"
+      multiple
+      name="assets_manager"
+    />
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import { Asset, IActionBuilderResult, IBladeToolbar, ITableColumns } from "../../../../../core/types";
+import { ref, computed, onMounted, shallowRef, unref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { IBladeEvent, IParentCallArgs } from "./../../../../../shared";
+import moment from "moment";
+import Assets from "./../../../assets/components/assets-details/assets-details.vue";
+import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  options: {
+    assets: Asset[];
+    assetsEditHandler: (assets: Asset[]) => void;
+    assetsUploadHandler: (files: FileList) => void;
+    assetsRemoveHandler: (assets: Asset[]) => void;
+    disabled: boolean;
+  };
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "close:blade"): void;
+  (event: "open:blade", blade: IBladeEvent): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  param: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+
+const defaultAssets = ref<Asset[]>([]);
+
+const isDragging = ref(false);
+const uploader = ref();
+const loading = ref(false);
+const selectedItems = ref([]);
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "save",
+    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.SAVE")),
+    icon: "fas fa-save",
+    clickHandler() {
+      emit("close:blade");
+    },
+  },
+  {
+    id: "add",
+    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.ADD")),
+    icon: "fas fa-plus",
+    clickHandler() {
+      toggleUploader();
+    },
+  },
+  {
+    id: "delete",
+    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.DELETE")),
+    icon: "fas fa-trash",
+    clickHandler() {
+      if (props.options.assetsRemoveHandler && typeof props.options.assetsRemoveHandler === "function") {
+        props.options.assetsRemoveHandler(selectedItems.value);
+        defaultAssets.value = defaultAssets.value.filter((asset) => !selectedItems.value.includes(asset));
+      }
+    },
+    disabled: computed(() => !selectedItems.value.length),
+  },
+]);
+
+const columns = ref<ITableColumns[]>([
+  {
+    id: "url",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.HEADER.IMAGE")),
+    width: "60px",
+    alwaysVisible: true,
+  },
+  {
+    id: "name",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.HEADER.NAME")),
+    width: "120px",
+    alwaysVisible: true,
+  },
+  {
+    id: "size",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.HEADER.SIZE")),
+    width: "100px",
+    alwaysVisible: true,
+  },
+  {
+    id: "sortOrder",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.HEADER.SORT_ORDER")),
+    width: "180px",
+    alwaysVisible: true,
+  },
+  {
+    id: "createdDate",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.HEADER.CREATED_DATE")),
+    width: "140px",
+    alwaysVisible: true,
+    type: "date-ago",
+  },
+]);
+
+onMounted(() => {
+  defaultAssets.value = props.options?.assets;
+});
+
+function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[] }) {
+  if (props.options.assetsEditHandler && typeof props.options.assetsEditHandler === "function") {
+    const sorted = event.value.map((item, index) => {
+      item.sortOrder = index;
+      return item;
+    });
+    defaultAssets.value = sorted;
+    props.options.assetsEditHandler(sorted);
+  }
+}
+
+function dragOver() {
+  if (!props.options.disabled) {
+    isDragging.value = true;
+  }
+}
+
+function dragLeave() {
+  if (!props.options.disabled) {
+    isDragging.value = false;
+  }
+}
+
+async function onDrop(event: DragEvent) {
+  if (!props.options.disabled) {
+    const fileList = event.dataTransfer?.files;
+
+    if (fileList && fileList.length) {
+      await upload(fileList);
+    }
+    isDragging.value = false;
+  }
+}
+
+function toggleUploader() {
+  uploader.value.value = "";
+  uploader.value.click();
+}
+
+async function upload(files: FileList) {
+  if (files && files.length) {
+    try {
+      loading.value = true;
+      await props.options.assetsUploadHandler(files);
+    } finally {
+      loading.value = false;
+    }
+  }
+}
+
+async function inputUpload(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const fileList = target.files;
+
+  if (fileList && fileList.length) {
+    upload(fileList);
+  }
+}
+
+function onItemClick(item: Asset) {
+  emit("open:blade", {
+    component: shallowRef(Assets),
+    bladeOptions: {
+      asset: unref(item),
+      assetEditHandler: (asset: Asset) => {
+        const mutated = defaultAssets.value.map((x) => {
+          if (x.id === asset.id || x.url === asset.url) {
+            return asset;
+          }
+          return x;
+        });
+
+        if (props.options.assetsEditHandler && typeof props.options.assetsEditHandler === "function") {
+          defaultAssets.value = mutated;
+          props.options.assetsEditHandler(mutated);
+        }
+      },
+      assetRemoveHandler: (asset: Asset) => {
+        props.options.assetsRemoveHandler([asset]);
+      },
+    },
+  });
+}
+
+const onSelectionChanged = (items: Asset[]) => {
+  selectedItems.value = items;
+};
+
+const actionBuilder = (): IActionBuilderResult[] => {
+  let result = [];
+
+  result.push({
+    icon: "fas fa-edit",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.EDIT")),
+    clickHandler(item: Asset) {
+      onItemClick(item);
+    },
+  });
+
+  result.push({
+    icon: "fas fa-trash",
+    title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.DELETE")),
+    variant: "danger",
+    leftActions: true,
+    clickHandler(item: Asset) {
+      props.options.assetsRemoveHandler([item]);
+      defaultAssets.value = defaultAssets.value.filter((asset) => asset !== item);
+      selectedItems.value = [];
+    },
+  });
+
+  return result;
+};
+
+defineExpose({
+  title: t("ASSETS_MANAGER.TITLE"),
+});
+</script>

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

@@ -0,0 +1,3 @@
+import _AssetsManager from "./assets-manager.vue";
+
+export const AssetsManager = _AssetsManager as typeof _AssetsManager;

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

@@ -0,0 +1 @@
+export { AssetsManager } from "./assets-manager";

package/shared/modules/assets-manager/index.ts

@@ -0,0 +1,14 @@
+import { createModule } from "../../../core/plugins/modularity";
+import * as components from "./components";
+import * as locales from "./locales";
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    AssetsManager: (typeof components)["AssetsManager"];
+  }
+}
+
+export default createModule(components, locales);
+
+export * from "./components";

package/shared/modules/assets-manager/locales/en.json

@@ -0,0 +1,28 @@
+{
+  "ASSETS_MANAGER": {
+    "TITLE": "Assets",
+    "TOOLBAR": {
+      "SAVE":"Save",
+      "REFRESH":"Resfresh",
+      "ADD": "Add",
+      "DELETE": "Delete selected"
+    },
+    "EMPTY": {
+      "NO_ASSETS":"Drag & drop assets here or click 'Upload' button",
+      "UPLOAD": "Upload"
+    },
+    "TABLE":{
+      "HEADER":{
+        "IMAGE": "Img",
+        "NAME":"Name",
+        "SIZE":"Size",
+        "SORT_ORDER":"Sort order",
+        "CREATED_DATE":"Created date"
+      },
+      "ACTIONS":{
+        "DELETE":"Delete",
+        "EDIT": "Edit"
+      }
+    }
+  }
+}

package/shared/utilities/assets.ts

@@ -0,0 +1,40 @@
+const fileThumbnails = [
+  { image: "fas fa-file-pdf", extensions: ["pdf"] },
+  { image: "fas fa-file-word", extensions: ["doc", "docx"] },
+  { image: "fas fa-file-excel", extensions: ["xls", "xlsx"] },
+  { image: "fas fa-file-powerpoint", extensions: ["ppt", "pptx"] },
+  { image: "fas fa-file-csv", extensions: ["csv"] },
+  { image: "fas fa-file-archive", extensions: ["zip"] },
+  { image: "fas fa-file-music", extensions: ["mp3", "aac"] },
+  { image: "fas fa-file-video", extensions: ["mp4", "avi"] },
+];
+
+const imageExtensions = new Set(["png", "jpg", "jpeg", "svg", "gif"]);
+
+function getExtension(fileName: string) {
+  return fileName.split(".").pop()?.toLowerCase();
+}
+
+function isImage(name: string) {
+  return imageExtensions.has(getExtension(name));
+}
+
+function getFileThumbnail(name: string) {
+  return (
+    fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image || "fas fa-file"
+  );
+}
+
+function readableSize(bytes: number, decimals = 2) {
+  if (!bytes) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+
+export { isImage, getFileThumbnail, readableSize };

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

@@ -37,8 +37,6 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
-
 export interface Props {
   modelValue?: boolean;
   disabled?: boolean;
@@ -51,17 +49,9 @@ export interface Emits {
   (event: "update:modelValue", value: boolean): void;
 }
 
-const props = withDefaults(defineProps<Props>(), { name: "Field" });
+withDefaults(defineProps<Props>(), { name: "Field" });
 const emit = defineEmits<Emits>();
 
-watch(
-  () => props.modelValue,
-  (value) => {
-    emit("update:modelValue", value);
-  }
-);
-
-// Handle input event to propertly validate value and emit changes
 function onChange(e: Event) {
   const newValue = (e.target as HTMLInputElement).checked;
   emit("update:modelValue", newValue);

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -109,6 +109,7 @@ function toggleUploader() {
 }
 
 function onDrop(event: DragEvent) {
+  dragLeave();
   const fileList = event.dataTransfer?.files;
 
   if (fileList && fileList.length) {

package/ui/components/molecules/vc-input/vc-input.vue

@@ -176,7 +176,7 @@ export interface Props {
   /**
    * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
    */
-  modelValue: string | number | Date | null | undefined;
+  modelValue?: string | number | Date | null | undefined;
   /**
    * Input label text
    */

package/ui/components/molecules/vc-select/vc-select.vue

@@ -60,7 +60,7 @@
                         {{ prefix }}
                       </div>
                       <div
-                        class="tw-w-full tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
+                        class="tw-appearance-none tw-border-none tw-outline-none tw-min-h-[var(--select-height)] tw-flex tw-items-center tw-w-full tw-box-border tw-cursor-pointer invalid:tw-text-[color:var(--select-placeholder-color)] tw-truncate"
                         @click.stop="toggleDropdown"
                       >
                         <div
@@ -90,7 +90,7 @@
                                   <div
                                     class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
                                   >
-                                    <span>{{ getEmittingOptionValue(item.opt) }}</span>
+                                    <span>{{ getOptionLabel(item.opt) }}</span>
                                     <VcIcon
                                       v-if="!disabled"
                                       class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -26,13 +26,14 @@
       <!-- Show blades name when at least one blade is opened -->
       <div
         v-if="blades.length === 1"
-        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header"
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header tw-ml-2"
       >
         {{ blades[0].title }}
       </div>
 
       <!-- Show back link when more than one blade is opened -->
       <VcLink
+        class="tw-ml-3"
         v-else-if="blades.length > 1"
         @click="$emit('backlink:click')"
       >
@@ -45,7 +46,7 @@
     </template>
 
     <!-- Additional spacer -->
-    <div class="tw-grow tw-basis-0 tw-basis-0"></div>
+    <div class="tw-grow tw-basis-0"></div>
 
     <!-- Toolbar container -->
     <div class="tw-flex tw-h-full tw-box-border">

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -4,10 +4,10 @@
       <router-link
         :to="component.url"
         custom
-        v-slot="{ isActive, navigate }"
+        v-slot="{ isExactActive, navigate }"
       >
         <vc-app-menu-link
-          :isActive="isActive"
+          :isActive="isExactActive"
           :children="children"
           :sticky="sticky"
           :icon="icon as string"
@@ -23,7 +23,6 @@
         :icon="icon as string"
         :title="title"
         @onClick="onMenuItemClick"
-        :isActive="isHomePage"
       />
 
       <!-- Nested menu items -->
@@ -61,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref } from "vue";
 import { IBladeToolbar, IMenuItems } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { NavigationFailure, useRoute } from "vue-router";
@@ -109,8 +108,6 @@ const emit = defineEmits<Emits>();
 
 const isOpened = ref(false);
 
-const isHomePage = computed(() => route.path === "/");
-
 onMounted(() => {
   if (props.children && props.children.length && props.children.find((x) => x.component?.url === route?.path)) {
     isOpened.value = true;

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

@@ -50,7 +50,7 @@
         </div>
         <div
           v-else
-          class="vc-blade-header__button"
+          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onExpand"
         >
           <VcIcon
@@ -81,11 +81,7 @@ export interface Props {
   subtitle?: string | undefined;
   icon?: string | undefined;
 }
-const props = withDefaults(defineProps<Props>(), {
-  expandable: false,
-  expanded: false,
-  closable: false,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits(["close", "expand", "collapse"]);
 

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -56,7 +56,11 @@
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
+      option-label="alias"
+      option-value="id"
       :multiple="true"
+      :emit-value="false"
+      :clearable="false"
     ></VcSelect>
   </Field>
 
@@ -91,6 +95,8 @@
       @search="onSearch"
       @close="onClose"
       :multiple="property.multivalue"
+      :emit-value="false"
+      :clearable="false"
     ></VcSelect>
   </Field>