@simitgroup/simpleapp-generator 1.6.7-h-alpha → 1.6.7-j-alpha

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppFeatureCustomField.vue.eta

@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-if="miniApp.integration.enabled.customField"
+    class="flex flex-col gap-2"
+  >
+    <div
+      v-for="field in miniApp.integration.customField?.fields"
+      class="flex gap-2 bg-slate-100 rounded-xl px-4 py-3"
+    >
+      <div>
+        <div class="flex items-center gap-2 font-semibold text-surface-700">
+          <span
+            class="text-xs bg-primary-100 text-primary-500 px-4 py-1 rounded-md"
+            >{{ t(`${field.code}`) }}
+          </span>
+          <span>
+            {{ field.title }}
+          </span>
+        </div>
+
+        <div class="text-surface-400 text-sm mt-1">
+          {{ field.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+
+const props = defineProps<{
+  miniApp: MiniAppDetail;
+}>();
+</script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppFeatureCustomPage.vue.eta

@@ -0,0 +1,68 @@
+<template>
+  <Tabs value="pages">
+    <TabList>
+      <Tab value="pages">
+        {{ t("pages") }}
+      </Tab>
+      <Tab value="scopes">
+        {{ t("scopes") }}
+      </Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="pages">
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="page in miniApp.integration.customPage?.pages"
+            class="flex flex-col gap-2 bg-slate-100 rounded-xl px-4 py-3"
+          >
+            <div class="flex items-center gap-2">
+              <MiniAppPageIcon
+                :iconType="page.iconType"
+                :icon="page.icon ?? ''"
+                class=""
+              />
+
+              <div class="font-semibold text-surface-700">
+                {{ page.title }}
+              </div>
+            </div>
+            <div class="flex flex-col pl-6">
+              <div class="text-surface-400 text-sm mt-1">
+                {{ page.description }}
+              </div>
+
+              <template v-if="!_.isEmpty(page.requiredPermissions)">
+                <Divider type="dashed" class="!my-3" />
+
+                <div class="flex items-center gap-2 flex-wrap">
+                  <span class="text-surface-700 text-sm">
+                    {{ t("miniAppLang.requiredPermissions") }}:
+                  </span>
+                  <div
+                    v-for="requiredPermission in page.requiredPermissions"
+                    class="bg-slate-300 px-2 py-0.5 rounded-md text-xs font-medium text-surface-600"
+                  >
+                    {{ requiredPermission }}
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+      <TabPanel value="scopes">
+        <MiniAppFeatureScope :miniApp="miniApp" />
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+</template>
+<script setup lang="ts">
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+import MiniAppPageIcon from "./MiniAppPageIcon.vue";
+import MiniAppFeatureScope from "./MiniAppFeatureScope.vue";
+import _ from "lodash";
+
+const props = defineProps<{
+  miniApp: MiniAppDetail;
+}>();
+</script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppFeatureScope.vue.eta

@@ -0,0 +1,53 @@
+<template>
+  <div class="mb-8 text-surface-500">
+    {{ t("miniAppLang.scopeDescription") }}
+  </div>
+  <div class="space-y-3">
+    <div
+      v-for="(scopeList, resourceName) in scopes"
+      class="rounded-lg space-y-2"
+    >
+      <div class="font-semibold">
+        {{ t(resourceName.toLowerCase()) }}
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="scope in scopeList"
+          class="space-x-2 text-sm bg-slate-100 rounded px-2 py-1 text-surface-600 font-medium"
+        >
+          <span>{{ _.startCase(scope) }}</span>
+        </div>
+      </div>
+
+      <Divider type="dashed" class="!mt-6 !mb-4" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
+import _ from "lodash";
+
+const props = defineProps<{
+  miniApp: MiniAppDetail;
+}>();
+
+const scopes = computed(() => {
+  if (!props?.miniApp?.integration?.scopes) {
+    return {};
+  }
+
+  const grouped: Record<string, string[]> = {};
+
+  for (const item of props?.miniApp?.integration?.scopes) {
+    const [prefix, suffix] = item.split(".");
+    if (!grouped[prefix]) {
+      grouped[prefix] = [];
+    }
+    grouped[prefix].push(suffix);
+  }
+
+  return grouped;
+});
+</script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppIcon.vue.eta

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="drop-shadow-[0_10px_8px_rgba(197,197,197,0.25)]"
+    :class="{
+      'size-20': size === 'xl',
+      'size-16': size === 'lg',
+      'size-14': !size || size === 'normal',
+      'size-8': size === 'xs',
+      'size-7': size === 'tiny',
+      'size-6': size === 'tiny-1',
+    }"
+  >
+    <PrimevueAvatar
+      :image
+      :label="image ? undefined : displayLabel"
+      class="squircle !size-full aspect-square"
+      :class="{
+        'text-xl': size === 'lg',
+        'text-lg': !size || size === 'normal',
+        'text-xs': size === 'xs',
+        'text-6xl': size === 'xl',
+        'text-tiny': size === 'tiny' || size === 'tiny-1',
+      }"
+      style="background-color: #dee9fc; color: #1a2551"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import _ from "lodash";
+import PrimevueAvatar from "primevue/avatar";
+
+const props = defineProps<{
+  image?: string;
+  label?: string;
+  size?: "lg" | "normal" | "xs" | "xl" | "tiny" | "tiny-1";
+}>();
+
+const displayLabel = computed(() => {
+  if (!props.label) return undefined;
+
+  return props.label
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
+});
+</script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppMenuButton.vue.eta

@@ -30,9 +30,10 @@
             :title="miniApp.name"
           >
             <template #icon>
-              <img
-                :src="miniApp.logo"
-                class="size-6 rounded-md object-contain"
+              <MiniAppIcon
+                :image="miniApp.logo"
+                :label="miniApp.name"
+                size="tiny"
               />
             </template>
             <template #title>
@@ -77,7 +78,7 @@
         </div>
       </template>
 
-      <template v-if="$miniAppStore.isShowMiniAppMoreMenuButton">
+      <template v-if="$miniAppStore.showMiniAppMoreMenuButton">
         <MainmenuButton
           :id="'mainmenu-app-miniApps-page-more'"
           :to="getDocumentUrl('miniapp')"
@@ -96,6 +97,7 @@
 <script setup lang="ts">
 import IconPuzzle from "~/components/icon/IconPuzzle.vue";
 import MiniAppPageIcon from "./MiniAppPageIcon.vue";
+import MiniAppIcon from "./MiniAppIcon.vue";
 
 const { $miniAppStore } = useNuxtApp();
 const displayItemCount = 3;

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppPageIframe.vue.eta

@@ -23,12 +23,17 @@
 </template>
 
 <script setup lang="ts">
-import { MiniappIntegrationPages } from "~/simpleapp/generate/openapi";
+import {
+  MiniAppDetail,
+  MiniappIntegrationCustomPagePages,
+} from "~/simpleapp/generate/openapi";
 
 const props = defineProps<{
-  pageInfo: MiniappIntegrationPages;
+  miniApp: MiniAppDetail;
+  pageInfo: MiniappIntegrationCustomPagePages;
   miniAppCode: string;
   miniAppInstallationId: string;
+  developerPortalAppId: string;
 }>();
 
 const _xOrg = getPathPara("xorg", "");
@@ -52,10 +57,11 @@ const { iframeRef, onIframeLoad } = useMiniAppBridge(
   props.miniAppInstallationId,
   props.pageInfo,
   props.miniAppCode,
+  props.developerPortalAppId,
 );
 
 const iframeSource = computed(() => {
-  return isDevMode()
+  return props.miniApp.env === "dev"
     ? props.pageInfo.sources.development
     : props.pageInfo.sources.production;
 });

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppPermissionWrapper.vue.eta

@@ -1,17 +1,17 @@
 <template>
   <MiniAppRestrictedWarning
-    v-if="!permission.status"
-    :reason="permission.reason ?? ''"
+    v-if="!validation.valid"
+    :type="validation.type ?? ''"
     class="flex items-center justify-center mt-10"
   />
   <slot v-else />
 </template>
 
 <script setup lang="ts">
-import { MiniAppPermissionResult } from "../types/miniApp";
+import { MiniAppValidationResp } from "../types/miniApp";
 import MiniAppRestrictedWarning from "./MiniAppRestrictedWarning.vue";
 
 defineProps<{
-  permission: MiniAppPermissionResult;
+  validation: MiniAppValidationResp;
 }>();
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppRestrictedWarning.vue.eta

@@ -3,11 +3,11 @@
     <span
       class="px-3 py-1 text-sm font-semibold rounded bg-yellow-100 text-yellow-800"
     >
-      {{ t(`miniAppLang.${reason}`) }}
+      {{ t(`miniAppLang.permission.${type}`) }}
     </span>
 
     <ButtonPrimary
-      v-if="reason === 'packageTypeRestricted'"
+      v-if="type === 'miniAppFeature'"
       :label="t('miniAppLang.upgradePlan')"
       @click="handleUpgradePlan"
     />
@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 defineProps<{
-  reason: string;
+  type: string;
 }>();
 
 function handleUpgradePlan() {

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppSettingLayout.vue.eta

@@ -6,14 +6,14 @@
         {{ miniAppTitle }}
       </h1>
 
-      <div v-if="$miniAppStore.isHasMiniAppFeature">
-        <slot v-if="$miniAppStore.isCanUpdateSetting" name="action" />
+      <div v-if="$miniAppStore.validation('updateSetting').valid">
+        <slot name="action" />
       </div>
     </div>
 
     <MiniAppPermissionWrapper
       v-if="miniApp"
-      :permission="$miniAppStore.checkCanUpdateSetting(miniApp)"
+      :validation="$miniAppStore.validation('updateSetting')"
     >
       <slot />
     </MiniAppPermissionWrapper>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppSettingPage.vue.eta

@@ -20,12 +20,12 @@
       <template #default>
         <div class="space-y-4" v-if="!_.isEmpty(schema)">
           <p
-            v-if="miniApp?.integration?.settings?.note"
+            v-if="miniApp?.integration?.customPage?.setting?.note"
             class="text-sm text-gray-600 whitespace-pre-line"
           >
             {{
               t("miniAppLang.miniAppSettingNote", {
-                miniAppNote: miniApp.integration.settings.note ?? "",
+                miniAppNote: miniApp.integration.customPage.setting.note ?? "",
               })
             }}
           </p>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/MiniAppWrapper.vue.eta

@@ -3,7 +3,7 @@
 
   <MiniAppPermissionWrapper
     v-if="!$miniAppStore.isFetchingInstalledMiniApps"
-    :permission="permission"
+    :validation="$miniAppStore.validatePageAccess(miniAppCode, pageCode)"
   >
     <slot />
   </MiniAppPermissionWrapper>
@@ -12,38 +12,8 @@
 <script setup lang="ts">
 import MiniAppPermissionWrapper from "./MiniAppPermissionWrapper.vue";
 
-const props = defineProps<{
+defineProps<{
   miniAppCode: string;
   pageCode: string;
 }>();
-
-const { $miniAppStore } = useNuxtApp();
-
-const miniApp = computed(() => {
-  return $miniAppStore.installedMiniApps.find(
-    (item) => item.code === props.miniAppCode,
-  );
-});
-
-const permission = computed(() => {
-  const checkHasFeature = $miniAppStore.checkHasFeature();
-  if (!checkHasFeature.status) return checkHasFeature;
-
-  const checkIsInstalled = $miniAppStore.checkIsInstalled(props.miniAppCode);
-  if (!checkIsInstalled.status) return checkIsInstalled;
-
-  if (!miniApp.value) {
-    return {
-      status: false,
-      reason: "unknownMiniApp",
-    };
-  }
-
-  const checkHasRequiredPlan = $miniAppStore.checkHasRequiredPlan(
-    miniApp.value,
-  );
-  if (!checkHasRequiredPlan.status) return checkHasRequiredPlan;
-
-  return $miniAppStore.checkCanAccess(props.miniAppCode, props.pageCode);
-});
 </script>

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationItem.vue.eta

@@ -16,7 +16,7 @@
     </div>
 
     <div class="p-4">
-      <img :src="item.logo" class="size-16 object-contain" />
+      <MiniAppIcon :image="item.logo" :label="item.name" size="lg" />
     </div>
 
     <div class="text-sm text-gray-600 text-center line-clamp-2">
@@ -27,18 +27,19 @@
 
 <script setup lang="ts">
 import { MiniappStatusEnum } from "~/enums/enums.generate";
-import { Miniapp } from "~/simpleapp/generate/openapi";
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
 import MiniAppIntegrationItemBadge from "./MiniAppIntegrationItemBadge.vue";
+import MiniAppIcon from "../MiniAppIcon.vue";
 
 defineProps<{
-  item: Miniapp;
+  item: MiniAppDetail;
 }>();
 
 const emits = defineEmits<{
-  (event: "miniAppClick", item: Miniapp): void;
+  (event: "miniAppClick", item: MiniAppDetail): void;
 }>();
 
-function handleMiniAppClick(item: Miniapp) {
+function handleMiniAppClick(item: MiniAppDetail) {
   if (item.status === MiniappStatusEnum.UPCOMING) return;
 
   if (item._id) {

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationItemBadge.vue.eta

@@ -5,11 +5,12 @@
     :class="{
       'bg-emerald-500': badgeType === 'available',
       'bg-yellow-400': badgeType === 'comingSoon',
+      'bg-slate-400': badgeType === 'dev',
     }"
   >
     {{ t(`miniAppLang.${badgeType}`) }}
   </span>
-  <span
+  <!-- <span
     v-else
     class="bg-slate-200/50 text-surface-500 text-[0.65rem] px-2 font-bold py-0.5 rounded-md uppercase"
   >
@@ -27,28 +28,33 @@
         })
       }}
     </template>
-  </span>
+  </span> -->
 </template>
 
 <script setup lang="ts">
-import { Miniapp } from "~/simpleapp/generate/openapi";
+import { MiniappEnvEnum } from "~/enums/enums.generate";
+import { Miniapp, MiniAppDetail } from "~/simpleapp/generate/openapi";
 
 const props = defineProps<{
-  item: Miniapp;
+  item: MiniAppDetail;
 }>();
 
 const { $miniAppStore } = useNuxtApp();
 
 const badgeType = computed(() => {
+  if (props.item.env === MiniappEnvEnum.DEV) {
+    return "dev";
+  }
+
+  if (!$miniAppStore.hasMiniAppFeature) {
+    return "noFeature";
+  }
+
   if (props.item.status === "upcoming") {
     return "comingSoon";
   }
 
-  if ($miniAppStore.hasRequiredPlan(props.item)) {
-    if (!$miniAppStore.isHasMiniAppFeature) {
-      return "noFeature";
-    }
-
+  if (props.item.hasRequiredPlan) {
     return "available";
   }
 

package/templates/nuxt/simpleapp/generate/features/miniApp/app/components/integration/MiniAppIntegrationItemGroup.vue.eta

@@ -19,16 +19,16 @@
 </template>
 <script setup lang="ts">
 import UndrawNodata from "~/components/icon/UndrawNodata.vue";
-import { Miniapp } from "~/simpleapp/generate/openapi";
+import { MiniAppDetail } from "~/simpleapp/generate/openapi";
 import MiniAppIntegrationItem from "./MiniAppIntegrationItem.vue";
 
-defineProps<{ items: Miniapp[] | undefined }>();
+defineProps<{ items: MiniAppDetail[] | undefined }>();
 
 const emits = defineEmits<{
-  (event: "miniAppClick", item: Miniapp): void;
+  (event: "miniAppClick", item: MiniAppDetail): void;
 }>();
 
-function handleMiniAppClick(item: Miniapp) {
+function handleMiniAppClick(item: MiniAppDetail) {
   emits("miniAppClick", item);
 }
 </script>