@jskit-ai/users-web 0.1.52 → 0.1.54

package/test/settingsPlacementContract.test.js

@@ -71,44 +71,6 @@ function expectTextMutation(id, { reason = "", category = "", skipIfContains = "
   }
 }
 
-test("users-web console settings template exposes surface-derived settings outlets", async () => {
-  const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "console", "settings.vue"), "utf8");
-
-  assert.match(source, /target="console-settings:primary-menu"/);
-  assert.match(source, /default-link-component-token="local\.main\.ui\.surface-aware-menu-link-item"/);
-  assert.match(source, /<RouterView \/>/);
-});
-
-test("users-web console settings index template is a simple developer-owned stub", async () => {
-  const source = await readFile(path.join(PACKAGE_DIR, "templates", "src", "pages", "console", "settings", "index.vue"), "utf8");
-
-  assert.match(source, /definePage/);
-  assert.match(source, /your_child_segment/);
-});
-
-test("users-web descriptor metadata advertises console settings outlets with standard positions", () => {
-  const outlets = readOutlets("console-settings:primary-menu");
-  assert.deepEqual(
-    outlets,
-    [
-      {
-        target: "console-settings:primary-menu",
-        defaultLinkComponentToken: "local.main.ui.surface-aware-menu-link-item",
-        surfaces: ["console"],
-        source: "templates/src/pages/console/settings.vue"
-      }
-    ]
-  );
-  assert.deepEqual(findFileMutation("users-web-page-console-settings"), {
-    from: "templates/src/pages/console/settings/index.vue",
-    toSurface: "console",
-    toSurfacePath: "settings/index.vue",
-    reason: "Install console settings index stub scaffold for app-owned landing or redirect behavior.",
-    category: "users-web",
-    id: "users-web-page-console-settings"
-  });
-});
-
 test("users-web home tools widget exposes home-tools outlet", async () => {
   const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "components", "UsersHomeToolsWidget.vue"), "utf8");
 
@@ -118,15 +80,6 @@ test("users-web home tools widget exposes home-tools outlet", async () => {
   assert.match(source, /:default-link-component-token="HOME_TOOLS_OUTLET\.defaultLinkComponentToken"/);
 });
 
-test("users-web workspace tools widget exposes workspace-tools outlet", async () => {
-  const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "components", "UsersWorkspaceToolsWidget.vue"), "utf8");
-
-  assert.match(source, /import \{ WORKSPACE_TOOLS_OUTLET \} from "\.\.\/\.\.\/shared\/toolsOutletContracts\.js";/);
-  assert.match(source, /<ShellOutletMenuWidget/);
-  assert.match(source, /:target="WORKSPACE_TOOLS_OUTLET\.target"/);
-  assert.match(source, /:default-link-component-token="WORKSPACE_TOOLS_OUTLET\.defaultLinkComponentToken"/);
-});
-
 test("users-web descriptor metadata advertises home tools outlet and standard home settings placements", () => {
   assert.deepEqual(
     readOutlets("home-tools:primary-menu"),
@@ -178,8 +131,8 @@ test("users-web descriptor metadata advertises home tools outlet and standard ho
       'id: "users.home.menu.settings"',
       'target: "home-tools:primary-menu"',
       'componentToken: "local.main.ui.surface-aware-menu-link-item"',
-      'workspaceSuffix: "/settings"',
-      'nonWorkspaceSuffix: "/settings"'
+      'scopedSuffix: "/settings"',
+      'unscopedSuffix: "/settings"'
     ]
   });
 
@@ -196,4 +149,6 @@ test("users-web descriptor metadata advertises home tools outlet and standard ho
     ]
   });
 
+  assert.equal(findFileMutation("users-web-component-account-settings-invites"), null);
+
 });

package/test/theme.test.js

@@ -1,9 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { ThemeSymbol } from "vuetify/lib/composables/theme.js";
-import { resolveWorkspaceThemePalette } from "@jskit-ai/users-core/shared/settings";
 import {
-  hexColorToRgb,
   normalizeThemePreference,
   persistBootstrapThemePreference,
   persistThemePreference,
@@ -12,7 +10,6 @@ import {
   resolveThemeNameForPreference,
   resolveBootstrapThemeName,
   resolveVuetifyThemeController,
-  setVuetifyPrimaryColorOverride,
   setVuetifyThemeName
 } from "../src/client/lib/theme.js";
 
@@ -167,56 +164,3 @@ test("setVuetifyThemeName updates only when the value changes", () => {
   assert.equal(setVuetifyThemeName(themeController, "dark"), true);
   assert.equal(themeController.global.name.value, "dark");
 });
-
-test("hexColorToRgb returns Vuetify rgb tuple and rejects invalid values", () => {
-  assert.equal(hexColorToRgb("#0f6b54"), "15,107,84");
-  assert.equal(hexColorToRgb("#CC3344"), "204,51,68");
-  assert.equal(hexColorToRgb("invalid"), "");
-});
-
-test("setVuetifyPrimaryColorOverride mutates workspace themes and restores base theme names", () => {
-  const themeController = createVuetifyThemeController("light");
-  const themeInput = {
-    lightPrimaryColor: "#CC3344",
-    lightSecondaryColor: "#884455",
-    lightSurfaceColor: "#F4F4F4",
-    lightSurfaceVariantColor: "#444444",
-    darkPrimaryColor: "#BB2233",
-    darkSecondaryColor: "#557799",
-    darkSurfaceColor: "#202020",
-    darkSurfaceVariantColor: "#A0A0A0"
-  };
-  const expectedLightPalette = resolveWorkspaceThemePalette(themeInput, {
-    mode: "light"
-  });
-  const expectedDarkPalette = resolveWorkspaceThemePalette(themeInput, {
-    mode: "dark"
-  });
-
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, themeInput), true);
-  assert.equal(themeController.global.name.value, "workspace-light");
-  assert.equal(themeController.themes.value["workspace-light"].colors.primary, expectedLightPalette.color);
-  assert.equal(themeController.themes.value["workspace-light"].colors.secondary, expectedLightPalette.secondaryColor);
-  assert.equal(themeController.themes.value["workspace-light"].colors.surface, expectedLightPalette.surfaceColor);
-  assert.equal(
-    themeController.themes.value["workspace-light"].colors["surface-variant"],
-    expectedLightPalette.surfaceVariantColor
-  );
-
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, themeInput), false);
-
-  assert.equal(setVuetifyThemeName(themeController, "dark"), true);
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, themeInput), true);
-  assert.equal(themeController.global.name.value, "workspace-dark");
-  assert.equal(themeController.themes.value["workspace-dark"].colors.primary, expectedDarkPalette.color);
-  assert.equal(themeController.themes.value["workspace-dark"].colors.secondary, expectedDarkPalette.secondaryColor);
-  assert.equal(themeController.themes.value["workspace-dark"].colors.surface, expectedDarkPalette.surfaceColor);
-  assert.equal(
-    themeController.themes.value["workspace-dark"].colors["surface-variant"],
-    expectedDarkPalette.surfaceVariantColor
-  );
-
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, null), true);
-  assert.equal(themeController.global.name.value, "dark");
-  assert.equal(setVuetifyPrimaryColorOverride(themeController, null), false);
-});

package/src/client/components/ConsoleSettingsClientElement.vue

@@ -1,24 +0,0 @@
-<template>
-  <v-container fluid class="console-home pa-0">
-    <v-row class="ma-0" justify="center">
-      <v-col cols="12" sm="10" md="9" lg="7">
-        <v-sheet class="pa-6 pa-sm-8" rounded="lg" border>
-          <h1 class="text-h5 text-sm-h4 mb-3">Console settings</h1>
-          <p class="text-body-2 text-sm-body-1 mb-0">
-            No console settings sections are available yet. Install a module that adds a page and menu entry to
-            <code>console-settings:primary-menu</code>.
-          </p>
-        </v-sheet>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<style scoped>
-.console-home {
-  min-height: min(100vh, 700px);
-  display: grid;
-  align-content: start;
-  padding-top: clamp(16px, 4vh, 48px);
-}
-</style>

package/src/client/components/MembersAdminClientElement.vue

@@ -1,400 +0,0 @@
-<template>
-  <section class="members-admin-client-element">
-    <v-row>
-      <v-col cols="12" lg="5">
-        <v-card rounded="lg" elevation="1" border data-testid="members-admin-invite-card">
-          <v-card-item>
-            <v-card-title class="text-subtitle-1">Invite people</v-card-title>
-            <v-card-subtitle>Send workspace invites with a role.</v-card-subtitle>
-          </v-card-item>
-          <v-divider />
-          <v-card-text>
-            <template v-if="showWorkspaceInviteLoadingSkeleton">
-              <v-skeleton-loader type="text@2, paragraph, button" class="mb-3" />
-            </template>
-            <template v-else>
-              <v-progress-linear v-if="showWorkspaceInviteRefreshingIndicator" indeterminate class="mb-3" />
-              <p
-                v-if="workspaceInvitePolicyLoaded && !workspaceInvitesAvailable"
-                class="text-body-2 text-medium-emphasis mb-3"
-              >
-                Invites are disabled by app policy or role manifest.
-              </p>
-              <p
-                v-else-if="workspaceInvitePolicyLoaded && !workspaceInvitesEnabled"
-                class="text-body-2 text-medium-emphasis mb-3"
-              >
-                Invites are currently off for this workspace.
-              </p>
-
-              <p v-if="!canInviteMembers" class="text-body-2 text-medium-emphasis mb-3">
-                You do not have permission to send invites.
-              </p>
-
-              <template v-else-if="canShowInviteForm">
-                <v-form @submit.prevent="onSubmitInvite" novalidate>
-                  <v-text-field
-                    v-model="inviteForm.email"
-                    label="Email"
-                    variant="outlined"
-                    density="comfortable"
-                    type="email"
-                    autocomplete="email"
-                    :disabled="isCreatingInvite || showWorkspaceInviteRefreshingIndicator"
-                    class="mb-3"
-                  />
-                  <v-select
-                    v-model="inviteForm.roleSid"
-                    label="Role"
-                    :items="inviteRoleOptions"
-                    item-title="title"
-                    item-value="value"
-                    variant="outlined"
-                    density="comfortable"
-                    :disabled="isCreatingInvite || showWorkspaceInviteRefreshingIndicator"
-                    class="mb-3"
-                  />
-                  <v-btn
-                    type="submit"
-                    color="primary"
-                    :loading="isCreatingInvite"
-                    :disabled="showWorkspaceInviteRefreshingIndicator"
-                  >
-                    Send invite
-                  </v-btn>
-                </v-form>
-              </template>
-            </template>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" lg="7">
-        <v-card rounded="lg" elevation="1" border data-testid="members-admin-members-card">
-          <v-card-item>
-            <v-card-title class="text-subtitle-1">Team</v-card-title>
-            <v-card-subtitle>Members and pending invites.</v-card-subtitle>
-          </v-card-item>
-          <v-divider />
-          <v-card-text>
-            <template v-if="showMembersLoadingSkeleton">
-              <v-skeleton-loader type="text@2, list-item-avatar-two-line@3" class="mb-3" />
-              <v-divider class="mb-3" />
-              <v-skeleton-loader type="text, list-item-two-line@2" />
-            </template>
-            <template v-else>
-              <v-progress-linear v-if="showMembersRefreshingIndicator" indeterminate class="mb-3" />
-              <p v-if="!canViewMembers" class="text-body-2 text-medium-emphasis mb-0">
-                You do not have permission to view members.
-              </p>
-
-              <template v-else>
-                <div class="text-caption text-medium-emphasis mb-2">Members</div>
-                <v-list density="comfortable" class="pa-0 mb-3">
-                  <v-list-item v-for="member in memberRows" :key="member.userId" class="px-0">
-                    <template #title>
-                      <div class="d-flex align-center ga-2">
-                        <span>{{ member.displayName || member.email }}</span>
-                        <v-chip v-if="showOwnerChip(member)" size="x-small" label color="secondary">Owner</v-chip>
-                      </div>
-                    </template>
-                    <template #subtitle>
-                      {{ member.email }}
-                    </template>
-
-                    <template #append>
-                      <div class="d-flex align-center ga-2">
-                        <v-select
-                          v-model="member.roleSid"
-                          :items="memberRoleOptions"
-                          item-title="title"
-                          item-value="value"
-                          density="compact"
-                          variant="outlined"
-                          hide-details
-                          class="member-role-select"
-                          :disabled="showMembersRefreshingIndicator || isMemberRoleLocked(member)"
-                          @update:model-value="(value) => onMemberRoleUpdate(member, value)"
-                        />
-                        <v-btn
-                          variant="text"
-                          color="error"
-                          :disabled="showMembersRefreshingIndicator || isMemberRemoveLocked(member)"
-                          :loading="isRemoveMemberLoading(member.userId)"
-                          @click="onRemoveMember(member)"
-                        >
-                          Remove
-                        </v-btn>
-                      </div>
-                    </template>
-                  </v-list-item>
-                </v-list>
-
-                <v-divider class="mb-3" />
-
-                <div class="text-caption text-medium-emphasis mb-2">Pending invites</div>
-                <v-list density="comfortable" class="pa-0">
-                  <v-list-item v-for="invite in inviteRows" :key="invite.id" class="px-0">
-                    <template #title>
-                      {{ invite.email }}
-                    </template>
-                    <template #subtitle>
-                      Role: {{ invite.roleSid }} • expires {{ formatDateTime(invite.expiresAt) }}
-                    </template>
-                    <template #append>
-                      <v-btn
-                        v-if="canRevokeInvites"
-                        variant="text"
-                        color="error"
-                        :disabled="showMembersRefreshingIndicator"
-                        :loading="isRevokeInviteLoading(invite.id)"
-                        @click="onRevokeInvite(invite.id)"
-                      >
-                        Revoke
-                      </v-btn>
-                    </template>
-                  </v-list-item>
-                  <p v-if="inviteRows.length < 1" class="text-body-2 text-medium-emphasis mb-0">No pending invites.</p>
-                </v-list>
-              </template>
-            </template>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </section>
-</template>
-
-<script setup>
-import { computed, toRefs, unref } from "vue";
-import { formatDateTime as formatKernelDateTime } from "@jskit-ai/kernel/shared/support";
-import { normalizeRecordId } from "@jskit-ai/kernel/shared/support/normalize";
-import { requireBoolean, requireFunction, requireRecord } from "../support/contractGuards.js";
-
-const props = defineProps({
-  forms: {
-    type: Object,
-    required: true
-  },
-  options: {
-    type: Object,
-    required: true
-  },
-  collections: {
-    type: Object,
-    required: true
-  },
-  permissions: {
-    type: Object,
-    required: true
-  },
-  revokeInviteId: {
-    type: String,
-    required: true
-  },
-  removeMemberUserId: {
-    type: String,
-    required: true
-  },
-  status: {
-    type: Object,
-    required: true
-  },
-  actions: {
-    type: Object,
-    required: true
-  }
-});
-
-requireRecord(props.forms, "forms", "MembersAdminClientElement");
-requireRecord(props.options, "options", "MembersAdminClientElement");
-requireRecord(props.collections, "collections", "MembersAdminClientElement");
-requireRecord(props.permissions, "permissions", "MembersAdminClientElement");
-requireRecord(props.status, "status", "MembersAdminClientElement");
-requireRecord(props.actions, "actions", "MembersAdminClientElement");
-
-const {
-  forms,
-  options,
-  collections,
-  permissions,
-  revokeInviteId,
-  removeMemberUserId,
-  status,
-  actions
-} = toRefs(props);
-
-const actionHandlers = Object.freeze({
-  submitInvite: requireFunction(actions.value.submitInvite, "actions.submitInvite", "MembersAdminClientElement"),
-  submitRevokeInvite: requireFunction(
-    actions.value.submitRevokeInvite,
-    "actions.submitRevokeInvite",
-    "MembersAdminClientElement"
-  ),
-  submitMemberRoleUpdate: requireFunction(
-    actions.value.submitMemberRoleUpdate,
-    "actions.submitMemberRoleUpdate",
-    "MembersAdminClientElement"
-  ),
-  submitRemoveMember: requireFunction(
-    actions.value.submitRemoveMember,
-    "actions.submitRemoveMember",
-    "MembersAdminClientElement"
-  )
-});
-
-const inviteForm = computed(() => requireRecord(forms.value.invite, "forms.invite", "MembersAdminClientElement"));
-const workspaceForm = computed(() =>
-  requireRecord(forms.value.workspace, "forms.workspace", "MembersAdminClientElement")
-);
-
-const memberRows = computed(() => {
-  const source = collections.value.members;
-  return Array.isArray(unref(source)) ? unref(source) : [];
-});
-
-const inviteRows = computed(() => {
-  const source = collections.value.invites;
-  return Array.isArray(unref(source)) ? unref(source) : [];
-});
-
-const inviteRoleOptions = computed(() => {
-  const source = options.value.inviteRoleOptions;
-  return Array.isArray(unref(source)) ? unref(source) : [];
-});
-
-const memberRoleOptions = computed(() => {
-  const source = options.value.memberRoleOptions;
-  return Array.isArray(unref(source)) ? unref(source) : [];
-});
-
-const canViewMembers = computed(() => Boolean(unref(permissions.value.canViewMembers)));
-const canInviteMembers = computed(() => Boolean(unref(permissions.value.canInviteMembers)));
-const canManageMembers = computed(() => Boolean(unref(permissions.value.canManageMembers)));
-const canRevokeInvites = computed(() => Boolean(unref(permissions.value.canRevokeInvites)));
-const isCreatingInvite = computed(() => Boolean(unref(status.value.isCreatingInvite)));
-const isRevokingInvite = computed(() => Boolean(unref(status.value.isRevokingInvite)));
-const isRemovingMember = computed(() => Boolean(unref(status.value.isRemovingMember)));
-const workspaceInvitePolicyLoaded = computed(() =>
-  requireBoolean(status.value.hasLoadedWorkspaceSettings, "status.hasLoadedWorkspaceSettings", "MembersAdminClientElement")
-);
-const workspaceInvitePolicyRefreshing = computed(() =>
-  requireBoolean(
-    status.value.isRefreshingWorkspaceSettings,
-    "status.isRefreshingWorkspaceSettings",
-    "MembersAdminClientElement"
-  )
-);
-const membersListLoaded = computed(() =>
-  requireBoolean(status.value.hasLoadedMembersList, "status.hasLoadedMembersList", "MembersAdminClientElement")
-);
-const membersListRefreshing = computed(() =>
-  requireBoolean(status.value.isRefreshingMembersList, "status.isRefreshingMembersList", "MembersAdminClientElement")
-);
-const inviteListLoaded = computed(() =>
-  requireBoolean(status.value.hasLoadedInviteList, "status.hasLoadedInviteList", "MembersAdminClientElement")
-);
-const inviteListRefreshing = computed(() =>
-  requireBoolean(status.value.isRefreshingInviteList, "status.isRefreshingInviteList", "MembersAdminClientElement")
-);
-
-const showWorkspaceInviteLoadingSkeleton = computed(
-  () => canInviteMembers.value && !workspaceInvitePolicyLoaded.value
-);
-const showWorkspaceInviteRefreshingIndicator = computed(
-  () => canInviteMembers.value && workspaceInvitePolicyLoaded.value && workspaceInvitePolicyRefreshing.value
-);
-
-const showMembersLoadingSkeleton = computed(
-  () =>
-    canViewMembers.value &&
-    (!membersListLoaded.value || !inviteListLoaded.value)
-);
-const showMembersRefreshingIndicator = computed(
-  () =>
-    canViewMembers.value &&
-    membersListLoaded.value &&
-    inviteListLoaded.value &&
-    (membersListRefreshing.value || inviteListRefreshing.value)
-);
-
-const workspaceInvitesAvailable = computed(() => Boolean(unref(workspaceForm.value.invitesAvailable)));
-const workspaceInvitesEnabled = computed(() => Boolean(unref(workspaceForm.value.invitesEnabled)));
-
-const canShowInviteForm = computed(
-  () => canInviteMembers.value && workspaceInvitesAvailable.value && workspaceInvitesEnabled.value
-);
-
-function formatDateTime(value) {
-  if (typeof options.value.formatDateTime === "function") {
-    return options.value.formatDateTime(value);
-  }
-  return formatKernelDateTime(value);
-}
-
-function showOwnerChip(member) {
-  return Boolean(member?.isOwner);
-}
-
-function isMemberRoleLocked(member) {
-  if (!canManageMembers.value) {
-    return true;
-  }
-
-  return Boolean(member?.isOwner);
-}
-
-function isMemberRemoveLocked(member) {
-  if (!canManageMembers.value) {
-    return true;
-  }
-
-  return Boolean(member?.isOwner);
-}
-
-function isRevokeInviteLoading(inviteId) {
-  return isRevokingInvite.value && revokeInviteId.value === normalizeRecordId(inviteId, { fallback: "" });
-}
-
-function isRemoveMemberLoading(memberUserId) {
-  return isRemovingMember.value && removeMemberUserId.value === normalizeRecordId(memberUserId, { fallback: "" });
-}
-
-async function onSubmitInvite() {
-  if (!canShowInviteForm.value) {
-    return;
-  }
-
-  await actionHandlers.submitInvite();
-}
-
-async function onRevokeInvite(inviteId) {
-  if (!canRevokeInvites.value) {
-    return;
-  }
-
-  await actionHandlers.submitRevokeInvite(inviteId);
-}
-
-async function onMemberRoleUpdate(member, roleSid) {
-  if (isMemberRoleLocked(member)) {
-    return;
-  }
-
-  await actionHandlers.submitMemberRoleUpdate(member, roleSid);
-}
-
-async function onRemoveMember(member) {
-  if (isMemberRemoveLocked(member)) {
-    return;
-  }
-
-  await actionHandlers.submitRemoveMember(member);
-}
-</script>
-
-<style scoped>
-.member-role-select {
-  width: 160px;
-}
-</style>

package/src/client/components/UsersProfileSurfaceSwitchMenuItem.vue

@@ -1,39 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useSurfaceRouteContext } from "../composables/useSurfaceRouteContext.js";
-import { resolveProfileSurfaceMenuLinks } from "../lib/profileSurfaceMenuLinks.js";
-
-const props = defineProps({
-  surface: {
-    type: String,
-    default: "*"
-  }
-});
-
-const { placementContext, currentSurfaceId } = useSurfaceRouteContext();
-
-const resolvedSurfaceId = computed(() => {
-  const explicitSurface = String(props.surface || "").trim().toLowerCase();
-  if (explicitSurface && explicitSurface !== "*") {
-    return explicitSurface;
-  }
-  return String(currentSurfaceId.value || "").trim().toLowerCase() || "*";
-});
-
-const resolvedLinks = computed(() => {
-  return resolveProfileSurfaceMenuLinks({
-    context: placementContext.value,
-    surface: resolvedSurfaceId.value
-  });
-});
-</script>
-
-<template>
-  <v-list-item
-    v-for="link in resolvedLinks"
-    :key="link.id"
-    :title="link.label"
-    :to="link.to"
-    :prepend-icon="link.icon"
-  />
-</template>

package/src/client/components/UsersWorkspaceMembersMenuItem.vue

@@ -1,36 +0,0 @@
-<script setup>
-import { mdiAccountGroupOutline } from "@mdi/js";
-import UsersWorkspacePermissionMenuItem from "./UsersWorkspacePermissionMenuItem.vue";
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: "Members"
-  },
-  to: {
-    type: String,
-    default: ""
-  },
-  icon: {
-    type: String,
-    default: mdiAccountGroupOutline
-  },
-  surface: {
-    type: String,
-    default: "*"
-  }
-});
-
-const MEMBERS_MENU_PERMISSIONS = Object.freeze(["workspace.members.view", "workspace.members.manage"]);
-</script>
-
-<template>
-  <UsersWorkspacePermissionMenuItem
-    :label="props.label"
-    :to="props.to"
-    :icon="props.icon"
-    :surface="props.surface"
-    path="/members"
-    :permissions="MEMBERS_MENU_PERMISSIONS"
-  />
-</template>