@deepfuture/dui-components 0.0.12 → 0.0.14

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.
Files changed (89) hide show
  1. package/_deprecated/center/center.js +2 -2
  2. package/_deprecated/hstack/hstack.js +79 -33
  3. package/_deprecated/page-inset/page-inset.js +104 -56
  4. package/_deprecated/vstack/vstack.js +61 -19
  5. package/accordion/accordion-item.js +217 -147
  6. package/accordion/accordion.js +214 -149
  7. package/alert-dialog/alert-dialog-close.js +2 -2
  8. package/alert-dialog/alert-dialog-popup.js +230 -166
  9. package/alert-dialog/alert-dialog-trigger.js +2 -2
  10. package/alert-dialog/alert-dialog.js +128 -73
  11. package/avatar/avatar.js +175 -115
  12. package/badge/badge.js +2 -2
  13. package/breadcrumb/breadcrumb-ellipsis.js +2 -2
  14. package/breadcrumb/breadcrumb-item.js +2 -2
  15. package/breadcrumb/breadcrumb-link.js +2 -2
  16. package/breadcrumb/breadcrumb-page.js +2 -2
  17. package/breadcrumb/breadcrumb-separator.js +2 -2
  18. package/breadcrumb/breadcrumb.js +2 -2
  19. package/button/button.js +109 -65
  20. package/calendar/calendar.js +368 -290
  21. package/checkbox/checkbox-group.js +146 -87
  22. package/checkbox/checkbox.js +232 -167
  23. package/collapsible/collapsible.js +210 -132
  24. package/combobox/combobox.js +318 -252
  25. package/command/command-empty.js +67 -25
  26. package/command/command-group.js +87 -47
  27. package/command/command-input.js +84 -44
  28. package/command/command-item.js +168 -124
  29. package/command/command-list.js +60 -18
  30. package/command/command-separator.js +2 -2
  31. package/command/command-shortcut.js +2 -2
  32. package/command/command.js +297 -232
  33. package/data-table/data-table.js +225 -153
  34. package/dialog/dialog-close.js +2 -2
  35. package/dialog/dialog-popup.js +247 -181
  36. package/dialog/dialog-trigger.js +2 -2
  37. package/dialog/dialog.js +128 -73
  38. package/dropzone/dropzone.js +310 -249
  39. package/icon/icon.js +2 -2
  40. package/input/input.js +204 -143
  41. package/link/link.js +62 -24
  42. package/menu/menu-item.js +66 -24
  43. package/menu/menu.js +189 -136
  44. package/menubar/menubar.js +142 -91
  45. package/number-field/number-field.js +277 -204
  46. package/package.json +2 -3
  47. package/popover/popover-close.js +2 -2
  48. package/popover/popover-popup.js +126 -76
  49. package/popover/popover-trigger.js +2 -2
  50. package/popover/popover.js +181 -120
  51. package/portal/portal.js +128 -86
  52. package/preview-card/preview-card-popup.js +114 -66
  53. package/preview-card/preview-card-trigger.js +2 -2
  54. package/preview-card/preview-card.js +211 -142
  55. package/progress/progress.js +91 -45
  56. package/radio/radio-group.js +153 -90
  57. package/radio/radio.js +137 -94
  58. package/scroll-area/scroll-area.js +382 -283
  59. package/select/select.js +260 -203
  60. package/separator/separator.js +60 -18
  61. package/sidebar/sidebar-content.js +2 -2
  62. package/sidebar/sidebar-footer.js +2 -2
  63. package/sidebar/sidebar-group-label.js +2 -2
  64. package/sidebar/sidebar-group.js +2 -2
  65. package/sidebar/sidebar-header.js +2 -2
  66. package/sidebar/sidebar-inset.js +2 -2
  67. package/sidebar/sidebar-menu-button.js +118 -74
  68. package/sidebar/sidebar-menu-item.js +2 -2
  69. package/sidebar/sidebar-menu.js +2 -2
  70. package/sidebar/sidebar-provider.js +202 -129
  71. package/sidebar/sidebar-separator.js +2 -2
  72. package/sidebar/sidebar-trigger.js +2 -2
  73. package/sidebar/sidebar.js +150 -85
  74. package/slider/slider.js +217 -159
  75. package/spinner/spinner.js +70 -28
  76. package/switch/switch.js +174 -111
  77. package/tabs/tab.js +89 -47
  78. package/tabs/tabs-indicator.js +2 -2
  79. package/tabs/tabs-list.js +92 -54
  80. package/tabs/tabs-panel.js +90 -44
  81. package/tabs/tabs.js +130 -71
  82. package/textarea/textarea.js +153 -95
  83. package/toggle/toggle-group.js +184 -125
  84. package/toggle/toggle.js +131 -76
  85. package/toolbar/toolbar.js +79 -33
  86. package/tooltip/tooltip-popup.js +108 -60
  87. package/tooltip/tooltip-trigger.js +93 -55
  88. package/tooltip/tooltip.js +225 -154
  89. package/trunc/trunc.js +78 -34
@@ -1,8 +1,40 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
1
+ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
2
+ function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
3
+ var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
4
+ var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
5
+ var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
6
+ var _, done = false;
7
+ for (var i = decorators.length - 1; i >= 0; i--) {
8
+ var context = {};
9
+ for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
10
+ for (var p in contextIn.access) context.access[p] = contextIn.access[p];
11
+ context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
12
+ var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
13
+ if (kind === "accessor") {
14
+ if (result === void 0) continue;
15
+ if (result === null || typeof result !== "object") throw new TypeError("Object expected");
16
+ if (_ = accept(result.get)) descriptor.get = _;
17
+ if (_ = accept(result.set)) descriptor.set = _;
18
+ if (_ = accept(result.init)) initializers.unshift(_);
19
+ }
20
+ else if (_ = accept(result)) {
21
+ if (kind === "field") initializers.unshift(_);
22
+ else descriptor[key] = _;
23
+ }
24
+ }
25
+ if (target) Object.defineProperty(target, contextIn.name, descriptor);
26
+ done = true;
27
+ };
28
+ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
29
+ var useValue = arguments.length > 2;
30
+ for (var i = 0; i < initializers.length; i++) {
31
+ value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
32
+ }
33
+ return useValue ? value : void 0;
34
+ };
35
+ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
36
+ if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
37
+ return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
6
38
  };
7
39
  import { css, html, LitElement, nothing } from "lit";
8
40
  import { property, state } from "lit/decorators.js";
@@ -76,174 +108,247 @@ const styles = css `
76
108
  * @csspart increment - The increment button.
77
109
  * @fires value-change - Fired when value changes. Detail: { value: number }
78
110
  */
79
- export class DuiNumberField extends LitElement {
80
- static { this.tagName = "dui-number-field"; }
81
- static { this.shadowRootOptions = {
82
- ...LitElement.shadowRootOptions,
83
- delegatesFocus: true,
84
- }; }
85
- static { this.styles = [base, styles]; }
86
- #value_accessor_storage = undefined;
87
- get value() { return this.#value_accessor_storage; }
88
- set value(value) { this.#value_accessor_storage = value; }
89
- #defaultValue_accessor_storage = undefined;
90
- get defaultValue() { return this.#defaultValue_accessor_storage; }
91
- set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
92
- #min_accessor_storage = undefined;
93
- get min() { return this.#min_accessor_storage; }
94
- set min(value) { this.#min_accessor_storage = value; }
95
- #max_accessor_storage = undefined;
96
- get max() { return this.#max_accessor_storage; }
97
- set max(value) { this.#max_accessor_storage = value; }
98
- #step_accessor_storage = 1;
99
- get step() { return this.#step_accessor_storage; }
100
- set step(value) { this.#step_accessor_storage = value; }
101
- #largeStep_accessor_storage = 10;
102
- get largeStep() { return this.#largeStep_accessor_storage; }
103
- set largeStep(value) { this.#largeStep_accessor_storage = value; }
104
- #disabled_accessor_storage = false;
105
- get disabled() { return this.#disabled_accessor_storage; }
106
- set disabled(value) { this.#disabled_accessor_storage = value; }
107
- #readOnly_accessor_storage = false;
108
- get readOnly() { return this.#readOnly_accessor_storage; }
109
- set readOnly(value) { this.#readOnly_accessor_storage = value; }
110
- #required_accessor_storage = false;
111
- get required() { return this.#required_accessor_storage; }
112
- set required(value) { this.#required_accessor_storage = value; }
113
- #name_accessor_storage = undefined;
114
- get name() { return this.#name_accessor_storage; }
115
- set name(value) { this.#name_accessor_storage = value; }
116
- #internalValue_accessor_storage = undefined;
117
- get #internalValue() { return this.#internalValue_accessor_storage; }
118
- set #internalValue(value) { this.#internalValue_accessor_storage = value; }
119
- #inputText_accessor_storage = "";
120
- get #inputText() { return this.#inputText_accessor_storage; }
121
- set #inputText(value) { this.#inputText_accessor_storage = value; }
122
- #_fieldCtx_accessor_storage;
123
- get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
124
- set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
125
- get #currentValue() {
126
- return this.value ?? this.#internalValue;
127
- }
128
- get #isDisabled() {
129
- return this.disabled || (this._fieldCtx?.disabled ?? false);
130
- }
131
- get #isInvalid() {
132
- return this._fieldCtx?.invalid ?? false;
133
- }
134
- get #canDecrement() {
135
- const v = this.#currentValue;
136
- if (v === undefined)
137
- return true;
138
- return this.min === undefined || v > this.min;
139
- }
140
- get #canIncrement() {
141
- const v = this.#currentValue;
142
- if (v === undefined)
143
- return true;
144
- return this.max === undefined || v < this.max;
145
- }
146
- connectedCallback() {
147
- super.connectedCallback();
148
- if (this.value === undefined && this.defaultValue !== undefined) {
149
- this.#internalValue = this.#clamp(this.defaultValue);
111
+ let DuiNumberField = (() => {
112
+ let _classSuper = LitElement;
113
+ let _value_decorators;
114
+ let _value_initializers = [];
115
+ let _value_extraInitializers = [];
116
+ let _defaultValue_decorators;
117
+ let _defaultValue_initializers = [];
118
+ let _defaultValue_extraInitializers = [];
119
+ let _min_decorators;
120
+ let _min_initializers = [];
121
+ let _min_extraInitializers = [];
122
+ let _max_decorators;
123
+ let _max_initializers = [];
124
+ let _max_extraInitializers = [];
125
+ let _step_decorators;
126
+ let _step_initializers = [];
127
+ let _step_extraInitializers = [];
128
+ let _largeStep_decorators;
129
+ let _largeStep_initializers = [];
130
+ let _largeStep_extraInitializers = [];
131
+ let _disabled_decorators;
132
+ let _disabled_initializers = [];
133
+ let _disabled_extraInitializers = [];
134
+ let _readOnly_decorators;
135
+ let _readOnly_initializers = [];
136
+ let _readOnly_extraInitializers = [];
137
+ let _required_decorators;
138
+ let _required_initializers = [];
139
+ let _required_extraInitializers = [];
140
+ let _name_decorators;
141
+ let _name_initializers = [];
142
+ let _name_extraInitializers = [];
143
+ let _private_internalValue_decorators;
144
+ let _private_internalValue_initializers = [];
145
+ let _private_internalValue_extraInitializers = [];
146
+ let _private_internalValue_descriptor;
147
+ let _private_inputText_decorators;
148
+ let _private_inputText_initializers = [];
149
+ let _private_inputText_extraInitializers = [];
150
+ let _private_inputText_descriptor;
151
+ let __fieldCtx_decorators;
152
+ let __fieldCtx_initializers = [];
153
+ let __fieldCtx_extraInitializers = [];
154
+ return class DuiNumberField extends _classSuper {
155
+ static {
156
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
157
+ _value_decorators = [property({ type: Number })];
158
+ _defaultValue_decorators = [property({ type: Number, attribute: "default-value" })];
159
+ _min_decorators = [property({ type: Number })];
160
+ _max_decorators = [property({ type: Number })];
161
+ _step_decorators = [property({ type: Number })];
162
+ _largeStep_decorators = [property({ type: Number, attribute: "large-step" })];
163
+ _disabled_decorators = [property({ type: Boolean, reflect: true })];
164
+ _readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
165
+ _required_decorators = [property({ type: Boolean })];
166
+ _name_decorators = [property()];
167
+ _private_internalValue_decorators = [state()];
168
+ _private_inputText_decorators = [state()];
169
+ __fieldCtx_decorators = [consume({ context: fieldContext, subscribe: true }), state()];
170
+ __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
171
+ __esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
172
+ __esDecorate(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
173
+ __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
174
+ __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
175
+ __esDecorate(this, null, _largeStep_decorators, { kind: "accessor", name: "largeStep", static: false, private: false, access: { has: obj => "largeStep" in obj, get: obj => obj.largeStep, set: (obj, value) => { obj.largeStep = value; } }, metadata: _metadata }, _largeStep_initializers, _largeStep_extraInitializers);
176
+ __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
177
+ __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
178
+ __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
179
+ __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
180
+ __esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
181
+ __esDecorate(this, _private_inputText_descriptor = { get: __setFunctionName(function () { return this.#inputText_accessor_storage; }, "#inputText", "get"), set: __setFunctionName(function (value) { this.#inputText_accessor_storage = value; }, "#inputText", "set") }, _private_inputText_decorators, { kind: "accessor", name: "#inputText", static: false, private: true, access: { has: obj => #inputText in obj, get: obj => obj.#inputText, set: (obj, value) => { obj.#inputText = value; } }, metadata: _metadata }, _private_inputText_initializers, _private_inputText_extraInitializers);
182
+ __esDecorate(this, null, __fieldCtx_decorators, { kind: "accessor", name: "_fieldCtx", static: false, private: false, access: { has: obj => "_fieldCtx" in obj, get: obj => obj._fieldCtx, set: (obj, value) => { obj._fieldCtx = value; } }, metadata: _metadata }, __fieldCtx_initializers, __fieldCtx_extraInitializers);
183
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
150
184
  }
151
- this.#syncInputText();
152
- }
153
- willUpdate() {
154
- this.#syncInputText();
155
- }
156
- #syncInputText() {
157
- const v = this.#currentValue;
158
- this.#inputText = v !== undefined ? String(v) : "";
159
- }
160
- #clamp(val) {
161
- if (this.min !== undefined)
162
- val = Math.max(this.min, val);
163
- if (this.max !== undefined)
164
- val = Math.min(this.max, val);
165
- return val;
166
- }
167
- #setValue(val) {
168
- const clamped = this.#clamp(val);
169
- if (this.value === undefined) {
170
- this.#internalValue = clamped;
185
+ static tagName = "dui-number-field";
186
+ static shadowRootOptions = {
187
+ ...LitElement.shadowRootOptions,
188
+ delegatesFocus: true,
189
+ };
190
+ static styles = [base, styles];
191
+ #value_accessor_storage = __runInitializers(this, _value_initializers, undefined);
192
+ get value() { return this.#value_accessor_storage; }
193
+ set value(value) { this.#value_accessor_storage = value; }
194
+ #defaultValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _defaultValue_initializers, undefined));
195
+ get defaultValue() { return this.#defaultValue_accessor_storage; }
196
+ set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
197
+ #min_accessor_storage = (__runInitializers(this, _defaultValue_extraInitializers), __runInitializers(this, _min_initializers, undefined));
198
+ get min() { return this.#min_accessor_storage; }
199
+ set min(value) { this.#min_accessor_storage = value; }
200
+ #max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, undefined));
201
+ get max() { return this.#max_accessor_storage; }
202
+ set max(value) { this.#max_accessor_storage = value; }
203
+ #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1));
204
+ get step() { return this.#step_accessor_storage; }
205
+ set step(value) { this.#step_accessor_storage = value; }
206
+ #largeStep_accessor_storage = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _largeStep_initializers, 10));
207
+ get largeStep() { return this.#largeStep_accessor_storage; }
208
+ set largeStep(value) { this.#largeStep_accessor_storage = value; }
209
+ #disabled_accessor_storage = (__runInitializers(this, _largeStep_extraInitializers), __runInitializers(this, _disabled_initializers, false));
210
+ get disabled() { return this.#disabled_accessor_storage; }
211
+ set disabled(value) { this.#disabled_accessor_storage = value; }
212
+ #readOnly_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readOnly_initializers, false));
213
+ get readOnly() { return this.#readOnly_accessor_storage; }
214
+ set readOnly(value) { this.#readOnly_accessor_storage = value; }
215
+ #required_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _required_initializers, false));
216
+ get required() { return this.#required_accessor_storage; }
217
+ set required(value) { this.#required_accessor_storage = value; }
218
+ #name_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _name_initializers, undefined));
219
+ get name() { return this.#name_accessor_storage; }
220
+ set name(value) { this.#name_accessor_storage = value; }
221
+ #internalValue_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _private_internalValue_initializers, undefined));
222
+ get #internalValue() { return _private_internalValue_descriptor.get.call(this); }
223
+ set #internalValue(value) { return _private_internalValue_descriptor.set.call(this, value); }
224
+ #inputText_accessor_storage = (__runInitializers(this, _private_internalValue_extraInitializers), __runInitializers(this, _private_inputText_initializers, ""));
225
+ get #inputText() { return _private_inputText_descriptor.get.call(this); }
226
+ set #inputText(value) { return _private_inputText_descriptor.set.call(this, value); }
227
+ #_fieldCtx_accessor_storage = (__runInitializers(this, _private_inputText_extraInitializers), __runInitializers(this, __fieldCtx_initializers, void 0));
228
+ get _fieldCtx() { return this.#_fieldCtx_accessor_storage; }
229
+ set _fieldCtx(value) { this.#_fieldCtx_accessor_storage = value; }
230
+ get #currentValue() {
231
+ return this.value ?? this.#internalValue;
171
232
  }
172
- this._fieldCtx?.markDirty();
173
- this._fieldCtx?.setFilled(true);
174
- this.dispatchEvent(valueChangeEvent({ value: clamped }));
175
- }
176
- #increment = (amount) => {
177
- if (this.#isDisabled || this.readOnly)
178
- return;
179
- const current = this.#currentValue ?? this.min ?? 0;
180
- this.#setValue(current + amount);
181
- };
182
- #decrement = (amount) => {
183
- if (this.#isDisabled || this.readOnly)
184
- return;
185
- const current = this.#currentValue ?? this.max ?? 0;
186
- this.#setValue(current - amount);
187
- };
188
- #commitInput() {
189
- const parsed = parseFloat(this.#inputText);
190
- if (Number.isNaN(parsed)) {
233
+ get #isDisabled() {
234
+ return this.disabled || (this._fieldCtx?.disabled ?? false);
235
+ }
236
+ get #isInvalid() {
237
+ return this._fieldCtx?.invalid ?? false;
238
+ }
239
+ get #canDecrement() {
240
+ const v = this.#currentValue;
241
+ if (v === undefined)
242
+ return true;
243
+ return this.min === undefined || v > this.min;
244
+ }
245
+ get #canIncrement() {
246
+ const v = this.#currentValue;
247
+ if (v === undefined)
248
+ return true;
249
+ return this.max === undefined || v < this.max;
250
+ }
251
+ connectedCallback() {
252
+ super.connectedCallback();
253
+ if (this.value === undefined && this.defaultValue !== undefined) {
254
+ this.#internalValue = this.#clamp(this.defaultValue);
255
+ }
191
256
  this.#syncInputText();
192
257
  }
193
- else {
194
- this.#setValue(parsed);
258
+ willUpdate() {
259
+ this.#syncInputText();
195
260
  }
196
- }
197
- #onInput = (e) => {
198
- this.#inputText = e.target.value;
199
- };
200
- #onBlur = () => {
201
- this.#commitInput();
202
- this._fieldCtx?.setFocused(false);
203
- this._fieldCtx?.markTouched();
204
- };
205
- #onFocus = () => {
206
- this._fieldCtx?.setFocused(true);
207
- };
208
- #onKeyDown = (e) => {
209
- switch (e.key) {
210
- case "ArrowUp":
211
- e.preventDefault();
212
- this.#increment(e.shiftKey ? this.largeStep : this.step);
213
- break;
214
- case "ArrowDown":
215
- e.preventDefault();
216
- this.#decrement(e.shiftKey ? this.largeStep : this.step);
217
- break;
218
- case "Home":
219
- if (this.min !== undefined) {
261
+ #syncInputText() {
262
+ const v = this.#currentValue;
263
+ this.#inputText = v !== undefined ? String(v) : "";
264
+ }
265
+ #clamp(val) {
266
+ if (this.min !== undefined)
267
+ val = Math.max(this.min, val);
268
+ if (this.max !== undefined)
269
+ val = Math.min(this.max, val);
270
+ return val;
271
+ }
272
+ #setValue(val) {
273
+ const clamped = this.#clamp(val);
274
+ if (this.value === undefined) {
275
+ this.#internalValue = clamped;
276
+ }
277
+ this._fieldCtx?.markDirty();
278
+ this._fieldCtx?.setFilled(true);
279
+ this.dispatchEvent(valueChangeEvent({ value: clamped }));
280
+ }
281
+ #increment = (__runInitializers(this, __fieldCtx_extraInitializers), (amount) => {
282
+ if (this.#isDisabled || this.readOnly)
283
+ return;
284
+ const current = this.#currentValue ?? this.min ?? 0;
285
+ this.#setValue(current + amount);
286
+ });
287
+ #decrement = (amount) => {
288
+ if (this.#isDisabled || this.readOnly)
289
+ return;
290
+ const current = this.#currentValue ?? this.max ?? 0;
291
+ this.#setValue(current - amount);
292
+ };
293
+ #commitInput() {
294
+ const parsed = parseFloat(this.#inputText);
295
+ if (Number.isNaN(parsed)) {
296
+ this.#syncInputText();
297
+ }
298
+ else {
299
+ this.#setValue(parsed);
300
+ }
301
+ }
302
+ #onInput = (e) => {
303
+ this.#inputText = e.target.value;
304
+ };
305
+ #onBlur = () => {
306
+ this.#commitInput();
307
+ this._fieldCtx?.setFocused(false);
308
+ this._fieldCtx?.markTouched();
309
+ };
310
+ #onFocus = () => {
311
+ this._fieldCtx?.setFocused(true);
312
+ };
313
+ #onKeyDown = (e) => {
314
+ switch (e.key) {
315
+ case "ArrowUp":
220
316
  e.preventDefault();
221
- this.#setValue(this.min);
222
- }
223
- break;
224
- case "End":
225
- if (this.max !== undefined) {
317
+ this.#increment(e.shiftKey ? this.largeStep : this.step);
318
+ break;
319
+ case "ArrowDown":
226
320
  e.preventDefault();
227
- this.#setValue(this.max);
228
- }
229
- break;
230
- case "Enter":
231
- this.#commitInput();
232
- break;
233
- }
234
- };
235
- #onDecrementClick = () => {
236
- this.#decrement(this.step);
237
- };
238
- #onIncrementClick = () => {
239
- this.#increment(this.step);
240
- };
241
- render() {
242
- const isDisabled = this.#isDisabled;
243
- const isInvalid = this.#isInvalid;
244
- const controlId = this._fieldCtx?.controlId ?? "";
245
- const currentValue = this.#currentValue;
246
- return html `
321
+ this.#decrement(e.shiftKey ? this.largeStep : this.step);
322
+ break;
323
+ case "Home":
324
+ if (this.min !== undefined) {
325
+ e.preventDefault();
326
+ this.#setValue(this.min);
327
+ }
328
+ break;
329
+ case "End":
330
+ if (this.max !== undefined) {
331
+ e.preventDefault();
332
+ this.#setValue(this.max);
333
+ }
334
+ break;
335
+ case "Enter":
336
+ this.#commitInput();
337
+ break;
338
+ }
339
+ };
340
+ #onDecrementClick = () => {
341
+ this.#decrement(this.step);
342
+ };
343
+ #onIncrementClick = () => {
344
+ this.#increment(this.step);
345
+ };
346
+ render() {
347
+ const isDisabled = this.#isDisabled;
348
+ const isInvalid = this.#isInvalid;
349
+ const controlId = this._fieldCtx?.controlId ?? "";
350
+ const currentValue = this.#currentValue;
351
+ return html `
247
352
  <div
248
353
  part="root"
249
354
  ?data-disabled="${isDisabled}"
@@ -286,47 +391,15 @@ export class DuiNumberField extends LitElement {
286
391
  <slot name="increment">+</slot>
287
392
  </button>
288
393
  ${this.name
289
- ? html `<input
394
+ ? html `<input
290
395
  type="hidden"
291
396
  name="${this.name}"
292
397
  .value="${String(currentValue ?? "")}"
293
398
  />`
294
- : nothing}
399
+ : nothing}
295
400
  </div>
296
401
  `;
297
- }
298
- }
299
- __decorate([
300
- property({ type: Number })
301
- ], DuiNumberField.prototype, "value", null);
302
- __decorate([
303
- property({ type: Number, attribute: "default-value" })
304
- ], DuiNumberField.prototype, "defaultValue", null);
305
- __decorate([
306
- property({ type: Number })
307
- ], DuiNumberField.prototype, "min", null);
308
- __decorate([
309
- property({ type: Number })
310
- ], DuiNumberField.prototype, "max", null);
311
- __decorate([
312
- property({ type: Number })
313
- ], DuiNumberField.prototype, "step", null);
314
- __decorate([
315
- property({ type: Number, attribute: "large-step" })
316
- ], DuiNumberField.prototype, "largeStep", null);
317
- __decorate([
318
- property({ type: Boolean, reflect: true })
319
- ], DuiNumberField.prototype, "disabled", null);
320
- __decorate([
321
- property({ type: Boolean, reflect: true, attribute: "read-only" })
322
- ], DuiNumberField.prototype, "readOnly", null);
323
- __decorate([
324
- property({ type: Boolean })
325
- ], DuiNumberField.prototype, "required", null);
326
- __decorate([
327
- property()
328
- ], DuiNumberField.prototype, "name", null);
329
- __decorate([
330
- consume({ context: fieldContext, subscribe: true }),
331
- state()
332
- ], DuiNumberField.prototype, "_fieldCtx", null);
402
+ }
403
+ };
404
+ })();
405
+ export { DuiNumberField };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepfuture/dui-components",
3
- "version": "0.0.12",
3
+ "version": "0.0.14",
4
4
  "description": "DUI unstyled web components — structural CSS only, themed via applyTheme()",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -178,11 +178,10 @@
178
178
  "README.md"
179
179
  ],
180
180
  "dependencies": {
181
- "@deepfuture/dui-core": "0.0.12",
181
+ "@deepfuture/dui-core": "0.0.14",
182
182
  "lit": "^3.3.2",
183
183
  "@lit/context": "^1.1.3"
184
184
  },
185
- "sideEffects": false,
186
185
  "keywords": [
187
186
  "web-components",
188
187
  "lit",
@@ -14,8 +14,8 @@ const hostStyles = css `
14
14
  * @slot - Content that closes the popover (usually a button or icon).
15
15
  */
16
16
  export class DuiPopoverClose extends LitElement {
17
- static { this.tagName = "dui-popover-close"; }
18
- static { this.styles = [base, hostStyles]; }
17
+ static tagName = "dui-popover-close";
18
+ static styles = [base, hostStyles];
19
19
  #ctx = new ContextConsumer(this, {
20
20
  context: popoverContext,
21
21
  subscribe: true,