fluid-primitives 0.19.1 → 1.0.0-beta.1
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 +9 -0
- package/dist/Client-HrMIqv7d.js +1934 -0
- package/dist/accordion.d.ts +2 -2
- package/dist/accordion.js +25 -29
- package/dist/button.d.ts +52 -0
- package/dist/button.js +135 -0
- package/dist/checkbox-group.d.ts +6 -5
- package/dist/checkbox-group.js +36 -20
- package/dist/{checkbox-group.registry-CGwuF7SF.js → checkbox-group.registry-D8P8A4LY.js} +13 -8
- package/dist/checkbox.d.ts +18 -4
- package/dist/checkbox.js +30 -27
- package/dist/client.d.ts +2 -2
- package/dist/client.js +2 -2
- package/dist/clipboard.d.ts +12 -5
- package/dist/clipboard.js +14 -16
- package/dist/collapsible.d.ts +3 -3
- package/dist/collapsible.js +13 -17
- package/dist/combobox.d.ts +37 -0
- package/dist/combobox.js +151 -0
- package/dist/date-picker.d.ts +67 -0
- package/dist/date-picker.js +289 -0
- package/dist/dialog.d.ts +3 -3
- package/dist/dialog.js +11 -12
- package/dist/field-array.d.ts +97 -0
- package/dist/field-array.js +223 -0
- package/dist/field.d.ts +30 -54
- package/dist/field.js +589 -175
- package/dist/fieldset.d.ts +15 -0
- package/dist/fieldset.js +27 -0
- package/dist/file-upload.d.ts +85 -0
- package/dist/file-upload.js +255 -0
- package/dist/form.d.ts +2 -83
- package/dist/form.fields-B58TZukv.js +329 -0
- package/dist/form.js +263 -276
- package/dist/index-B06gIN_k.d.ts +1358 -0
- package/dist/input.d.ts +96 -0
- package/dist/input.js +233 -0
- package/dist/menu.d.ts +55 -0
- package/dist/menu.js +144 -0
- package/dist/navigation-menu.d.ts +3 -3
- package/dist/navigation-menu.js +29 -43
- package/dist/number-input.d.ts +13 -4
- package/dist/number-input.js +30 -31
- package/dist/popover.d.ts +11 -3
- package/dist/popover.js +17 -18
- package/dist/radio-group.d.ts +4 -4
- package/dist/radio-group.js +35 -42
- package/dist/scroll-area.d.ts +3 -3
- package/dist/scroll-area.js +10 -9
- package/dist/select.d.ts +13 -51
- package/dist/select.js +62 -55
- package/dist/slider.d.ts +27 -0
- package/dist/slider.js +71 -0
- package/dist/switch.d.ts +4 -4
- package/dist/switch.js +24 -33
- package/dist/tabs.d.ts +3 -3
- package/dist/tabs.js +12 -15
- package/dist/textarea.d.ts +101 -0
- package/dist/textarea.js +231 -0
- package/dist/tooltip.d.ts +11 -3
- package/dist/tooltip.js +11 -10
- package/package.json +79 -24
- package/dist/Client-C51NSHxg.js +0 -248
- package/dist/field.dom-CJQXpQbZ.js +0 -11
- package/dist/form.registry-Cb8Pvoe8.d.ts +0 -7
- package/dist/form.registry-CmpTny_s.js +0 -51
- package/dist/index-B8JCdyld.d.ts +0 -118
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fluid-primitives",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
4
|
"description": "Client-side library for Fluid Primitives.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,6 +23,10 @@
|
|
|
23
23
|
"import": "./dist/accordion.js",
|
|
24
24
|
"types": "./dist/accordion.d.ts"
|
|
25
25
|
},
|
|
26
|
+
"./button": {
|
|
27
|
+
"import": "./dist/button.js",
|
|
28
|
+
"types": "./dist/button.d.ts"
|
|
29
|
+
},
|
|
26
30
|
"./checkbox": {
|
|
27
31
|
"import": "./dist/checkbox.js",
|
|
28
32
|
"types": "./dist/checkbox.d.ts"
|
|
@@ -39,18 +43,46 @@
|
|
|
39
43
|
"import": "./dist/clipboard.js",
|
|
40
44
|
"types": "./dist/clipboard.d.ts"
|
|
41
45
|
},
|
|
46
|
+
"./combobox": {
|
|
47
|
+
"import": "./dist/combobox.js",
|
|
48
|
+
"types": "./dist/combobox.d.ts"
|
|
49
|
+
},
|
|
42
50
|
"./collapsible": {
|
|
43
51
|
"import": "./dist/collapsible.js",
|
|
44
52
|
"types": "./dist/collapsible.d.ts"
|
|
45
53
|
},
|
|
54
|
+
"./date-picker": {
|
|
55
|
+
"import": "./dist/date-picker.js",
|
|
56
|
+
"types": "./dist/date-picker.d.ts"
|
|
57
|
+
},
|
|
46
58
|
"./field": {
|
|
47
59
|
"import": "./dist/field.js",
|
|
48
60
|
"types": "./dist/field.d.ts"
|
|
49
61
|
},
|
|
62
|
+
"./field-array": {
|
|
63
|
+
"import": "./dist/field-array.js",
|
|
64
|
+
"types": "./dist/field-array.d.ts"
|
|
65
|
+
},
|
|
66
|
+
"./fieldset": {
|
|
67
|
+
"import": "./dist/fieldset.js",
|
|
68
|
+
"types": "./dist/fieldset.d.ts"
|
|
69
|
+
},
|
|
70
|
+
"./file-upload": {
|
|
71
|
+
"import": "./dist/file-upload.js",
|
|
72
|
+
"types": "./dist/file-upload.d.ts"
|
|
73
|
+
},
|
|
50
74
|
"./form": {
|
|
51
75
|
"import": "./dist/form.js",
|
|
52
76
|
"types": "./dist/form.d.ts"
|
|
53
77
|
},
|
|
78
|
+
"./textarea": {
|
|
79
|
+
"import": "./dist/textarea.js",
|
|
80
|
+
"types": "./dist/textarea.d.ts"
|
|
81
|
+
},
|
|
82
|
+
"./input": {
|
|
83
|
+
"import": "./dist/input.js",
|
|
84
|
+
"types": "./dist/input.d.ts"
|
|
85
|
+
},
|
|
54
86
|
"./popover": {
|
|
55
87
|
"import": "./dist/popover.js",
|
|
56
88
|
"types": "./dist/popover.d.ts"
|
|
@@ -67,6 +99,10 @@
|
|
|
67
99
|
"import": "./dist/select.js",
|
|
68
100
|
"types": "./dist/select.d.ts"
|
|
69
101
|
},
|
|
102
|
+
"./slider": {
|
|
103
|
+
"import": "./dist/slider.js",
|
|
104
|
+
"types": "./dist/slider.d.ts"
|
|
105
|
+
},
|
|
70
106
|
"./switch": {
|
|
71
107
|
"import": "./dist/switch.js",
|
|
72
108
|
"types": "./dist/switch.d.ts"
|
|
@@ -86,13 +122,19 @@
|
|
|
86
122
|
"./navigation-menu": {
|
|
87
123
|
"import": "./dist/navigation-menu.js",
|
|
88
124
|
"types": "./dist/navigation-menu.d.ts"
|
|
125
|
+
},
|
|
126
|
+
"./menu": {
|
|
127
|
+
"import": "./dist/menu.js",
|
|
128
|
+
"types": "./dist/menu.d.ts"
|
|
89
129
|
}
|
|
90
130
|
},
|
|
91
131
|
"scripts": {
|
|
92
132
|
"build": "tsdown",
|
|
93
133
|
"dev": "tsdown --watch",
|
|
94
134
|
"version": "node scripts/version.js",
|
|
95
|
-
"bump-zag": "node scripts/bump-zag.js"
|
|
135
|
+
"bump-zag": "node scripts/bump-zag.js",
|
|
136
|
+
"test": "vitest run",
|
|
137
|
+
"types": "tsc --noEmit -p tsconfig.check.json"
|
|
96
138
|
},
|
|
97
139
|
"peerDependencies": {
|
|
98
140
|
"zod": "^4.0.0"
|
|
@@ -104,33 +146,46 @@
|
|
|
104
146
|
},
|
|
105
147
|
"devDependencies": {
|
|
106
148
|
"@types/node": "^22.15.17",
|
|
149
|
+
"jsdom": "^30.1.2",
|
|
107
150
|
"tsdown": "^0.21.7",
|
|
108
151
|
"typescript": "^5.8.3",
|
|
109
152
|
"valibot": "^1.1.0",
|
|
153
|
+
"vitest": "^5.0.3",
|
|
110
154
|
"zod": "^4.3.6"
|
|
111
155
|
},
|
|
112
156
|
"dependencies": {
|
|
113
|
-
"@
|
|
114
|
-
"@zag-js/
|
|
115
|
-
"@zag-js/
|
|
116
|
-
"@zag-js/
|
|
117
|
-
"@zag-js/
|
|
118
|
-
"@zag-js/
|
|
119
|
-
"@zag-js/
|
|
120
|
-
"@zag-js/
|
|
121
|
-
"@zag-js/
|
|
122
|
-
"@zag-js/
|
|
123
|
-
"@zag-js/
|
|
124
|
-
"@zag-js/
|
|
125
|
-
"@zag-js/
|
|
126
|
-
"@zag-js/
|
|
127
|
-
"@zag-js/
|
|
128
|
-
"@zag-js/
|
|
129
|
-
"@zag-js/
|
|
130
|
-
"@zag-js/
|
|
131
|
-
"@zag-js/
|
|
132
|
-
"@zag-js/
|
|
133
|
-
"@zag-js/
|
|
134
|
-
"@zag-js/
|
|
157
|
+
"@internationalized/date": "^3.12.4",
|
|
158
|
+
"@zag-js/accordion": "^2.0.0-next.3",
|
|
159
|
+
"@zag-js/anatomy": "^2.0.0-next.3",
|
|
160
|
+
"@zag-js/async-list": "^2.0.0-next.3",
|
|
161
|
+
"@zag-js/checkbox": "^2.0.0-next.3",
|
|
162
|
+
"@zag-js/clipboard": "^2.0.0-next.3",
|
|
163
|
+
"@zag-js/collapsible": "^2.0.0-next.3",
|
|
164
|
+
"@zag-js/collection": "^2.0.0-next.3",
|
|
165
|
+
"@zag-js/combobox": "^2.0.0-next.3",
|
|
166
|
+
"@zag-js/core": "^2.0.0-next.3",
|
|
167
|
+
"@zag-js/date-picker": "^2.0.0-next.3",
|
|
168
|
+
"@zag-js/dialog": "^2.0.0-next.3",
|
|
169
|
+
"@zag-js/dom-query": "^2.0.0-next.3",
|
|
170
|
+
"@zag-js/fieldset": "^2.0.0-next.3",
|
|
171
|
+
"@zag-js/file-upload": "^2.0.0-next.3",
|
|
172
|
+
"@zag-js/file-utils": "^2.0.0-next.3",
|
|
173
|
+
"@zag-js/i18n-utils": "^2.0.0-next.3",
|
|
174
|
+
"@zag-js/live-region": "^2.0.0-next.3",
|
|
175
|
+
"@zag-js/menu": "^2.0.0-next.3",
|
|
176
|
+
"@zag-js/navigation-menu": "^2.0.0-next.3",
|
|
177
|
+
"@zag-js/number-input": "^2.0.0-next.3",
|
|
178
|
+
"@zag-js/popover": "^2.0.0-next.3",
|
|
179
|
+
"@zag-js/radio-group": "^2.0.0-next.3",
|
|
180
|
+
"@zag-js/scroll-area": "^2.0.0-next.3",
|
|
181
|
+
"@zag-js/select": "^2.0.0-next.3",
|
|
182
|
+
"@zag-js/slider": "^2.0.0-next.3",
|
|
183
|
+
"@zag-js/store": "^2.0.0-next.3",
|
|
184
|
+
"@zag-js/switch": "^2.0.0-next.3",
|
|
185
|
+
"@zag-js/tabs": "^2.0.0-next.3",
|
|
186
|
+
"@zag-js/tooltip": "^2.0.0-next.3",
|
|
187
|
+
"@zag-js/types": "^2.0.0-next.3",
|
|
188
|
+
"@zag-js/utils": "^2.0.0-next.3",
|
|
189
|
+
"@zag-js/vanilla": "^2.0.0-next.3"
|
|
135
190
|
}
|
|
136
191
|
}
|
package/dist/Client-C51NSHxg.js
DELETED
|
@@ -1,248 +0,0 @@
|
|
|
1
|
-
import { ListCollection } from "@zag-js/collection";
|
|
2
|
-
import { VanillaMachine, VanillaMachine as Machine, mergeProps, normalizeProps, spreadProps } from "@zag-js/vanilla";
|
|
3
|
-
import { uuid } from "@zag-js/utils";
|
|
4
|
-
|
|
5
|
-
//#region Resources/Private/Client/src/lib/component.ts
|
|
6
|
-
var Component = class {
|
|
7
|
-
document;
|
|
8
|
-
machine;
|
|
9
|
-
api;
|
|
10
|
-
hydrator = null;
|
|
11
|
-
userProps;
|
|
12
|
-
static name;
|
|
13
|
-
get doc() {
|
|
14
|
-
return this.document;
|
|
15
|
-
}
|
|
16
|
-
constructor(props, userDocument = document) {
|
|
17
|
-
this.document = userDocument;
|
|
18
|
-
this.userProps = this.transformProps(props);
|
|
19
|
-
this.hydrator = this.initHydrator(props);
|
|
20
|
-
this.machine = this.initMachine(props);
|
|
21
|
-
this.api = this.initApi();
|
|
22
|
-
}
|
|
23
|
-
initHydrator(props) {
|
|
24
|
-
const id = props.id;
|
|
25
|
-
if (!id) throw new Error("ComponentHydrator requires an id prop to initialize.");
|
|
26
|
-
return new ComponentHydrator(this.getName(), id, props.ids, this.doc);
|
|
27
|
-
}
|
|
28
|
-
init() {
|
|
29
|
-
this.render();
|
|
30
|
-
this.machine.subscribe(() => {
|
|
31
|
-
this.api = this.initApi();
|
|
32
|
-
this.render();
|
|
33
|
-
});
|
|
34
|
-
this.machine.start();
|
|
35
|
-
}
|
|
36
|
-
getName() {
|
|
37
|
-
return this.constructor.name;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Override in consumer for example when a getter is used for collection
|
|
41
|
-
* Needs to be used manually inside the initMachine method
|
|
42
|
-
*/
|
|
43
|
-
transformProps(props) {
|
|
44
|
-
return props;
|
|
45
|
-
}
|
|
46
|
-
updateProps(newProps) {
|
|
47
|
-
this.machine.updateProps(newProps);
|
|
48
|
-
}
|
|
49
|
-
destroy() {
|
|
50
|
-
this.machine.stop();
|
|
51
|
-
this.hydrator?.destroy();
|
|
52
|
-
}
|
|
53
|
-
spreadProps(node, attrs) {
|
|
54
|
-
spreadProps(node, attrs, this.machine.scope.id);
|
|
55
|
-
}
|
|
56
|
-
getElement(part, parent) {
|
|
57
|
-
return this.hydrator?.getElement(part, parent) || null;
|
|
58
|
-
}
|
|
59
|
-
getElements(part, parent) {
|
|
60
|
-
return this.hydrator?.getElements(part, parent) || [];
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
//#endregion
|
|
65
|
-
//#region Resources/Private/Primitives/Field/src/field.registry.ts
|
|
66
|
-
const registry = /* @__PURE__ */ new WeakMap();
|
|
67
|
-
function registerFieldMachine(field, service) {
|
|
68
|
-
if (!field) return;
|
|
69
|
-
registry.set(field, service);
|
|
70
|
-
field.dispatchEvent(new CustomEvent("fluid-primitives:field:registered", { bubbles: true }));
|
|
71
|
-
}
|
|
72
|
-
function getFieldMachineFor(el) {
|
|
73
|
-
if (!el) return;
|
|
74
|
-
return registry.get(el);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
//#endregion
|
|
78
|
-
//#region Resources/Private/Client/src/lib/field-aware-component.ts
|
|
79
|
-
const fieldProps = [
|
|
80
|
-
"invalid",
|
|
81
|
-
"disabled",
|
|
82
|
-
"readOnly",
|
|
83
|
-
"required"
|
|
84
|
-
];
|
|
85
|
-
const fieldAccessors = {
|
|
86
|
-
disabled: (s) => s.context.get("disabled"),
|
|
87
|
-
readOnly: (s) => s.context.get("readOnly"),
|
|
88
|
-
required: (s) => s.context.get("required"),
|
|
89
|
-
invalid: (s) => s.context.get("invalid")
|
|
90
|
-
};
|
|
91
|
-
var FieldAwareComponent = class extends Component {
|
|
92
|
-
subscribedToField = false;
|
|
93
|
-
fieldMachine;
|
|
94
|
-
closestField = null;
|
|
95
|
-
getClosestField() {
|
|
96
|
-
return this.closestField || this.getElement("root")?.closest("[data-scope=\"field\"][data-part=\"root\"]") || null;
|
|
97
|
-
}
|
|
98
|
-
withFieldProps(props) {
|
|
99
|
-
this.closestField = this.getClosestField();
|
|
100
|
-
if (!this.closestField) return props;
|
|
101
|
-
this.fieldMachine = getFieldMachineFor(this.closestField);
|
|
102
|
-
if (this.fieldMachine) return this.propsWithField(props, this.fieldMachine);
|
|
103
|
-
else {
|
|
104
|
-
const handler = () => {
|
|
105
|
-
this.fieldMachine = getFieldMachineFor(this.closestField);
|
|
106
|
-
this.updateProps(this.propsWithField(this.userProps, this.fieldMachine));
|
|
107
|
-
this.closestField?.removeEventListener("fluid-primitives:field:registered", handler);
|
|
108
|
-
};
|
|
109
|
-
this.closestField.addEventListener("fluid-primitives:field:registered", handler);
|
|
110
|
-
}
|
|
111
|
-
return props;
|
|
112
|
-
}
|
|
113
|
-
subscribeToFieldService() {
|
|
114
|
-
if (this.subscribedToField) return;
|
|
115
|
-
this.closestField = this.getClosestField();
|
|
116
|
-
if (!this.closestField) return;
|
|
117
|
-
if (!this.fieldMachine) this.fieldMachine = getFieldMachineFor(this.closestField);
|
|
118
|
-
if (this.fieldMachine) {
|
|
119
|
-
this.fieldMachine.subscribe((snapshot) => {
|
|
120
|
-
queueMicrotask(() => {
|
|
121
|
-
let propsToUpdate = {};
|
|
122
|
-
for (const prop of fieldProps) {
|
|
123
|
-
const newValue = !!fieldAccessors[prop](snapshot);
|
|
124
|
-
if (newValue !== !!this.machine.prop(prop)) propsToUpdate[prop] = newValue;
|
|
125
|
-
}
|
|
126
|
-
if (Object.keys(propsToUpdate).length > 0) this.updateProps(propsToUpdate);
|
|
127
|
-
else this.machine.notify();
|
|
128
|
-
});
|
|
129
|
-
});
|
|
130
|
-
this.subscribedToField = true;
|
|
131
|
-
} else {
|
|
132
|
-
const handler = () => {
|
|
133
|
-
this.subscribeToFieldService();
|
|
134
|
-
this.closestField.removeEventListener("fluid-primitives:field:registered", handler);
|
|
135
|
-
};
|
|
136
|
-
this.closestField.addEventListener("fluid-primitives:field:registered", handler);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
//#endregion
|
|
142
|
-
//#region Resources/Private/Client/src/lib/hydration.ts
|
|
143
|
-
function getHydrationData(component, id) {
|
|
144
|
-
const hydrationData = window.FluidPrimitives?.hydrationData;
|
|
145
|
-
if (!hydrationData || typeof hydrationData !== "object") return null;
|
|
146
|
-
if (!component) return hydrationData;
|
|
147
|
-
if (!hydrationData[component]) return null;
|
|
148
|
-
if (!id) return hydrationData[component];
|
|
149
|
-
return hydrationData[component][id] || null;
|
|
150
|
-
}
|
|
151
|
-
function mount(componentName, callback) {
|
|
152
|
-
const hydrationInstances = getHydrationData(componentName);
|
|
153
|
-
if (!hydrationInstances) return;
|
|
154
|
-
Object.keys(hydrationInstances).forEach((id) => {
|
|
155
|
-
if (hydrationInstances[id].controlled) return;
|
|
156
|
-
const instance = callback({
|
|
157
|
-
...hydrationInstances[id],
|
|
158
|
-
createHydrator: () => new ComponentHydrator(componentName, id, hydrationInstances[id].props.ids)
|
|
159
|
-
});
|
|
160
|
-
if (!instance) return;
|
|
161
|
-
if (!window.FluidPrimitives.uncontrolledInstances[componentName]) window.FluidPrimitives.uncontrolledInstances[componentName] = {};
|
|
162
|
-
window.FluidPrimitives.uncontrolledInstances[componentName][id] = instance;
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
function mountControlled(componentName, rootId, callback) {
|
|
166
|
-
const hydrationData = getHydrationData(componentName, rootId);
|
|
167
|
-
if (!hydrationData) return;
|
|
168
|
-
return callback({
|
|
169
|
-
...hydrationData,
|
|
170
|
-
createHydrator: () => new ComponentHydrator(componentName, rootId, hydrationData.props.ids)
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
var ComponentHydrator = class {
|
|
174
|
-
componentName;
|
|
175
|
-
doc;
|
|
176
|
-
rootId;
|
|
177
|
-
ids;
|
|
178
|
-
elementRefs = /* @__PURE__ */ new Map();
|
|
179
|
-
constructor(componentName, rootId, ids = {}, doc = document) {
|
|
180
|
-
this.componentName = componentName;
|
|
181
|
-
this.doc = doc;
|
|
182
|
-
if (!rootId) throw new Error(`Root ID is required for component hydration: ${componentName}`);
|
|
183
|
-
this.rootId = rootId;
|
|
184
|
-
this.ids = ids;
|
|
185
|
-
}
|
|
186
|
-
getElement(part, parent = this.doc) {
|
|
187
|
-
if (this.elementRefs.has(part)) return this.elementRefs.get(part) || null;
|
|
188
|
-
let element = null;
|
|
189
|
-
if (this.ids[part]) element = parent.querySelector(`#${this.ids[part]}`);
|
|
190
|
-
else element = parent.querySelector(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${part}"][data-scope="${this.componentName}"]`);
|
|
191
|
-
if (element) {
|
|
192
|
-
if (parent === this.doc) this.elementRefs.set(part, element);
|
|
193
|
-
element.removeAttribute(`data-hydrate-${this.componentName}`);
|
|
194
|
-
element.__rootId = this.rootId;
|
|
195
|
-
}
|
|
196
|
-
return element;
|
|
197
|
-
}
|
|
198
|
-
getElements(part, parent = this.doc) {
|
|
199
|
-
if (this.elementRefs.has(part)) return this.elementRefs.get(part);
|
|
200
|
-
let elements = [];
|
|
201
|
-
if (this.ids[part]) elements = Array.from(parent.querySelectorAll(`#${this.ids[part]}`));
|
|
202
|
-
else elements = Array.from(parent.querySelectorAll(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${part}"][data-scope="${this.componentName}"]`));
|
|
203
|
-
if (parent === this.doc) this.elementRefs.set(part, elements);
|
|
204
|
-
elements.forEach((el) => el.removeAttribute(`data-hydrate-${this.componentName}`));
|
|
205
|
-
return elements;
|
|
206
|
-
}
|
|
207
|
-
generateRefAttributesString(part) {
|
|
208
|
-
const id = this.ids[part] || `${this.rootId}-${part}`;
|
|
209
|
-
return `data-scope="${this.componentName}" data-part="${part}" data-hydrate-${this.componentName}="${id}"`;
|
|
210
|
-
}
|
|
211
|
-
setRefAttributes(element, part) {
|
|
212
|
-
this.generateRefAttributesString(part).split(" ").map((attr) => attr.trim()).forEach((attr) => {
|
|
213
|
-
const [key, value] = attr.split("=");
|
|
214
|
-
element.setAttribute(key, value.replace(/"/g, ""));
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
destroy() {
|
|
218
|
-
this.elementRefs.forEach((el) => {
|
|
219
|
-
if (el instanceof Element) el.setAttribute(`data-hydrate-${this.componentName}`, this.rootId);
|
|
220
|
-
else el.forEach((e) => e.setAttribute(`data-hydrate-${this.componentName}`, this.rootId));
|
|
221
|
-
});
|
|
222
|
-
this.elementRefs.clear();
|
|
223
|
-
}
|
|
224
|
-
};
|
|
225
|
-
function getListCollectionFromHydrationData(hydrationCollection) {
|
|
226
|
-
if (hydrationCollection instanceof ListCollection) return hydrationCollection;
|
|
227
|
-
return new ListCollection({
|
|
228
|
-
items: hydrationCollection.items,
|
|
229
|
-
itemToValue: hydrationCollection.itemToValueKey ? (item) => item?.[hydrationCollection.itemToValueKey] : void 0,
|
|
230
|
-
itemToString: hydrationCollection.itemToStringKey ? (item) => item?.[hydrationCollection.itemToStringKey] : void 0,
|
|
231
|
-
isItemDisabled: hydrationCollection.isItemDisabledKey ? (item) => item?.[hydrationCollection.isItemDisabledKey] : void 0,
|
|
232
|
-
groupBy: hydrationCollection.groupByKey ? (item) => {
|
|
233
|
-
const key = hydrationCollection.groupByKey;
|
|
234
|
-
if (!key) return void 0;
|
|
235
|
-
if (key.includes(".")) return key.split(".").reduce((obj, k) => obj ? obj[k] : void 0, item);
|
|
236
|
-
return item?.[key];
|
|
237
|
-
} : void 0
|
|
238
|
-
});
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
//#endregion
|
|
242
|
-
//#region Resources/Private/Client/src/lib/uid.ts
|
|
243
|
-
function uid(prefix = "f") {
|
|
244
|
-
return "«" + prefix + uuid() + "»";
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
//#endregion
|
|
248
|
-
export { Machine as a, getListCollectionFromHydrationData as c, FieldAwareComponent as d, registerFieldMachine as f, mergeProps as i, mount as l, spreadProps as n, ComponentHydrator as o, Component as p, normalizeProps as r, getHydrationData as s, uid as t, mountControlled as u };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
//#region Resources/Private/Primitives/Field/src/field.dom.ts
|
|
2
|
-
const getRootId = (scope) => scope.ids?.root ?? `field:${scope.id}:root`;
|
|
3
|
-
const getLabelId = (scope) => scope.ids?.label ?? `field:${scope.id}:label`;
|
|
4
|
-
const getControlId = (scope) => scope.ids?.control ?? `field:${scope.id}:control`;
|
|
5
|
-
const getErrorId = (scope) => scope.ids?.error ?? `field:${scope.id}:error`;
|
|
6
|
-
const getDescriptionId = (scope) => scope.ids?.description ?? `field:${scope.id}:description`;
|
|
7
|
-
const getRootEl = (scope) => scope.getById(getRootId(scope));
|
|
8
|
-
const getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
|
|
9
|
-
|
|
10
|
-
//#endregion
|
|
11
|
-
export { getLabelId as a, getErrorId as i, getDescriptionEl as n, getRootEl as o, getDescriptionId as r, getRootId as s, getControlId as t };
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
//#region Resources/Private/Primitives/Form/src/form.registry.ts
|
|
2
|
-
const registry = /* @__PURE__ */ new WeakMap();
|
|
3
|
-
function registerFormMachine(form, service) {
|
|
4
|
-
if (!form) return;
|
|
5
|
-
registry.set(form, {
|
|
6
|
-
machine: service,
|
|
7
|
-
fields: /* @__PURE__ */ new Map(),
|
|
8
|
-
expectedFieldCount: form.querySelectorAll("[data-scope=\"field\"][data-part=\"root\"]").length || 0
|
|
9
|
-
});
|
|
10
|
-
form.dispatchEvent(new CustomEvent("fluid-primitives:form:registered", { bubbles: true }));
|
|
11
|
-
}
|
|
12
|
-
function registerFieldMachineForForm(el, fieldMachine) {
|
|
13
|
-
if (!el) return;
|
|
14
|
-
const form = resolveElToForm(el);
|
|
15
|
-
if (!form) return;
|
|
16
|
-
const handleEntry = (entry) => {
|
|
17
|
-
entry.fields.set(fieldMachine.prop("name"), fieldMachine);
|
|
18
|
-
if (entry.fields.size === entry.expectedFieldCount) entry.machine.notify();
|
|
19
|
-
};
|
|
20
|
-
const handler = () => {
|
|
21
|
-
const entry = registry.get(form);
|
|
22
|
-
if (!entry) return;
|
|
23
|
-
handleEntry(entry);
|
|
24
|
-
form.removeEventListener("fluid-primitives:form:registered", handler);
|
|
25
|
-
};
|
|
26
|
-
const entry = registry.get(form);
|
|
27
|
-
if (entry) handleEntry(entry);
|
|
28
|
-
else form.addEventListener("fluid-primitives:form:registered", handler);
|
|
29
|
-
}
|
|
30
|
-
function resolveElToForm(el) {
|
|
31
|
-
if (!el) return null;
|
|
32
|
-
if (el instanceof HTMLFormElement) return el;
|
|
33
|
-
return el.closest("form");
|
|
34
|
-
}
|
|
35
|
-
function getFormMachineFor(el) {
|
|
36
|
-
if (!el) return;
|
|
37
|
-
const form = resolveElToForm(el);
|
|
38
|
-
if (!form) return;
|
|
39
|
-
return registry.get(form)?.machine;
|
|
40
|
-
}
|
|
41
|
-
function getFieldMachinesFor(el) {
|
|
42
|
-
if (!el) return /* @__PURE__ */ new Map();
|
|
43
|
-
const form = resolveElToForm(el);
|
|
44
|
-
if (!form) return /* @__PURE__ */ new Map();
|
|
45
|
-
const entry = registry.get(form);
|
|
46
|
-
if (!entry) return /* @__PURE__ */ new Map();
|
|
47
|
-
return entry.fields;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
//#endregion
|
|
51
|
-
export { registerFormMachine as i, getFormMachineFor as n, registerFieldMachineForForm as r, getFieldMachinesFor as t };
|
package/dist/index-B8JCdyld.d.ts
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { ListCollection } from "@zag-js/collection";
|
|
2
|
-
import { Attrs, VanillaMachine, VanillaMachine as Machine, mergeProps, normalizeProps, spreadProps } from "@zag-js/vanilla";
|
|
3
|
-
|
|
4
|
-
//#region Resources/Private/Client/src/types.d.ts
|
|
5
|
-
declare global {
|
|
6
|
-
interface Window {
|
|
7
|
-
FluidPrimitives: {
|
|
8
|
-
hydrationData: {
|
|
9
|
-
[componentName: string]: {
|
|
10
|
-
[id: string]: ComponentHydrationData;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
globals?: FluidPrimitivesGlobals;
|
|
14
|
-
uncontrolledInstances: {
|
|
15
|
-
[componentName: string]: {
|
|
16
|
-
[id: string]: Component<unknown, unknown>;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
interface ComponentInterface<Api> {
|
|
23
|
-
document: Document;
|
|
24
|
-
machine: VanillaMachine<any>;
|
|
25
|
-
api: Api;
|
|
26
|
-
hydrator: ComponentHydrator | null;
|
|
27
|
-
init(): void;
|
|
28
|
-
destroy(): void;
|
|
29
|
-
render(): void;
|
|
30
|
-
}
|
|
31
|
-
interface ComponentHydrationData {
|
|
32
|
-
controlled: boolean;
|
|
33
|
-
props: {
|
|
34
|
-
id: string;
|
|
35
|
-
ids: {
|
|
36
|
-
[key: string]: string;
|
|
37
|
-
};
|
|
38
|
-
[key: string]: unknown;
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
interface FluidPrimitivesGlobals {
|
|
42
|
-
locale?: string;
|
|
43
|
-
[key: string]: unknown;
|
|
44
|
-
}
|
|
45
|
-
//#endregion
|
|
46
|
-
//#region Resources/Private/Client/src/lib/component.d.ts
|
|
47
|
-
declare abstract class Component<Props, Api> implements ComponentInterface<Api> {
|
|
48
|
-
document: Document;
|
|
49
|
-
machine: Machine<any>;
|
|
50
|
-
api: Api;
|
|
51
|
-
hydrator: ComponentHydrator | null;
|
|
52
|
-
userProps?: Partial<Props>;
|
|
53
|
-
static name: string;
|
|
54
|
-
get doc(): Document;
|
|
55
|
-
constructor(props: Props, userDocument?: Document);
|
|
56
|
-
abstract initMachine(props: Props): Machine<any>;
|
|
57
|
-
abstract initApi(): Api;
|
|
58
|
-
initHydrator(props: Props): ComponentHydrator;
|
|
59
|
-
init(): void;
|
|
60
|
-
getName(): string;
|
|
61
|
-
/**
|
|
62
|
-
* Override in consumer for example when a getter is used for collection
|
|
63
|
-
* Needs to be used manually inside the initMachine method
|
|
64
|
-
*/
|
|
65
|
-
transformProps(props: Partial<Props>): Partial<Props>;
|
|
66
|
-
updateProps(newProps: Partial<Props>): void;
|
|
67
|
-
destroy(): void;
|
|
68
|
-
spreadProps(node: HTMLElement, attrs: Attrs): void;
|
|
69
|
-
getElement<T extends HTMLElement>(part: string, parent?: HTMLElement | Document): T | null;
|
|
70
|
-
getElements<T extends HTMLElement>(part: string, parent?: HTMLElement | Document): T[];
|
|
71
|
-
abstract render(): void;
|
|
72
|
-
}
|
|
73
|
-
//#endregion
|
|
74
|
-
//#region Resources/Private/Primitives/Field/src/field.registry.d.ts
|
|
75
|
-
type FieldMachine = Machine<any>;
|
|
76
|
-
//#endregion
|
|
77
|
-
//#region Resources/Private/Client/src/lib/field-aware-component.d.ts
|
|
78
|
-
declare abstract class FieldAwareComponent<Props, Api> extends Component<Props, Api> {
|
|
79
|
-
protected subscribedToField: boolean;
|
|
80
|
-
protected fieldMachine: FieldMachine | undefined;
|
|
81
|
-
protected closestField: HTMLElement | null;
|
|
82
|
-
protected abstract propsWithField(props: Partial<Props>, fieldMachine: FieldMachine): Props;
|
|
83
|
-
protected getClosestField(): HTMLElement;
|
|
84
|
-
protected withFieldProps(props: Props): Props;
|
|
85
|
-
subscribeToFieldService(): void;
|
|
86
|
-
}
|
|
87
|
-
//#endregion
|
|
88
|
-
//#region Resources/Private/Client/src/lib/hydration.d.ts
|
|
89
|
-
declare function getHydrationData(component: string): Record<string, ComponentHydrationData> | null;
|
|
90
|
-
declare function getHydrationData(component: string, id: string): ComponentHydrationData | null;
|
|
91
|
-
declare function mount(componentName: string, callback: (data: ComponentHydrationData & {
|
|
92
|
-
createHydrator: () => ComponentHydrator;
|
|
93
|
-
}) => Component<unknown, unknown> | void): void;
|
|
94
|
-
declare function mountControlled(componentName: string, rootId: string, callback: (data: ComponentHydrationData & {
|
|
95
|
-
createHydrator: () => ComponentHydrator;
|
|
96
|
-
}) => Component<unknown, unknown> | void): void | Component<unknown, unknown>;
|
|
97
|
-
declare class ComponentHydrator {
|
|
98
|
-
componentName: string;
|
|
99
|
-
doc: Document;
|
|
100
|
-
rootId: string;
|
|
101
|
-
ids: {
|
|
102
|
-
[key: string]: string;
|
|
103
|
-
};
|
|
104
|
-
elementRefs: Map<string, Element | Element[]>;
|
|
105
|
-
constructor(componentName: string, rootId: string | undefined, ids?: {
|
|
106
|
-
[key: string]: string;
|
|
107
|
-
}, doc?: Document);
|
|
108
|
-
getElement<T extends Element>(part: string, parent?: Element | Document): T | null;
|
|
109
|
-
getElements<T extends Element>(part: string, parent?: Element | Document): T[];
|
|
110
|
-
generateRefAttributesString(part: string): string;
|
|
111
|
-
setRefAttributes(element: Element, part: string): void;
|
|
112
|
-
destroy(): void;
|
|
113
|
-
}
|
|
114
|
-
//#endregion
|
|
115
|
-
//#region Resources/Private/Client/src/lib/uid.d.ts
|
|
116
|
-
declare function uid(prefix?: string): string;
|
|
117
|
-
//#endregion
|
|
118
|
-
export { Machine as a, mount as c, FieldMachine as d, Component as f, FluidPrimitivesGlobals as h, mergeProps as i, mountControlled as l, ComponentInterface as m, spreadProps as n, ComponentHydrator as o, ComponentHydrationData as p, normalizeProps as r, getHydrationData as s, uid as t, FieldAwareComponent as u };
|