@vc-shell/framework 1.0.56 → 1.0.59

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-badge/index.ts

@@ -1,12 +1,13 @@
 import { VNode } from "vue";
-import Badge from "./vc-badge.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Badge from "./vc-badge.vue";
 
-export type VcBadgeSlots = {
-  /**
-   * Slot for component content
-   * */
-  default?: () => VNode[];
+export const VcBadge = _Badge as typeof _Badge & {
+  new (): {
+    $slots: {
+      /**
+       * Slot for component content
+       * */
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcBadge: GlobalComponentConstructor<typeof Badge, VcBadgeSlots> = Badge;

package/ui/components/atoms/vc-button/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Button from "./vc-button.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Button from "./vc-button.vue";
 
-export type VcButtonSlots = {
-  default?: () => VNode[];
+export const VcButton = _Button as typeof _Button & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcButton: GlobalComponentConstructor<typeof Button, VcButtonSlots> = Button;

package/ui/components/atoms/vc-card/index.ts

@@ -1,10 +1,11 @@
 import { VNode } from "vue";
-import Card from "./vc-card.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Card from "./vc-card.vue";
 
-export type VcCardSlots = {
-  default?: () => VNode[];
-  actions?: () => VNode[];
+export const VcCard = _Card as typeof _Card & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+      actions: () => VNode[];
+    };
+  };
 };
-
-export const VcCard: GlobalComponentConstructor<typeof Card, VcCardSlots> = Card;

package/ui/components/atoms/vc-checkbox/index.ts

@@ -1,10 +1,11 @@
 import { VNode } from "vue";
-import Checkbox from "./vc-checkbox.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Checkbox from "./vc-checkbox.vue";
 
-export type VcCheckboxSlots = {
-  default?: () => VNode[];
-  error?: () => VNode[];
+export const VcCheckbox = _Checkbox as typeof _Checkbox & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+      error: () => VNode[];
+    };
+  };
 };
-
-export const VcCheckbox: GlobalComponentConstructor<typeof Checkbox, VcCheckboxSlots> = Checkbox;

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/atoms/vc-col/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Col from "./vc-col.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Col from "./vc-col.vue";
 
-export type VcColSlots = {
-  default?: () => VNode[];
+export const VcCol = _Col as typeof _Col & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcCol: GlobalComponentConstructor<typeof Col, VcColSlots> = Col;

package/ui/components/atoms/vc-container/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Container from "./vc-container.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Container from "./vc-container.vue";
 
-export type VcContainerSlots = {
-  default?: () => VNode[];
+export const VcContainer = _Container as typeof _Container & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcContainer: GlobalComponentConstructor<typeof Container, VcContainerSlots> = Container;

package/ui/components/atoms/vc-hint/index.ts

@@ -1,9 +1,10 @@
-import Hint from "./vc-hint.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Hint from "./vc-hint.vue";
 import { VNode } from "vue";
 
-export type VcHintSlots = {
-  default?: () => VNode[];
+export const VcHint = _Hint as typeof _Hint & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcHint: GlobalComponentConstructor<typeof Hint, VcHintSlots> = Hint;

package/ui/components/atoms/vc-icon/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import Icon from "./vc-icon.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Icon from "./vc-icon.vue";
 
-export type VcIconSlots = {
-  default?: () => VNode[];
-};
-
-export const VcIcon: GlobalComponentConstructor<typeof Icon, VcIconSlots> = Icon;
+export const VcIcon = _Icon as typeof _Icon;

package/ui/components/atoms/vc-image/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import Image from "./vc-image.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Image from "./vc-image.vue";
 
-export type VcImageSlots = {
-  default?: () => VNode[];
-};
-
-export const VcImage: GlobalComponentConstructor<typeof Image, VcImageSlots> = Image;
+export const VcImage = _Image as typeof _Image;

package/ui/components/atoms/vc-info-row/index.ts

@@ -1,9 +1,3 @@
-import InfoRow from "./vc-info-row.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
-import { VNode } from "vue";
+import _InfoRow from "./vc-info-row.vue";
 
-export type VcInfoRowSlots = {
-  default?: () => VNode[];
-};
-
-export const VcInfoRow: GlobalComponentConstructor<typeof InfoRow, VcInfoRowSlots> = InfoRow;
+export const VcInfoRow = _InfoRow as typeof _InfoRow;