@csntgao/uni-base 0.1.0

package/packages/web-components/src/organization-selector.ts

@@ -0,0 +1,534 @@
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit'
+
+export type OrganizationSelectorType = 'enterprise' | 'team'
+export type EnterpriseVerificationStatus =
+  'unverified' | 'pending' | 'rejected' | 'verified' | 'expired'
+
+export interface OrganizationSelectorEntry {
+  id: string
+  name: string
+  type: OrganizationSelectorType
+  verificationStatus?: EnterpriseVerificationStatus
+  role?: string
+  memberCount?: number
+  lastEnteredLabel?: string
+}
+
+export interface OrganizationSelectorConfig {
+  organizations: readonly OrganizationSelectorEntry[]
+  selectedOrganizationId?: string
+  rememberSelection?: boolean
+}
+
+export interface OrganizationSelectorEventMap {
+  'organization-enter-requested': CustomEvent<{
+    organizationId: string
+    rememberSelection: boolean
+  }>
+  'organization-create-requested': CustomEvent<Record<string, never>>
+}
+
+interface ResolvedOrganizationSelectorEntry {
+  id: string
+  name: string
+  type: OrganizationSelectorType
+  verificationStatus: EnterpriseVerificationStatus | null
+  role: string
+  memberCount: number | null
+  lastEnteredLabel: string
+}
+
+export class UniplatOrganizationSelector extends LitElement {
+  static override properties = {
+    organizations: { state: true },
+    selectedOrganizationId: { state: true },
+    rememberSelection: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-organization-selector-width: 400px;
+      --uniplat-organization-selector-primary: #2e6bf5;
+      --uniplat-organization-selector-text: #182634;
+      --uniplat-organization-selector-muted: #7a8794;
+      --uniplat-organization-selector-border: #e4ebf3;
+      --uniplat-organization-selector-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      display: block;
+      width: min(var(--uniplat-organization-selector-width), 100%);
+      color: var(--uniplat-organization-selector-text);
+      font-family: var(--uniplat-organization-selector-font-family);
+      line-height: 1.5;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    button {
+      cursor: pointer;
+    }
+
+    .card {
+      width: 100%;
+      padding: 24px;
+      overflow: hidden;
+      border: 1px solid var(--uniplat-organization-selector-border);
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 8px 24px rgba(20, 40, 80, 0.08);
+    }
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    h2 {
+      font-size: 20px;
+      font-weight: 800;
+      line-height: 1.35;
+    }
+
+    .description {
+      margin-top: 7px;
+      color: var(--uniplat-organization-selector-muted);
+      font-size: 13px;
+    }
+
+    .list {
+      display: grid;
+      gap: 9px;
+      max-height: 340px;
+      margin-top: 18px;
+      overflow-y: auto;
+      scrollbar-gutter: stable;
+    }
+
+    .organization {
+      display: grid;
+      grid-template-columns: 36px minmax(0, 1fr) 18px;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      min-height: 62px;
+      padding: 10px 11px;
+      border: 1px solid #edf1f6;
+      border-radius: 10px;
+      color: inherit;
+      background: #ffffff;
+      text-align: left;
+    }
+
+    .organization:hover {
+      background: #fafcff;
+    }
+
+    .organization.selected {
+      border-color: var(--uniplat-organization-selector-primary);
+      background: #f7f9ff;
+    }
+
+    .organization-icon {
+      display: grid;
+      place-items: center;
+      width: 36px;
+      height: 36px;
+      border-radius: 9px;
+      color: var(--uniplat-organization-selector-primary);
+      background: #e6eefe;
+    }
+
+    .organization.team .organization-icon {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .copy {
+      min-width: 0;
+    }
+
+    .name-line {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .name {
+      overflow: hidden;
+      font-size: 13.5px;
+      font-weight: 750;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .badge {
+      flex: none;
+      padding: 1px 6px;
+      border-radius: 4px;
+      color: var(--uniplat-organization-selector-primary);
+      background: #e6eefe;
+      font-size: 10.5px;
+      font-weight: 700;
+    }
+
+    .badge.team {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .badge.unverified,
+    .badge.rejected,
+    .badge.expired {
+      color: #e8590c;
+      background: #fff4e2;
+    }
+
+    .badge.pending {
+      color: #1971c2;
+      background: #e2effb;
+    }
+
+    .meta {
+      display: block;
+      margin-top: 2px;
+      overflow: hidden;
+      color: #8b98a6;
+      font-size: 11.5px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .radio {
+      display: grid;
+      place-items: center;
+      width: 18px;
+      height: 18px;
+      border: 1.5px solid #c7d1df;
+      border-radius: 50%;
+      color: transparent;
+    }
+
+    .selected .radio {
+      border-color: var(--uniplat-organization-selector-primary);
+      color: #ffffff;
+      background: var(--uniplat-organization-selector-primary);
+    }
+
+    .footer-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-top: 15px;
+    }
+
+    .remember {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      color: #7a8794;
+      font-size: 12px;
+      cursor: pointer;
+    }
+
+    .remember input {
+      width: 15px;
+      height: 15px;
+      margin: 0;
+      accent-color: var(--uniplat-organization-selector-primary);
+    }
+
+    .create {
+      padding: 4px 0;
+      border: 0;
+      color: var(--uniplat-organization-selector-primary);
+      background: transparent;
+      font-size: 12.5px;
+      font-weight: 650;
+    }
+
+    .enter {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 46px;
+      margin-top: 13px;
+      border: 0;
+      border-radius: 10px;
+      color: #ffffff;
+      background: var(--uniplat-organization-selector-primary);
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .enter:disabled {
+      cursor: not-allowed;
+      background: #a9bff6;
+    }
+
+    .empty {
+      display: grid;
+      min-height: 120px;
+      place-items: center;
+      margin-top: 18px;
+      border: 1px dashed #dce5f0;
+      border-radius: 10px;
+      color: #8b98a6;
+      font-size: 13px;
+    }
+
+    svg {
+      display: block;
+      width: 20px;
+      height: 20px;
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.8;
+    }
+  `
+
+  declare private organizations: readonly ResolvedOrganizationSelectorEntry[]
+  declare private selectedOrganizationId: string
+  declare private rememberSelection: boolean
+
+  private configured = false
+
+  constructor() {
+    super()
+    this.organizations = []
+    this.selectedOrganizationId = ''
+    this.rememberSelection = true
+  }
+
+  configure(config: OrganizationSelectorConfig): void {
+    if (!config || !Array.isArray(config.organizations)) {
+      throw new TypeError('organization-selector requires an organizations array')
+    }
+    const organizations = normalizeOrganizations(config.organizations)
+    const requestedSelection = normalizeOptionalText(config.selectedOrganizationId, 128)
+    this.organizations = organizations
+    this.selectedOrganizationId = organizations.some(({ id }) => id === requestedSelection)
+      ? requestedSelection
+      : (organizations[0]?.id ?? '')
+    this.rememberSelection = config.rememberSelection ?? true
+    this.configured = true
+    this.requestUpdate()
+  }
+
+  override render() {
+    if (!this.configured) return nothing
+    return html`
+      <section class="card" part="shell" aria-label="选择团队或企业">
+        <h2 part="title">选择要进入的团队 / 企业</h2>
+        <p class="description" part="description">
+          你归属 ${this.organizations.length} 个团队 / 企业，可随时在导航中切换
+        </p>
+        ${
+          this.organizations.length
+            ? html`<div class="list" part="organization-list">
+                ${this.organizations.map((organization) => this.renderOrganization(organization))}
+              </div>`
+            : html`<div class="empty" part="empty">暂无可进入的团队或企业</div>`
+        }
+        <div class="footer-row">
+          <label class="remember" part="remember-selection">
+            <input
+              type="checkbox"
+              .checked=${this.rememberSelection}
+              @change=${(event: Event) => {
+                this.rememberSelection = (event.currentTarget as HTMLInputElement).checked
+              }}
+            />
+            记住选择，下次直接进入
+          </label>
+          <button class="create" part="create-action" type="button" @click=${this.requestCreate}>
+            + 创建
+          </button>
+        </div>
+        <button
+          class="enter"
+          part="enter-action"
+          type="button"
+          ?disabled=${!this.selectedOrganizationId}
+          @click=${this.requestEnter}
+        >
+          进入
+        </button>
+      </section>
+    `
+  }
+
+  private renderOrganization(organization: ResolvedOrganizationSelectorEntry) {
+    const selected = organization.id === this.selectedOrganizationId
+    const badge = organizationBadge(organization)
+    return html`
+      <button
+        class="organization ${organization.type === 'team' ? 'team' : ''} ${
+          selected ? 'selected' : ''
+        }"
+        part="organization"
+        type="button"
+        aria-pressed=${String(selected)}
+        @click=${() => {
+          this.selectedOrganizationId = organization.id
+        }}
+      >
+        <span class="organization-icon">${icon(organization.type)}</span>
+        <span class="copy">
+          <span class="name-line">
+            <span class="name">${organization.name}</span>
+            ${
+              badge
+                ? html`<span class="badge ${badge.className}" part="organization-badge">
+                    ${badge.label}
+                  </span>`
+                : nothing
+            }
+          </span>
+          <span class="meta">${organizationMeta(organization)}</span>
+        </span>
+        <span class="radio">${icon('check')}</span>
+      </button>
+    `
+  }
+
+  private readonly requestCreate = () => {
+    this.dispatchEvent(
+      new CustomEvent('organization-create-requested', {
+        detail: {},
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private readonly requestEnter = () => {
+    if (!this.selectedOrganizationId) return
+    this.dispatchEvent(
+      new CustomEvent('organization-enter-requested', {
+        detail: {
+          organizationId: this.selectedOrganizationId,
+          rememberSelection: this.rememberSelection,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}
+
+function normalizeOrganizations(
+  organizations: readonly OrganizationSelectorEntry[],
+): readonly ResolvedOrganizationSelectorEntry[] {
+  const seen = new Set<string>()
+  return organizations.map((organization) => {
+    if (!organization || typeof organization !== 'object') {
+      throw new TypeError('organization-selector entries must be objects')
+    }
+    const id = normalizeRequiredText(organization.id, 'Organization id', 128)
+    if (seen.has(id)) throw new TypeError('organization-selector organization ids must be unique')
+    seen.add(id)
+    const type = organization.type
+    if (!['enterprise', 'team'].includes(type)) {
+      throw new TypeError('organization-selector organization type is invalid')
+    }
+    const verificationStatus = normalizeVerificationStatus(type, organization.verificationStatus)
+    return {
+      id,
+      name: normalizeRequiredText(organization.name, 'Organization name', 100),
+      type,
+      verificationStatus,
+      role: normalizeOptionalText(organization.role, 60),
+      memberCount: normalizeMemberCount(organization.memberCount),
+      lastEnteredLabel: normalizeOptionalText(organization.lastEnteredLabel, 80),
+    }
+  })
+}
+
+function normalizeVerificationStatus(
+  type: OrganizationSelectorType,
+  value: EnterpriseVerificationStatus | undefined,
+): EnterpriseVerificationStatus | null {
+  if (type === 'team') return null
+  if (value === undefined) return 'verified'
+  if (!['unverified', 'pending', 'rejected', 'verified', 'expired'].includes(value)) {
+    throw new TypeError('organization-selector verification status is invalid')
+  }
+  return value
+}
+
+function normalizeMemberCount(value: unknown): number | null {
+  if (value === undefined || value === null) return null
+  if (typeof value !== 'number' || !Number.isSafeInteger(value) || value < 0) {
+    throw new TypeError('Organization member count must be a non-negative integer')
+  }
+  return value
+}
+
+function normalizeRequiredText(value: unknown, label: string, maxLength: number): string {
+  const normalized = normalizeOptionalText(value, maxLength)
+  if (!normalized) throw new TypeError(`${label} is required`)
+  return normalized
+}
+
+function normalizeOptionalText(value: unknown, maxLength: number): string {
+  if (value === undefined || value === null) return ''
+  if (typeof value !== 'string')
+    throw new TypeError('organization-selector text values must be strings')
+  const normalized = value.trim()
+  if (normalized.length > maxLength) {
+    throw new TypeError('organization-selector text value is too long')
+  }
+  return normalized
+}
+
+function organizationMeta(organization: ResolvedOrganizationSelectorEntry): string {
+  const values: string[] = []
+  if (organization.role) values.push(organization.role)
+  if (organization.memberCount !== null) values.push(`${organization.memberCount} 人`)
+  if (organization.lastEnteredLabel) values.push(organization.lastEnteredLabel)
+  return values.join(' · ')
+}
+
+function organizationBadge(organization: ResolvedOrganizationSelectorEntry) {
+  if (organization.type === 'team') return { label: '团队', className: 'team' }
+  if (organization.verificationStatus === 'unverified') {
+    return { label: '未认证', className: 'unverified' }
+  }
+  if (organization.verificationStatus === 'pending') {
+    return { label: '审核中', className: 'pending' }
+  }
+  if (organization.verificationStatus === 'rejected') {
+    return { label: '未通过', className: 'rejected' }
+  }
+  if (organization.verificationStatus === 'expired') {
+    return { label: '已过期', className: 'expired' }
+  }
+  return { label: '企业', className: 'enterprise' }
+}
+
+function icon(name: OrganizationSelectorType | 'check'): TemplateResult {
+  if (name === 'enterprise') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M5 21V6l7-3 7 3v15M3 21h18" />
+      <path d="M9 8h1M14 8h1M9 12h1M14 12h1M9 16h1M14 16h1" />
+    </svg>`
+  }
+  if (name === 'team') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="9" cy="8" r="3" />
+      <path d="M3.5 20v-2a5.5 5.5 0 0 1 11 0v2M16 5.5a3 3 0 0 1 0 5.5M17 14a5 5 0 0 1 3.5 4.8V20" />
+    </svg>`
+  }
+  return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4 10-10" /></svg>`
+}

package/packages/web-components/src/organization-single-employee-selector.ts

@@ -0,0 +1,114 @@
+import {
+  UniplatOrganizationMultiEmployeeSelectorElement,
+  type OrganizationEmployeeSelectionItem,
+  type OrganizationMultiEmployeeSelectorDisabledSelection,
+  type OrganizationMultiEmployeeSelectorErrorDetail,
+  type UniplatOrganizationMultiEmployeeSelectorTransport,
+} from './organization-multi-employee-selector'
+
+export type UniplatOrganizationSingleEmployeeSelectorTransport =
+  UniplatOrganizationMultiEmployeeSelectorTransport
+
+export interface OrganizationSingleEmployeeSelectorConfig {
+  applicationName: string
+  transport: UniplatOrganizationSingleEmployeeSelectorTransport
+}
+
+export type OrganizationSingleEmployeeSelectorDisabledSelection =
+  OrganizationMultiEmployeeSelectorDisabledSelection
+
+export interface OrganizationSingleEmployeeSelectorOpenOptions {
+  title?: string
+  initialSelectedEmployeeId?: string
+  disabledSelections?: readonly OrganizationSingleEmployeeSelectorDisabledSelection[]
+  selectableEmploymentStatuses?: readonly 'active'[]
+}
+
+export interface OrganizationSingleEmployeeSelectionConfirmedDetail {
+  employeeId: string
+  employee: OrganizationEmployeeSelectionItem
+}
+
+export type OrganizationSingleEmployeeSelectorErrorDetail =
+  OrganizationMultiEmployeeSelectorErrorDetail
+
+export interface OrganizationSingleEmployeeSelectorEventMap {
+  'selection-confirmed': CustomEvent<OrganizationSingleEmployeeSelectionConfirmedDetail>
+  'selection-cancelled': CustomEvent<Record<string, never>>
+  'selector-error': CustomEvent<OrganizationSingleEmployeeSelectorErrorDetail>
+}
+
+export class UniplatOrganizationSingleEmployeeSelectorElement extends UniplatOrganizationMultiEmployeeSelectorElement {
+  protected override get singleSelection(): boolean {
+    return true
+  }
+
+  override configure(config: OrganizationSingleEmployeeSelectorConfig): void {
+    super.configure(config)
+  }
+
+  override addEventListener<K extends keyof OrganizationSingleEmployeeSelectorEventMap>(
+    type: K,
+    listener: (
+      this: UniplatOrganizationSingleEmployeeSelectorElement,
+      event: OrganizationSingleEmployeeSelectorEventMap[K],
+    ) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    super.addEventListener(type, listener, options)
+  }
+
+  override open(options: OrganizationSingleEmployeeSelectorOpenOptions = {}): Promise<void> {
+    validateSingleOpenOptions(options)
+    return super.open({
+      ...(options.title === undefined ? {} : { title: options.title }),
+      initialSelectedEmployeeIds:
+        options.initialSelectedEmployeeId === undefined ? [] : [options.initialSelectedEmployeeId],
+      ...(options.disabledSelections === undefined
+        ? {}
+        : { disabledSelections: options.disabledSelections }),
+      ...(options.selectableEmploymentStatuses === undefined
+        ? {}
+        : { selectableEmploymentStatuses: options.selectableEmploymentStatuses }),
+    })
+  }
+
+  protected override dispatchSelectionConfirmed(
+    employees: OrganizationEmployeeSelectionItem[],
+  ): void {
+    const employee = employees[0]
+    if (!employee) return
+    this.dispatchEvent(
+      new CustomEvent<OrganizationSingleEmployeeSelectionConfirmedDetail>('selection-confirmed', {
+        detail: { employeeId: employee.employeeId, employee },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}
+
+function validateSingleOpenOptions(options: OrganizationSingleEmployeeSelectorOpenOptions): void {
+  if (!options || typeof options !== 'object') {
+    throw new TypeError('Organization single employee selector open options are invalid')
+  }
+  const unsupported = options as OrganizationSingleEmployeeSelectorOpenOptions &
+    Record<string, unknown>
+  if (
+    'initialSelectedEmployeeIds' in unsupported ||
+    'maxSelection' in unsupported ||
+    'enableDepartmentBulkSelection' in unsupported
+  ) {
+    throw new TypeError('Multi employee selector options are not supported by the single selector')
+  }
+}