@ticatec/uniface-element 0.1.22 → 0.1.24
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.
- package/dist/app-layout/ColumnsLayout.svelte +61 -0
- package/dist/app-layout/ColumnsLayout.svelte.d.ts +42 -0
- package/dist/app-layout/RowsLayout.svelte +61 -0
- package/dist/app-layout/RowsLayout.svelte.d.ts +42 -0
- package/dist/number-editor/NumberEditor.svelte +1 -1
- package/dist/split/Split.svelte +1 -1
- package/dist/text-editor/TextEditor.svelte +1 -1
- package/dist/time-editor/TimeEditor.svelte +1 -1
- package/dist/unit-number-editor/UnitNumberEditor.svelte +1 -1
- package/package.json +9 -1
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Split from "../split";
|
|
3
|
+
import {onMount} from "svelte";
|
|
4
|
+
|
|
5
|
+
export let width: string = '100%';
|
|
6
|
+
export let height: string = '100%';
|
|
7
|
+
|
|
8
|
+
export let leftWidth: string | null = null;
|
|
9
|
+
|
|
10
|
+
export let rightWidth: string | null = null;
|
|
11
|
+
|
|
12
|
+
export let leftMin: string | null = null;
|
|
13
|
+
|
|
14
|
+
export let leftMax: string | null = null;
|
|
15
|
+
|
|
16
|
+
export let rightMin: string | null = null;
|
|
17
|
+
|
|
18
|
+
export let rightMax: string | null = null;
|
|
19
|
+
|
|
20
|
+
export let leftResize: boolean = false;
|
|
21
|
+
|
|
22
|
+
export let rightResize: boolean = false;
|
|
23
|
+
|
|
24
|
+
$: colWidth = $$slots.right ? '25%' : '50%'
|
|
25
|
+
|
|
26
|
+
let leftPanel: any;
|
|
27
|
+
let rightPanel: any;
|
|
28
|
+
|
|
29
|
+
const generateStyle = (attr: string, v: string | null): string => {
|
|
30
|
+
return v ? `${attr}: ${v};` : ''
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
let leftStyle: string;
|
|
34
|
+
let rightStyle: string;
|
|
35
|
+
|
|
36
|
+
onMount(()=> {
|
|
37
|
+
leftStyle = `${generateStyle('min-width', leftMin)} ${generateStyle('max-width', leftMax)} ${generateStyle('width', leftWidth ?? colWidth)}`;
|
|
38
|
+
rightStyle = `${generateStyle('min-width', rightMin)} ${generateStyle('max-width', rightMax)} ${generateStyle('width', rightWidth ?? colWidth)}`;
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</script>
|
|
43
|
+
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; width: {width}; height: {height}">
|
|
44
|
+
<div bind:this={leftPanel} style="flex: 0 0 auto; {leftStyle}">
|
|
45
|
+
<slot name="left"></slot>
|
|
46
|
+
</div>
|
|
47
|
+
{#if leftResize}
|
|
48
|
+
<Split bindingPanel={leftPanel}/>
|
|
49
|
+
{/if}
|
|
50
|
+
<div style="flex: 1 1 auto;">
|
|
51
|
+
<slot/>
|
|
52
|
+
</div>
|
|
53
|
+
{#if $$slots.right}
|
|
54
|
+
{#if rightResize}
|
|
55
|
+
<Split bindingPanel={rightPanel} reverse/>
|
|
56
|
+
{/if}
|
|
57
|
+
<div bind:this={rightPanel} style="flex: 0 0 auto; {rightStyle}">
|
|
58
|
+
<slot name="right"/>
|
|
59
|
+
</div>
|
|
60
|
+
{/if}
|
|
61
|
+
</div>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: Props & {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
15
|
+
default: any;
|
|
16
|
+
} ? Props extends Record<string, never> ? any : {
|
|
17
|
+
children?: any;
|
|
18
|
+
} : {});
|
|
19
|
+
declare const ColumnsLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
20
|
+
width?: string;
|
|
21
|
+
height?: string;
|
|
22
|
+
leftWidth?: string | null;
|
|
23
|
+
rightWidth?: string | null;
|
|
24
|
+
leftMin?: string | null;
|
|
25
|
+
leftMax?: string | null;
|
|
26
|
+
rightMin?: string | null;
|
|
27
|
+
rightMax?: string | null;
|
|
28
|
+
leftResize?: boolean;
|
|
29
|
+
rightResize?: boolean;
|
|
30
|
+
}, {
|
|
31
|
+
left: {};
|
|
32
|
+
default: {};
|
|
33
|
+
right: {};
|
|
34
|
+
}>, {
|
|
35
|
+
[evt: string]: CustomEvent<any>;
|
|
36
|
+
}, {
|
|
37
|
+
left: {};
|
|
38
|
+
default: {};
|
|
39
|
+
right: {};
|
|
40
|
+
}, {}, string>;
|
|
41
|
+
type ColumnsLayout = InstanceType<typeof ColumnsLayout>;
|
|
42
|
+
export default ColumnsLayout;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Split from "../split";
|
|
3
|
+
import {onMount} from "svelte";
|
|
4
|
+
|
|
5
|
+
export let width: string = '100%';
|
|
6
|
+
export let height: string = '100%';
|
|
7
|
+
|
|
8
|
+
export let topHeight: string | null = null;
|
|
9
|
+
|
|
10
|
+
export let bottomHeight: string | null = null;
|
|
11
|
+
|
|
12
|
+
export let topMin: string | null = null;
|
|
13
|
+
|
|
14
|
+
export let topMax: string | null = null;
|
|
15
|
+
|
|
16
|
+
export let bottomMin: string | null = null;
|
|
17
|
+
|
|
18
|
+
export let bottomMax: string | null = null;
|
|
19
|
+
|
|
20
|
+
export let topResize: boolean = false;
|
|
21
|
+
|
|
22
|
+
export let bottomResize: boolean = false;
|
|
23
|
+
|
|
24
|
+
$: rowHeight = $$slots.bottom ? '25%' : '50%'
|
|
25
|
+
|
|
26
|
+
let topPanel: any;
|
|
27
|
+
let bottomPanel: any;
|
|
28
|
+
|
|
29
|
+
const generateStyle = (attr: string, v: string | null): string => {
|
|
30
|
+
return v ? `${attr}: ${v};` : ''
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
let topStyle: string = '';
|
|
34
|
+
let bottomStyle: string = '';
|
|
35
|
+
|
|
36
|
+
onMount(() => {
|
|
37
|
+
topStyle = `${generateStyle('min-height', topMin)} ${generateStyle('max-height', topMax)} ${generateStyle('height', topHeight ?? rowHeight)}`;
|
|
38
|
+
bottomStyle = `${generateStyle('min-height', bottomMin)} ${generateStyle('max-height', bottomMax)} ${generateStyle('height', bottomHeight ?? rowHeight)}`;
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</script>
|
|
43
|
+
<div style="display: flex; flex-direction: column; flex-wrap: nowrap; width: {width}; height: {height}">
|
|
44
|
+
<div bind:this={topPanel} style="flex: 0 0 auto; {topStyle}">
|
|
45
|
+
<slot name="top"></slot>
|
|
46
|
+
</div>
|
|
47
|
+
{#if topResize}
|
|
48
|
+
<Split bindingPanel={topPanel} direction="horizontal"/>
|
|
49
|
+
{/if}
|
|
50
|
+
<div style="flex: 1 1 auto;">
|
|
51
|
+
<slot/>
|
|
52
|
+
</div>
|
|
53
|
+
{#if $$slots.bottom}
|
|
54
|
+
{#if bottomResize}
|
|
55
|
+
<Split bindingPanel={bottomPanel} reverse direction="horizontal"/>
|
|
56
|
+
{/if}
|
|
57
|
+
<div bind:this={bottomPanel} style="flex: 0 0 auto; {bottomStyle}">
|
|
58
|
+
<slot name="bottom"/>
|
|
59
|
+
</div>
|
|
60
|
+
{/if}
|
|
61
|
+
</div>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: Props & {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
15
|
+
default: any;
|
|
16
|
+
} ? Props extends Record<string, never> ? any : {
|
|
17
|
+
children?: any;
|
|
18
|
+
} : {});
|
|
19
|
+
declare const RowsLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
|
|
20
|
+
width?: string;
|
|
21
|
+
height?: string;
|
|
22
|
+
topHeight?: string | null;
|
|
23
|
+
bottomHeight?: string | null;
|
|
24
|
+
topMin?: string | null;
|
|
25
|
+
topMax?: string | null;
|
|
26
|
+
bottomMin?: string | null;
|
|
27
|
+
bottomMax?: string | null;
|
|
28
|
+
topResize?: boolean;
|
|
29
|
+
bottomResize?: boolean;
|
|
30
|
+
}, {
|
|
31
|
+
top: {};
|
|
32
|
+
default: {};
|
|
33
|
+
bottom: {};
|
|
34
|
+
}>, {
|
|
35
|
+
[evt: string]: CustomEvent<any>;
|
|
36
|
+
}, {
|
|
37
|
+
top: {};
|
|
38
|
+
default: {};
|
|
39
|
+
bottom: {};
|
|
40
|
+
}, {}, string>;
|
|
41
|
+
type RowsLayout = InstanceType<typeof RowsLayout>;
|
|
42
|
+
export default RowsLayout;
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
</script>
|
|
38
38
|
<CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {variant} {compact} class={className}
|
|
39
|
-
hasLeadingIcon={$$slots['leading-icon']} hasTrailingIcon={$$slots['trailing-icon']}
|
|
39
|
+
hasLeadingIcon={$$slots['leading-icon']!=null} hasTrailingIcon={$$slots['trailing-icon']!=null}
|
|
40
40
|
showActionIcon={removable && !readonly && !disabled && value != null} {clean}>
|
|
41
41
|
<svelte:fragment slot="leading-icon">
|
|
42
42
|
{#if $$slots['leading-icon']}
|
package/dist/split/Split.svelte
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
const calculateHeight = (event: MouseEvent) => {
|
|
31
|
-
reverse ? Math.max(5, bindingPanel.clientHeight - event.movementY) : Math.max(5, bindingPanel.clientHeight + event.movementY)
|
|
31
|
+
return reverse ? Math.max(5, bindingPanel.clientHeight - event.movementY) : Math.max(5, bindingPanel.clientHeight + event.movementY)
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
const calculateWidth = (event: MouseEvent) => {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
|
|
48
48
|
</script>
|
|
49
49
|
<CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {disabled} {variant} {compact}
|
|
50
|
-
hasLeadingIcon={$$slots['leading-icon']} hasTrailingIcon={$$slots['trailing-icon']}
|
|
50
|
+
hasLeadingIcon={$$slots['leading-icon']!=null} hasTrailingIcon={$$slots['trailing-icon']!=null}
|
|
51
51
|
showActionIcon={!readonly && !disabled && removable && value?.length > 0} placeholder={input$['placeholder']}
|
|
52
52
|
class={className} clean={clean}>
|
|
53
53
|
<svelte:fragment slot="leading-icon">
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
|
|
172
172
|
</script>
|
|
173
173
|
<CommonEditor {displayMode} {style} value={toTimeText(value)} {suffix} {prefix} {disabled} {readonly} {variant} {compact} class={className}
|
|
174
|
-
hasLeadingIcon={$$slots['leading-icon']} hasTrailingIcon={$$slots['trailing-icon']}
|
|
174
|
+
hasLeadingIcon={$$slots['leading-icon']!=null} hasTrailingIcon={$$slots['trailing-icon']!=null}
|
|
175
175
|
showActionIcon={textValue!=emptyStr} clean={handleDeleteButton}>
|
|
176
176
|
<svelte:fragment slot="leading-icon">
|
|
177
177
|
{#if $$slots['leading-icon']}
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
<div bind:this={divPanel}>
|
|
100
100
|
<CommonEditor {displayMode} {style} {value} {prefix} suffix={unit?.text??unit?.code} {readonly} {variant} {compact} class={className}
|
|
101
|
-
hasLeadingIcon={$$slots['leading-icon']}
|
|
101
|
+
hasLeadingIcon={$$slots['leading-icon']!=null}
|
|
102
102
|
showActionIcon={removable && !readonly && !disabled && value != null} {clean}>
|
|
103
103
|
<svelte:fragment slot="leading-icon">
|
|
104
104
|
{#if $$slots['leading-icon']}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ticatec/uniface-element",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.24",
|
|
4
4
|
"description": "uniface web elements",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -51,6 +51,14 @@
|
|
|
51
51
|
"types": "./dist/app-layout/ClassicLayout.svelte.d.ts",
|
|
52
52
|
"import": "./dist/app-layout/ClassicLayout.svelte"
|
|
53
53
|
},
|
|
54
|
+
"./app-layout/ColumnsLayout": {
|
|
55
|
+
"types": "./dist/app-layout/ColumnsLayout.svelte.d.ts",
|
|
56
|
+
"import": "./dist/app-layout/ColumnsLayout.svelte"
|
|
57
|
+
},
|
|
58
|
+
"./app-layout/RowsLayout": {
|
|
59
|
+
"types": "./dist/app-layout/RowsLayout.svelte.d.ts",
|
|
60
|
+
"import": "./dist/app-layout/RowsLayout.svelte"
|
|
61
|
+
},
|
|
54
62
|
"./Accordion": {
|
|
55
63
|
"types": "./dist/accordion/index.d.ts",
|
|
56
64
|
"import": "./dist/accordion/index.js"
|