@h-ai/ui 0.1.0-alpha.22 → 0.1.0-alpha.23

package/dist/components/scenes/crud/index.js

@@ -1,12 +1,12 @@
 /**
  * @h-ai/ui — CRUD 场景组件
  *
- * 提供声明式 CRUD 页面组件，基于 kit.crud.define() 定义自动渲染列表、搜索过滤、分页、详情/编辑抽屉和删除确认。
+ * 提供声明式 CRUD 页面组件，基于 kit.crud.define() 定义自动渲染列表、搜索过滤、分页、详情/编辑面板和删除确认。
  * @module crud
  */
 export { default as CrudDeleteConfirm } from './CrudDeleteConfirm.svelte';
-export { default as CrudDetailDrawer } from './CrudDetailDrawer.svelte';
-export { default as CrudEditDrawer } from './CrudEditDrawer.svelte';
+export { default as CrudDetailPanel } from './CrudDetailPanel.svelte';
+export { default as CrudEditPanel } from './CrudEditPanel.svelte';
 export { default as CrudFilterBar } from './CrudFilterBar.svelte';
 export { default as CrudPage } from './CrudPage.svelte';
 export { createBrowserNavAdapter } from './nav-adapter.js';

package/dist/messages/en-US.json

@@ -156,9 +156,10 @@
   "feedback_type_feature": "Feature Request",
   "feedback_type_question": "Question",
   "feedback_type_other": "Other",
-  "pagination_total": "Total {count}",
+  "pagination_total": "{count} items total",
   "pagination_jump_to": "Go to",
   "pagination_page": "page",
+  "pagination_page_size": "{size} / page",
   "severity_critical": "Critical",
   "severity_high": "High",
   "severity_medium": "Medium",
@@ -274,7 +275,7 @@
   "crud_delete_failed": "Delete failed",
   "crud_network_error": "Network error, please try again later",
   "crud_filter_all": "All",
-  "crud_total": "Total {count}",
+  "crud_total": "{count} items total",
   "crud_detail_empty": "-",
   "crud_field_required": "This field is required"
 }

package/dist/messages/zh-CN.json

@@ -156,9 +156,10 @@
   "feedback_type_feature": "功能建议",
   "feedback_type_question": "问题咨询",
   "feedback_type_other": "其他",
-  "pagination_total": "共 {count}",
+  "pagination_total": "共 {count} 条",
   "pagination_jump_to": "跳转到",
   "pagination_page": "页",
+  "pagination_page_size": "{size} 条/页",
   "severity_critical": "严重",
   "severity_high": "高",
   "severity_medium": "中",
@@ -274,7 +275,7 @@
   "crud_delete_failed": "删除失败",
   "crud_network_error": "网络错误，请稍后重试",
   "crud_filter_all": "全部",
-  "crud_total": "共 {count}",
+  "crud_total": "共 {count} 条",
   "crud_detail_empty": "-",
   "crud_field_required": "此字段为必填项"
 }

package/dist/types.d.ts

@@ -475,6 +475,8 @@ export interface DrawerProps {
     position?: Position;
     /** 尺寸 */
     size?: Size;
+    /** 自定义宽度（任意合法 CSS 宽度值，优先级高于 size 预设） */
+    width?: string;
     /** 是否可通过点击遮罩关闭 */
     closeOnBackdrop?: boolean;
     /** 是否显示关闭按钮 */
@@ -585,6 +587,10 @@ export interface PaginationProps {
     showTotal?: boolean;
     /** 是否显示跳转 */
     showJumper?: boolean;
+    /** 是否显示每页条数选择器 */
+    showSizeChanger?: boolean;
+    /** 每页条数候选项（配合 showSizeChanger，默认 [10, 20, 50, 100]） */
+    pageSizeOptions?: number[];
     /** i18n 文案配置 */
     labels?: {
         /** 总数文案，{count} 会被替换为实际数字 */
@@ -593,11 +599,15 @@ export interface PaginationProps {
         jumpTo?: string;
         /** 页 */
         page?: string;
+        /** 每页条数文案，{size} 会被替换为实际数字 */
+        pageSize?: string;
     };
     /** 自定义类名 */
     class?: string;
     /** 页码变化事件 */
     onchange?: (page: number) => void;
+    /** 每页条数变化事件 */
+    onpagesizechange?: (pageSize: number) => void;
 }
 /**
  * 面包屑项

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.22",
+  "version": "0.1.0-alpha.23",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -45,7 +45,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.22"
+    "@h-ai/core": "0.1.0-alpha.23"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",

package/dist/components/scenes/crud/CrudEditDrawer.svelte

@@ -1,225 +0,0 @@
-<!--
-  @component CrudEditDrawer
-  CRUD 编辑/新建抽屉组件
-
-  使用 Svelte 5 Runes ($props, $state, $derived)
-  使用 compounds/primitives 组件：Drawer, FormField, Input, Select, Textarea, Checkbox, Button
--->
-<script lang='ts'>
-  import type { Snippet } from 'svelte'
-  import type { Size } from '../../../types.js'
-  import { uiM } from '../../../messages.js'
-  import Drawer from '../../compounds/Drawer.svelte'
-  import FormField from '../../compounds/FormField.svelte'
-  import Button from '../../primitives/Button.svelte'
-  import Checkbox from '../../primitives/Checkbox.svelte'
-  import Input from '../../primitives/Input.svelte'
-  import Select from '../../primitives/Select.svelte'
-  import Textarea from '../../primitives/Textarea.svelte'
-
-  type FieldDef = {
-    id: string
-    label: string | (() => string)
-    type: string
-    readonly?: boolean
-    options?: Array<{ label: string, value: string | number | boolean }> | (() => Array<{ label: string, value: string | number | boolean }>)
-    validation?: { required?: boolean, min?: number, max?: number, pattern?: string, message?: string }
-    placeholder?: string | (() => string)
-    order?: number
-  }
-
-  let {
-    open = $bindable(false),
-    mode = 'create' as 'create' | 'edit',
-    fields = [],
-    formData = $bindable<Record<string, unknown>>({}),
-    title = '',
-    size = '2xl' as Size,
-    submitting = false,
-    error = '',
-    onsubmit,
-    onclose,
-    editFormExtra,
-    editingItem = null,
-  }: {
-    open?: boolean
-    mode?: 'create' | 'edit'
-    fields?: FieldDef[]
-    formData?: Record<string, unknown>
-    title?: string
-    size?: Size
-    submitting?: boolean
-    error?: string
-    onsubmit?: (data: Record<string, unknown>) => Promise<void>
-    onclose?: () => void
-    editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
-    editingItem?: Record<string, unknown> | null
-  } = $props()
-
-  function resolveText(text: string | (() => string)): string {
-    return typeof text === 'function' ? text() : text
-  }
-
-  function resolveOptions(options?: FieldDef['options']): Array<{ label: string, value: string | number | boolean }> {
-    if (!options)
-      return []
-    return typeof options === 'function' ? options() : options
-  }
-
-  const sortedFields = $derived(
-    [...fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
-  )
-
-  function handleClose() {
-    open = false
-    onclose?.()
-  }
-
-  async function handleSubmit(e: Event) {
-    e.preventDefault()
-    await onsubmit?.(formData)
-  }
-
-  function getInputType(fieldType: string): 'email' | 'url' | 'tel' | 'password' | 'number' | 'text' {
-    switch (fieldType) {
-      case 'email': return 'email'
-      case 'url': return 'url'
-      case 'tel': return 'tel'
-      case 'password': return 'password'
-      case 'number': return 'number'
-      case 'date': return 'text'
-      case 'datetime': return 'text'
-      default: return 'text'
-    }
-  }
-
-  function updateField(fieldId: string, value: unknown) {
-    formData = { ...formData, [fieldId]: value }
-  }
-
-  function toggleMultiSelect(fieldId: string, optValue: string | number | boolean) {
-    const current = (formData[fieldId] as Array<string | number | boolean>) ?? []
-    const strVal = String(optValue)
-    if (current.map(String).includes(strVal)) {
-      formData = { ...formData, [fieldId]: current.filter(v => String(v) !== strVal) }
-    }
-    else {
-      formData = { ...formData, [fieldId]: [...current, optValue] }
-    }
-  }
-</script>
-
-<Drawer bind:open {title} position='right' {size} onclose={handleClose} closeOnBackdrop={false}>
-  <form onsubmit={handleSubmit} class='space-y-4 pb-20'>
-    {#if error}
-      <div class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
-        <span class='icon-[tabler--alert-circle] size-4 shrink-0'></span>
-        <span>{error}</span>
-      </div>
-    {/if}
-
-    {#each sortedFields as field (field.id)}
-      {@const isReadonly = field.readonly && mode === 'edit'}
-      {@const isRequired = field.validation?.required}
-      {@const fieldValue = formData[field.id]}
-      {@const placeholder = field.placeholder ? resolveText(field.placeholder) : ''}
-
-      {#if field.type === 'textarea'}
-        <FormField label={resolveText(field.label)} required={isRequired}>
-          <Textarea
-            id={field.id}
-            value={String(fieldValue ?? '')}
-            {placeholder}
-            disabled={submitting || isReadonly}
-            required={isRequired}
-            oninput={e => updateField(field.id, (e.target as HTMLTextAreaElement).value)}
-          />
-        </FormField>
-
-      {:else if field.type === 'select' || field.type === 'radio'}
-        {@const opts = resolveOptions(field.options)}
-        <FormField label={resolveText(field.label)} required={isRequired}>
-          <Select
-            id={field.id}
-            value={String(fieldValue ?? '')}
-            disabled={submitting || isReadonly}
-            onchange={value => updateField(field.id, value)}
-          >
-            <option value="">{placeholder || uiM('crud_filter_all')}</option>
-            {#each opts as opt (String(opt.value))}
-              <option value={String(opt.value)}>{opt.label}</option>
-            {/each}
-          </Select>
-        </FormField>
-
-      {:else if field.type === 'multi-select'}
-        {@const opts = resolveOptions(field.options)}
-        {@const selectedValues = ((fieldValue ?? []) as Array<string | number | boolean>).map(String)}
-        <FormField label={resolveText(field.label)} required={isRequired}>
-          <div class='flex flex-wrap gap-3 p-3 bg-base-200 rounded-lg max-h-48 overflow-y-auto'>
-            {#each opts as opt (String(opt.value))}
-              <label class='inline-flex items-center gap-2 cursor-pointer'>
-                <Checkbox
-                  size='sm'
-                  checked={selectedValues.includes(String(opt.value))}
-                  onchange={() => toggleMultiSelect(field.id, opt.value)}
-                  disabled={submitting || isReadonly}
-                />
-                <span class='text-sm text-base-content'>{opt.label}</span>
-              </label>
-            {/each}
-            {#if opts.length === 0}
-              <span class='text-sm text-base-content/60'>{uiM('crud_no_data')}</span>
-            {/if}
-          </div>
-        </FormField>
-
-      {:else if field.type === 'boolean' || field.type === 'checkbox'}
-        <FormField label={resolveText(field.label)}>
-          <Checkbox
-            checked={Boolean(fieldValue)}
-            onchange={(checked: boolean) => updateField(field.id, checked)}
-            disabled={submitting || isReadonly}
-          />
-        </FormField>
-
-      {:else}
-        <FormField label={resolveText(field.label)} required={isRequired}>
-          <Input
-            id={field.id}
-            type={getInputType(field.type)}
-            value={String(fieldValue ?? '')}
-            {placeholder}
-            disabled={submitting || isReadonly}
-            required={isRequired}
-            pattern={field.validation?.pattern}
-            minlength={field.type !== 'number' ? field.validation?.min : undefined}
-            maxlength={field.type !== 'number' ? field.validation?.max : undefined}
-            min={field.type === 'number' ? field.validation?.min : undefined}
-            max={field.type === 'number' ? field.validation?.max : undefined}
-            oninput={e => updateField(field.id, field.type === 'number' ? Number((e.currentTarget as HTMLInputElement).value) : (e.currentTarget as HTMLInputElement).value)}
-          />
-        </FormField>
-      {/if}
-    {/each}
-
-    {#if editFormExtra}
-      <div class='border-t border-base-content/5 pt-4'>
-        {@render editFormExtra(editingItem, mode)}
-      </div>
-    {/if}
-  </form>
-
-  <!-- 底部操作栏 -->
-  <div class='absolute bottom-0 left-0 right-0 p-4 bg-base-200 border-t border-base-content/10 flex justify-end gap-2'>
-    <Button variant='ghost' onclick={handleClose} disabled={submitting}>
-      {uiM('crud_cancel')}
-    </Button>
-    <Button variant='primary' onclick={handleSubmit} disabled={submitting}>
-      {#if submitting}
-        <span class='loading loading-spinner loading-xs mr-2'></span>
-      {/if}
-      {mode === 'create' ? uiM('crud_create') : uiM('crud_save')}
-    </Button>
-  </div>
-</Drawer>