@ticatec/uniface-element 0.1.35 → 0.1.46

package/dist/ticatec-uniface-web.css

@@ -85,7 +85,7 @@
   --uniface-box-footer-height: 24px;
   --uniface-box-header-border: none;
   --uniface-box-header-margin: 8px;
-  --uniface-box-border-color: var(--uniface-plain-border-color, #f0f0f0);
+  --uniface-box-border-color: #f0f0f0;
 }
 
 .uniface-box {
@@ -137,6 +137,9 @@
   --uniface-list-box-hover-bg: #FFFFE1;
   --uniface-list-box-selected-bg: #b1c8f6;
   --uniface-list-box-header-bottom-border: 1px solid #f0f0f0;
+  --uniface-list-box-border-color: #f0f0f0;
+  --uniface-list-box-header-bg: #F8FAFC;
+  --uniface-list-box-footer-bg: #F8FAFC;
 }
 
 .uniface-listbox {
@@ -146,6 +149,7 @@
   overflow: hidden;
   box-sizing: border-box;
   user-select: none;
+  border: 1px solid var(--uniface-list-box-border-color);
 }
 .uniface-listbox .list-view-mask {
   width: 100%;
@@ -163,7 +167,8 @@
 .uniface-listbox .box-header .title {
   font-weight: 600;
   line-height: 32px;
-  border-bottom: 1px solid var(--uniface-box-border-color);
+  padding: 0 8px;
+  background-color: var(--uniface-list-box-header-bg, #F8FAFC);
 }
 .uniface-listbox .box-header .header-search {
   width: 100%;
@@ -174,6 +179,7 @@
 }
 .uniface-listbox .box-footer {
   border-top: var(--uniface-list-box-header-bottom-border);
+  background-color: var(--uniface-list-box-footer-bg);
   height: auto;
 }
 .uniface-listbox .listbox-header {
@@ -731,38 +737,37 @@
   display: grid;
   position: relative;
   gap: 4px;
+  grid-template-columns: 1fr;
 }
 .uniface-filter-field .field-label {
   color: var(--uniface-criteria-field-label-color);
   font-size: 0.9em;
   font-weight: 500;
   box-sizing: border-box;
-}
-.uniface-filter-field.vertical .field-container {
-  grid-template-columns: 1fr;
-}
-.uniface-filter-field.vertical .field-label {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.uniface-filter-field.vertical .field {
+.uniface-filter-field .field {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-items: center;
   width: 100%;
 }
-.uniface-filter-field.horizontal .field-container {
+
+.field-layout-horizontal .field-container {
   grid-template-columns: auto 1fr;
   align-items: center;
   gap: 8px;
 }
-.uniface-filter-field.horizontal .field-label {
+.field-layout-horizontal .field-label {
   text-align: var(--uniface-criteria-field-label-alignment);
   width: var(--uniface-criteria-field-label-width);
-  overflow: hidden;
+  overflow: unset;
+  text-overflow: unset;
+  white-space: unset;
 }
 
 .switch-box input[type=checkbox] {
@@ -870,6 +875,7 @@
   --uniface-form-field-label-width: 120px;
   --uniface-form-field-label-alignment: right;
   --uniface-form-field-padding: 6px 4px;
+  --uniface-field-gap: 4px;
 }
 
 .uniface-form-field {
@@ -877,7 +883,6 @@
   display: block;
   position: relative;
   height: auto;
-  padding: var(--uniface-form-field-padding);
 }
 .uniface-form-field .required-indicator {
   color: var(--uniface-form-field-required-indicator-color);
@@ -889,6 +894,7 @@
   font-style: italic;
   color: var(--uniface-form-field-invalid-message-color);
   grid-area: hint;
+  margin-top: 8px;
 }
 .uniface-form-field .field {
   width: 100%;
@@ -912,29 +918,35 @@
 .uniface-form-field .form-content {
   width: 100%;
   display: grid;
-  gap: 8px;
-}
-.uniface-form-field.vertical .form-content {
+  grid-template-rows: auto 1fr auto;
   grid-template-columns: 1fr;
   grid-template-areas: "label" "field" "hint";
 }
-.uniface-form-field.vertical .form-content .field-label {
+.uniface-form-field .form-content .field-label {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: var(--uniface-field-gap);
+  padding: 0 4px;
 }
-.uniface-form-field.vertical .form-content .empty-field {
+.uniface-form-field .form-content .empty-field {
   display: none;
 }
-.uniface-form-field.horizontal .form-content {
+
+.field-layout-horizontal .form-content {
+  grid-template-rows: 1fr auto;
   grid-template-columns: auto 1fr;
-  gap: 8px;
   grid-template-areas: "label field" "empty hint";
 }
-.uniface-form-field.horizontal .form-content .field-label {
+.field-layout-horizontal .form-content .field-label {
   width: var(--uniface-form-field-label-width);
+  white-space: wrap;
+  overflow: unset;
+  text-overflow: unset;
+  margin-bottom: unset;
   text-align: var(--uniface-form-field-label-alignment);
+  padding-right: 8px;
 }
 
 .flex-block {
@@ -1857,6 +1869,7 @@
 }
 .uniface-tabs-wrap .scroll-right, .uniface-tabs-wrap .scroll-left {
   width: 24px;
+  flex: 0 0 auto;
   text-align: center;
   cursor: pointer;
 }
@@ -2111,6 +2124,12 @@
   width: 100%;
 }
 
+root {
+  --uniface-drawer-bg: #ffffff;
+  --uniface-drawer-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
+  --uniface-drawer-border-color: #e1e1e1;
+}
+
 .uniface-drawer {
   position: fixed;
   top: 0;
@@ -2123,8 +2142,8 @@
 .uniface-drawer > div {
   position: absolute;
   height: 100%;
-  background-color: var(--tsui-app-background-color, #ffffff);
-  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
+  background-color: var(--uniface-drawer-bg);
+  box-shadow: var(--uniface-drawer-shadow);
 }
 .uniface-drawer > div > div {
   position: relative;
@@ -2134,11 +2153,11 @@
 }
 .uniface-drawer > div.left {
   left: 0;
-  border-right: 1px solid var(--tsui-border-color, #9d9d9d);
+  border-right: 1px solid var(--uniface-drawer-border-color);
 }
 .uniface-drawer > div.right {
   right: 0;
-  border-left: 1px solid var(--tsui-border-color, #9d9d9d);
+  border-left: 1px solid var(--uniface-drawer-border-color);
 }
 
 .uniface-pagination-panel {
@@ -2738,56 +2757,51 @@
   margin: auto 20px;
 }
 
-.flex-row-form {
+:root {
+  --uniface-flex-form-row-gap: 12px;
+  --uniface-flex-container-padding: 8px 6px;
+  --uniface-flex-cell-padding: 0 6px;
+  --uniface-flex-form-row-padding: 6px 0;
+  --uniface-grid-cell-padding: 6px;
+}
+
+.flex-row-form, .flex-form {
   width: 100%;
-  height: 100%;
-  overflow: auto;
   position: relative;
   box-sizing: border-box;
+  padding: var(--uniface-flex-container-padding);
 }
-.flex-row-form > div {
+.flex-row-form > div, .flex-form > div {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
   position: relative;
+  justify-items: start;
   box-sizing: border-box;
 }
-.flex-row-form .form-row {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-items: flex-start;
-  box-sizing: border-box;
-  padding: 3px 0;
-}
-.flex-row-form .form-row .cell-field {
-  box-sizing: border-box;
-  padding: 0 4px;
-}
-.flex-row-form .form-row .form-cell {
+.flex-row-form .form-cell, .flex-form .form-cell {
   position: relative;
   box-sizing: border-box;
-  padding: 0 4px;
   flex: 0 0 auto;
+  padding: var(--uniface-flex-cell-padding);
 }
 
-.flex-form {
-  position: relative;
-  width: 100%;
-  display: block;
+.flex-row-form > div {
+  flex-direction: column;
 }
-.flex-form > div {
-  position: relative;
-  width: 100%;
+.flex-row-form .form-row {
   display: flex;
-  flex-wrap: wrap;
-  justify-items: start;
-  box-sizing: border-box;
+  flex-direction: row;
+  padding: var(--uniface-flex-form-row-padding);
 }
-.flex-form .cell-field {
-  box-sizing: border-box;
-  padding: 4px;
+.flex-row-form .form-row:last-child {
+  padding-bottom: 0;
+}
+
+.flex-form > div {
+  flex-wrap: wrap;
+  flex-direction: row;
+  row-gap: var(--uniface-flex-form-row-gap);
 }
 .flex-form .row-break {
   width: 100%;
@@ -2798,35 +2812,20 @@
   position: relative;
   width: 100%;
   display: block;
+  padding: var(--uniface-flex-container-padding);
 }
 .grid-form > div {
   width: 100%;
+  height: 100%;
   position: relative;
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
   justify-items: start;
   box-sizing: border-box;
-  padding: 6px 8px;
-  grid-row-gap: 3px;
-  grid-column-gap: 4px;
 }
-.grid-form .cell-field {
+.grid-form .form-cell {
   width: 100%;
   box-sizing: border-box;
-}
-.grid-form .uniface-form-field.vertical .form-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.grid-form .uniface-form-field.vertical .form-content .field-label {
-  flex: 0 0 auto;
-}
-.grid-form .uniface-form-field.vertical .form-content .field-hint {
-  flex: 0 0 auto;
-}
-.grid-form .uniface-form-field.vertical .form-content .field {
-  flex: 1 1 auto;
+  padding: var(--uniface-grid-cell-padding);
 }
 
 .uniface-display-field.images-field > div {
@@ -3097,6 +3096,7 @@
   --uniface-navigator-hover-text-color: #298DFF;
   --uniface-navigator-active-text-color: #0061FF;
   --uniface-navigator-active-text-weight: 600;
+  --uniface-navigator-highlight-text-color: #0061FF;
 }
 
 .uniface-navigator-panel {
@@ -3158,6 +3158,9 @@
   color: var(--uniface-navigator-hover-text-color);
   cursor: pointer;
 }
+.uniface-navigator-panel .navigator-content .uniface-navigator-item.highlight {
+  color: var(--uniface-navigator-highlight-text-color);
+}
 .uniface-navigator-panel .navigator-content .uniface-navigator-item.active {
   color: var(--uniface-navigator-active-text-color);
   font-weight: var(--uniface-navigator-active-text-weight);
@@ -3477,6 +3480,7 @@
 
 .uniface-tag {
   display: inline-block;
+  cursor: default;
 }
 .uniface-tag > div {
   display: block;
@@ -3507,6 +3511,7 @@
   height: 14px;
   width: 14px;
   border-radius: 50%;
+  cursor: pointer;
   top: 2px;
   right: 1px;
   line-height: 12px;

package/dist/tree-view/TreeNodeView.svelte

@@ -6,7 +6,7 @@
     import type {OnContextMenu} from "../context-menu/ContextMenuItem";
 
     export let node: TreeNode;
-    export let lazyLoader: LazyLoader;
+    export let lazyLoader: LazyLoader | null;
     export let activeNode: any;
     export let isVisible: NodeVisibleFun;
     export let level: number = 1;

package/dist/tree-view/TreeNodeView.svelte.d.ts

@@ -16,7 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const TreeNodeView: $$__sveltets_2_IsomorphicComponent<{
     node: TreeNode;
-    lazyLoader: LazyLoader;
+    lazyLoader: LazyLoader | null;
     activeNode: any;
     isVisible: NodeVisibleFun;
     level?: number;

package/dist/tree-view/TreeView.svelte

@@ -8,7 +8,7 @@
 
     export let nodes: Array<TreeNode>;
     export let style: string = "";
-    export let lazyLoader: LazyLoader;
+    export let lazyLoader: LazyLoader | null = null;
     export let activeNode: any = null;
     export {className as class};
     export let isVisible: NodeVisibleFun = null as unknown as NodeVisibleFun;

package/dist/tree-view/TreeView.svelte.d.ts

@@ -17,7 +17,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const TreeView: $$__sveltets_2_IsomorphicComponent<{
     nodes: Array<TreeNode>;
     style?: string;
-    lazyLoader: LazyLoader;
+    lazyLoader?: LazyLoader | null;
     activeNode?: any;
     class?: string;
     isVisible?: NodeVisibleFun;

package/package.json

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