@ticatec/uniface-element 5.0.2 → 5.0.4

package/dist/data_display/card/Card.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type {Snippet} from 'svelte';
     import type CardAction from "./CardAction";
+    import type {CardActionsAlign} from "./CardAction";
     import CommonCardActionBar from "./CommonCardActionBar.svelte";
     import CardHeader from "./CardHeader.svelte";
 
@@ -13,6 +14,11 @@
         headerBar?: Snippet;
         children?: Snippet;
         theme?: string;
+        /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
+        actionsAlign?: CardActionsAlign;
+        /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
+        actionsGap?: string;
+        contentStyle?: string;
     }
 
     let {
@@ -23,7 +29,10 @@
         data = null,
         headerBar,
         children,
-        theme = ""
+        theme = "",
+        actionsAlign = 'distribute',
+        actionsGap,
+        contentStyle = ''
     }: Props = $props();
 </script>
 
@@ -38,13 +47,13 @@
                 {@render headerBar()}
             </div>
         {/if}
-        <div class="card-content">
+        <div class="card-content" style={contentStyle}>
             {#if children}
                 {@render children()}
             {/if}
         </div>
         {#if actions && actions.length > 0}
-            <CommonCardActionBar {actions} {data}/>
+            <CommonCardActionBar {actions} {data} align={actionsAlign} gap={actionsGap}/>
         {/if}
     </div>
 </div>

package/dist/data_display/card/Card.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type CardAction from "./CardAction";
+import type { CardActionsAlign } from "./CardAction";
 interface Props {
     style?: string;
     title?: string;
@@ -9,6 +10,11 @@ interface Props {
     headerBar?: Snippet;
     children?: Snippet;
     theme?: string;
+    /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
+    actionsAlign?: CardActionsAlign;
+    /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
+    actionsGap?: string;
+    contentStyle?: string;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/data_display/card/CardAction.d.ts

@@ -21,3 +21,11 @@ export default interface CardAction {
      */
     callback: ActionCallback;
 }
+/**
+ * 操作栏图标的排布方式：
+ * - distribute（默认）：按图标数量平分整行宽度，每个图标在自己的等分格子里居中
+ *   （等价于 justify-content: space-around；数量少时不会被拉到两端）
+ * - center / left / right：固定间距（见 CommonCardActionBar 的 gap），整组图标
+ *   在操作栏里居中 / 左对齐 / 右对齐
+ */
+export type CardActionsAlign = 'distribute' | 'center' | 'left' | 'right';

package/dist/data_display/card/CardHeader.svelte

@@ -6,4 +6,15 @@
     let {title}: Props = $props();
 </script>
 
-<span>{title}</span>
+<span class="card-header-title" title={title}>{title}</span>
+
+<style>
+    .card-header-title {
+        display: block;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type CardAction from "./CardAction";
+    import type {CardActionsAlign} from "./CardAction";
     import utils from "../../overlay/common/utils";
 
     interface Props {
@@ -7,15 +8,23 @@
         color?: string | null;
         data?: any;
         theme?: string;
+        /** 图标排布方式，默认 'distribute'（按数量平分宽度、每个居中） */
+        align?: CardActionsAlign;
+        /** 'center'/'left'/'right' 模式下相邻图标的固定间距；不设置则用 --uniface-spacing-actionbar */
+        gap?: string;
     }
 
     let {
         actions,
         color = null,
         data,
-        theme = ""
+        theme = "",
+        align = 'distribute',
+        gap
     }: Props = $props();
 
+    let barStyle = $derived(gap ? `--card-action-gap: ${gap}` : '');
+
     let clickEnable = $state(true);
 
     const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
@@ -35,7 +44,7 @@
     };
 </script>
 
-<div class="card-action-bar">
+<div class="card-action-bar align-{align}" style={barStyle}>
     {#each actions as action}
         {#if action.icon}
             <i class="action-icon {action.icon}"
@@ -69,13 +78,32 @@
         flex-direction: row;
         width: 100%;
         align-items: center;
-        justify-content: space-between;
         text-align: center;
         font-size: var(--uniface-card-bar-font-size);
         border-top: 1px solid var(--uniface-card-color-inside-border);
         color: var(--uniface-card-color-action-bar);
     }
 
+    /* 按数量平分整行宽度，每个图标在自己的等分格子里居中 — 数量少时不会被拉到两端 */
+    .card-action-bar.align-distribute {
+        justify-content: space-around;
+    }
+
+    .card-action-bar.align-center {
+        justify-content: center;
+        gap: var(--card-action-gap, var(--uniface-spacing-actionbar, 8px));
+    }
+
+    .card-action-bar.align-left {
+        justify-content: flex-start;
+        gap: var(--card-action-gap, var(--uniface-spacing-actionbar, 8px));
+    }
+
+    .card-action-bar.align-right {
+        justify-content: flex-end;
+        gap: var(--card-action-gap, var(--uniface-spacing-actionbar, 8px));
+    }
+
     .action-icon {
         display: block;
         cursor: pointer;

package/dist/data_display/card/CommonCardActionBar.svelte.d.ts

@@ -1,9 +1,14 @@
 import type CardAction from "./CardAction";
+import type { CardActionsAlign } from "./CardAction";
 interface Props {
     actions: Array<CardAction>;
     color?: string | null;
     data?: any;
     theme?: string;
+    /** 图标排布方式，默认 'distribute'（按数量平分宽度、每个居中） */
+    align?: CardActionsAlign;
+    /** 'center'/'left'/'right' 模式下相邻图标的固定间距；不设置则用 --uniface-spacing-actionbar */
+    gap?: string;
 }
 declare const CommonCardActionBar: import("svelte").Component<Props, {}, "">;
 type CommonCardActionBar = ReturnType<typeof CommonCardActionBar>;

package/dist/data_display/card/README.md

@@ -23,12 +23,15 @@ npm install @ticatec/uniface-element
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. If empty and `headerBar` is provided, the custom snippet is used instead |
+| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. Single-line, truncated with an ellipsis (native tooltip shows the full text) when it overflows. If empty and `headerBar` is provided, the custom snippet is used instead |
 | `headerBar` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
 | `actions` | `CardAction[]` | `[]` | Action bar items rendered at the bottom. Empty array → no footer |
 | `data` | `any` | `null` | Passed as the argument to each action's `callback(data)` |
+| `actionsAlign` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | How action icons are laid out — see below |
+| `actionsGap` | `string` | `undefined` | Fixed spacing between icons for `'center'`/`'left'`/`'right'` (e.g. `'16px'`); falls back to `--uniface-spacing-actionbar` |
 | `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` adds a box-shadow to lift the card |
 | `style` | `string` | `''` | Inline CSS on the root |
+| `contentStyle` | `string` | `''` | Inline CSS on the body wrapper (`.card-content`) |
 | `theme` | `string` | `''` | Theme value, exposed as `data-theme` on the root for scoped CSS |
 | `children` | `Snippet` | `undefined` | Card body |
 
@@ -92,6 +95,19 @@ interface CardAction {
 </Card>
 ```
 
+### Action bar layout
+
+With few actions, `justify-content: space-between` (the old, fixed behavior) pushes them to opposite edges — two icons end up one at the far left, one at the far right. `actionsAlign` controls this:
+
+- `'distribute'` (default) — the row is split into as many equal-width slots as there are actions, each icon centered in its own slot. Equivalent to `justify-content: space-around`; icons never get pushed all the way to the edges regardless of count.
+- `'center'` / `'left'` / `'right'` — icons keep a fixed gap (`actionsGap`, default `--uniface-spacing-actionbar`) and the whole group is aligned as a block within the footer.
+
+```svelte
+<Card title="Item Details" {actions} data={cardData} actionsAlign="center" actionsGap="24px">
+  ...
+</Card>
+```
+
 ## Styling
 
 ### Card body
@@ -118,6 +134,7 @@ interface CardAction {
 | `--uniface-card-color-action-bar-hover` | Icon hover color |
 | `--uniface-card-color-action-bar-disabled` | Icon disabled color |
 | `--action-image-size` / `--uniface-action-image-size` | Per-card override for action icon/image size |
+| `--uniface-spacing-actionbar` | Default `actionsGap` for `'center'`/`'left'`/`'right'` (falls back to `8px`) |
 
 ## Variants
 

package/dist/data_display/card/README_CN.md

@@ -23,12 +23,15 @@ npm install @ticatec/uniface-element
 
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。为空且传了 `headerBar` 时改用自定义 snippet |
+| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。默认单行显示，超出宽度会用省略号截断（原生 tooltip 显示完整文字）。为空且传了 `headerBar` 时改用自定义 snippet |
 | `headerBar` | `Snippet` | `undefined` | 自定义标题内容（`title` 为空时生效） |
 | `actions` | `CardAction[]` | `[]` | 底部操作栏。空数组 → 不渲染底栏 |
 | `data` | `any` | `null` | 作为参数传给每个 action 的 `callback(data)` |
+| `actionsAlign` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | 操作图标的排布方式，见下文 |
+| `actionsGap` | `string` | `undefined` | `'center'`/`'left'`/`'right'` 模式下图标之间的固定间距（比如 `'16px'`），不设则回退到 `--uniface-spacing-actionbar` |
 | `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` 加盒阴影让卡片浮起来 |
 | `style` | `string` | `''` | 根节点的内联 CSS |
+| `contentStyle` | `string` | `''` | 内容区域包裹层（`.card-content`）的内联 CSS |
 | `theme` | `string` | `''` | 主题值，作为 `data-theme` 写到根节点上方便做作用域 CSS |
 | `children` | `Snippet` | `undefined` | 卡片内容体 |
 
@@ -92,6 +95,19 @@ interface CardAction {
 </Card>
 ```
 
+### 操作栏排布方式
+
+当图标数量比较少时，`justify-content: space-between`（旧的固定行为）会把它们推到两端 —— 两个图标就变成一个在最左，一个在最右。`actionsAlign` 用来控制这个行为：
+
+- `'distribute'`（默认）—— 把整行按图标数量平分成若干等宽格子，每个图标在自己的格子里居中。等价于 `justify-content: space-around`；不管图标数量多少，都不会被拉到两端。
+- `'center'` / `'left'` / `'right'` —— 图标之间保持固定间距（`actionsGap`，默认回退到 `--uniface-spacing-actionbar`），整组图标作为一个整体在底栏里居中 / 左对齐 / 右对齐。
+
+```svelte
+<Card title="项目详情" {actions} data={cardData} actionsAlign="center" actionsGap="24px">
+  ...
+</Card>
+```
+
 ## 样式定制
 
 ### 卡片本体
@@ -118,6 +134,7 @@ interface CardAction {
 | `--uniface-card-color-action-bar-hover` | 图标悬停颜色 |
 | `--uniface-card-color-action-bar-disabled` | 图标禁用颜色 |
 | `--action-image-size` / `--uniface-action-image-size` | 单卡片覆盖操作图标/图片的尺寸 |
+| `--uniface-spacing-actionbar` | `'center'`/`'left'`/`'right'` 模式下 `actionsGap` 的默认值（缺省回退到 `8px`） |
 
 ## variant
 

package/dist/form/common_editor/CommonEditor.svelte

@@ -50,6 +50,23 @@
         if (disabled) return;
         focus();
     }
+
+    // Only intercept mousedowns that land on the wrapper's own decorative chrome
+    // (padding, prefix/suffix, icons) — preventing their default avoids a
+    // blur-then-refocus flicker when clicking near the control. A mousedown that
+    // originates on the actual form control (input/textarea, including the one
+    // rendered by NumberInput.svelte) must NOT be intercepted: preventDefault()
+    // there cancels the browser's native text-selection-start behavior for that
+    // same event, even though this listener runs on an ancestor during bubbling —
+    // that's what made it impossible to drag-select or double-click-select text
+    // inside every CommonEditor-based input (SearchBox, TextEditor, PasswordEditor,
+    // NumberEditor, TimeEditor, and anything built on CommonPopupEditor).
+    const handleContainerMouseDown = (e: MouseEvent) => {
+        const tag = (e.target as HTMLElement).tagName;
+        if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
+            e.preventDefault();
+        }
+    };
 </script>
 
 <FormEditor {theme} {tooltip} {error} {style} {readonly} {disabled} {compact} {variant}>
@@ -61,7 +78,7 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="uniface-common-editor" bind:this={container} {style}
-         onmousedown={(e: MouseEvent)=>{e.preventDefault()}}  onclick={handleContainerClick}>
+         onmousedown={handleContainerMouseDown} onclick={handleContainerClick}>
         {#if leadingIcon}
             <div class="editor-embed-icon" style="flex: 0 0 auto;">
                 {@render leadingIcon()}

package/dist/form/common_editor/CommonPopupEditor.svelte

@@ -18,6 +18,7 @@
 
     let {
         variant,
+        theme,
         compact = false,
         disabled = false,
         readonly = false,
@@ -68,6 +69,7 @@
 <CommonEditor
         bind:this={editorRef}
         {variant}
+        {theme}
         {compact}
         {style}
         {tooltip}
@@ -88,7 +90,7 @@
     {/snippet}
 
     {#if showPopup && getTargetElement()}
-        <Popover target={getTargetElement()} {autoFit} align="right" onclose={closePopup}>
+        <Popover target={getTargetElement()} {autoFit} {theme} align="right" onclose={closePopup}>
             {#if popupLayer}
                 {@render popupLayer()}
             {/if}

package/dist/form/number_editor/NumberEditor.svelte

@@ -31,6 +31,7 @@
         tooltip,
         error,
         variant,
+        theme,
         compact = false,
         value = $bindable(),
         precision,
@@ -76,6 +77,7 @@
     {readonly}
     {disabled}
     {variant}
+    {theme}
     {compact}
     {leadingIcon}
     {trailingIcon}

package/dist/form/prompts_text_editor/PromptsTextEditor.svelte

@@ -17,6 +17,7 @@
 
     let {
         variant,
+        theme,
         compact = false,
         disabled = false,
         readonly = false,
@@ -69,7 +70,7 @@
 </script>
 
 
-<CommonPopupEditor bind:this={editorRef} {variant} {compact} {style} {tooltip} {disabled} {readonly} {prefix} autoFit
+<CommonPopupEditor bind:this={editorRef} {variant} {theme} {compact} {style} {tooltip} {disabled} {readonly} {prefix} autoFit
                    {suffix} {clear} textValue={value}>
     <input bind:this={editor} bind:value {disabled} {readonly} {placeholder} {...eventHandlers}/>
 

package/dist/form/search_box/SearchBox.svelte

@@ -13,6 +13,7 @@
 
     let {
         variant,
+        theme,
         tooltip,
         compact = false,
         style,
@@ -71,7 +72,7 @@
     };
 </script>
 
-<CommonEditor {variant} {compact} {tooltip} {style} {disabled} input$class='search-box'>
+<CommonEditor {variant} {theme} {compact} {tooltip} {style} {disabled} input$class='search-box'>
     {#snippet leadingIcon()}
         <div style="line-height: 16px; font-size: 18px">
             <i class="icon_google_search"></i>

package/dist/form/text_editor/PasswordEditor.svelte

@@ -18,6 +18,7 @@
         disabled = false,
         readonly = false,
         variant,
+        theme,
         compact = false,
         style,
         value = $bindable(),
@@ -56,7 +57,7 @@
 
 </script>
 
-<CommonEditor textValue={value} {clear} {disabled} {readonly} {variant} {compact} {style} {tooltip} {error}>
+<CommonEditor textValue={value} {clear} {disabled} {readonly} {variant} {theme} {compact} {style} {tooltip} {error}>
     <input bind:this={editor} bind:value type={showPassword ? 'text' : 'password'} {...input$} onchange={handleChangeEvent} {...eventHandlers()} />
     {#snippet trailingIcon()}
         <div class="password-icon">

package/dist/form/text_editor/TextEditor.svelte

@@ -26,6 +26,7 @@
         disabled = false,
         readonly = false,
         variant,
+        theme,
         compact = false,
         style,
         value = $bindable(),
@@ -79,7 +80,7 @@
 </script>
 
 
-<CommonEditor textValue={value} {clear} {suffix} {prefix} {readonly} {disabled} {variant} {compact} {leadingIcon} {trailingIcon} {tooltip}
+<CommonEditor textValue={value} {clear} {suffix} {prefix} {readonly} {disabled} {variant} {theme} {compact} {leadingIcon} {trailingIcon} {tooltip}
               {error}>
     <input bind:this={editor} {...input$} {placeholder} {...eventHandlers}
            oninput={handleInput} onchange={handleChange} bind:value/>

package/dist/form/time_editor/TimeEditor.svelte

@@ -22,6 +22,7 @@
         mandatory = false,
         precision = 'M',
         variant,
+        theme,
         compact = false,
         style,
         value = $bindable<number | undefined>(),
@@ -202,6 +203,7 @@
     {disabled}
     {readonly}
     {variant}
+    {theme}
     {compact}
     {leadingIcon}
     {trailingIcon}

package/dist/form/unit-number-editor/UnitNumberEditor.svelte

@@ -9,6 +9,7 @@
 
     interface Props {
         variant?: EditorVariant;
+        theme?: string;
         compact?: boolean;
         style?: string;
         tooltip?: string;
@@ -30,6 +31,7 @@
 
     let {
         variant,
+        theme,
         compact = false,
         style,
         tooltip,
@@ -161,6 +163,7 @@
 
 <CommonPopupEditor bind:this={editorRef}
         {variant}
+        {theme}
         {error}
         {compact}
         {style}

package/dist/form/unit-number-editor/UnitNumberEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { EditorVariant } from "../types";
 import type UnitOption from "./UnitOption";
 interface Props {
     variant?: EditorVariant;
+    theme?: string;
     compact?: boolean;
     style?: string;
     tooltip?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",