@ticatec/uniface-element 0.3.6 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -44,17 +44,17 @@
44
44
  {#if selectable}
45
45
  <input type="checkbox" bind:checked={selected}/>
46
46
  {/if}
47
+ {#if indicatorColumn.displayNo}
48
+ <div style="margin-left: 4px; flex: 1 1 auto; text-align: center">
49
+ <span>{rowNo}</span>
50
+ </div>
51
+ {/if}
47
52
 
48
53
  {#if expandable}
49
- <div class="expand-icon" style="">
54
+ <div class="expand-icon" style="flex: 0 0 auto">
50
55
  <i class={row == expandRow ? 'icon_google_folder' : "icon_google_folder_open"} aria-hidden="true" on:click={showInlineData}></i>
51
56
  </div>
52
57
  {/if}
53
- {#if indicatorColumn.displayNo}
54
- <div style="margin-left: 4px; width: 20px; text-align: left">
55
- <span>{rowNo}</span>
56
- </div>
57
- {/if}
58
58
  </div>
59
59
  {/if}
60
60
  {#each cols as column, colIdx}
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">
2
2
 
3
- import {DisplayMode} from "../common/DisplayMode";
4
- import type {OnChangeHandler} from "../common/OnChangeHandler";
5
- import {tick} from "svelte";
3
+ import {DisplayMode} from "../types";
4
+ import type {OnChangeHandler} from "../types";
6
5
  import CommonPicker from "../common/CommonPicker.svelte";
7
6
  import loadingGif from "../assets/loading.gif";
8
- import type {LazyLoader} from "../list-box/types";
7
+ import type {LazyLoader} from "../types";
8
+ import type {RetrieveOptionText} from "../types";
9
9
 
10
10
  export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
11
11
  export let disabled: boolean = false;
@@ -14,7 +14,8 @@
14
14
  export let text: string = '';
15
15
  export let value: any = null;
16
16
  export let keyField: string = "code";
17
- export let textField: string = "text";
17
+ export let textField: string | undefined = undefined;
18
+ export let retrieveText: RetrieveOptionText | undefined = undefined;
18
19
  export let displayCode: boolean = false;
19
20
  export let menu$height: number = 0;
20
21
  export let style: string = '';
@@ -150,10 +151,14 @@
150
151
  const handleItemClick = (data: any) => () => {
151
152
  isUserTyping = false;
152
153
  value = data[keyField];
153
- text = data[textField];
154
154
  if (value != oldValue) {
155
155
  onchange?.(data);
156
156
  }
157
+ if (retrieveText) {
158
+ text = retrieveText(data)
159
+ } else if (textField) {
160
+ text = data[textField]
161
+ }
157
162
  editor.focus();
158
163
  showPopup = false;
159
164
  }
@@ -192,15 +197,22 @@
192
197
  };
193
198
 
194
199
  const handleBlur = (event: FocusEvent) => {
195
- if (!showPopup) {
196
- hasFocus = false;
197
- if (value == null) {
198
- text = '';
200
+ setTimeout(() => {
201
+ const focused = scrollElement!=null && scrollElement.contains(document.activeElement);
202
+ if (!focused) {
203
+ hasFocus = false;
204
+ if (value == null) {
205
+ inputText = '';
206
+ }
207
+ onblur?.();
199
208
  }
200
- onblur?.();
201
- }
209
+ }, 50)
202
210
  };
203
211
 
212
+ const getDisplayText = (item: any) => {
213
+ return retrieveText?.(item) ?? item[textField ?? keyField];
214
+ }
215
+
204
216
  const clean = () => {
205
217
  value = null;
206
218
  text = '';
@@ -226,7 +238,7 @@
226
238
  // 如果已选择值,根据焦点状态显示keyField或textField
227
239
  let selectedItem = options.find(op => op[keyField] == value);
228
240
  if (selectedItem) {
229
- inputText = hasFocus && displayCode ? selectedItem[keyField] : selectedItem[textField];
241
+ inputText = hasFocus && displayCode ? selectedItem[keyField] : getDisplayText(selectedItem);
230
242
  } else {
231
243
  inputText = hasFocus && displayCode ? value : text;
232
244
  }
@@ -275,7 +287,7 @@
275
287
  <svelte:component this={itemRender} item={op}/>
276
288
  {:else}
277
289
  <div style="padding: 6px 8px">
278
- <span>{op[textField]}</span>
290
+ <span>{getDisplayText(op)}</span>
279
291
  </div>
280
292
  {/if}
281
293
  </div>
@@ -1,6 +1,7 @@
1
- import { DisplayMode } from "../common/DisplayMode";
2
- import type { OnChangeHandler } from "../common/OnChangeHandler";
3
- import type { LazyLoader } from "../list-box/types";
1
+ import { DisplayMode } from "../types";
2
+ import type { OnChangeHandler } from "../types";
3
+ import type { LazyLoader } from "../types";
4
+ import type { RetrieveOptionText } from "../types";
4
5
  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> {
5
6
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
7
  $$bindings?: Bindings;
@@ -22,7 +23,8 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
22
23
  text?: string;
23
24
  value?: any;
24
25
  keyField?: string;
25
- textField?: string;
26
+ textField?: string | undefined;
27
+ retrieveText?: RetrieveOptionText | undefined;
26
28
  displayCode?: boolean;
27
29
  menu$height?: number;
28
30
  style?: string;
@@ -1,2 +1,4 @@
1
1
  import InputOptionsSelect from "./InputOptionsSelect.svelte";
2
+ import type { RetrieveOptionText } from "./types";
2
3
  export default InputOptionsSelect;
4
+ export type { RetrieveOptionText };
@@ -0,0 +1 @@
1
+ export type {};
@@ -0,0 +1 @@
1
+ export {};
@@ -28,12 +28,11 @@
28
28
  export let onSelectChange: OnSelectChange = null as unknown as OnSelectChange;
29
29
  export let onItemDblClick: OnItemDblClick = null as unknown as OnItemDblClick;
30
30
  export let onItemClick: OnItemClick = null as unknown as OnItemDblClick;
31
-
32
31
  export let title: string = null as unknown as string;
33
32
  export let round: boolean = false;
34
33
  export let footer$style: string | null = null;
34
+ export let filterText: string = '';
35
35
 
36
- let filterText: string;
37
36
  let hasMore: boolean;
38
37
  let isBusy: boolean = false;
39
38
  let pageNo: number = 1;
@@ -146,8 +145,6 @@
146
145
 
147
146
  onMount(async () => {
148
147
  if (lazyLoader != null) {
149
- console.log('加载数据...')
150
- filterText = '';
151
148
  await lazyLoad();
152
149
  }
153
150
  })
@@ -32,6 +32,7 @@ declare const ListBox: $$__sveltets_2_IsomorphicComponent<{
32
32
  title?: string;
33
33
  round?: boolean;
34
34
  footer$style?: string | null;
35
+ filterText?: string;
35
36
  }, {
36
37
  [evt: string]: CustomEvent<any>;
37
38
  }, {
@@ -40,8 +40,9 @@
40
40
  editor.setFocus();
41
41
  }
42
42
 
43
- let textValue: string = utils.formatNumber(value, precision);
43
+ //let textValue: string = utils.formatNumber(value, precision);
44
44
 
45
+ $: textValue = utils.formatNumber(value, precision);
45
46
 
46
47
  </script>
47
48
  <CommonEditor {displayMode} {style} value={textValue} {suffix} {prefix} {readonly} {variant} {compact} class={className}
@@ -3915,7 +3915,6 @@ root {
3915
3915
  color: var(--uniface-hover-item-color, #42A5F5);
3916
3916
  font-size: 14px;
3917
3917
  width: 16px;
3918
- position: absolute;
3919
3918
  right: 4px;
3920
3919
  cursor: pointer;
3921
3920
  }
package/dist/types.d.ts CHANGED
@@ -3,5 +3,11 @@ import type { MouseClickHandler } from "./common/MouseClickHandler";
3
3
  import { DisplayMode } from "./common/DisplayMode.js";
4
4
  import { DateContext } from "./base-calendar";
5
5
  import { ModalResult } from "./message-box";
6
+ import type { LazyLoader } from "./list-box";
7
+ /**
8
+ * 从选中的Option中获取对于的文字值
9
+ */
10
+ type RetrieveOptionText = (item: any) => string;
6
11
  export { DateContext, ModalResult, DisplayMode };
12
+ export type { RetrieveOptionText, LazyLoader };
7
13
  export type { OnChangeHandler, MouseClickHandler };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ticatec/uniface-element",
3
- "version": "0.3.6",
3
+ "version": "0.3.8",
4
4
  "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
5
5
  "keywords": [
6
6
  "svelte",