@dativa-lv/lx-builders 2.1.11 → 2.2.2
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/README.md +74 -1
- package/dist/src/components/FilterBuilder.vue.d.ts +4 -6
- package/dist/src/components/constructor/Constructor.vue.d.ts +2 -0
- package/dist/src/components/constructor/ConstructorPropRenderer.vue.d.ts +2 -0
- package/dist/src/components/constructor/Panel.vue.d.ts +12 -1
- package/dist/styles/lx-constructor.css +1 -1
- package/dist/wntr-lx-ui.esm.js +3314 -3203
- package/dist/wntr-lx-ui.umd.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,76 @@
|
|
|
1
|
+
<h1 align="center">lx/builders</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
Declarative <strong>Vue.js 3</strong> tools that transform schemas and configuration into consistent, production-ready user interfaces <a href="https://github.com/dativa-lv/lx-ui">powered by <strong>LX/UI</strong></a>.
|
|
5
|
+
</p>
|
|
6
|
+
<p align="center">
|
|
7
|
+
JSON Schema in. LX/UI view out.
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
<p align="center">
|
|
11
|
+
<img alt="NPM Downloads" src="https://img.shields.io/npm/dw/%40dativa-lv%2Flx-builders?color=green" />
|
|
12
|
+
<img alt="NPM Version" src="https://img.shields.io/npm/v/%40dativa-lv%2Flx-builders?color=green" />
|
|
13
|
+
<img alt="NPM License" src="https://img.shields.io/npm/l/%40dativa-lv%2Flx-builders?color=white" />
|
|
14
|
+
<a href="https://github.com/dativa-lv/lx-ui"><img alt="Powered by LX/UI" src="https://img.shields.io/badge/powered%20by-lx%2Fui-0960BC"/></a>
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<p align="center">
|
|
18
|
+
<img src="https://img.shields.io/github/package-json/dependency-version/dativa-lv/lx-builders/peer/@dativa-lv/lx-ui" alt="LX/UI Version" />
|
|
19
|
+
<img src="https://img.shields.io/github/package-json/dependency-version/dativa-lv/lx-ui/peer/vue" alt="Vue.js Version" />
|
|
20
|
+
<img src="https://img.shields.io/github/package-json/dependency-version/dativa-lv/lx-ui/dev/vite" alt="Vite Version" />
|
|
21
|
+
<img src="https://img.shields.io/github/package-json/packageManager/dativa-lv/lx-builders?label=package%20manager" alt="Package Manager" />
|
|
22
|
+
</p>
|
|
23
|
+
|
|
1
24
|
|
|
2
25
|
|
|
3
|
-
|
|
26
|
+
## Play around
|
|
27
|
+
|
|
28
|
+
Check out our [🌐 Form Builder Demo](https://lx-ui.dev/resources/forms/builder) or try the <a href="https://lx-ui.dev/resources/constructor-dashboard">🛠️ LxConstructor<sup>(beta)</sup></a> live.
|
|
29
|
+
|
|
30
|
+
## Design with
|
|
31
|
+
- <a href="https://json-schema.org">🌐 JSON Schema</a>
|
|
32
|
+
- <a href="/docs/Constructor.md">ℹ️ LxConstructor<sup>(beta)</sup></a>
|
|
33
|
+
|
|
34
|
+
## Render with
|
|
35
|
+
- <a href="/docs/ViewBuilder.md">ℹ️ LxViewBuilder</a>
|
|
36
|
+
- <a href="/docs/FormBuilder.md">ℹ️ LxFormBuilder</a>
|
|
37
|
+
- ℹ️ LxFilterBuilder
|
|
38
|
+
|
|
39
|
+
## Get
|
|
40
|
+
|
|
41
|
+
Get using bun:
|
|
42
|
+
```bash
|
|
43
|
+
bun add '@dativa-lv/lx-builders@latest'
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Get using pnpm:
|
|
47
|
+
```bash
|
|
48
|
+
pnpm i '@dativa-lv/lx-builders@latest'
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
For migration tips refer to [ℹ️ Migration Guide](https://github.com/dativa-lv/lx-builders/blob/main/MIGRATION.md)
|
|
52
|
+
|
|
53
|
+
## Use
|
|
54
|
+
|
|
55
|
+
Use together with lx/ui library:
|
|
56
|
+
```js
|
|
57
|
+
import { createPinia } from 'pinia';
|
|
58
|
+
import { createLx } from '@dativa-lv/lx-ui';
|
|
59
|
+
import { createLxBuilders } from '@dativa-lv/lx-builders';
|
|
60
|
+
import App from '@/App.vue';
|
|
61
|
+
…
|
|
62
|
+
const myApp = createApp(App);
|
|
63
|
+
myApp.use(createPinia());
|
|
64
|
+
myApp.use(createLx());
|
|
65
|
+
myApp.use(createLxBuilders());
|
|
66
|
+
…
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Develop
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
pnpm i
|
|
73
|
+
pnpm build
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Read more about development in [ℹ️ Development manual](https://github.com/dativa-lv/lx-builders/blob/main/DEVELOPMENT.md)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle,
|
|
1
|
+
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Attrs, Slot, ComponentPublicInstance, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ComponentCustomProperties, ShallowUnwrapRef, CreateComponentPublicInstanceWithMixins } from 'vue';
|
|
2
2
|
import { OnCleanup } from '@vue/reactivity';
|
|
3
3
|
declare const _default: DefineComponent<{}, {
|
|
4
4
|
validateModel: typeof validateModel;
|
|
@@ -22,9 +22,7 @@ declare const _default: DefineComponent<{}, {
|
|
|
22
22
|
$: ComponentInternalInstance;
|
|
23
23
|
$data: {};
|
|
24
24
|
$props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
|
|
25
|
-
$attrs:
|
|
26
|
-
[x: string]: unknown;
|
|
27
|
-
};
|
|
25
|
+
$attrs: Attrs;
|
|
28
26
|
$refs: {
|
|
29
27
|
[x: string]: unknown;
|
|
30
28
|
} & {
|
|
@@ -111,7 +109,7 @@ declare const _default: DefineComponent<{}, {
|
|
|
111
109
|
$forceUpdate: () => void;
|
|
112
110
|
$nextTick: nextTick;
|
|
113
111
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
|
|
114
|
-
} & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "focus" | "invalid" | "$props" | "$emit" | "label" | "iconSet" | "variant" | "customClass" | "texts" | "id" | "modelValue" | "kind" | "description" | "icon" | "tooltip" | "disabled" | "ariaLabel" | "badge" | "badgeIcon" | "badgeType" | "badgeTitle" | "invalidationMessage" | "region" | "renderMode" | "hasShortlistReset" | "hasSelectButton" | "selectStatus"> &
|
|
112
|
+
} & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "focus" | "invalid" | "$props" | "$emit" | "label" | "iconSet" | "variant" | "customClass" | "texts" | "id" | "modelValue" | "kind" | "description" | "icon" | "tooltip" | "disabled" | "ariaLabel" | "badge" | "badgeIcon" | "badgeType" | "badgeTitle" | "invalidationMessage" | "region" | "renderMode" | "hasShortlistReset" | "hasSelectButton" | "selectStatus"> & {
|
|
115
113
|
focus: () => void;
|
|
116
114
|
$emit: (event: "update:modelValue" | "selectAll" | "resetFilters", ...args: any[]) => void;
|
|
117
115
|
invalid: boolean;
|
|
@@ -164,7 +162,7 @@ declare const _default: DefineComponent<{}, {
|
|
|
164
162
|
readonly badgeTitle?: string;
|
|
165
163
|
readonly invalidationMessage?: string;
|
|
166
164
|
};
|
|
167
|
-
}
|
|
165
|
+
} & {} & ComponentCustomProperties & {} & {
|
|
168
166
|
$slots: {
|
|
169
167
|
customHeader?(_: {
|
|
170
168
|
invalid: boolean;
|
|
@@ -17,6 +17,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
17
17
|
error: (...args: any[]) => void;
|
|
18
18
|
"update:modelValue": (...args: any[]) => void;
|
|
19
19
|
"update:schema": (...args: any[]) => void;
|
|
20
|
+
schemaCopy: (...args: any[]) => void;
|
|
20
21
|
}, string, PublicProps, Readonly< ExtractPropTypes<{
|
|
21
22
|
schema: {
|
|
22
23
|
type: ObjectConstructor;
|
|
@@ -34,6 +35,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
34
35
|
onError?: (...args: any[]) => any;
|
|
35
36
|
"onUpdate:modelValue"?: (...args: any[]) => any;
|
|
36
37
|
"onUpdate:schema"?: (...args: any[]) => any;
|
|
38
|
+
onSchemaCopy?: (...args: any[]) => any;
|
|
37
39
|
}>, {
|
|
38
40
|
modelValue: Record<string, any>;
|
|
39
41
|
texts: Record<string, any>;
|
|
@@ -5,6 +5,7 @@ declare const _default: DefineComponent<{}, {
|
|
|
5
5
|
texts: Record<string, any>;
|
|
6
6
|
componentPropsDefinitions: Record<string, any>;
|
|
7
7
|
componentModel: Record<string, any>;
|
|
8
|
+
navigation: unknown[];
|
|
8
9
|
schemaKey: string;
|
|
9
10
|
componentName?: string;
|
|
10
11
|
searchString?: string;
|
|
@@ -14,6 +15,7 @@ declare const _default: DefineComponent<{}, {
|
|
|
14
15
|
readonly texts?: Record<string, any>;
|
|
15
16
|
readonly componentPropsDefinitions?: Record<string, any>;
|
|
16
17
|
readonly componentModel?: Record<string, any>;
|
|
18
|
+
readonly navigation?: unknown[];
|
|
17
19
|
readonly schemaKey?: string;
|
|
18
20
|
readonly componentName?: string;
|
|
19
21
|
readonly searchString?: string;
|
|
@@ -32,6 +32,10 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
32
32
|
type: ObjectConstructor;
|
|
33
33
|
default: any;
|
|
34
34
|
};
|
|
35
|
+
selectedTab: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
default: any;
|
|
38
|
+
};
|
|
35
39
|
texts: {
|
|
36
40
|
type: ObjectConstructor;
|
|
37
41
|
default: () => {};
|
|
@@ -51,6 +55,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
51
55
|
duplicateComponent: (...args: any[]) => void;
|
|
52
56
|
"update:componentProps": (...args: any[]) => void;
|
|
53
57
|
"update:viewLayout": (...args: any[]) => void;
|
|
58
|
+
"update:selectedTab": (...args: any[]) => void;
|
|
54
59
|
}, string, PublicProps, Readonly< ExtractPropTypes<{
|
|
55
60
|
componentName: {
|
|
56
61
|
type: StringConstructor;
|
|
@@ -84,6 +89,10 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
84
89
|
type: ObjectConstructor;
|
|
85
90
|
default: any;
|
|
86
91
|
};
|
|
92
|
+
selectedTab: {
|
|
93
|
+
type: StringConstructor;
|
|
94
|
+
default: any;
|
|
95
|
+
};
|
|
87
96
|
texts: {
|
|
88
97
|
type: ObjectConstructor;
|
|
89
98
|
default: () => {};
|
|
@@ -103,15 +112,17 @@ declare const _default: DefineComponent<ExtractPropTypes<{
|
|
|
103
112
|
onDuplicateComponent?: (...args: any[]) => any;
|
|
104
113
|
"onUpdate:componentProps"?: (...args: any[]) => any;
|
|
105
114
|
"onUpdate:viewLayout"?: (...args: any[]) => any;
|
|
115
|
+
"onUpdate:selectedTab"?: (...args: any[]) => any;
|
|
106
116
|
}>, {
|
|
107
117
|
texts: Record<string, any>;
|
|
108
118
|
componentName: string;
|
|
109
119
|
componentPropsDefinitions: Record<string, any>;
|
|
110
120
|
componentModel: Record<string, any>;
|
|
121
|
+
navigation: unknown[];
|
|
111
122
|
schemaKey: string;
|
|
112
123
|
schemaKeyError: string;
|
|
113
124
|
componentProps: Record<string, any>;
|
|
114
|
-
navigation: unknown[];
|
|
115
125
|
schemaInfo: Record<string, any>;
|
|
126
|
+
selectedTab: string;
|
|
116
127
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
117
128
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.lx-panel>.panel-side{background-color:var(--color-region);width:var(--aside-size)}.lx-panel>.panel-side .config-header{height:var(--row-size);background-color:var(--color-layout-background);padding:0 .5rem}.lx-panel>.panel-side .config-header>.lx-context-container .popper-wrapper{width:100%}.lx-panel>.panel-side .config-header .header-wrapper{height:var(--row-size);width:100%;display:flex;align-items:center;justify-content:space-between;gap:.25rem}.lx-panel>.panel-side .config-header .header-wrapper>p{color:var(--color-nav-foreground);font-weight:var(--font-weight-bold)}.lx-panel>.panel-side .config-header .header-wrapper>svg{height:1.5rem;fill:var(--color-nav-foreground)}.lx-panel>.panel-side .panel-main>.button-group{display:grid;grid-template-columns:1fr 1fr;border:
|
|
1
|
+
.lx-panel>.panel-side{background-color:var(--color-region);width:var(--aside-size)}.lx-panel>.panel-side .config-header{height:var(--row-size);background-color:var(--color-layout-background);padding:0 .5rem}.lx-panel>.panel-side .config-header>.lx-context-container .popper-wrapper{width:100%}.lx-panel>.panel-side .config-header .header-wrapper{height:var(--row-size);width:100%;display:flex;align-items:center;justify-content:space-between;gap:.25rem}.lx-panel>.panel-side .config-header .header-wrapper>p{color:var(--color-nav-foreground);font-weight:var(--font-weight-bold)}.lx-panel>.panel-side .config-header .header-wrapper>svg{height:1.5rem;fill:var(--color-nav-foreground)}.lx-panel>.panel-side .config-header .lx-dropdown-toggler .header-wrapper:has(p){cursor:pointer}.lx-panel>.panel-side .panel-main>.button-group{display:grid;grid-template-columns:1fr 1fr;border:var(--border-width-1) solid var(--color-chrome);border-right:none}.lx-panel>.panel-side .settings-wrapper{padding:var(--space-0750);display:flex;flex-direction:column;gap:var(--space-0750)}.lx-panel>.panel-side .panel-main>.button-group>.lx-button{--color-button-secondary-background: var(--color-region-2);--color-button-secondary-text: var(--color-data);--color-button-secondary-icon: var(--color-data);--button-secondary-border: var(--border-width-2) solid transparent}.lx-panel>.panel-side .button-group>.lx-button:first-child:after{position:absolute;content:" ";height:2rem;right:0;border-right:var(--border-width-1) solid var(--color-chrome);opacity:1;transition:opacity .1s ease-out;z-index:1}.lx-panel>.panel-side .button-group>.lx-button:first-child:hover:not(.lx-disabled):after{opacity:0}.lx-panel{position:fixed;top:calc(var(--nav-row-size) + 10vh);z-index:1000;right:0;display:flex;flex-direction:row-reverse}#constructor-overlay{position:absolute;top:0;left:0;width:100%;height:100dvh;z-index:100;pointer-events:none}.highlight{position:absolute;box-sizing:border-box;border:var(--border-width-2) solid var(--color-blue);background:transparent;z-index:100;pointer-events:none;transition:left .1s ease-out,top .1s ease-out}.highlight .highlight-toolbar{position:absolute;top:-1.5rem;left:-.125rem;display:flex;background:var(--color-blue);pointer-events:all;height:1.5rem}.highlight .highlight-toolbar>span{padding-inline:var(--space-0250);color:#fff}.highlight .highlight-toolbar .lx-button{--button-ghost-icon-only-height: 1.5rem;--button-ghost-icon-only-width: 1.5rem;--button-ghost-icon-only-min-width: 1.5rem;--color-button-ghost-icon: white;--color-button-ghost-icon-focus: white;--button-ghost-icon-size: 1.25rem}.lx:not(.lx-theme-contrast) .lx-panel .panel-side{--region-border-transparent: var(--border-width-1) solid var(--color-chrome)}.lx.lx-no-transparency .lx-panel .panel-side{--shadow-dropdown: inset 0 0 0 var(--border-width-1) var(--color-chrome)}.lx-panel .panel-side{box-shadow:var(--shadow-dropdown)}.lx-panel .panel-main{max-height:70vh;max-width:var(--aside-size);overflow-y:overlay}.lx-panel .panel-main .lx-form-grid .lx-main.lx-compact-sections>.lx-form-section{padding-left:calc(var(--gap-form) / 4);padding-right:calc(var(--gap-form) / 4)}.no-component-wrapper{padding:var(--space-0250)}.no-component-wrapper>.lx-empty-state-wrapper{width:100%}.panel-main .lx-form-grid>.lx-main .lx-row{max-width:calc(var(--aside-size) - 2rem)}.code-display>.code{white-space:pre;font-family:var(--font-family-mono);padding:var(--space-2000);grid-column:1 / 3;overflow:auto;background-color:var(--color-region-2);margin:0}.import-switcher{padding-bottom:var(--space-1000)}.highlight .highlight-toolbar-remove{right:-.125rem;left:unset}.custom-auto-complete-item-with-icon{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;width:100%;height:1.5rem;align-items:center}.custom-auto-complete-item-with-icon p.lx-data{font-weight:400;min-height:0;align-self:center;padding:0;margin:0}.custom-auto-complete-item-with-icon svg{width:1.5rem;height:1.5rem}.component-add-text{margin-bottom:var(--space-1000)}.lx-panel>.panel-side .config-header.has-selected-element{background-color:var(--color-blue);cursor:pointer}.lx-panel>.panel-side .config-header.has-selected-element:hover{background-color:var(--color-interactive-hover-background)}.lx-panel>.button-side>.lx-button{--color-button-secondary-background: var(--color-nav-background);--color-button-secondary-background-hover: var(--color-interactive-hover-background);--color-button-active-mode-background: var(--color-nav-item-background-selected);--color-button-secondary-icon: var(--color-nav-foreground);--color-button-active-mode-icon: var(--color-nav-item-icon-selected);--button-secondary-border: var(--button-secondary-border-width) solid transparent}.lx-panel>.panel-side .prop-search{border-left:var(--border-width-1) solid var(--color-chrome)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper p{color:var(--color-focus-foreground)}.lx-panel>.panel-side .config-header.has-selected-element .header-wrapper svg{fill:var(--color-focus-foreground)}
|