@vc-shell/framework 1.0.57 → 1.0.60

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

@@ -0,0 +1,389 @@
+<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="!readonly"
+        :items="defaultAssets"
+        :header="false"
+        :footer="false"
+        :itemActionBuilder="!readonly && actionBuilder"
+        :multiselect="!readonly"
+        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";
+import { cloneDeep, isEqual } from "lodash-es";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  options: {
+    assets: Asset[];
+    assetsEditHandler: (assets: Asset[]) => Asset[];
+    assetsUploadHandler: (files: FileList) => Promise<Asset[]>;
+    assetsRemoveHandler: (assets: Asset[]) => Asset[];
+    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 readonly = computed(() => props.options.disabled);
+let assetsCopy;
+const modified = ref(false);
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "save",
+    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.SAVE")),
+    icon: "fas fa-save",
+    clickHandler() {
+      emit("close:blade");
+    },
+    disabled: computed(() => !modified.value || readonly.value),
+  },
+  {
+    id: "add",
+    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.ADD")),
+    icon: "fas fa-plus",
+    clickHandler() {
+      toggleUploader();
+    },
+    disabled: computed(() => readonly.value),
+  },
+  {
+    id: "delete",
+    title: computed(() => t("ASSETS_MANAGER.TOOLBAR.DELETE")),
+    icon: "fas fa-trash",
+    clickHandler() {
+      if (props.options.assetsRemoveHandler && typeof props.options.assetsRemoveHandler === "function") {
+        defaultAssets.value = props.options.assetsRemoveHandler(selectedItems.value);
+      }
+    },
+    disabled: computed(() => !selectedItems.value.length || readonly.value),
+  },
+]);
+
+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",
+  },
+]);
+
+watch(
+  () => defaultAssets.value,
+  (newVal) => {
+    modified.value = !isEqual(newVal, assetsCopy);
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  defaultAssets.value = props.options?.assets;
+  assetsCopy = cloneDeep(props.options?.assets);
+});
+
+function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[] }) {
+  if (
+    props.options.assetsEditHandler &&
+    typeof props.options.assetsEditHandler === "function" &&
+    event.dragIndex !== event.dropIndex
+  ) {
+    const sorted = event.value.map((item, index) => {
+      item.sortOrder = index;
+      return item;
+    });
+
+    defaultAssets.value = props.options.assetsEditHandler(sorted);
+  }
+}
+
+function dragOver() {
+  if (!readonly.value) {
+    isDragging.value = true;
+  }
+}
+
+function dragLeave() {
+  if (!readonly.value) {
+    isDragging.value = false;
+  }
+}
+
+async function onDrop(event: DragEvent) {
+  if (!readonly.value) {
+    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;
+      defaultAssets.value = 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),
+      disabled: readonly.value,
+      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 = props.options.assetsEditHandler(mutated);
+        }
+      },
+      assetRemoveHandler: (asset: Asset) => {
+        defaultAssets.value = 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) {
+      defaultAssets.value = props.options.assetsRemoveHandler([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/tailwind.config.js

@@ -47,6 +47,4 @@ module.exports = {
             }
         },
     },
-
-  plugins: [require("@tailwindcss/line-clamp")],
 }

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

@@ -150,7 +150,6 @@ $variants: primary, secondary, special, danger, widget;
     tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
     tw-rounded-[4px]
     tw-p-[15px]
-    tw-border-[color:var(--button-widget-background-color)]
     hover:tw-bg-[color:var(--button-widget-background-color-hover)]
     focus:tw-bg-[color:var(--button-widget-background-color-active)]
     focus:tw-border-[color:var(--button-widget-border-color-active)]

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-editor/vc-editor.vue

@@ -25,6 +25,7 @@
     <!-- Editor field -->
     <QuillEditor
       class="quill-editor tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px]"
+      :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
       v-model:content="content"
       theme="snow"
       :toolbar="toolbar"
@@ -147,11 +148,31 @@ function isQuillEmpty(value: string) {
   --editor-border-color: #d3dbe9;
   --editor-border-color-error: #f14e4e;
   --editor-placeholder-color: #a5a5a5;
+
+  --editor-scroll-width: 8px;
+  --editor-scroll-color-hover: #cce4f5;
 }
 
 .vc-editor {
   &_error .quill-editor {
     @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)] #{!important};
   }
+
+  .quill-editor .ql-editor {
+    &::-webkit-scrollbar {
+      @apply tw-w-[var(--editor-scroll-width)] tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply tw-bg-[color:var(--editor-scroll-color)]
+      tw-rounded-[calc(var(--editor-scroll-width)/2)]
+      tw-overflow-x-hidden
+      hover:tw-bg-[color:var(--editor-scroll-color-hover)];
+    }
+  }
 }
 </style>

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
    */