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

package/dist/templates/base/src/main.ts

@@ -3,7 +3,6 @@ import { createApp } from "vue";
 import { router } from "./router";
 import * as locales from "./locales";
 import { RouterView } from "vue-router";
-import {{ModuleNamePascalCase}} from "./modules/{{ModuleName}}";
 import { bootstrap } from "./bootstrap";
 
 // Load required CSS
@@ -12,7 +11,6 @@ import "@vc-shell/framework/dist/index.css";
 async function startApp() {
   const { loadUser } = useUser();
 
-
   try {
     await loadUser();
   } catch (e) {
@@ -29,8 +27,6 @@ async function startApp() {
         fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
       },
     })
-    // {{ModuleNamePascalCase}} module initialization
-    .use({{ModuleNamePascalCase}}, { router })
     .use(router);
 
   bootstrap(app);

package/dist/templates/blades/details/blade.vue

@@ -0,0 +1,175 @@
+<template>
+  <VcBlade
+    v-loading="loading"
+    :title="bladeTitle"
+    :toolbar-items="bladeToolbar"
+    :closable="closable"
+    :expanded="expanded"
+    :modified="isModified"
+    width="70%"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <VcContainer class="tw-p-2">
+      <VcRow class="tw-space-x-4">
+        <VcCol :size="6">
+          <!-- Main Form -->
+            <div class="tw-space-y-4">
+{{FORM_FIELDS}}
+            </div>
+        </VcCol>
+      </VcRow>
+    </VcContainer>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  IBladeToolbar,
+  IParentCallArgs,
+  useBladeNavigation,
+  useBeforeUnload,
+  usePopup,{{GALLERY_IMPORTS}}
+} from "@vc-shell/framework";
+import { use{{EntityName}}Details } from "../composables";
+import { Field, useForm } from "vee-validate";
+import moment from "moment";
+
+// TODO: Replace with your actual types
+// Example: import { IProduct } from "@your-app/api/products";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, unknown>;
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "close:blade"): void;
+  (event: "expand:blade"): void;
+  (event: "collapse:blade"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+const emit = defineEmits<Emits>();
+
+defineOptions({
+  name: "{{EntityName}}Details",
+  url: "/{{entity-name}}",
+});
+
+const { t } = useI18n({ useScope: "global" });
+const { onBeforeClose } = useBladeNavigation();
+const { showConfirmation, showInfo } = usePopup();
+const { meta } = useForm({ validateOnMount: false });
+
+const {
+  item,
+  loading,
+  load{{EntityName}},
+  save{{EntityName}},
+  delete{{EntityName}},
+  isModified,
+  resetModificationState,
+} = use{{EntityName}}Details();
+
+{{GALLERY_SCRIPT_ADDITIONS}}
+
+const bladeTitle = computed(() => {
+  return t("{{MODULE_NAME_UPPERCASE}}.PAGES.DETAILS.TITLE");
+});
+
+const createdDate = computed(() => {
+  const date = new Date(item.value?.createdDate ?? "");
+  return moment(date).format("L LT");
+});
+
+const bladeToolbar = computed((): IBladeToolbar[] => [
+  {
+    id: "save",
+    title: t("{{MODULE_NAME_UPPERCASE}}.PAGES.DETAILS.TOOLBAR.SAVE"),
+    icon: "material-save",
+    async clickHandler() {
+      if (meta.value.valid) {
+        const saved = await save{{EntityName}}(item.value);
+
+        if (!props.param && saved?.id) {
+          emit("parent:call", {
+            method: "onItemClick",
+            args: { id: saved.id },
+          });
+        }
+
+        resetModificationState();
+        emit("parent:call", { method: "reload" });
+
+        if (!props.param) {
+          emit("close:blade");
+        }
+      } else {
+        showInfo(t("{{MODULE_NAME_UPPERCASE}}.PAGES.ALERTS.NOT_VALID"));
+      }
+    },
+    disabled: computed(() => !(meta.value.valid && isModified.value)),
+  },
+  {
+    id: "delete",
+    title: t("{{MODULE_NAME_UPPERCASE}}.PAGES.DETAILS.TOOLBAR.DELETE"),
+    icon: "material-delete",
+    async clickHandler() {
+      if (
+        props.param &&
+        (await showConfirmation(t("{{MODULE_NAME_UPPERCASE}}.PAGES.ALERTS.DELETE")))
+      ) {
+        await delete{{EntityName}}(props.param);
+        emit("parent:call", { method: "reload" });
+        emit("close:blade");
+      }
+    },
+    isVisible: computed(() => !!props.param),
+  },
+]);
+
+watch(
+  () => props.param,
+  async (newParam) => {
+    if (newParam) {
+      await load{{EntityName}}(newParam);
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+onMounted(async () => {
+  if (props.param) {
+    await load{{EntityName}}(props.param);
+  } else if (props.options?.item) {
+    item.value = props.options.item;
+    resetModificationState();
+  }
+});
+
+onBeforeClose(async () => {
+  if (isModified.value) {
+    return await showConfirmation(
+      t("{{MODULE_NAME_UPPERCASE}}.PAGES.ALERTS.CLOSE_CONFIRMATION")
+    );
+  }
+  return true;
+});
+
+useBeforeUnload(computed(() => isModified.value));
+
+defineExpose({
+  title: bladeTitle,
+});
+</script>

package/dist/templates/blades/grid/blade.vue

@@ -0,0 +1,340 @@
+<template>
+  <VcBlade
+    v-loading="loading"
+    :title="bladeTitle"
+    width="50%"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbar-items="bladeToolbar"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <!-- @vue-generic {I{{EntityName}}} -->
+    <VcTable
+      :total-label="$t('{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.TOTALS')"
+      :items="items"
+      :selected-item-id="selectedItemId"
+      :search-value="searchValue"
+      :columns="tableColumns"
+      :sort="sortExpression"
+      :pages="pages"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :expanded="expanded"
+      :active-filter-count="activeFilterCount"
+      :empty="empty"
+      :notfound="notfound"
+      state-key="{{entity_name_plural}}_list"
+      :multiselect="false"
+      class="tw-grow tw-basis-0"
+      @item-click="onItemClick"
+      @header-click="onHeaderClick"
+      @pagination-click="onPaginationClick"
+      @search:change="onSearchList"
+      @scroll:ptr="reload"
+    >
+      <template #filters>
+        <div class="tw-p-4">
+          <VcRow class="tw-gap-16">
+            <div class="tw-flex tw-flex-col">
+              <!-- Status Filter -->
+              <h3 class="tw-text-sm tw-font-medium tw-mb-3">
+                {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.STATUS.TITLE") }}
+              </h3>
+              <div class="tw-space-y-2">
+                <VcRadioButton
+                  v-for="status in statuses"
+                  :key="status.value"
+                  :model-value="stagedFilters.status[0] || ''"
+                  :value="status.value"
+                  :label="status.displayValue"
+                  @update:model-value="(value) => toggleFilter('status', String(value), true)"
+                >
+                </VcRadioButton>
+              </div>
+            </div>
+
+            <!-- Date Range Filter -->
+            <div class="tw-flex tw-flex-col">
+              <h3 class="tw-text-sm tw-font-medium tw-mb-3">
+                {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.DATE.TITLE") }}
+              </h3>
+              <div class="tw-space-y-3">
+                <VcInput
+                  v-model="stagedFilters.startDate"
+                  type="date"
+                  :label="$t('{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.DATE.START_DATE')"
+                  @update:model-value="(value) => toggleFilter('startDate', String(value || ''), true)"
+                />
+                <VcInput
+                  v-model="stagedFilters.endDate"
+                  type="date"
+                  :label="$t('{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.DATE.END_DATE')"
+                  @update:model-value="(value) => toggleFilter('endDate', String(value || ''), true)"
+                />
+              </div>
+            </div>
+          </VcRow>
+
+          <!-- Filter Controls -->
+          <div class="tw-flex tw-gap-2 tw-mt-4">
+            <VcButton
+              variant="primary"
+              :disabled="!hasFilterChanges"
+              @click="applyFilters"
+            >
+              {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.APPLY") }}
+            </VcButton>
+
+            <VcButton
+              variant="secondary"
+              :disabled="!hasFiltersApplied"
+              @click="resetFilters"
+            >
+              {{ $t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.FILTER.RESET") }}
+            </VcButton>
+          </div>
+        </div>
+      </template>
+
+      <!-- Override column template example -->
+      <template #item_name="itemData">
+        <div class="tw-truncate">
+          {{ itemData.item.name }}
+        </div>
+      </template>
+
+      <!-- Status column template example -->
+      <template #item_isActive="itemData">
+        <VcStatusIcon :status="itemData.item.isActive" />
+      </template>
+    </VcTable>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onMounted, ref, watch, markRaw, Ref } from "vue";
+import {
+  IBladeToolbar,
+  IParentCallArgs,
+  useFunctions,
+  IActionBuilderResult,
+  ITableColumns,
+  useNotifications,
+  notification,
+  useBladeNavigation,
+  usePopup,
+  useTableSort,
+  useBlade,
+} from "@vc-shell/framework";
+import { use{{EntityName}}List } from "../composables";
+import {{EntityName}}Details from "./{{entity-name}}-details.vue";
+import { useI18n } from "vue-i18n";
+
+// TODO: Replace with your actual types
+// Example: import { IProduct } from "@your-app/api/products";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, unknown>;
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "close:blade"): void;
+  (event: "collapse:blade"): void;
+  (event: "expand:blade"): void;
+}
+
+defineOptions({
+  name: "{{EntityName}}List",
+  url: "/{{entity-name-plural}}",
+  notifyType: "{{EntityName}}DeletedDomainEvent",
+  isWorkspace: {{isWorkspace}},
+  menuItem: {{menuItem}},
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+const emit = defineEmits<Emits>();
+const { openBlade, closeBlade } = useBladeNavigation();
+const { showConfirmation } = usePopup();
+const { t } = useI18n({ useScope: "global" });
+const { debounce } = useFunctions();
+
+const {
+  searchQuery,
+  items,
+  totalCount,
+  pages,
+  currentPage,
+  load{{EntityName}}s,
+  loading,
+  statuses,
+  // Filters
+  stagedFilters,
+  appliedFilters,
+  hasFilterChanges,
+  hasFiltersApplied,
+  activeFilterCount,
+  toggleFilter,
+  applyFilters,
+  resetFilters,
+  resetSearch,
+} = use{{EntityName}}List();
+
+const { markAsRead, setNotificationHandler } = useNotifications("{{EntityName}}DeletedDomainEvent");
+const { sortExpression, handleSortChange } = useTableSort({
+  initialProperty: "createdDate",
+  initialDirection: "DESC",
+});
+const blade = useBlade();
+
+const searchValue = ref();
+const selectedItemId = ref<string>();
+const isDesktop = inject<Ref<boolean>>("isDesktop");
+const bladeTitle = computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TITLE"));
+
+setNotificationHandler((message) => {
+  if (message.title) {
+    notification.success(message.title, {
+      onClose() {
+        markAsRead(message);
+      },
+    });
+  }
+});
+
+watch(sortExpression, async (value) => {
+  await load{{EntityName}}s({ ...searchQuery.value, sort: value });
+});
+
+watch(
+  () => props.param,
+  (newVal) => {
+    if (newVal) {
+      selectedItemId.value = newVal;
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+onMounted(async () => {
+  await load{{EntityName}}s({ ...searchQuery.value, sort: sortExpression.value });
+});
+
+const reload = async () => {
+  await load{{EntityName}}s({
+    ...searchQuery.value,
+    skip: (currentPage.value - 1) * (searchQuery.value.take ?? 20),
+    sort: sortExpression.value,
+  });
+  emit("parent:call", { method: "reload" });
+};
+
+const onSearchList = debounce(async (keyword: string) => {
+  searchValue.value = keyword;
+  await load{{EntityName}}s({
+    ...searchQuery.value,
+    keyword,
+  });
+}, 1000);
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TOOLBAR.REFRESH")),
+    icon: "material-refresh",
+    async clickHandler() {
+      await reload();
+    },
+  },
+  {
+    id: "add",
+    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TOOLBAR.ADD")),
+    icon: "material-add",
+    clickHandler() {
+      add{{EntityName}}();
+    },
+  },
+]);
+
+const tableColumns = ref<ITableColumns[]>([
+  {
+    id: "name",
+    field: "name",
+    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.HEADER.NAME")),
+    sortable: true,
+    alwaysVisible: true,
+    mobilePosition: "top-left",
+  },
+  {
+    id: "createdDate",
+    title: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.TABLE.HEADER.CREATED_DATE")),
+    sortable: true,
+    type: "date-ago",
+    mobilePosition: "bottom-right",
+  },
+]);
+
+const empty = {
+  icon: "material-list",
+  text: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.EMPTY.NO_ITEMS")),
+  action: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.EMPTY.ADD")),
+  clickHandler: () => {
+    add{{EntityName}}();
+  },
+};
+
+const notfound = {
+  icon: "material-list",
+  text: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.NOT_FOUND.EMPTY")),
+  action: computed(() => t("{{MODULE_NAME_UPPERCASE}}.PAGES.LIST.NOT_FOUND.RESET")),
+  clickHandler: async () => {
+    searchValue.value = "";
+    await resetSearch();
+  },
+};
+
+const onItemClick = (item: { id?: string }) => {
+  openBlade({
+    blade: markRaw({{EntityName}}Details),
+    param: item.id,
+    onOpen() {
+      selectedItemId.value = item.id;
+    },
+    onClose() {
+      selectedItemId.value = undefined;
+    },
+  });
+};
+
+const onHeaderClick = (item: ITableColumns) => {
+  handleSortChange(item.id);
+};
+
+const add{{EntityName}} = () => {
+  openBlade({
+    blade: markRaw({{EntityName}}Details),
+  });
+};
+
+const onPaginationClick = async (page: number) => {
+  await load{{EntityName}}s({
+    ...searchQuery.value,
+    skip: (page - 1) * (searchQuery.value.take ?? 20),
+  });
+};
+
+defineExpose({
+  title: bladeTitle,
+  reload,
+  onItemClick,
+});
+</script>

package/dist/templates/composables/details-composable.ts

@@ -0,0 +1,101 @@
+import { computed, ref, ComputedRef, Ref, reactive } from "vue";
+import { useAsync, useApiClient, useModificationTracker, useLoading } from "@vc-shell/framework";
+
+// TODO: Replace with your actual API client imports
+// Example: import { ProductsClient, IProduct } from "@your-app/api/products";
+
+// @ts-expect-error - Replace with your API types
+interface I{{EntityName}} {
+  id?: string;
+  name?: string;
+  createdDate?: string;
+  [key: string]: any;
+}
+
+// @ts-expect-error - Replace with your API client
+class {{EntityName}}Client {
+  // TODO: Replace these mock methods with your actual API client methods
+  async get{{EntityName}}ById(id: string): Promise<I{{EntityName}}> {
+    throw new Error("Method not implemented. Replace with your actual API method.");
+  }
+  
+  async update{{EntityName}}(data: I{{EntityName}}): Promise<I{{EntityName}}> {
+    throw new Error("Method not implemented. Replace with your actual API method.");
+  }
+  
+  async create{{EntityName}}(data: I{{EntityName}}): Promise<I{{EntityName}}> {
+    throw new Error("Method not implemented. Replace with your actual API method.");
+  }
+  
+  async delete{{EntityName}}(id: string): Promise<void> {
+    throw new Error("Method not implemented. Replace with your actual API method.");
+  }
+}
+
+export interface IUse{{EntityName}}Details {
+  item: Ref<I{{EntityName}}>;
+  loading: ComputedRef<boolean>;
+  load{{EntityName}}: (id: string) => Promise<void>;
+  save{{EntityName}}: (data?: I{{EntityName}}) => Promise<I{{EntityName}} | undefined>;
+  delete{{EntityName}}: (id: string) => Promise<void>;
+
+  // Modification tracking
+  isModified: Readonly<Ref<boolean>>;
+  resetModificationState: () => void;
+}
+
+export function use{{EntityName}}Details(): IUse{{EntityName}}Details {
+  const { getApiClient } = useApiClient({{EntityName}}Client);
+
+  const item = ref<I{{EntityName}}>(reactive({} as I{{EntityName}}));
+
+  // Use modification tracker - КАК В useOrderDetailsNew.ts
+  const { currentValue, isModified, resetModificationState } = useModificationTracker(item);
+
+  const { action: load{{EntityName}}, loading: loading{{EntityName}} } = useAsync<string>(async (id) => {
+    if (id) {
+      const apiClient = await getApiClient();
+      const data = await apiClient.get{{EntityName}}ById(id);
+
+      currentValue.value = reactive(data);
+      resetModificationState();
+    }
+  });
+
+  const { action: save{{EntityName}}, loading: saving{{EntityName}} } = useAsync<I{{EntityName}} | undefined, I{{EntityName}} | undefined>(
+    async (data) => {
+      if (!data) return;
+
+      const apiClient = await getApiClient();
+      let result: I{{EntityName}};
+
+      if (data.id) {
+        result = await apiClient.update{{EntityName}}(data);
+      } else {
+        result = await apiClient.create{{EntityName}}(data);
+      }
+
+      if (result) {
+        currentValue.value = reactive(result);
+        resetModificationState();
+      }
+
+      return result;
+    }
+  );
+
+  const { action: delete{{EntityName}}, loading: deleting{{EntityName}} } = useAsync<string>(async (id) => {
+    const apiClient = await getApiClient();
+    await apiClient.delete{{EntityName}}(id);
+  });
+
+  return {
+    item: currentValue, // ВАЖНО: возвращаем currentValue, а не item
+    loading: useLoading(loading{{EntityName}}, saving{{EntityName}}, deleting{{EntityName}}),
+    load{{EntityName}},
+    save{{EntityName}},
+    delete{{EntityName}},
+    isModified,
+    resetModificationState,
+  };
+}