@vc-shell/create-vc-app 1.1.98-rc.5 → 1.1.99-alpha.1

package/dist/templates/sample/classic-module/composables/useDetails/index.ts

@@ -1,54 +0,0 @@
-import { Ref, computed, ref } from "vue";
-import { useAsync, useLoading, useModificationTracker } from "@vc-shell/framework";
-import {
-  MockedItem,
-  addNewMockItem,
-  currencyOptions,
-  loadMockItem,
-  removeMockItem,
-  updateMockItem,
-} from "../../sample-data";
-
-export default () => {
-  const item = ref({}) as Ref<MockedItem>;
-
-  const { isModified, currentValue, resetModificationState } = useModificationTracker(item);
-
-  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
-    item.value = await loadMockItem(payload);
-  });
-
-  const { loading: saveLoading, action: saveItem } = useAsync<MockedItem, MockedItem | void>(async (payload) => {
-    if (payload) {
-      if (payload.id) {
-      const _res = await updateMockItem(payload)
-
-      resetModificationState(_res);
-      return _res;
-      } else {
-        const _res = await addNewMockItem(payload);
-
-        resetModificationState(_res);
-        return _res;
-      }
-    }
-  });
-
-  const { loading: removeLoading, action: removeItem } = useAsync<{ id: string }>(async (payload) => {
-    if (payload) {
-      return await removeMockItem(payload);
-    }
-  });
-
-  const loading = useLoading(itemLoading, saveLoading, removeLoading);
-
-  return {
-    item: currentValue,
-    loading: computed(() => loading.value),
-    currencyOptions: computed(() => currencyOptions),
-    isModified,
-    getItem,
-    saveItem,
-    removeItem,
-  };
-};

package/dist/templates/sample/classic-module/composables/useList/index.ts

@@ -1,62 +0,0 @@
-import { ComputedRef, Ref, computed, ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-import { MockedItem, MockedQuery, loadMockItemsList, removeMockItem } from "../../sample-data";
-
-export interface useClassicAppList {
-  data: ComputedRef<MockedItem[] | undefined>;
-  loading: Ref<boolean>;
-  totalCount: Ref<number>;
-  pages: Ref<number>;
-  searchQuery: Ref<SearchQuery>;
-  currentPage: ComputedRef<number>;
-  getItems: (query: MockedQuery) => Promise<void>;
-  removeItems: (args: { ids: string[] }) => void;
-}
-interface SearchQuery {
-  take?: number;
-  skip?: number;
-  sort?: string;
-  keyword?: string;
-}
-interface SearchResult {
-  results: MockedItem[];
-  totalCount: number;
-}
-
-export type { MockedItem };
-
-export default (options?: { pageSize?: number, sort?: string }): useClassicAppList => {
-  const pageSize = options?.pageSize || 20;
-  const searchResult = ref<SearchResult>();
-  const searchQuery = ref<SearchQuery>({
-    take: pageSize,
-    skip: 0,
-    sort: options?.sort || "createdDate:DESC",
-  });
-
-  const { loading: itemLoading, action: getItems } = useAsync<MockedQuery>(async (query) => {
-    searchQuery.value = { ...searchQuery.value, ...query };
-    if (query) searchResult.value = await loadMockItemsList(searchQuery.value);
-  });
-
-  const { loading: removeLoading, action: removeItems } = useAsync<{ ids: string[] }>(async (args) => {
-    if (args) {
-      for (const id of args.ids) {
-        await removeMockItem({ id });
-      }
-    }
-  });
-
-  const loading = useLoading(itemLoading, removeLoading);
-
-  return {
-    data: computed(() => searchResult.value?.results),
-    loading: computed(() => loading.value),
-    totalCount: computed(() => searchResult.value?.totalCount || 0),
-    pages: computed(() => Math.ceil((searchResult.value?.totalCount || 1) / pageSize)),
-    currentPage: computed(() => Math.ceil((searchQuery.value?.skip || 0) / Math.max(1, pageSize) + 1)),
-    searchQuery,
-    getItems,
-    removeItems,
-  };
-};

package/dist/templates/sample/classic-module/index.ts

@@ -1,8 +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";

package/dist/templates/sample/classic-module/locales/en.json

@@ -1,67 +0,0 @@
-{
-  "SAMPLE_APP": {
-    "MENU": {
-      "TITLE": "Sample"
-    },
-    "PAGES": {
-      "LIST": {
-        "TITLE": "Sample list",
-        "TOOLBAR": {
-          "REFRESH": "Refresh",
-          "REMOVE": "Remove"
-        },
-        "SEARCH": {
-          "PLACEHOLDER": "Search keywords"
-        },
-        "TABLE": {
-          "TOTALS": "Count:",
-          "HEADER": {
-            "IMAGE": "Img",
-            "PRODUCT_NAME": "Product name",
-            "DESCRIPTION": "Description",
-            "PRICE": "Price",
-            "SALE_PRICE": "Sale price",
-            "CURRENCY": "Currency"
-          },
-          "ACTIONS": {
-            "DELETE": "Delete"
-          }
-        },
-        "EMPTY": {
-          "NO_ITEMS": "No items found",
-          "ADD": "Add item"
-        },
-        "NOT_FOUND": {
-          "EMPTY": "No items found",
-          "RESET": "Reset"
-        }
-      },
-      "DETAILS": {
-        "TITLE": {
-          "DETAILS": " details",
-          "LOADING": "Loading..."
-        },
-        "TOOLBAR": {
-          "SAVE": "Save",
-          "DELETE": "Delete"
-        },
-        "FIELDS": {
-          "NAME": "Name",
-          "CONTENT": "Content",
-          "GUID": "GUID",
-          "DESCRIPTION": "Description",
-          "PRICE": "Price",
-          "SALE_PRICE": "Sale price"
-        }
-      },
-      "ALERTS": {
-        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?",
-        "DELETE": "Are you sure you want to delete this item?",
-        "DELETE_SELECTED_CONFIRMATION": {
-          "MESSAGE": "Are you sure you want to delete {count} selected items?",
-          "ALL": "all {totalCount}"
-        }
-      }
-    }
-  }
-}

package/dist/templates/sample/classic-module/locales/index.ts

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

package/dist/templates/sample/classic-module/pages/details.vue

@@ -1,238 +0,0 @@
-<template>
-  <VcBlade
-    v-loading="loading"
-    :title="title"
-    :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 class="tw-space-y-4">
-        <Field
-          v-slot="{ errorMessage, handleChange, errors }"
-          name="name"
-          :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.NAME')"
-          rules="required"
-          :model-value="item.name"
-        >
-          <VcInput
-            v-model="item.name"
-            :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.NAME')"
-            required
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            @update:model-value="handleChange"
-          ></VcInput>
-        </Field>
-        <VcCard header="Content">
-          <div class="tw-p-4 tw-space-y-4">
-            <Field
-              v-slot="{ errorMessage, handleChange, errors }"
-              name="guid"
-              :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.GUID')"
-              :rules="{
-                required: true,
-                regex: /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/,
-              }"
-              :model-value="item.guid"
-            >
-              <VcInput
-                v-model="item.guid"
-                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.GUID')"
-                required
-                :error="!!errors.length"
-                :error-message="errorMessage"
-                @update:model-value="handleChange"
-              ></VcInput>
-            </Field>
-            <Field
-              v-slot="{ errorMessage, handleChange, errors }"
-              name="description"
-              :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.DESCRIPTION')"
-              :rules="{
-                required: true,
-              }"
-              :model-value="item.description"
-            >
-              <VcTextarea
-                v-model="item.description"
-                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.DESCRIPTION')"
-                required
-                :error="!!errors.length"
-                :error-message="errorMessage"
-                @update:model-value="handleChange"
-              ></VcTextarea>
-            </Field>
-          </div>
-        </VcCard>
-        <VcCard
-          v-if="item.currency"
-          header="Prices"
-        >
-          <VcRow class="tw-p-4 tw-gap-4">
-            <VcCol :size="2">
-              <Field
-                v-slot="{ errorMessage, handleChange, errors }"
-                name="price"
-                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.PRICE')"
-                :rules="{
-                  required: true,
-                }"
-                :model-value="item.price"
-              >
-                <VcInputCurrency
-                  v-model="item.price"
-                  v-model:option="item.currency"
-                  :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.PRICE')"
-                  required
-                  option-value="value"
-                  option-label="label"
-                  :error="!!errors.length"
-                  :error-message="errorMessage"
-                  :options="currencyOptions"
-                  @update:model-value="handleChange"
-                ></VcInputCurrency>
-              </Field>
-            </VcCol>
-            <VcCol :size="2">
-              <Field
-                v-slot="{ errorMessage, handleChange, errors }"
-                name="salePrice"
-                :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.SALE_PRICE')"
-                :rules="{
-                  required: true,
-                }"
-                :model-value="item.salePrice"
-              >
-                <VcInputCurrency
-                  v-model="item.salePrice"
-                  v-model:option="item.currency"
-                  :label="$t('SAMPLE_APP.PAGES.DETAILS.FIELDS.SALE_PRICE')"
-                  required
-                  option-value="value"
-                  option-label="label"
-                  :error="!!errors.length"
-                  :error-message="errorMessage"
-                  :options="currencyOptions"
-                  @update:model-value="handleChange"
-                ></VcInputCurrency>
-              </Field>
-            </VcCol>
-          </VcRow>
-        </VcCard>
-      </VcForm>
-    </VcContainer>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { IBladeToolbar, IParentCallArgs, useBeforeUnload, useBladeNavigation, usePopup } from "@vc-shell/framework";
-import { useDetails } from "./../composables";
-import { computed, onMounted, ref } from "vue";
-import { Field, useForm } from "vee-validate";
-import { useI18n } from "vue-i18n";
-import * as _ from "lodash-es";
-
-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: "/sample-details",
-  name: "SampleDetails",
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-  param: undefined,
-});
-
-const emit = defineEmits<Emits>();
-
-const { loading, getItem, saveItem, removeItem, item, currencyOptions, isModified } = useDetails();
-const { showConfirmation } = usePopup();
-const { onBeforeClose } = useBladeNavigation();
-const { t } = useI18n({ useScope: "global" });
-
-const { meta } = useForm({
-  validateOnMount: false,
-});
-
-const isDisabled = computed(() => {
-  return !meta.value.dirty || !meta.value.valid;
-});
-
-const title = computed(() => {
-  return props.param
-    ? item.value?.name
-      ? item.value?.name + t("SAMPLE_APP.PAGES.DETAILS.TITLE.DETAILS")
-      : t("SAMPLE_APP.PAGES.DETAILS.TITLE.LOADING")
-    : "Test App" + t("SAMPLE_APP.PAGES.DETAILS.TITLE.DETAILS");
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "save",
-    icon: "material-save",
-    title: "Save",
-    async clickHandler() {
-      await saveItem(item.value);
-
-      emit("parent:call", {
-        method: "reload",
-      });
-      emit("close:blade");
-    },
-    disabled: computed(() => !(isModified.value && !isDisabled.value)),
-  },
-  {
-    id: "delete",
-    icon: "material-delete",
-    title: "Delete",
-    async clickHandler() {
-      if (await showConfirmation(t(`SAMPLE_APP.PAGES.ALERTS.DELETE`))) {
-        if (props.param) {
-          await removeItem({ id: props.param });
-          emit("parent:call", {
-            method: "reload",
-          });
-
-          emit("close:blade");
-        }
-      }
-    },
-  },
-]);
-
-onMounted(async () => {
-  if (props.param) {
-    await getItem({ id: props.param });
-  }
-});
-
-onBeforeClose(async () => {
-  if (!isDisabled.value && isModified.value) {
-    return await showConfirmation(t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION"));
-  }
-});
-
-useBeforeUnload(computed(() => !isDisabled.value && isModified.value));
-
-defineExpose({
-  title,
-});
-</script>

package/dist/templates/sample/classic-module/pages/index.ts

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