@vc-shell/create-vc-app 1.0.174 → 1.0.176

package/dist/templates/variants/both/src/modules/dynamic-module/composables/useDetails/index.ts

@@ -1,83 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { computed, ref, Ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
-import { DetailsBaseBladeScope, DynamicBladeForm, IBladeToolbar, useDetailsFactory } from "@vc-shell/framework";
-
-export interface DynamicItemScope extends DetailsBaseBladeScope {
-  toolbarOverrides: {
-    refresh: IBladeToolbar;
-  };
-}
-
-export default (args: {
-  props: InstanceType<typeof DynamicBladeForm>["$props"];
-  emit: InstanceType<typeof DynamicBladeForm>["$emit"];
-  mounted: Ref<boolean>;
-}) => {
-  const factory = useDetailsFactory<{ imgSrc: string; name: string; createdDate: Date; id: string }>({
-    load: async (payload) => {
-      return await new Promise((resolve) => {
-        setTimeout(() => {
-          const findMockedItem = [
-            {
-              imgSrc: img1,
-              name: "Item 1",
-              createdDate: new Date(),
-              id: "item-id-1",
-            },
-            {
-              imgSrc: img2,
-              name: "Item 2",
-              createdDate: new Date(),
-              id: "item-id-2",
-            },
-            {
-              imgSrc: img3,
-              name: "Item 3",
-              createdDate: new Date(),
-              id: "item-id-3",
-            },
-          ].find((x) => x.id === payload?.id);
-          resolve(findMockedItem);
-        }, 1000);
-      });
-    },
-    saveChanges: () => {
-      throw new Error("Function not implemented.");
-    },
-    remove: () => {
-      throw new Error("Function not implemented.");
-    },
-  });
-
-  const { load, saveChanges, remove, loading, item, validationState } = factory();
-
-  const scope = ref<DynamicItemScope>({
-    toolbarOverrides: {
-      refresh: {
-        async clickHandler() {
-          if (args.props.param) {
-            await load({ id: args.props.param });
-          }
-        },
-      },
-    },
-  });
-
-  const bladeTitle = computed(() => {
-    return args.props.param ? item.value?.name : "Dynamic item details";
-  });
-
-  return {
-    load,
-    saveChanges,
-    remove,
-    loading,
-    item,
-    validationState,
-    bladeTitle,
-    scope: computed(() => scope.value),
-  };
-};

package/dist/templates/variants/classic/src/modules/classic-module/components/index.ts

@@ -1 +0,0 @@
-export {};

package/dist/templates/variants/classic/src/modules/classic-module/composables/index.ts

@@ -1,2 +0,0 @@
-export { default as useList } from "./useList";
-export { default as useDetails } from "./useDetails";

package/dist/templates/variants/classic/src/modules/classic-module/composables/useDetails/index.ts

@@ -1,54 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { Ref, computed, ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default () => {
-  const item = ref({}) as Ref<{
-    imgSrc: string;
-    name: string;
-    createdDate: Date;
-    id: string;
-  }>;
-
-  // Example mocked method for 'fetching' list data
-  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
-    item.value = await new Promise((resolve) => {
-      setTimeout(() => {
-        const findMockedItem = [
-          {
-            imgSrc: img1,
-            name: "Item 1",
-            createdDate: new Date(),
-            id: "item-id-1",
-          },
-          {
-            imgSrc: img2,
-            name: "Item 2",
-            createdDate: new Date(),
-            id: "item-id-2",
-          },
-          {
-            imgSrc: img3,
-            name: "Item 3",
-            createdDate: new Date(),
-            id: "item-id-3",
-          },
-        ].find((x) => x.id === payload?.id);
-        if (findMockedItem) {
-          resolve(findMockedItem);
-        }
-      }, 1000);
-    });
-  });
-
-  const loading = useLoading(itemLoading);
-
-  return {
-    item: computed(() => item.value),
-    loading: computed(() => loading.value),
-    getItem,
-  };
-};

package/dist/templates/variants/classic/src/modules/classic-module/composables/useList/index.ts

@@ -1,58 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { Ref, computed, ref } from "vue";
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default () => {
-  const data = ref([]) as Ref<
-    {
-      imgSrc: string;
-      name: string;
-      createdDate: Date;
-      id: string;
-    }[]
-  >;
-
-  // Example mocked method for 'fetching' list data
-  const { loading: itemLoading, action: getItems } = useAsync(async (payload) => {
-    data.value = await new Promise((resolve) => {
-      setTimeout(
-        () =>
-          resolve([
-            {
-              imgSrc: img1,
-              name: "Item 1",
-              createdDate: new Date(),
-              id: "item-id-1",
-            },
-            {
-              imgSrc: img2,
-              name: "Item 2",
-              createdDate: new Date(),
-              id: "item-id-2",
-            },
-            {
-              imgSrc: img3,
-              name: "Item 3",
-              createdDate: new Date(),
-              id: "item-id-3",
-            },
-          ]),
-        1000,
-      );
-    });
-  });
-
-  const loading = useLoading(itemLoading);
-
-  return {
-    data: computed(() => data.value),
-    loading: computed(() => loading.value),
-    totalCount: computed(() => data.value.length),
-    pages: computed(() => Math.ceil(data.value.length / 20)),
-    currentPage: 0 / Math.max(1, 20) + 1,
-    getItems,
-  };
-};

package/dist/templates/variants/classic/src/modules/classic-module/index.ts

@@ -1,9 +0,0 @@
-import * as pages from "./pages";
-import * as locales from "./locales";
-import { createAppModule } from "@vc-shell/framework";
-
-export default createAppModule(pages, locales);
-
-export * from "./pages";
-export * from "./composables";
-// export * from "./components";

package/dist/templates/variants/classic/src/modules/classic-module/locales/en.json

@@ -1,46 +0,0 @@
-{
-  "MODULE": {
-    "MENU": {
-      "TITLE": "Classic Module"
-    },
-    "PAGES": {
-      "LIST": {
-        "TITLE": "Module blade",
-        "TOOLBAR": {
-          "REFRESH": "Refresh",
-          "ADD": "Add",
-          "DELETE": "Delete selected"
-        },
-        "SEARCH": {
-          "PLACEHOLDER": "Search keywords"
-        },
-        "TABLE": {
-          "TOTALS": "Count:",
-          "HEADER": {
-            "PRODUCT_IMAGE": "Pic",
-            "PRODUCT_NAME": "Name",
-            "CREATED_DATE": "Created"
-          },
-          "EMPTY": {
-            "TITLE": "There are no content yet",
-            "ACTION": "Add content"
-          },
-          "NOT_FOUND": {
-            "TITLE": "No content found.",
-            "ACTION": "Reset search"
-          },
-          "ACTIONS": {
-            "UNPUBLISH": "Unpublish",
-            "PUBLISH": "Publish"
-          }
-        },
-        "MOBILE": {
-          "CREATED": "Created"
-        }
-      },
-      "ALERTS": {
-        "CLOSE_CONFIRMATION": "You have unsaved changes\nClose anyway?"
-      }
-    }
-  }
-}

package/dist/templates/variants/classic/src/modules/classic-module/locales/index.ts

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

package/dist/templates/variants/classic/src/modules/classic-module/pages/details.vue

@@ -1,86 +0,0 @@
-<template>
-  <VcBlade
-    v-loading="loading"
-    :title="item.name"
-    :expanded="expanded"
-    :closable="closable"
-    width="70%"
-    :toolbar-items="bladeToolbar"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <VcContainer class="tw-p-2">
-      <VcForm>
-        <VcInput
-          :model-value="item.name"
-          label="Name"
-          class="tw-mb-4"
-        ></VcInput>
-        <VcInput
-          :model-value="item.createdDate"
-          label="Date"
-          type="datetime-local"
-        ></VcInput>
-      </VcForm>
-    </VcContainer>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { IBladeToolbar, IParentCallArgs } from "@vc-shell/framework";
-import { useDetails } from "./../composables";
-import { computed, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
-
-export interface Props {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-}
-
-export interface Emits {
-  (event: "parent:call", args: IParentCallArgs): void;
-  (event: "collapse:blade"): void;
-  (event: "expand:blade"): void;
-  (event: "close:blade"): void;
-}
-
-defineOptions({
-  url: "/classic-module-details",
-  name: "ClassicModuleDetails",
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-  param: undefined,
-});
-
-const emit = defineEmits<Emits>();
-
-const { t } = useI18n({ useScope: "global" });
-
-const { item, loading, getItem } = useDetails();
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "refresh",
-    title: computed(() => t("MODULE.PAGES.LIST.TOOLBAR.REFRESH")),
-    icon: "fas fa-sync-alt",
-    async clickHandler() {
-      if (props.param) {
-        await getItem({ id: props.param });
-      }
-    },
-  },
-]);
-
-onMounted(async () => {
-  if (props.param) {
-    await getItem({ id: props.param });
-  }
-});
-</script>
-
-<style lang="scss" scoped></style>

package/dist/templates/variants/classic/src/modules/classic-module/pages/index.ts

@@ -1,2 +0,0 @@
-export { default as List } from "./list.vue";
-export {default as Details } from './details.vue'

package/dist/templates/variants/classic/src/modules/classic-module/pages/list.vue

@@ -1,270 +0,0 @@
-<template>
-  <VcBlade
-    :title="$t('MODULE.PAGES.LIST.TITLE')"
-    width="50%"
-    :expanded="expanded"
-    :closable="closable"
-    :toolbar-items="bladeToolbar"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <!-- Blade contents -->
-    <VcTable
-      :expanded="expanded"
-      :empty="empty"
-      :notfound="notfound"
-      class="tw-grow tw-basis-0"
-      :multiselect="true"
-      :loading="loading"
-      :columns="columns"
-      :item-action-builder="actionBuilder"
-      enable-item-actions
-      :sort="sort"
-      :pages="pages"
-      :total-count="totalCount"
-      :search-value="searchValue"
-      :current-page="currentPage"
-      :search-placeholder="$t('MODULE.PAGES.LIST.SEARCH.PLACEHOLDER')"
-      :total-label="$t('MODULE.PAGES.LIST.TABLE.TOTALS')"
-      :selected-item-id="selectedItemId"
-      state-key="module"
-      :items="data"
-      @item-click="onItemClick"
-      @header-click="onHeaderClick"
-    >
-      <template #mobile-item="itemData">
-        <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-py-3 tw-px-4">
-          <div class="tw-w-full tw-flex tw-justify-evenly tw-mb-2">
-            <VcImage
-              class="tw-shrink-0"
-              aspect="1x1"
-              size="s"
-              :bordered="true"
-              :src="itemData.item.imgSrc"
-            ></VcImage>
-            <div class="tw-grow tw-basis-0 tw-ml-3">
-              <div class="tw-font-bold tw-text-lg">
-                {{ itemData.item.name }}
-              </div>
-            </div>
-          </div>
-          <div class="tw-truncate tw-grow-[2] tw-basis-0">
-            <VcHint>{{ $t("MODULE.PAGES.LIST.MOBILE.CREATED") }}</VcHint>
-            <div class="tw-truncate tw-mt-1">
-              {{ itemData.item.createdDate }}
-            </div>
-          </div>
-        </div>
-      </template>
-    </VcTable>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, reactive, ref, markRaw, onMounted, watch } from "vue";
-import {
-  IBladeEvent,
-  IBladeToolbar,
-  IParentCallArgs,
-  IActionBuilderResult,
-  ITableColumns,
-  useBladeNavigation,
-} from "@vc-shell/framework";
-// eslint-disable-next-line import/no-unresolved
-import emptyImage from "/assets/empty.png";
-import { useI18n } from "vue-i18n";
-import { useList } from "./../composables";
-import Details from "./details.vue";
-
-export interface Props {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-  options?: Record<string, unknown>;
-}
-
-export interface Emits {
-  (event: "parent:call", args: IParentCallArgs): void;
-  (event: "collapse:blade"): void;
-  (event: "expand:blade"): void;
-  (event: "open:blade", blade: IBladeEvent): void;
-  (event: "close:blade"): void;
-}
-
-defineOptions({
-  url: "/classic-module-list",
-  name: "ClassicModuleList",
-  isWorkspace: true,
-  menuItem: {
-    title: "MODULE.MENU.TITLE",
-    icon: "fas fa-file-alt",
-    priority: 1,
-  },
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-defineEmits<Emits>();
-
-const { t } = useI18n({ useScope: "global" });
-const { openBlade } = useBladeNavigation();
-const { getItems, data, loading, totalCount, pages, currentPage } = useList();
-
-const sort = ref("createdDate:DESC");
-const searchValue = ref();
-const selectedItemId = ref<string>();
-
-watch(
-  () => props.param,
-  (newVal) => {
-    if (newVal) {
-      selectedItemId.value = newVal;
-
-      openBlade({
-        blade: markRaw(Details),
-        param: newVal,
-        onOpen() {
-          selectedItemId.value = newVal;
-        },
-        onClose() {
-          selectedItemId.value = undefined;
-        },
-      });
-    }
-  },
-  { immediate: true },
-);
-
-onMounted(async () => {
-  await getItems();
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "refresh",
-    title: computed(() => t("MODULE.PAGES.LIST.TOOLBAR.REFRESH")),
-    icon: "fas fa-sync-alt",
-    async clickHandler() {
-      await reload();
-    },
-  },
-]);
-
-const tableColumns = ref<ITableColumns[]>([
-  {
-    id: "imgSrc",
-    title: computed(() => t("MODULE.PAGES.LIST.TABLE.HEADER.PRODUCT_IMAGE")),
-    width: 60,
-    alwaysVisible: true,
-    type: "image",
-  },
-  {
-    id: "name",
-    field: "name",
-    title: computed(() => t("MODULE.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME")),
-    alwaysVisible: true,
-  },
-  {
-    id: "createdDate",
-    title: computed(() => t("MODULE.PAGES.LIST.TABLE.HEADER.CREATED_DATE")),
-    width: 140,
-    type: "date-ago",
-  },
-]);
-
-const empty = reactive({
-  image: emptyImage,
-  text: computed(() => t("MODULE.PAGES.LIST.TABLE.EMPTY.TITLE")),
-  action: computed(() => t("MODULE.PAGES.LIST.TABLE.EMPTY.ACTION")),
-  // clickHandler: () => {},
-});
-
-const notfound = reactive({
-  image: emptyImage,
-  text: computed(() => t("MODULE.PAGES.LIST.TABLE.NOT_FOUND.TITLE")),
-  action: computed(() => t("MODULE.PAGES.LIST.TABLE.NOT_FOUND.ACTION")),
-  clickHandler: async () => {
-    searchValue.value = "";
-  },
-});
-
-const columns = computed(() => {
-  if (props.expanded) {
-    return tableColumns.value;
-  } else {
-    return tableColumns.value.filter((item) => item.alwaysVisible === true);
-  }
-});
-
-const title = computed(() => t("MODULE.PAGES.LIST.TITLE"));
-
-const reload = async () => {
-  await getItems();
-};
-
-const onItemClick = (item: { id: string }) => {
-  openBlade({
-    blade: markRaw(Details),
-    param: item.id,
-    onOpen() {
-      selectedItemId.value = item.id;
-    },
-    onClose() {
-      selectedItemId.value = undefined;
-    },
-  });
-};
-
-const onHeaderClick = (item: ITableColumns) => {
-  const sortOptions = ["DESC", "ASC", ""];
-
-  if (item.sortable) {
-    if (sort.value.split(":")[0] === item.id) {
-      const index = sortOptions.findIndex((x) => {
-        const sorting = sort.value.split(":")[1];
-        if (sorting) {
-          return x === sorting;
-        } else {
-          return x === "";
-        }
-      });
-
-      if (index !== -1) {
-        const newSort = sortOptions[(index + 1) % sortOptions.length];
-
-        if (newSort === "") {
-          sort.value = `${item.id}`;
-        } else {
-          sort.value = `${item.id}:${newSort}`;
-        }
-      }
-    } else {
-      sort.value = `${item.id}:${sortOptions[0]}`;
-    }
-  }
-};
-
-const actionBuilder = (item: (typeof data.value)[number]): IActionBuilderResult[] => {
-  const result: IActionBuilderResult[] = [];
-
-  result.push({
-    icon: "fas fa-trash",
-    title: "Delete",
-    type: "danger",
-    position: "left",
-    clickHandler() {
-      throw new Error("Function is not implemented.");
-    },
-  });
-
-  return result;
-};
-
-defineExpose({
-  title,
-});
-</script>

package/dist/templates/variants/dynamic/src/modules/dynamic-module/components/DynamicItemsMobileGridView.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-py-3 tw-px-4">
-    <div class="tw-w-full tw-flex tw-justify-evenly tw-mb-2">
-      <VcImage
-        class="tw-shrink-0"
-        aspect="1x1"
-        size="s"
-        :bordered="true"
-        :src="context.item.imgSrc"
-      ></VcImage>
-      <div class="tw-grow tw-basis-0 tw-ml-3">
-        <div class="tw-font-bold tw-text-lg">
-          {{ context.item.name }}
-        </div>
-      </div>
-    </div>
-    <div class="tw-truncate tw-grow-[2] tw-basis-0">
-      <VcHint>{{ $t("DYNAMICMODULE.PAGES.LIST.MOBILE.CREATED") }}</VcHint>
-      <div class="tw-truncate tw-mt-1">
-        {{ context.item.createdDate }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-export interface Props {
-  context: {
-    item: {
-      imgSrc: string;
-      name: string;
-      createdDate: Date;
-      id: string;
-    };
-  };
-}
-
-defineProps<Props>();
-</script>

package/dist/templates/variants/dynamic/src/modules/dynamic-module/components/index.ts

@@ -1,3 +0,0 @@
-import DynamicItemsMobileGridView from "./DynamicItemsMobileGridView.vue";
-
-export { DynamicItemsMobileGridView };

package/dist/templates/variants/dynamic/src/modules/dynamic-module/composables/index.ts

@@ -1,2 +0,0 @@
-export { default as useList } from "./useList";
-export { default as useDetails } from "./useDetails";