@h-ai/ui 0.1.0-alpha.30 → 0.1.0-alpha.32

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

@@ -50,6 +50,7 @@
     onclose,
     editFormExtra,
     editingItem = null,
+    class: className = '',
     ...restProps
   }: {
     open?: boolean
@@ -70,6 +71,7 @@
     onclose?: () => void
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
     editingItem?: Record<string, unknown> | null
+    class?: string
   } & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
@@ -171,13 +173,12 @@
           size={controlSize}
           value={String(fieldValue ?? '')}
           disabled={submitting || isReadonly}
+          options={[
+            { value: '', label: placeholder || uiM('crud_filter_all') },
+            ...opts.map(opt => ({ value: String(opt.value), label: opt.label })),
+          ]}
           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'}
@@ -255,6 +256,7 @@
 {#if variant === 'modal'}
   <Modal
     bind:open
+    class={className}
     {title}
     size={modalSize}
     width={modalWidth}
@@ -271,7 +273,7 @@
     {/snippet}
   </Modal>
 {:else}
-  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose} closeOnBackdrop={false}>
+  <Drawer bind:open {title} class={className} position='right' {size} width={drawerWidth} onclose={handleClose} closeOnBackdrop={false}>
     <form onsubmit={handleSubmit} class={drawerFormClass}>
       {@render formFields()}
     </form>

package/dist/components/scenes/crud/CrudEditPanel.svelte.d.ts

@@ -42,6 +42,7 @@ type $$ComponentProps = {
     onclose?: () => void;
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>;
     editingItem?: Record<string, unknown> | null;
+    class?: string;
 } & DataAttributes;
 /**
  * CrudEditPanel

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

@@ -7,7 +7,7 @@
 <script lang='ts'>
   import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
-  import { getDataAttributes } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import Input from '../../primitives/Input.svelte'
   import Select from '../../primitives/Select.svelte'
@@ -34,6 +34,7 @@
     onsearch,
     onfilterchange,
     onreset,
+    class: className = '',
     ...restProps
   }: {
     searchable?: boolean
@@ -44,6 +45,7 @@
     onsearch?: (search: string) => void
     onfilterchange?: (filters: Record<string, unknown>) => void
     onreset?: () => void
+    class?: string
   } & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
@@ -120,7 +122,7 @@
   }
 </script>
 
-<div {...dataAttributes} class='flex flex-wrap items-center gap-2 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0'>
+<div {...dataAttributes} class={cn('flex flex-wrap items-center gap-2 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0', className)}>
   {#if searchable}
     <div class='relative w-full sm:w-64 md:w-72'>
       <span class='icon-[tabler--search] pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-base-content/35'></span>
@@ -170,12 +172,13 @@
           size='sm'
           class='h-8 border-base-content/20 bg-base-100 shadow-none'
           value={String(filterValues[field.id] ?? '')}
+          options={[
+            { value: '', label: uiM('crud_filter_all') },
+            { value: 'true', label: uiM('crud_filter_yes') },
+            { value: 'false', label: uiM('crud_filter_no') },
+          ]}
           onchange={(value: string) => handleFilterChange(field.id, value)}
-        >
-          <option value="">{uiM('crud_filter_all')}</option>
-          <option value='true'>{uiM('crud_filter_yes')}</option>
-          <option value='false'>{uiM('crud_filter_no')}</option>
-        </Select>
+        />
       </div>
     {:else if isDateField(field)}
       <div class='w-36 shrink-0'>
@@ -207,13 +210,12 @@
           size='sm'
           class='h-8 border-base-content/20 bg-base-100 shadow-none'
           value={String(filterValues[field.id] ?? '')}
+          options={[
+            { value: '', label: uiM('crud_filter_all') },
+            ...opts.map(opt => ({ value: String(opt.value), label: opt.label })),
+          ]}
           onchange={(value: string) => handleFilterChange(field.id, value)}
-        >
-          <option value="">{uiM('crud_filter_all')}</option>
-          {#each opts as opt (String(opt.value))}
-            <option value={String(opt.value)}>{opt.label}</option>
-          {/each}
-        </Select>
+        />
       </div>
     {:else if isTextField(field)}
       <div class='w-44 shrink-0'>

package/dist/components/scenes/crud/CrudFilterBar.svelte.d.ts

@@ -26,6 +26,7 @@ type $$ComponentProps = {
     onsearch?: (search: string) => void;
     onfilterchange?: (filters: Record<string, unknown>) => void;
     onreset?: () => void;
+    class?: string;
 } & DataAttributes;
 /**
  * CrudFilterBar

package/dist/components/scenes/types.d.ts

@@ -544,6 +544,8 @@ export interface HashDisplayProps extends DataAttributes {
 export interface MarkdownRendererProps extends DataAttributes {
     /** Markdown 源文本 */
     content?: string;
+    /** 文本字号，支持 number（按 px）或任意 CSS 长度字符串 */
+    fontSize?: string | number;
     /** 自定义类名 */
     class?: string;
     /** 是否显示代码块复制按钮（默认 true） */
@@ -552,6 +554,8 @@ export interface MarkdownRendererProps extends DataAttributes {
     enableHighlight?: boolean;
     /** 是否将换行符转换为 <br>（默认 true，适合 AI 输出） */
     breaks?: boolean;
+    /** 是否按安全白名单解析原始 HTML 标签（默认 false） */
+    allowHtmlTags?: boolean;
 }
 /**
  * 签名展示属性

package/dist/styles/global.css

@@ -89,6 +89,11 @@ input::-webkit-credentials-auto-fill-button {
   color: oklch(0.55 0 0);
 }
 
+/* ─── DaisyUI 组件微调：fieldset-legend 间距修正 ─── */
+.fieldset-legend {
+  justify-content: flex-start !important;
+}
+
 .modal-box {
   border-radius: 0.75rem;
 }

package/dist/types.d.ts

@@ -286,7 +286,7 @@ export interface SelectOption<T = string> {
 export interface SelectProps<T = string> extends DataAttributes {
     /** 值 */
     value?: T;
-    /** 选项（使用 options 或 children 二选一） */
+    /** 选项 */
     options?: SelectOption<T>[];
     /** 占位符 */
     placeholder?: string;
@@ -296,18 +296,18 @@ export interface SelectProps<T = string> extends DataAttributes {
     disabled?: boolean;
     /** 是否必填 */
     required?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否可筛选（启用后可在输入框内输入过滤选项） */
+    filterable?: boolean;
     /** 错误消息 */
     error?: string;
-    /** 自定义验证消息（用于覆盖浏览器原生验证提示） */
-    validationMessage?: string;
     /** 自定义类名 */
     class?: string;
     /** 元素 ID */
     id?: string;
     /** 变化事件 */
     onchange?: (value: T) => void;
-    /** 子元素（原生 option 元素） */
-    children?: Snippet;
 }
 /**
  * 复选框属性

package/dist/utils.d.ts

@@ -49,3 +49,16 @@ export declare function getProgressVariantClass(variant: Variant): string;
  * 生成唯一 ID
  */
 export declare function generateId(prefix?: string): string;
+/**
+ * Portal action：将节点移动到目标容器（默认 document.body）下渲染。
+ *
+ * 用于弹出层（下拉、气泡等）逃逸祖先的 `overflow: hidden` 裁剪与
+ * 堆叠上下文（stacking context）限制，避免被相邻控件遮挡。
+ *
+ * @param node - 要移动的节点
+ * @param target - 目标容器或选择器；默认 body
+ */
+export declare function portal(node: HTMLElement, target?: HTMLElement | string): {
+    update(next: HTMLElement | string): void;
+    destroy(): void;
+};

package/dist/utils.js

@@ -36,7 +36,7 @@ export function getDataAttributes(props) {
  */
 const VARIANT_MAPS = {
     btn: {
-        default: 'btn-neutral',
+        default: '',
         primary: 'btn-primary',
         secondary: 'btn-secondary',
         success: 'btn-success',
@@ -176,3 +176,27 @@ export function getProgressVariantClass(variant) {
 export function generateId(prefix = 'hai') {
     return `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
 }
+/**
+ * Portal action：将节点移动到目标容器（默认 document.body）下渲染。
+ *
+ * 用于弹出层（下拉、气泡等）逃逸祖先的 `overflow: hidden` 裁剪与
+ * 堆叠上下文（stacking context）限制，避免被相邻控件遮挡。
+ *
+ * @param node - 要移动的节点
+ * @param target - 目标容器或选择器；默认 body
+ */
+export function portal(node, target = 'body') {
+    function mount(to) {
+        const targetEl = typeof to === 'string' ? document.querySelector(to) : to;
+        targetEl?.appendChild(node);
+    }
+    mount(target);
+    return {
+        update(next) {
+            mount(next);
+        },
+        destroy() {
+            node.parentNode?.removeChild(node);
+        },
+    };
+}

package/package.json

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