@peanut-admin/admin 0.1.0-alpha.11

package/admin-shell/src/overrides.ts

@@ -0,0 +1,53 @@
+import {
+  defineAdminOverrideSlot,
+} from '@peanut-admin/admin/core'
+import type {
+  AdminOverrideRegistry,
+  ApiAudience,
+} from '@peanut-admin/admin/core'
+import type { Component } from 'vue'
+
+import { AdminShell, PlatformShell } from './layout'
+
+export const WORKSPACE_SHELL_OVERRIDE_KEY = 'peanut.shell.service.workspace-component' as const
+
+export type WorkspaceShellResolver = (audience: ApiAudience) => Component
+
+const defaultWorkspaceShell: WorkspaceShellResolver = audience => (
+  audience === 'tenant' ? AdminShell : PlatformShell
+)
+
+const isWorkspaceShellResolver = (value: unknown): value is WorkspaceShellResolver => (
+  typeof value === 'function'
+)
+
+const isVueComponent = (value: unknown): value is Component => {
+  if (typeof value === 'function') return true
+  if (typeof value !== 'object' || value === null) return false
+  const component = value as Record<string, unknown>
+  return typeof component.setup === 'function'
+    || typeof component.render === 'function'
+    || typeof component.template === 'string'
+    || typeof component.__asyncLoader === 'function'
+}
+
+export const ADMIN_SHELL_OVERRIDE_SLOTS = [
+  defineAdminOverrideSlot({
+    key: WORKSPACE_SHELL_OVERRIDE_KEY,
+    kind: 'service',
+    contractVersion: '1.0.0',
+    defaultValue: defaultWorkspaceShell,
+    validate: isWorkspaceShellResolver,
+  }),
+] as const
+
+export type AdminShellOverrideRegistry = AdminOverrideRegistry<typeof ADMIN_SHELL_OVERRIDE_SLOTS>
+
+export const resolveWorkspaceShell = (
+  registry: AdminShellOverrideRegistry,
+  audience: ApiAudience,
+): Component => {
+  const component = registry.get(WORKSPACE_SHELL_OVERRIDE_KEY)(audience)
+  if (!isVueComponent(component)) throw new Error('ADMIN_SHELL_OVERRIDE_RESULT_INVALID')
+  return component
+}

package/admin-shell/src/states.ts

@@ -0,0 +1,93 @@
+import { ElButton } from 'element-plus'
+import { defineComponent, h } from 'vue'
+import type { PropType } from 'vue'
+
+interface StateDefaults {
+  title: string
+  message: string
+  actionLabel?: string
+}
+
+const createStateComponent = (name: string, state: string, defaults: StateDefaults) => defineComponent({
+  name,
+  props: {
+    title: { type: String, default: defaults.title },
+    message: { type: String, default: defaults.message },
+    requestId: { type: String, default: null },
+    retryAfter: { type: String as PropType<string | null>, default: null },
+    actionLabel: { type: String, default: defaults.actionLabel ?? null },
+    onAction: { type: Function as PropType<() => void>, default: null },
+  },
+  emits: {
+    action: () => true,
+  },
+  setup(props, { emit, slots }) {
+    return () => h('section', {
+      class: ['pa-state', `pa-state--${name.replace(/State$/, '').toLowerCase()}`],
+      'data-state': state,
+      role: 'status',
+      'aria-live': 'polite',
+    }, [
+      h('h2', { class: 'pa-state__title' }, props.title),
+      h('p', { class: 'pa-state__message' }, props.message),
+      props.requestId === null
+        ? null
+        : h('p', { class: 'pa-state__request-id' }, `Request ID: ${props.requestId}`),
+      props.retryAfter === null
+        ? null
+        : h('p', { class: 'pa-state__retry-after' }, `Retry after: ${props.retryAfter}`),
+      slots.default?.(),
+      props.actionLabel === null
+        ? null
+        : h(ElButton, {
+            onClick: () => {
+              emit('action')
+            },
+          }, () => props.actionLabel),
+    ])
+  },
+})
+
+export const EmptyState = createStateComponent('EmptyState', 'empty', {
+  title: 'No data',
+  message: 'There is nothing to display.',
+})
+
+export const ForbiddenState = createStateComponent('ForbiddenState', 'forbidden', {
+  title: 'Access denied',
+  message: 'You do not have permission to view this page.',
+})
+
+export const NotFoundState = createStateComponent('NotFoundState', 'not-found', {
+  title: 'Not found',
+  message: 'The requested resource is unavailable.',
+})
+
+export const ModuleUnavailableState = createStateComponent('ModuleUnavailableState', 'module-unavailable', {
+  title: 'Module unavailable',
+  message: 'This module is currently unavailable.',
+  actionLabel: 'Retry',
+})
+
+export const ConflictState = createStateComponent('ConflictState', 'conflict', {
+  title: 'Content changed',
+  message: 'Reload the latest version before continuing.',
+  actionLabel: 'Reload',
+})
+
+export const RateLimitState = createStateComponent('RateLimitState', 'rate-limit', {
+  title: 'Too many requests',
+  message: 'Wait before trying again.',
+})
+
+export const ServiceUnavailableState = createStateComponent('ServiceUnavailableState', 'service-unavailable', {
+  title: 'Service unavailable',
+  message: 'The service is temporarily unavailable.',
+  actionLabel: 'Retry',
+})
+
+export const SessionExpiredState = createStateComponent('SessionExpiredState', 'session-expired', {
+  title: 'Session expired',
+  message: 'Sign in again to continue.',
+  actionLabel: 'Sign in',
+})

package/admin-shell/src/tabs.ts

@@ -0,0 +1,31 @@
+/** Framework-neutral route data required by an admin workspace tab. */
+export interface ShellTabRoute {
+  name: unknown
+  fullPath: string
+  query?: unknown
+  meta?: {
+    locale?: string
+    ignoreCache?: boolean | undefined
+  }
+}
+
+export interface ShellTab {
+  title: string
+  name: string
+  fullPath: string
+  query?: unknown
+  ignoreCache?: boolean | undefined
+}
+
+export interface ShellTabState {
+  tagList: ShellTab[]
+  cacheTabList: Set<string>
+}
+
+export const tabFromRoute = (route: ShellTabRoute): ShellTab => ({
+  title: route.meta?.locale || '',
+  name: String(route.name),
+  fullPath: route.fullPath,
+  query: route.query,
+  ignoreCache: route.meta?.ignoreCache,
+})

package/admin-shell/src/targets.ts

@@ -0,0 +1,128 @@
+/* eslint-disable vue/one-component-per-file */
+
+import type { TargetCandidate, TypedTarget } from '@peanut-admin/admin/core'
+import { ElOption, ElPagination, ElSelect } from 'element-plus'
+import { computed, defineComponent, h } from 'vue'
+import type { Component, PropType } from 'vue'
+
+const SelectComponent = ElSelect as unknown as Component
+const OptionComponent = ElOption as unknown as Component
+const PaginationComponent = ElPagination as unknown as Component
+
+const targetKey = (target: TypedTarget): string => JSON.stringify([
+  target.target_resource_key,
+  target.target_role,
+  target.target_id,
+])
+
+export const TargetSelector = defineComponent({
+  name: 'TargetSelector',
+  props: {
+    modelValue: {
+      type: Array as PropType<readonly TypedTarget[]>,
+      default: () => [],
+    },
+    candidates: {
+      type: Array as PropType<readonly TargetCandidate[]>,
+      default: () => [],
+    },
+    multiple: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: 'Select target' },
+    page: { type: Number, default: 1 },
+    pageSize: { type: Number, default: 20 },
+    total: { type: Number, default: 0 },
+  },
+  emits: {
+    'update:modelValue': (targets: readonly TypedTarget[]) => Array.isArray(targets),
+    search: (query: string) => typeof query === 'string',
+    'page-change': (page: number) => Number.isInteger(page) && page >= 1,
+  },
+  setup(props, { emit }) {
+    const candidateMap = computed(() => new Map(
+      props.candidates.map(candidate => [targetKey(candidate), candidate]),
+    ))
+    const selectedKeys = computed(() => props.modelValue.map(targetKey))
+    const updateSelection = (value: unknown): void => {
+      const values = (Array.isArray(value) ? value : [value]).filter(
+        (candidate): candidate is string => typeof candidate === 'string',
+      )
+      const targets = values.flatMap(key => {
+        const candidate = candidateMap.value.get(key)
+        return candidate === undefined
+          ? []
+          : [{
+              target_resource_key: candidate.target_resource_key,
+              target_role: candidate.target_role,
+              target_id: candidate.target_id,
+            }]
+      })
+      emit('update:modelValue', props.multiple ? targets : targets.slice(0, 1))
+    }
+
+    return () => h('div', { class: 'pa-target-selector' }, [
+      h(SelectComponent, {
+        modelValue: props.multiple ? selectedKeys.value : (selectedKeys.value[0] ?? null),
+        'onUpdate:modelValue': updateSelection,
+        multiple: props.multiple,
+        filterable: true,
+        remote: true,
+        remoteMethod: (query: string) => emit('search', query),
+        loading: props.loading,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        class: 'pa-target-selector__select',
+      }, () => props.candidates.map(candidate => h(OptionComponent, {
+        key: targetKey(candidate),
+        value: targetKey(candidate),
+        label: candidate.label,
+      }))),
+      props.total <= props.pageSize
+        ? null
+        : h(PaginationComponent, {
+            class: 'pa-target-selector__pagination',
+            currentPage: props.page,
+            pageSize: props.pageSize,
+            total: props.total,
+            layout: 'prev, pager, next',
+            'onUpdate:currentPage': (page: number) => emit('page-change', page),
+          }),
+    ])
+  },
+})
+
+export type TargetScopeMode = 'zero' | 'single' | 'multiple' | 'aggregate'
+
+export const TargetScopeSummary = defineComponent({
+  name: 'TargetScopeSummary',
+  props: {
+    mode: {
+      type: String as PropType<TargetScopeMode>,
+      required: true,
+    },
+    availableCount: { type: Number, required: true },
+    selectedCount: { type: Number, default: 0 },
+    digest: { type: String, default: null },
+  },
+  setup(props) {
+    const message = computed(() => {
+      switch (props.mode) {
+        case 'zero':
+          return 'No available targets'
+        case 'single':
+          return '1 available target'
+        case 'aggregate':
+          return `Read-only aggregate across ${props.availableCount} targets`
+        default:
+          return `${props.selectedCount} of ${props.availableCount} targets selected`
+      }
+    })
+
+    return () => h('div', {
+      class: ['pa-target-scope-summary', `is-${props.mode}`],
+      role: 'status',
+      'aria-label': 'Target scope',
+    }, message.value)
+  },
+})

package/admin-shell/src/theme.ts

@@ -0,0 +1,15 @@
+export const SHELL_THEME_TOKENS = {
+  headerHeight: '--pa-shell-header-height',
+  sidebarWidth: '--pa-shell-sidebar-width',
+  sidebarCollapsedWidth: '--pa-shell-sidebar-collapsed-width',
+  contentMaxWidth: '--pa-shell-content-max-width',
+  surfaceColor: '--pa-shell-surface-color',
+  borderColor: '--pa-shell-border-color',
+  textColor: '--pa-shell-text-color',
+  mutedTextColor: '--pa-shell-muted-text-color',
+  focusColor: '--pa-shell-focus-color',
+} as const
+
+export type ShellThemeToken = typeof SHELL_THEME_TOKENS[keyof typeof SHELL_THEME_TOKENS]
+
+export type ShellSlotName = 'header' | 'sidebar' | 'breadcrumb' | 'tabs' | 'default'