@ticatec/uniface-element 0.1.30 → 0.1.32

package/dist/breadcrumbs/Breadcrumbs.svelte

@@ -12,10 +12,10 @@
 
 
 <div class="uniface-breadcrumbs" {style}>
-    {#each items as item}
+    {#each items as item, idx}
         <div>
             <span>{separator}</span>
-            <span aria-hidden="true" class="breadcrumb" on:click={onItemClick(item.data)}>{item.label}</span>
+            <span aria-hidden="true" class="breadcrumb" on:click={idx==items.length-1 ? null : onItemClick(item.data)}>{item.label}</span>
         </div>
     {/each}
 </div>

package/dist/color-picker/ColorPicker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import CommonPicker from "../common/CommonPicker.svelte";
+
+    type OnActionHandler = () => void;
+
+    export let showHex = true;
+    export let showRgb = false;
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let compact: boolean = false;
+    export let value: any = "#ff3e00";
+    export let style: string = '';
+    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+
+
+    let oldValue = value;
+
+    $: if (oldValue != value) {
+        oldValue = value;
+    }
+
+    let editor: any;
+
+    const clean = () => {
+
+    }
+
+    const handleActionIconClick = () => {
+        editor.click();
+    }
+
+    function handleColorChange(event) {
+        selectedColor = event.target.value;
+        rgbValues = hexToRgb(selectedColor);
+        console.log(selectedColor, rgbValues);
+        // dispatch('change', {
+        //     hex: selectedColor,
+        //     rgb: rgbValues
+        // });
+    }
+
+</script>
+
+<CommonPicker displayMode={DisplayMode.Edit} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_color_lens"
+              canClean={false} autoFit {clean} textValue={value} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
+<!--    <div style="flex: 1 1 auto; width: 50%; height: 60%; border-radius: 4px; background-color: {value}"></div>-->
+    <div style="width: 100%; display: flex; overflow: hidden; flex-direction: row; align-items: center; height: 100%; gap: 8px">
+        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color"  bind:value on:change={handleColorChange}/>
+        <input style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" readonly value={value??''} {disabled}/>
+    </div>
+
+
+</CommonPicker>

package/dist/color-picker/ColorPicker.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
+    showHex?: boolean;
+    showRgb?: boolean;
+    variant?: "" | "plain" | "outlined" | "filled";
+    disabled?: boolean;
+    readonly?: boolean;
+    compact?: boolean;
+    value?: any;
+    style?: string;
+    onChange?: OnChangeHandler<any>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorPicker = InstanceType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/color-picker/ColorPickerPanel.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+
+
+    // Define props with default values
+    import i18n from "@ticatec/i18n";
+    import langRes from "../i18n_resources/uniface_en_resource";
+
+    export let initialColor = "#ffffff";
+    export let showHex = true;
+    export let showRgb = false;
+    export let swatches = [];
+
+    let selectedColor = initialColor;
+    let rgbValues = hexToRgb(initialColor);
+
+
+    // Convert hex to RGB
+    function hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : { r: 0, g: 0, b: 0 };
+    }
+
+    // Emit change event when color changes
+    function handleColorChange(event) {
+        selectedColor = event.target.value;
+        rgbValues = hexToRgb(selectedColor);
+        dispatch('change', {
+            hex: selectedColor,
+            rgb: rgbValues
+        });
+    }
+
+    // Select a swatch
+    function selectSwatch(color) {
+        selectedColor = color;
+        rgbValues = hexToRgb(selectedColor);
+        // dispatch('change', {
+        //     hex: selectedColor,
+        //     rgb: rgbValues
+        // });
+    }
+</script>
+
+<div class="color-picker">
+    <label for="color-input">
+        {i18n.getText('uniface.pickupColor', langRes.uniface.colorPicker)
+            }
+    </label>
+
+    <div class="color-input-group">
+        <input
+                id="color-input"
+                type="color"
+                bind:value={selectedColor}
+                on:change={handleColorChange}
+        />
+        <div
+                class="color-preview"
+                style="background-color: {selectedColor};"
+        ></div>
+    </div>
+
+    {#if showHex}
+            <div class="color-value">
+                <span>HEX:</span> {selectedColor}
+            </div>
+        {/if}
+
+    {#if showRgb}
+            <div class="color-value">
+                <span>RGB:</span> rgb({rgbValues.r}, {rgbValues.g}, {rgbValues.b})
+            </div>
+        {/if}
+
+    {#if swatches && swatches.length > 0}
+            <div class="swatches">
+                {#each swatches as swatch}
+                        <button
+                                class="swatch"
+                                style="background-color: {swatch};"
+                                on:click={() => selectSwatch(swatch)}
+                                aria-label={`Select color ${swatch}`}
+                                class:selected={selectedColor === swatch}
+                        ></button>
+                    {/each}
+            </div>
+        {/if}
+</div>
+
+<style>
+    .color-picker {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        padding: 16px;
+        border-radius: 8px;
+        background-color: #f8f9fa;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 300px;
+    }
+
+    label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #333;
+    }
+
+    .color-input-group {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    input[type="color"] {
+        -webkit-appearance: none;
+        width: 40px;
+        height: 40px;
+        border: none;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+    }
+
+    input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+
+    input[type="color"]::-webkit-color-swatch {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+
+    .color-preview {
+        width: 40px;
+        height: 40px;
+        margin-left: 12px;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+    }
+
+    .color-value {
+        margin-bottom: 8px;
+        font-size: 14px;
+    }
+
+    .color-value span {
+        font-weight: 600;
+        margin-right: 4px;
+    }
+
+    .swatches {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 12px;
+    }
+
+    .swatch {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid #ddd;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+    }
+
+    .swatch:hover {
+        transform: scale(1.1);
+    }
+
+    .swatch.selected {
+        border: 2px solid #333;
+        box-shadow: 0 0 0 2px white inset;
+    }
+</style>

package/dist/color-picker/ColorPickerPanel.svelte.d.ts

@@ -0,0 +1,23 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ColorPickerPanel: $$__sveltets_2_IsomorphicComponent<{
+    initialColor?: string;
+    showHex?: boolean;
+    showRgb?: boolean;
+    swatches?: any[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorPickerPanel = InstanceType<typeof ColorPickerPanel>;
+export default ColorPickerPanel;

package/dist/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+import ColorPicker from "./ColorPicker.svelte";
+export default ColorPicker;

package/dist/color-picker/index.js

@@ -0,0 +1,2 @@
+import ColorPicker from "./ColorPicker.svelte";
+export default ColorPicker;

package/dist/common/CommonPicker.svelte

@@ -40,7 +40,7 @@
         {#if readonly || disabled}
             <input style="width: 100%" class="readonly" class:disabled readonly {disabled} value={textValue}/>
         {:else}
-            <div style="flex: 1 1 auto; position: relative; height: 100%">
+            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%">
                 <slot></slot>
                 {#if canClean && textValue && textValue.length > 0}
                     <div class="uniface-editor-clean-icon">

package/dist/data-table/DataTable.svelte

@@ -21,6 +21,7 @@
     export let inlineRowHeight: number = 80;
     export let rowBorder: boolean = false;
     export let colBorder: boolean = false;
+    export let emptyIndicator: string | undefined = undefined;
 
     export let style: string = '';
 
@@ -111,7 +112,7 @@
         {/if}
 
         <ContentPanel columns={dataColumns} {orderDirection} {orderColumn} {handleWidthChange} {handleCellClick} {tabWidth} bind:rows
-                      bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight
+                      bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight {emptyIndicator}
                       displayHorizontalScroll={actionsColumn!=null || indicatorColumn != null || fixedCols.length > 0}
                       showVerticalScroll={actionsColumn == null}/>
     {/if}

package/dist/data-table/DataTable.svelte.d.ts

@@ -24,6 +24,7 @@ declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
     inlineRowHeight?: number;
     rowBorder?: boolean;
     colBorder?: boolean;
+    emptyIndicator?: string | undefined;
     style?: string;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/data-table/lib/ActionsColumn.d.ts

@@ -8,4 +8,8 @@ export default interface ActionsColumn {
      *
      */
     getActions: GetRowActions;
+    /**
+     * 对齐方式，默认靠左对齐
+     */
+    align?: 'left' | 'center';
 }

package/dist/data-table/lib/RowAction.d.ts

@@ -10,6 +10,14 @@ export default interface RowAction {
      *
      */
     label: string;
+    /**
+     *
+     */
+    type?: 'primary' | 'secondary' | 'third' | 'forth';
+    /**
+     *
+     */
+    icon?: string;
     /**
      *
      */

package/dist/data-table/parts/ActionsPanel.svelte

@@ -56,7 +56,7 @@
     <div bind:this={scrollPanel} class="rows-container" style="overflow-y: auto" on:scroll|passive={handleActionPanelScroll}>
         <div>
             {#each rows as row, idx}
-                <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width}
+                <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width} align={actionsColumn.align}
                             actions={actionsColumn.getActions(row.data)}/>
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight??0}px">

package/dist/data-table/parts/ActionsRow.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 
     import type RowAction from "../lib/RowAction";
-    import {TextButton} from "../../button";
+    import {IconButton, TextButton} from "../../button";
     import type TableRow from "./TableRow";
     import {onDestroy, onMount, tick} from "svelte";
     import utils from "../../common/utils";
     import PopupMenu from "./PopupMenu.svelte";
+
     export let row: TableRow;
     export let actions: Array<RowAction>;
     export let alternative: boolean;
@@ -15,6 +16,8 @@
 
     export let rowHeight: number;
 
+    export let align: 'left' | 'center' | undefined;
+
     let style: string;
 
 
@@ -81,14 +84,20 @@
         checkOverflow();
     }
 
-    $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
+    $: style = rowHeight == null ? '' : `height: ${rowHeight}px`;
+
 
 </script>
-<div class="data-row" class:alternative style="position: relative; width: {width}px; display: block; {style}">
-    <div class="action-cell" bind:this={cell}
-         style="">
+<div class="data-row" class:alternative style="position: relative;  display: block; padding: 0 4px; width: {width}px; {style}">
+    <div class="action-cell" bind:this={cell} style="{align=='center' ? 'margin: 0 auto' : ''}">
         {#each actionList as action}
-            <TextButton style="flex-shrink: 0; top: 0" size="mini" type="primary" label={action.label} onClick={()=>action.callback(row.data)}/>
+            {#if action.icon}
+                <IconButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" icon={action.icon}
+                            onClick={()=>action.callback(row.data)}/>
+            {:else}
+                <TextButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" label={action.label}
+                            onClick={()=>action.callback(row.data)}/>
+            {/if}
         {/each}
         {#if popupList.length > 0}
             <TextButton size="mini" type="primary" style="flex-shrink: 0; top: 0" label="..." onClick={showPopupMenu}/>
@@ -98,10 +107,15 @@
     {#if showPopup}
         <PopupMenu {parentRect} closeCallback={()=>{showPopup = false}}>
             <div style="padding: 4px 6px; box-sizing: border-box; background-color: #ffffff;">
-                {#each popupList as action}
-                    <div class="action-popover" style="padding: 4px 6px">
-                        <TextButton size="mini" type="primary" label={action.label}
-                                    onClick={()=>{action.callback?.(row.data); showPopup=false}}/>
+                {#each popupList.reverse() as action}
+                    <div class="action-popover" style="padding: 4px 6px; text-align: center">
+                        {#if action.icon}
+                            <IconButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" icon={action.icon}
+                                        onClick={()=>{action.callback(row.data); showPopup=false}}/>
+                        {:else}
+                            <TextButton style="flex-shrink: 0; top: 0" size="mini" type="{action.type ?? 'primary'}" label={action.label}
+                                        onClick={()=>{action.callback(row.data); showPopup=false}}/>
+                        {/if}
                     </div>
                 {/each}
             </div>

package/dist/data-table/parts/ActionsRow.svelte.d.ts

@@ -20,6 +20,7 @@ declare const ActionsRow: $$__sveltets_2_IsomorphicComponent<{
     parentRect: DOMRect;
     width: number;
     rowHeight: number;
+    align: "left" | "center" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/i18n_resources/uniface_cn_resource.d.ts

@@ -23,6 +23,7 @@ declare const langRes: {
         dataTable: {
             rowNo: string;
             actions: string;
+            emptyDataSet: string;
         };
     };
 };

package/dist/i18n_resources/uniface_cn_resource.js

@@ -30,7 +30,8 @@ const langRes = {
         },
         dataTable: {
             rowNo: "序号",
-            actions: "操作"
+            actions: "操作",
+            emptyDataSet: '空数据集'
         }
     }
 };

package/dist/i18n_resources/uniface_en_resource.d.ts

@@ -3,6 +3,7 @@ declare const langRes: {
         btnClose: string;
         btnCancel: string;
         btnConfirm: string;
+        colorPicker: string;
         calendar: {
             months: string[];
             monthsAbbr: string[];
@@ -23,6 +24,7 @@ declare const langRes: {
         dataTable: {
             rowNo: string;
             actions: string;
+            emptyDataSet: string;
         };
     };
 };

package/dist/i18n_resources/uniface_en_resource.js

@@ -3,6 +3,7 @@ const langRes = {
         btnClose: "Close",
         btnCancel: 'Cancel',
         btnConfirm: "OK",
+        colorPicker: "Pick up color",
         calendar: {
             months: [
                 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
@@ -30,7 +31,8 @@ const langRes = {
         },
         dataTable: {
             rowNo: "Row#",
-            actions: "Actions"
+            actions: "Actions",
+            emptyDataSet: 'Empty dataset'
         }
     }
 };

package/dist/options-select/OptionsSelect.svelte

@@ -84,7 +84,7 @@
         {#each options as op}
             {#if hideOptions.indexOf(op[keyField]) < 0}
                 {#if itemRender != null}
-                    <svelte:component this={itemRender} item={op} disabled={disableOptions.indexOf(op[keyField])>-1}
+                    <svelte:component this={itemRender.component} {...itemRender.props} item={op} disabled={disableOptions.indexOf(op[keyField])>-1}
                                       on:click={handleItemClick(op)}/>
                 {:else}
                     <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} aria-hidden="true"

package/dist/ticatec-uniface-web.css

@@ -3892,6 +3892,7 @@
 .uniface-data-table .action-panel .data-row .action-cell {
   display: flex;
   flex-direction: row;
+  gap: 4px;
   align-items: center;
   width: max-content;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",

package/dist/data-table/lib/AdvColumn.d.ts

@@ -1,36 +0,0 @@
-import type { HrefBuilder } from "./HrefLink";
-import type { CellHint, FormatCell } from "./FormatCell";
-export default interface AdvColumn {
-    /**
-     * 对齐方式，文本，可以取值：left, center, right
-     */
-    align: string;
-    /**
-     * 对应的字段/属性名
-     */
-    field?: string;
-    /**
-     * 超链接设置
-     */
-    href?: HrefBuilder | null;
-    /**
-     * 单元格转换函数
-     */
-    formatter?: FormatCell;
-    /**
-     * 是否忽略html的转义符
-     */
-    escapeHTML: boolean;
-    /**
-     * 待显示的提示
-     */
-    hint?: CellHint;
-    /**
-     * 渲染器
-     */
-    render?: any;
-    /**
-     * 宽度
-     */
-    width: number;
-}

package/dist/data-table/lib/AdvColumn.js

@@ -1 +0,0 @@
-export {};