@ticatec/uniface-element 0.1.24 → 0.1.31

package/dist/ticatec-uniface-web.css

@@ -44,38 +44,6 @@
   --uniface-button-common-reverse-color: #ffffff;
   --uniface-button-plain-disabled-color: #B3BCCA;
   --uniface-text-button-plain-hover-color: #374151B0;
-  --uniface-button-plain-background-color: #f0f0f0;
-  --uniface-button-plain-border-color: #f0f0f0;
-  --uniface-button-plain-text-color: #374151;
-  --uniface-button-plain-hover-color: #f0f0f0B0;
-  --uniface-button-plainy-active-color: #f0f0f0;
-  --uniface-button-primary-background-color: #42A5F5;
-  --uniface-button-primary-border-color: #42B5DB;
-  --uniface-button-primary-text-color: #ffffff;
-  --uniface-button-primary-hover-color: #42A5F5B0;
-  --uniface-button-primary-active-color: #42A5F5;
-  --uniface-text-button-primary-hover-color: #42A5F5B0;
-  --uniface-button-secondary-background-color: #FF685B;
-  --uniface-button-secondary-border-color: #FF7875;
-  --uniface-button-secondary-text-color: #ffffff;
-  --uniface-button-secondary-hover-color: #FF685BB0;
-  --uniface-button-secondary-active-color: #FF4D4F;
-  --uniface-text-button-secondary-hover-color: #D32F2FB0;
-  --uniface-button-third-background-color: #2DC071;
-  --uniface-button-third-border-color: #2DD08B;
-  --uniface-button-third-text-color: #ffffff;
-  --uniface-button-third-hover-color: #2DD057B0;
-  --uniface-button-third-active-color: #2DC071;
-  --uniface-text-button-third-hover-color: #2DC071B0;
-  --uniface-button-forth-background-color: #FAD85D;
-  --uniface-button-forth-border-color: #FAE877;
-  --uniface-button-forth-text-color: #374151;
-  --uniface-button-forth-hover-color: #FAD85DB0;
-  --uniface-button-forth-active-color: #FAD85D;
-  --uniface-text-button-forth-hover-color: #FAD85DB0;
-  --uniface-disabled-button-color: #F1F5F9;
-  --uniface-disabled-button-border-color: #E2E8F0;
-  --uniface-disabled-button-text-color: #B3BCCA;
   --uniface-text-button-color: #42A5F5;
   --uniface-text-button-hover-color: #1e648d;
   --uniface-active-border-color: #42A5F5;
@@ -430,10 +398,11 @@
   display: block;
   visibility: hidden;
   box-sizing: border-box;
-  font-size: 18px;
   color: var(--uniface-editor-text-color, #374151);
   align-self: center;
   cursor: pointer;
+  font-size: 22px;
+  line-height: 1;
 }
 .uniface-common-picker .action-icon:active {
   color: var(--uniface-active-dropdown-color, #9d9d9d);
@@ -526,6 +495,7 @@
 :root {
   --uniface-editor-clean-icon-bg: #B3BCCA;
   --uniface-editor-clean-icon-color: #ffffff;
+  --uniface-embed-icon-color: #6B7280;
   --uniface-editor-text-color: #374151;
   --uniface-editor-line-height: 16px;
   --uniface-editor-padding: 0 8px;
@@ -544,6 +514,18 @@
   --uniface-editor-inline-action-icon-hover-bg: #42A5F51A;
 }
 
+.uniface-display-field {
+  height: 24px;
+  position: relative;
+  line-height: 1.25em;
+  border-bottom: 1px solid var(--uniface-editor-border-color);
+}
+.uniface-display-field .content {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 /*输入框中的清除按钮*/
 .uniface-editor-clean-icon {
   position: absolute;
@@ -581,12 +563,15 @@
   width: 100%;
   position: relative;
   height: 38px;
-  line-height: var(--uniface-editor-line-height, 16px);
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
 }
+.uniface-common-editor .editor-embed-icon {
+  font-size: 20px;
+  color: var(--uniface-embed-icon-color);
+}
 .uniface-common-editor .editor-embed-icon img {
   width: 28px;
   height: 28px;
@@ -768,6 +753,7 @@
 .uniface-filter-field.horizontal .field-container {
   grid-template-columns: auto 1fr;
   align-items: center;
+  gap: 8px;
 }
 .uniface-filter-field.horizontal .field-label {
   text-align: var(--uniface-criteria-field-label-alignment);
@@ -894,7 +880,6 @@
 .uniface-form-field .field-hint {
   width: 100%;
   box-sizing: border-box;
-  padding: 4px 0;
   font-size: 0.9em;
   font-style: italic;
   color: var(--uniface-form-field-invalid-message-color);
@@ -922,7 +907,7 @@
 .uniface-form-field .form-content {
   width: 100%;
   display: grid;
-  gap: 4px;
+  gap: 8px;
 }
 .uniface-form-field.vertical .form-content {
   grid-template-columns: 1fr;
@@ -939,6 +924,7 @@
 }
 .uniface-form-field.horizontal .form-content {
   grid-template-columns: auto 1fr;
+  gap: 8px;
   grid-template-areas: "label field" "empty hint";
 }
 .uniface-form-field.horizontal .form-content .field-label {
@@ -986,9 +972,11 @@
   line-height: 1.5em;
   color: var(--uniface-default-text-color, #374151);
   padding: var(--uniface-memo-padding, 6px 8px);
+  border-bottom: 1px solid var(--uniface-editor-border-color, #E2E8F0);
 }
 .uniface-memo-editor:focus {
   outline: none;
+  border-bottom-color: var(--uniface-editor-outlined-active-border-color, #298DFF);
 }
 .uniface-memo-editor.plain {
   border: none;
@@ -1275,9 +1263,47 @@
   border-top: 1px solid var(--uniface-dialog-divider-color, #F0F0F0);
 }
 
+:root {
+  --uniface-button-min-width: 80px;
+  --uniface-button-plain-background-color: #f0f0f0;
+  --uniface-button-plain-border-color: #f0f0f0;
+  --uniface-button-plain-text-color: #374151;
+  --uniface-button-plain-hover-color: #f0f0f0B0;
+  --uniface-button-plainy-active-color: #f0f0f0;
+  --uniface-button-primary-background-color: #42A5F5;
+  --uniface-button-primary-border-color: #42B5DB;
+  --uniface-button-primary-text-color: #ffffff;
+  --uniface-button-primary-hover-color: #42A5F5B0;
+  --uniface-button-primary-active-color: #42A5F5;
+  --uniface-text-button-primary-hover-color: #42A5F5B0;
+  --uniface-button-secondary-background-color: #FF685B;
+  --uniface-button-secondary-border-color: #FF7875;
+  --uniface-button-secondary-text-color: #ffffff;
+  --uniface-button-secondary-hover-color: #FF685BB0;
+  --uniface-button-secondary-active-color: #FF4D4F;
+  --uniface-text-button-secondary-hover-color: #D32F2FB0;
+  --uniface-button-third-background-color: #2DC071;
+  --uniface-button-third-border-color: #2DD08B;
+  --uniface-button-third-text-color: #ffffff;
+  --uniface-button-third-hover-color: #2DD057B0;
+  --uniface-button-third-active-color: #2DC071;
+  --uniface-text-button-third-hover-color: #2DC071B0;
+  --uniface-button-forth-background-color: #FAD85D;
+  --uniface-button-forth-border-color: #FAE877;
+  --uniface-button-forth-text-color: #374151;
+  --uniface-button-forth-hover-color: #FAD85DB0;
+  --uniface-button-forth-active-color: #FAD85D;
+  --uniface-text-button-forth-hover-color: #FAD85DB0;
+  --uniface-disabled-button-color: #F1F5F9;
+  --uniface-disabled-button-border-color: #E2E8F0;
+  --uniface-disabled-button-text-color: #B3BCCA;
+}
+
 /*通用按钮设置*/
 .uniface-button {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
   box-sizing: border-box;
   cursor: pointer;
   text-align: center;
@@ -1285,6 +1311,9 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  min-width: var(--uniface-button-min-width);
+  height: 28px;
+  gap: 8px;
   font-size: 12px;
   letter-spacing: 1px;
   transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
@@ -1363,18 +1392,18 @@
   color: var(--uniface-disabled-button-text-color, #B3BCCA);
 }
 .uniface-button.common-button {
-  padding: 6px 16px;
+  padding: 0 16px;
   border-radius: 4px;
 }
-.uniface-button.common-button > span {
-  padding: 0 4px;
+.uniface-button.common-button i {
+  font-size: 1.5em;
 }
 .uniface-button.common-button.big {
-  padding: 10px 20px;
+  height: 32px;
   font-size: 1.1em;
 }
 .uniface-button.common-button.mini {
-  padding: 4px 10px;
+  height: 24px;
   font-size: 0.9em;
 }
 .uniface-button.common-button.plain {
@@ -1390,40 +1419,37 @@
   border-radius: 12px;
 }
 .uniface-button.icon-button {
-  width: 32px;
-  height: 32px;
-  padding: 2px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
+  min-width: unset;
+  justify-content: center;
 }
 .uniface-button.icon-button i {
-  line-height: 28px;
-  font-size: 16px;
+  font-size: 18px;
 }
 .uniface-button.icon-button.big {
-  width: 48px;
-  height: 48px;
-  padding: 4px;
+  width: 32px;
+  height: 32px;
 }
 .uniface-button.icon-button.big i {
-  line-height: 40px;
-  font-size: 24px;
+  font-size: 22px;
 }
 .uniface-button.icon-button.mini {
   width: 24px;
   height: 24px;
-  padding: 2px;
 }
 .uniface-button.icon-button.mini i {
-  line-height: 20px;
-  font-size: 12px;
+  font-size: 16px;
 }
 .uniface-button.text-button {
   padding: 3px 6px;
   cursor: pointer;
   text-align: center;
   background-color: transparent;
-  color: var(--uniface-button-plain-text-color, #374151);
+  color: var(--uniface-button-plain-text-color);
   user-select: none;
+  min-width: unset;
 }
 .uniface-button.text-button.big {
   font-size: 1.2em;
@@ -1686,12 +1712,13 @@
   border-color: var(--uniface-card-divid-border-color, rgba(66, 165, 245, 0.4392156863));
 }
 .uniface-card > div .card-header {
-  height: var(--uniface-card-header-height, 54px);
-  border-bottom: 1px solid var(--uniface-card-inside-border-color, #E2E8F0);
   box-sizing: border-box;
   font-weight: 600;
+  position: relative;
 }
 .uniface-card > div .card-header.simple {
+  height: var(--uniface-card-header-height, 54px);
+  border-bottom: 1px solid var(--uniface-card-inside-border-color, #E2E8F0);
   line-height: var(--uniface-card-header-height, 54px);
   padding: var(--uniface-card-header-padding, 0 24px);
   width: 100%;
@@ -1746,7 +1773,6 @@
 }
 .uniface-card > div .card-action-bar.simple .action-item i {
   cursor: pointer;
-  color: var(--uniface-card-primary-text-color, #374151);
 }
 .uniface-card > div .card-action-bar.simple .action-item i:hover {
   font-size: var(--uniface-action-image-hover-size);
@@ -2191,49 +2217,58 @@
   line-height: 3em;
 }
 
-.uniface-header {
-  background-color: var(--uniface-primary-color, #42A5F5);
-  color: var(--uniface-primary-text-color, #ffffff);
+:root {
+  --uniface-top-bar-background-color: #0061FF;
+  --uniface-top-bar-color: #f0f0f0;
+  --uniface-top-bar-height: 48px;
+  --uniface-top-bar-font-szie: 24px;
+  --uniface-top-bar-margin: 12px;
+  --uniface-avatar-size: 40px;
+  --uniface-avatar-radius: 50%;
+}
+
+.uniface-top-bar {
+  background-color: var(--uniface-top-bar-background-color);
+  color: var(--uniface-top-bar-color);
   text-align: center;
   width: 100%;
+  height: var(--uniface-top-bar-height);
+  font-size: var(--uniface-top-bar-font-szie);
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   justify-items: center;
-  padding: 0.5em 0.5em;
+  align-items: center;
+  padding: 0 var(--uniface-top-bar-margin);
+  gap: 8px;
 }
-.uniface-header .bar-home, .uniface-header .bar-right {
+.uniface-top-bar > div {
   flex: 0 0 auto;
-  align-self: center;
 }
-.uniface-header .bar-home {
-  display: flex;
+.uniface-top-bar .bar-home {
   position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: 1px solid transparent;
-  overflow: hidden;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  font-size: 22px;
-}
-.uniface-header .bar-home:hover {
-  border-color: #ffffff;
+  cursor: pointer;
 }
-.uniface-header .bar-home:active {
+.uniface-top-bar .bar-home:active {
   top: 1px;
 }
-.uniface-header .title {
+.uniface-top-bar .main-content {
   flex: 1 1 auto;
-  overflow: hidden;
-  align-self: center;
+  text-align: left;
 }
-.uniface-header .title span {
-  padding: 0 4px;
-  font-size: 24px;
+.uniface-top-bar .avatar {
+  height: var(--uniface-avatar-size);
+}
+.uniface-top-bar .avatar img {
+  position: relative;
+  width: var(--uniface-avatar-size);
+  height: var(--uniface-avatar-size);
+  border-radius: var(--uniface-avatar-radius);
+  object-fit: cover;
+  cursor: pointer;
+}
+.uniface-top-bar .avatar img:active {
+  top: 1px;
 }
 
 .uniface-lookup-editor {
@@ -2612,13 +2647,20 @@
   flex: 0 0 auto;
 }
 
+:root {
+  --uniface-navigator-menu-background-color: #ffffff;
+  --uniface-navigator-menu-color: #374151;
+  --uniface-navigator-menu-hover-background-color: #81D4FA;
+  --uniface-navigator-menu-hover-color: #374151;
+}
+
 .uniface-navigator-menu-panel {
   display: block;
   width: 100%;
   height: 100%;
   user-select: none;
-  background-color: var(--uniface-primary-color, #42A5F5);
-  color: var(--uniface-primary-text-color, #ffffff);
+  background-color: var(--uniface-navigator-menu-background-color);
+  color: var(--uniface-navigator-menu-color);
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;
@@ -2649,7 +2691,7 @@
 }
 .uniface-navigator-menu-panelul li span:hover, .uniface-navigator-menu-panel ul li span:hover {
   background-color: var(--uniface-navigator-menu-hover-background-color, #81D4FA);
-  color: var(--uniface-default-text-color, #374151);
+  color: var(--uniface-navigator-menu-hover-color);
   border-radius: 4px;
 }
 .uniface-navigator-menu-panelul li.expandable > span:hover::after, .uniface-navigator-menu-panel ul li.expandable > span:hover::after {
@@ -2658,7 +2700,7 @@
   font-size: 0.9em;
   position: absolute;
   right: 8px;
-  color: var(--uniface-default-text-color, #374151);
+  color: var(--uniface-navigator-menu-color);
 }
 .uniface-navigator-menu-panelul li.expandable.fold ul, .uniface-navigator-menu-panel ul li.expandable.fold ul {
   display: none;
@@ -3565,11 +3607,13 @@
 }
 .uniface-accordion-panel .accordion .header {
   background-color: var(--uniface-accordion-title-bg, #F8FAFC);
-  padding: 12px 16px;
+  padding: 8px 12px;
   width: 100%;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
+  gap: 8px;
+  flex-direction: row;
   align-items: center;
 }
 .uniface-accordion-panel .accordion .header:hover {
@@ -3583,7 +3627,7 @@
   transition: height 0.3s ease-out;
 }
 .uniface-accordion-panel.compact .accordion .header {
-  padding: 6px 8px;
+  padding: 4px 8px;
 }
 .uniface-accordion-panel.compact .accordion .content {
   padding: 8px;
@@ -4105,6 +4149,47 @@
   overflow-y: hidden;
 }
 
+:root {
+  --breadcrumbs-gap: 8px;
+  --breadcrumbs-color: var(--uniface-primary-text-color, #374151);
+  --breadcrumbs-hover-color: var(--uniface-primary-hover-color, #298DEF);
+  --breadcrumbs-active-color: var(--uniface-primary-hover-color, #298DEF);
+  --breadcrumbs-active-weight: 600;
+  --breadcrumbs-padding: 8px 12px;
+}
+
+.uniface-breadcrumbs {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  color: var(--breadcrumbs-color);
+  gap: var(--breadcrumbs-gap);
+  padding: var(--breadcrumbs-padding);
+}
+.uniface-breadcrumbs .breadcrumb {
+  margin: 0 6px;
+  cursor: pointer;
+}
+.uniface-breadcrumbs .breadcrumb:hover {
+  color: var(--breadcrumbs-hover-color);
+}
+.uniface-breadcrumbs .breadcrumb:active {
+  color: var(--breadcrumbs-active-color);
+  font-weight: var(--breadcrumbs-active-weight);
+}
+.uniface-breadcrumbs > div:last-child .breadcrumb {
+  cursor: default;
+}
+.uniface-breadcrumbs > div:last-child .breadcrumb:hover {
+  color: var(--uniface-primary-text-color);
+}
+.uniface-breadcrumbs > div:last-child .breadcrumb:active {
+  color: var(--uniface-primary-text-color);
+  font-weight: unset;
+}
+
 html {
   box-sizing: border-box;
 }

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

@@ -82,8 +82,9 @@
 
 
     onMount(async () => {
-        unit = units.find(item => item.code == unitCode) ?? units[0];
         standardUnit = units.find(item => item.ratio == 1);
+        unit = units.find(item => item.code == unitCode) ?? standardUnit ?? units[0];
+        unitCode = unit.code;
         calculateUnitValue();
     })
 
@@ -110,18 +111,18 @@
         <NumberInput bind:this={editor} style="flex: 1 1 auto" {disabled} {placeholder} bind:value={unitValue} precision={unit?.precision}
                      {allowNegative}
                      max={unit?.max} min={unit?.min} {readonly} onChange={handleValueChange}/>
-        <div class="editor-embed-icon" slot="trailing-icon">
+        <svelte:fragment slot="trailing-icon">
             {#if !disabled && !readonly}
-                <i class="option-dropdown uniface-icon-chevron-down" aria-hidden="true" on:click={openPopup}></i>
+                <i style="font-size: 22px" class="option-dropdown icon_google_arrow_drop_down" aria-hidden="true" on:click={openPopup}></i>
             {/if}
-        </div>
+        </svelte:fragment>
     </CommonEditor>
 
     {#if showPopup}
         <Popover target={divPanel} autoFit={false} align="right" on:close={()=>{showPopup=false}}>
             <div class="options-popover" style="min-width: 90px; box-sizing: border-box; text-align: center; {mh}" >
                 {#each units as op}
-                    <div style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">
+                    <div class="option-item" style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">
                         <span>{op.text ?? op.code}</span>
                     </div>
                 {/each}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.24",
+  "version": "0.1.31",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -75,6 +75,10 @@
       "types": "./dist/attachment-files/index.d.ts",
       "import": "./dist/attachment-files/index.js"
     },
+    "./Breadcrumbs": {
+      "types": "./dist/breadcrumbs/index.d.ts",
+      "import": "./dist/breadcrumbs/index.js"
+    },
     "./Box": {
       "types": "./dist/box/index.d.ts",
       "svelte": "./dist/box/Box.svelte",
@@ -321,7 +325,7 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@ticatec/uniface-icons": "^0.2.0",
+    "@ticatec/uniface-google-material-icons": "^0.1.1",
     "dayjs": "^1.11.10",
     "publint": "^0.3.2",
     "sass": "^1.57.1",

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;
-}