@vc-shell/create-vc-app 1.2.4-beta.7 → 2.0.0-alpha.0

package/dist/output.d.ts

@@ -0,0 +1,4 @@
+import { ProjectOptions } from './types.js';
+
+export declare function printSuccess(options: ProjectOptions): void;
+//# sourceMappingURL=output.d.ts.map

package/dist/output.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../src/output.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAQjD,wBAAgB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAsB1D"}

package/dist/templates/dynamic-module/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.local

package/dist/templates/dynamic-module/_package.json.ejs

@@ -0,0 +1,26 @@
+{
+  "name": "<%- PackageName %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "cross-env APP_ENV=development vite --force",
+    "build": "cross-env APP_ENV=production vite build",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.5",
+    "@vc-shell/ts-config": "^2.0.0-alpha.0",
+    "cross-env": "^7.0.3",
+    "sass": "^1.87.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vue-tsc": "^2.2.10"
+  },
+  "dependencies": {
+    "@vc-shell/config-generator": "^2.0.0-alpha.0",
+    "@vc-shell/framework": "^2.0.0-alpha.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.2.5"
+  }
+}

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

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

package/dist/templates/dynamic-module/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vc-shell/ts-config/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": ["vite/client"]
+  },
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.vue",
+    "./src/**/*.json"
+  ]
+}

package/dist/templates/dynamic-module/vite.config.mts.ejs

@@ -0,0 +1,3 @@
+import { getDynamicModuleConfiguration } from "@vc-shell/config-generator";
+
+export default getDynamicModuleConfiguration();

package/dist/templates/{base/_env → host-app/_env.ejs}

@@ -1,3 +1,3 @@
-APP_BASE_PATH={{BasePath}}
+APP_BASE_PATH=<%- BasePath %>
 APP_I18N_LOCALE=en
 APP_I18N_FALLBACK_LOCALE=en

package/dist/templates/{base/_package.json → host-app/_package.json.ejs}

@@ -1,5 +1,5 @@
 {
-  "name": "{{PackageName}}",
+  "name": "<%- PackageName %>",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -22,14 +22,14 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@vc-shell/api-client-generator": "^1.2.4-beta.7",
-    "@vc-shell/release-config": "^1.2.4-beta.7",
-    "@vc-shell/ts-config": "^1.2.4-beta.7",
+    "@vc-shell/api-client-generator": "^2.0.0-alpha.0",
+    "@vc-shell/release-config": "^2.0.0-alpha.0",
+    "@vc-shell/ts-config": "^2.0.0-alpha.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "autoprefixer": "^10.4.16",
-    "conventional-changelog-cli": "^4.1.0",
+    "conventional-changelog-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -52,8 +52,8 @@
     "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^1.2.4-beta.7",
-    "@vc-shell/framework": "^1.2.4-beta.7",
+    "@vc-shell/config-generator": "^2.0.0-alpha.0",
+    "@vc-shell/framework": "^2.0.0-alpha.0",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

package/dist/templates/{base/index.html → host-app/index.html.ejs}

@@ -11,7 +11,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
     <meta name="theme-color" content="#ffffff">
-  <title>{{AppNameSentenceCase}}</title>
+  <title><%- AppNameSentenceCase %></title>
 </head>
 
 <body>

package/dist/templates/{base/src/bootstrap.ts → host-app/src/bootstrap.ts.ejs}

@@ -1,10 +1,13 @@
+import { App } from "vue";
+<% if (dashboard) { %>
 import { addMenuItem, registerDashboardWidget } from "@vc-shell/framework";
-import { App, markRaw } from "vue";
+import { markRaw } from "vue";
 import Welcome from "./components/dashboard-widgets/Welcome.vue";
+<% } %>
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function bootstrap(app: App) {
-  // Add Dashboard to main menu item
+<% if (dashboard) { %>
   addMenuItem({
     title: "SHELL.MENU.DASHBOARD",
     icon: "lucide-home",
@@ -12,7 +15,6 @@ export function bootstrap(app: App) {
     url: "/",
   });
 
-  // Register Dashboard Welcome Widget
   registerDashboardWidget({
     id: "welcome-widget",
     name: "Welcome",
@@ -20,4 +22,5 @@ export function bootstrap(app: App) {
     size: { width: 6, height: 6 },
     position: { x: 0, y: 0 },
   });
+<% } %>
 }

package/dist/templates/{base/src/main.ts → host-app/src/main.ts.ejs}

@@ -3,16 +3,13 @@ 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
 import "@vc-shell/framework/dist/index.css";
 
 async function startApp() {
   const { loadUser } = useUser();
 
-
   try {
     await loadUser();
   } catch (e) {
@@ -26,9 +23,14 @@ async function startApp() {
         locale: import.meta.env.APP_I18N_LOCALE,
         fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
       },
+<% if (aiAgent) { %>
+      aiAgent: {
+        config: {
+          url: import.meta.env.APP_AI_AGENT_URL,
+        },
+      },
+<% } %>
     })
-    // {{ModuleNamePascalCase}} module initialization
-    .use({{ModuleNamePascalCase}}, { router })
     .use(router);
 
   const { currentLocale, setLocale } = app.runWithContext(() => useLanguages());

package/dist/templates/{base/src/pages/App.vue → host-app/src/pages/App.vue.ejs}

@@ -2,7 +2,7 @@
   <VcApp
     :is-ready="isReady"
     :logo="logoImage"
-    title="{{AppNameSentenceCase}}"
+    title="<%- AppNameSentenceCase %>"
     :version="version"
   >
   </VcApp>

package/dist/templates/host-app/src/pages/Platform.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="tw-w-full tw-h-full">
+    <iframe
+      v-if="url"
+      ref="iframeRef"
+      :src="url"
+      class="tw-w-full tw-h-full tw-border-0"
+      allow="clipboard-read; clipboard-write"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const url = computed(() => route.query.url as string | undefined);
+</script>

package/dist/templates/host-app/src/router/routes.ts.ejs

@@ -0,0 +1,107 @@
+import { RouteRecordRaw } from "vue-router";
+import App from "../pages/App.vue";
+<% if (dashboard) { %>
+import Dashboard from "../pages/Dashboard.vue";
+<% } %>
+import Platform from "../pages/Platform.vue";
+import { Invite, Login, ResetPassword, ForgotPassword, ChangePasswordPage } from "@vc-shell/framework";
+// eslint-disable-next-line import/no-unresolved
+import whiteLogoImage from "/assets/logo-white.svg";
+// eslint-disable-next-line import/no-unresolved
+import bgImage from "/assets/background.jpg";
+
+<% if (tenantRoutes) { %>
+const tenantIdRegex = "[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}";
+<% } %>
+
+export const routes: RouteRecordRaw[] = [
+  {
+<% if (tenantRoutes) { %>
+    path: `/:tenantId(${tenantIdRegex})?`,
+<% } else { %>
+    path: "/",
+<% } %>
+    component: App,
+    name: "App",
+    meta: {
+      root: true,
+    },
+    children: [
+<% if (dashboard) { %>
+      {
+        name: "Dashboard",
+        path: "",
+        component: Dashboard,
+      },
+<% } %>
+      {
+        name: "Platform",
+        path: "platform",
+        component: Platform,
+        props: (route) => ({
+          url: route.query.url,
+        }),
+      },
+    ],
+<% if (tenantRoutes) { %>
+    beforeEnter: (to) => {
+      const { tenantId } = to.params;
+      if (!tenantId || new RegExp(tenantIdRegex).test(tenantId as string)) {
+        return true;
+      }
+      return { path: "/" };
+    },
+<% } %>
+  },
+  {
+    name: "Login",
+    path: "/login",
+    component: Login,
+    props: () => ({
+      logo: whiteLogoImage,
+      title: "<%- AppNameSentenceCase %>",
+    }),
+  },
+  {
+    name: "Invite",
+    path: "/invite",
+    component: Invite,
+    props: (_route) => ({
+      userId: _route.query.userId,
+      token: _route.query.token,
+      userName: _route.query.userName,
+      logo: whiteLogoImage,
+    }),
+  },
+  {
+    name: "ResetPassword",
+    path: "/resetpassword",
+    component: ResetPassword,
+    props: (_route) => ({
+      userId: _route.query.userId,
+      token: _route.query.token,
+      userName: _route.query.userName,
+      logo: whiteLogoImage,
+    }),
+  },
+  {
+    name: "ForgotPassword",
+    path: "/forgot-password",
+    component: ForgotPassword,
+    props: () => ({
+      logo: whiteLogoImage,
+    }),
+  },
+  {
+    name: "ChangePassword",
+    path: "/changepassword",
+    component: ChangePasswordPage,
+    meta: {
+      forced: true,
+    },
+    props: (_route) => ({
+      forced: _route.meta.forced,
+      logo: whiteLogoImage,
+    }),
+  },
+];

package/dist/templates/host-app/vite.config.mts.ejs

@@ -0,0 +1,7 @@
+import { getApplicationConfiguration, getHostFederationConfig } from "@vc-shell/config-generator";
+import { mergeConfig } from "vite";
+
+export default mergeConfig(
+  getApplicationConfiguration(),
+  getHostFederationConfig(),
+);

package/dist/templates/module/composables/index.ts.ejs

@@ -0,0 +1,2 @@
+export { default as use<%- ModuleNamePascalCase %>List } from "./useList";
+export { default as use<%- ModuleNamePascalCase %>Details } from "./useDetails";

package/dist/templates/module/composables/useDetails.ts.ejs

@@ -0,0 +1,38 @@
+import { ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+
+export default function use<%- ModuleNamePascalCase %>Details() {
+  const item = ref<Record<string, unknown>>({});
+
+  const { loading: itemLoading, action: fetchItem } = useAsync(async (id?: string) => {
+    // TODO: Replace with real API call
+    // const result = await apiClient.getById(id);
+    // item.value = result;
+  });
+
+  const { loading: saveLoading, action: saveAction } = useAsync(async () => {
+    // TODO: Replace with real API call
+    // if (item.value.id) {
+    //   await apiClient.update(item.value);
+    // } else {
+    //   await apiClient.create(item.value);
+    // }
+  });
+
+  const loading = useLoading(itemLoading, saveLoading);
+
+  async function getItem(id: string) {
+    await fetchItem(id);
+  }
+
+  async function saveItem() {
+    await saveAction();
+  }
+
+  return {
+    item,
+    loading,
+    getItem,
+    saveItem,
+  };
+}

package/dist/templates/module/composables/useList.ts.ejs

@@ -0,0 +1,43 @@
+import { ref, type Ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function use<%- ModuleNamePascalCase %>List() {
+  const data: Ref<Record<string, any>[]> = ref([]);
+  const totalCount = ref(0);
+  const currentPage = ref(1);
+  const searchQuery = ref("");
+
+  const { loading: itemsLoading, action: fetchItems } = useAsync(async () => {
+    // TODO: Replace with real API call
+    // const result = await apiClient.search({
+    //   keyword: searchQuery.value,
+    //   skip: (currentPage.value - 1) * 20,
+    //   take: 20,
+    // });
+    // data.value = result.results ?? [];
+    // totalCount.value = result.totalCount ?? 0;
+  });
+
+  const { loading: deleteLoading, action: removeItems } = useAsync(async (ids?: string[]) => {
+    // TODO: Replace with real API call
+    // await Promise.all((ids ?? []).map((id) => apiClient.delete(id)));
+    // await fetchItems();
+  });
+
+  const loading = useLoading(itemsLoading, deleteLoading);
+
+  async function getItems() {
+    await fetchItems();
+  }
+
+  return {
+    data,
+    loading,
+    totalCount,
+    currentPage,
+    searchQuery,
+    getItems,
+    removeItems,
+  };
+}

package/dist/templates/module/locales/en.json.ejs

@@ -0,0 +1,22 @@
+{
+  "<%- ModuleNameScreamingSnake %>": {
+    "MENU": {
+      "TITLE": "<%- ModuleNameSentenceCase %>"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "<%- ModuleNameSentenceCase %>",
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "ADD": "Add"
+        }
+      },
+      "DETAILS": {
+        "TITLE": "<%- ModuleNameSentenceCase %> Details"
+      },
+      "ALERTS": {
+        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?"
+      }
+    }
+  }
+}

package/dist/templates/module/pages/details.vue.ejs

@@ -0,0 +1,111 @@
+<template>
+  <VcBlade
+    :title="title"
+    :toolbar-items="bladeToolbar"
+    :loading="loading"
+    :expanded="expanded"
+    :closable="closable"
+    width="70%"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <VcContainer>
+      <VcForm>
+        <!-- Add your form fields here -->
+        <VcInput
+          v-model="item.name"
+          :label="'Name'"
+          required
+        />
+      </VcForm>
+    </VcContainer>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import {
+  VcBlade,
+  VcContainer,
+  VcForm,
+  VcInput,
+  useBladeNavigation,
+  useModificationTracker,
+  usePopup,
+  useBeforeUnload,
+  type IBladeToolbar,
+  type IParentCallArgs,
+} from "@vc-shell/framework";
+import { ref, computed, onMounted } from "vue";
+import use<%- ModuleNamePascalCase %>Details from "../composables/useDetails";
+
+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: "/<%- ModuleName %>-details",
+  name: "<%- ModuleNamePascalCase %>Details",
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  param: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const { onBeforeClose } = useBladeNavigation();
+const { showConfirmation } = usePopup();
+
+const { item, loading, getItem, saveItem } = use<%- ModuleNamePascalCase %>Details();
+const { isModified, resetModificationState } = useModificationTracker(item);
+
+const title = computed(() => {
+  return props.param
+    ? String(item.value?.name || "<%- ModuleNameSentenceCase %> Details")
+    : "New <%- ModuleNameSentenceCase %>";
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "save",
+    title: "Save",
+    icon: "lucide-save",
+    disabled: computed(() => !isModified.value),
+    async clickHandler() {
+      await saveItem();
+      resetModificationState();
+      emit("parent:call", { method: "reload" });
+    },
+  },
+]);
+
+onMounted(async () => {
+  if (props.param) {
+    await getItem(props.param);
+  }
+});
+
+onBeforeClose(async () => {
+  if (isModified.value) {
+    return await showConfirmation("You have unsaved changes. Are you sure you want to close?");
+  }
+});
+
+useBeforeUnload(computed(() => isModified.value));
+
+defineExpose({
+  title,
+});
+</script>

package/dist/templates/module/pages/index.ts.ejs

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

package/dist/templates/module/pages/list.vue.ejs

@@ -0,0 +1,117 @@
+<template>
+  <VcBlade
+    :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.TITLE')"
+    :toolbar-items="bladeToolbar"
+    :loading="loading"
+    :expanded="expanded"
+    :closable="closable"
+    width="50%"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <VcDataTable
+      :items="data"
+      :total-count="totalCount"
+      :current-page="currentPage"
+      :search-value="searchQuery"
+      :state-key="'<%- ModuleNameScreamingSnake %>'"
+      @search:change="(val: string) => { searchQuery = val; getItems(); }"
+      @item-click="openDetails"
+      @pagination-click="(page: number) => { currentPage = page; getItems(); }"
+    >
+      <!-- Add your columns here -->
+      <VcColumn id="name" :header="'Name'" sortable />
+      <VcColumn id="createdDate" :header="'Created'" type="datetime" sortable />
+    </VcDataTable>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import {
+  VcBlade,
+  VcDataTable,
+  VcColumn,
+  useBladeNavigation,
+  type IBladeToolbar,
+  type IParentCallArgs,
+} from "@vc-shell/framework";
+import { ref, computed, markRaw } from "vue";
+import use<%- ModuleNamePascalCase %>List from "../composables/useList";
+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: "close:blade"): void;
+}
+
+defineOptions({
+  url: "/<%- ModuleName %>",
+  name: "<%- ModuleNamePascalCase %>List",
+  isWorkspace: true,
+  menuItem: {
+    title: "<%- ModuleNameScreamingSnake %>.MENU.TITLE",
+    icon: "lucide-box",
+    priority: 10,
+  },
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+defineEmits<Emits>();
+
+const { openBlade } = useBladeNavigation();
+
+const {
+  data,
+  loading,
+  totalCount,
+  currentPage,
+  searchQuery,
+  getItems,
+} = use<%- ModuleNamePascalCase %>List();
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: "Refresh",
+    icon: "lucide-refresh-cw",
+    clickHandler: () => getItems(),
+  },
+  {
+    id: "add",
+    title: "Add",
+    icon: "lucide-plus",
+    clickHandler: () => openDetails(),
+  },
+]);
+
+function openDetails(item?: { id?: string }) {
+  openBlade({
+    blade: markRaw(Details),
+    param: item?.id,
+    onClose() {
+      getItems();
+    },
+  });
+}
+
+getItems();
+
+defineExpose({
+  title: computed(() => "<%- ModuleNameSentenceCase %>"),
+  reload: getItems,
+});
+</script>