@deepfuture/dui-components 0.0.11 → 0.0.13

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 (250) hide show
  1. package/README.md +191 -0
  2. package/_deprecated/center/center.js +2 -2
  3. package/_deprecated/center/index.d.ts +3 -1
  4. package/_deprecated/center/index.js +3 -1
  5. package/_deprecated/hstack/hstack.js +79 -33
  6. package/_deprecated/hstack/index.d.ts +3 -1
  7. package/_deprecated/hstack/index.js +3 -1
  8. package/_deprecated/page-inset/index.d.ts +3 -1
  9. package/_deprecated/page-inset/index.js +3 -1
  10. package/_deprecated/page-inset/page-inset.js +104 -56
  11. package/_deprecated/vstack/index.d.ts +3 -1
  12. package/_deprecated/vstack/index.js +3 -1
  13. package/_deprecated/vstack/vstack.js +61 -19
  14. package/accordion/accordion-item.js +217 -147
  15. package/accordion/accordion.js +214 -149
  16. package/accordion/index.d.ts +5 -2
  17. package/accordion/index.js +5 -2
  18. package/alert-dialog/alert-dialog-close.js +2 -2
  19. package/alert-dialog/alert-dialog-popup.js +230 -166
  20. package/alert-dialog/alert-dialog-trigger.js +2 -2
  21. package/alert-dialog/alert-dialog.js +128 -73
  22. package/alert-dialog/index.d.ts +9 -4
  23. package/alert-dialog/index.js +9 -4
  24. package/avatar/avatar.js +175 -115
  25. package/avatar/index.d.ts +3 -1
  26. package/avatar/index.js +3 -1
  27. package/badge/badge.js +2 -2
  28. package/badge/index.d.ts +3 -1
  29. package/badge/index.js +3 -1
  30. package/breadcrumb/breadcrumb-ellipsis.js +2 -2
  31. package/breadcrumb/breadcrumb-item.js +2 -2
  32. package/breadcrumb/breadcrumb-link.js +2 -2
  33. package/breadcrumb/breadcrumb-page.js +2 -2
  34. package/breadcrumb/breadcrumb-separator.js +2 -2
  35. package/breadcrumb/breadcrumb.js +2 -2
  36. package/breadcrumb/index.d.ts +13 -6
  37. package/breadcrumb/index.js +13 -6
  38. package/button/button.js +109 -65
  39. package/button/index.d.ts +3 -1
  40. package/button/index.js +3 -1
  41. package/calendar/calendar.js +368 -290
  42. package/calendar/index.d.ts +3 -1
  43. package/calendar/index.js +3 -1
  44. package/checkbox/checkbox-group.js +146 -87
  45. package/checkbox/checkbox.js +232 -167
  46. package/checkbox/index.d.ts +5 -2
  47. package/checkbox/index.js +5 -2
  48. package/collapsible/collapsible.js +210 -132
  49. package/collapsible/index.d.ts +3 -1
  50. package/collapsible/index.js +3 -1
  51. package/combobox/combobox.js +318 -252
  52. package/combobox/index.d.ts +3 -1
  53. package/combobox/index.js +3 -1
  54. package/command/command-empty.js +67 -25
  55. package/command/command-group.js +87 -47
  56. package/command/command-input.js +84 -44
  57. package/command/command-item.js +168 -124
  58. package/command/command-list.js +60 -18
  59. package/command/command-separator.js +2 -2
  60. package/command/command-shortcut.js +2 -2
  61. package/command/command.js +297 -232
  62. package/command/index.d.ts +17 -8
  63. package/command/index.js +17 -8
  64. package/data-table/data-table.js +225 -153
  65. package/data-table/index.d.ts +3 -1
  66. package/data-table/index.js +3 -1
  67. package/dialog/dialog-close.js +2 -2
  68. package/dialog/dialog-popup.js +247 -181
  69. package/dialog/dialog-trigger.js +2 -2
  70. package/dialog/dialog.js +128 -73
  71. package/dialog/index.d.ts +9 -4
  72. package/dialog/index.js +9 -4
  73. package/dropzone/dropzone.js +310 -249
  74. package/dropzone/index.d.ts +3 -1
  75. package/dropzone/index.js +3 -1
  76. package/icon/icon.js +2 -2
  77. package/icon/index.d.ts +3 -1
  78. package/icon/index.js +3 -1
  79. package/input/index.d.ts +3 -1
  80. package/input/index.js +3 -1
  81. package/input/input.js +204 -143
  82. package/link/index.d.ts +3 -1
  83. package/link/index.js +3 -1
  84. package/link/link.js +62 -24
  85. package/menu/index.d.ts +5 -2
  86. package/menu/index.js +5 -2
  87. package/menu/menu-item.js +66 -24
  88. package/menu/menu.js +189 -136
  89. package/menubar/index.d.ts +3 -1
  90. package/menubar/index.js +3 -1
  91. package/menubar/menubar.js +142 -91
  92. package/number-field/index.d.ts +3 -1
  93. package/number-field/index.js +3 -1
  94. package/number-field/number-field.js +277 -204
  95. package/package.json +5 -4
  96. package/popover/index.d.ts +9 -4
  97. package/popover/index.js +9 -4
  98. package/popover/popover-close.js +2 -2
  99. package/popover/popover-popup.js +126 -76
  100. package/popover/popover-trigger.js +2 -2
  101. package/popover/popover.js +181 -120
  102. package/portal/index.d.ts +3 -1
  103. package/portal/index.js +3 -1
  104. package/portal/portal.js +128 -86
  105. package/preview-card/index.d.ts +7 -3
  106. package/preview-card/index.js +7 -3
  107. package/preview-card/preview-card-popup.js +114 -66
  108. package/preview-card/preview-card-trigger.js +2 -2
  109. package/preview-card/preview-card.js +211 -142
  110. package/progress/index.d.ts +3 -1
  111. package/progress/index.js +3 -1
  112. package/progress/progress.js +91 -45
  113. package/radio/index.d.ts +5 -2
  114. package/radio/index.js +5 -2
  115. package/radio/radio-group.js +153 -90
  116. package/radio/radio.js +137 -94
  117. package/scroll-area/index.d.ts +3 -1
  118. package/scroll-area/index.js +3 -1
  119. package/scroll-area/scroll-area.js +382 -276
  120. package/select/index.d.ts +3 -1
  121. package/select/index.js +3 -1
  122. package/select/select.js +260 -203
  123. package/separator/index.d.ts +3 -1
  124. package/separator/index.js +3 -1
  125. package/separator/separator.js +60 -18
  126. package/sidebar/index.d.ts +27 -13
  127. package/sidebar/index.js +32 -13
  128. package/sidebar/sidebar-content.js +2 -2
  129. package/sidebar/sidebar-footer.js +2 -2
  130. package/sidebar/sidebar-group-label.js +2 -2
  131. package/sidebar/sidebar-group.js +2 -2
  132. package/sidebar/sidebar-header.js +2 -2
  133. package/sidebar/sidebar-inset.js +2 -2
  134. package/sidebar/sidebar-menu-button.js +118 -74
  135. package/sidebar/sidebar-menu-item.js +2 -2
  136. package/sidebar/sidebar-menu.js +2 -2
  137. package/sidebar/sidebar-provider.js +202 -129
  138. package/sidebar/sidebar-separator.js +2 -2
  139. package/sidebar/sidebar-trigger.js +2 -2
  140. package/sidebar/sidebar.js +150 -85
  141. package/slider/index.d.ts +3 -1
  142. package/slider/index.js +3 -1
  143. package/slider/slider.js +217 -159
  144. package/spinner/index.d.ts +3 -1
  145. package/spinner/index.js +3 -1
  146. package/spinner/spinner.js +70 -28
  147. package/switch/index.d.ts +3 -1
  148. package/switch/index.js +3 -1
  149. package/switch/switch.js +174 -111
  150. package/tabs/index.d.ts +11 -5
  151. package/tabs/index.js +11 -5
  152. package/tabs/tab.js +89 -47
  153. package/tabs/tabs-indicator.js +2 -2
  154. package/tabs/tabs-list.js +92 -54
  155. package/tabs/tabs-panel.js +90 -44
  156. package/tabs/tabs.js +130 -71
  157. package/textarea/index.d.ts +3 -1
  158. package/textarea/index.js +3 -1
  159. package/textarea/textarea.js +153 -95
  160. package/toggle/index.d.ts +5 -2
  161. package/toggle/index.js +5 -2
  162. package/toggle/toggle-group.js +184 -125
  163. package/toggle/toggle.js +131 -76
  164. package/toolbar/index.d.ts +3 -1
  165. package/toolbar/index.js +3 -1
  166. package/toolbar/toolbar.js +79 -33
  167. package/tooltip/index.d.ts +7 -3
  168. package/tooltip/index.js +7 -3
  169. package/tooltip/tooltip-popup.js +108 -60
  170. package/tooltip/tooltip-trigger.js +93 -55
  171. package/tooltip/tooltip.js +225 -154
  172. package/trunc/index.d.ts +3 -1
  173. package/trunc/index.js +3 -1
  174. package/trunc/trunc.js +78 -34
  175. package/accordion/register.d.ts +0 -1
  176. package/accordion/register.js +0 -8
  177. package/alert-dialog/register.d.ts +0 -1
  178. package/alert-dialog/register.js +0 -16
  179. package/avatar/register.d.ts +0 -1
  180. package/avatar/register.js +0 -4
  181. package/badge/register.d.ts +0 -1
  182. package/badge/register.js +0 -4
  183. package/breadcrumb/register.d.ts +0 -1
  184. package/breadcrumb/register.js +0 -14
  185. package/button/register.d.ts +0 -1
  186. package/button/register.js +0 -4
  187. package/calendar/register.d.ts +0 -1
  188. package/calendar/register.js +0 -4
  189. package/checkbox/register.d.ts +0 -1
  190. package/checkbox/register.js +0 -8
  191. package/collapsible/register.d.ts +0 -1
  192. package/collapsible/register.js +0 -4
  193. package/combobox/register.d.ts +0 -1
  194. package/combobox/register.js +0 -4
  195. package/command/register.d.ts +0 -1
  196. package/command/register.js +0 -22
  197. package/data-table/register.d.ts +0 -1
  198. package/data-table/register.js +0 -4
  199. package/dialog/register.d.ts +0 -1
  200. package/dialog/register.js +0 -16
  201. package/dropzone/register.d.ts +0 -1
  202. package/dropzone/register.js +0 -4
  203. package/icon/register.d.ts +0 -1
  204. package/icon/register.js +0 -4
  205. package/input/register.d.ts +0 -1
  206. package/input/register.js +0 -4
  207. package/link/register.d.ts +0 -1
  208. package/link/register.js +0 -4
  209. package/menu/register.d.ts +0 -1
  210. package/menu/register.js +0 -8
  211. package/menubar/register.d.ts +0 -1
  212. package/menubar/register.js +0 -4
  213. package/number-field/register.d.ts +0 -1
  214. package/number-field/register.js +0 -4
  215. package/popover/register.d.ts +0 -1
  216. package/popover/register.js +0 -16
  217. package/portal/register.d.ts +0 -1
  218. package/portal/register.js +0 -4
  219. package/preview-card/register.d.ts +0 -1
  220. package/preview-card/register.js +0 -12
  221. package/progress/register.d.ts +0 -1
  222. package/progress/register.js +0 -4
  223. package/radio/register.d.ts +0 -1
  224. package/radio/register.js +0 -8
  225. package/scroll-area/register.d.ts +0 -1
  226. package/scroll-area/register.js +0 -4
  227. package/select/register.d.ts +0 -1
  228. package/select/register.js +0 -4
  229. package/separator/register.d.ts +0 -1
  230. package/separator/register.js +0 -4
  231. package/sidebar/register.d.ts +0 -1
  232. package/sidebar/register.js +0 -52
  233. package/slider/register.d.ts +0 -1
  234. package/slider/register.js +0 -4
  235. package/spinner/register.d.ts +0 -1
  236. package/spinner/register.js +0 -4
  237. package/switch/register.d.ts +0 -1
  238. package/switch/register.js +0 -4
  239. package/tabs/register.d.ts +0 -1
  240. package/tabs/register.js +0 -10
  241. package/textarea/register.d.ts +0 -1
  242. package/textarea/register.js +0 -4
  243. package/toggle/register.d.ts +0 -1
  244. package/toggle/register.js +0 -8
  245. package/toolbar/register.d.ts +0 -1
  246. package/toolbar/register.js +0 -4
  247. package/tooltip/register.d.ts +0 -1
  248. package/tooltip/register.js +0 -12
  249. package/trunc/register.d.ts +0 -1
  250. package/trunc/register.js +0 -4
package/slider/slider.js CHANGED
@@ -1,12 +1,44 @@
1
1
  /** Ported from original DUI: deep-future-app/app/client/components/dui/slider */
2
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
- 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;
6
- return c > 3 && r && Object.defineProperty(target, key, r), r;
2
+ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
3
+ function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
4
+ var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
5
+ var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
6
+ var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
7
+ var _, done = false;
8
+ for (var i = decorators.length - 1; i >= 0; i--) {
9
+ var context = {};
10
+ for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11
+ for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12
+ context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
13
+ var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
14
+ if (kind === "accessor") {
15
+ if (result === void 0) continue;
16
+ if (result === null || typeof result !== "object") throw new TypeError("Object expected");
17
+ if (_ = accept(result.get)) descriptor.get = _;
18
+ if (_ = accept(result.set)) descriptor.set = _;
19
+ if (_ = accept(result.init)) initializers.unshift(_);
20
+ }
21
+ else if (_ = accept(result)) {
22
+ if (kind === "field") initializers.unshift(_);
23
+ else descriptor[key] = _;
24
+ }
25
+ }
26
+ if (target) Object.defineProperty(target, contextIn.name, descriptor);
27
+ done = true;
28
+ };
29
+ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
30
+ var useValue = arguments.length > 2;
31
+ for (var i = 0; i < initializers.length; i++) {
32
+ value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
33
+ }
34
+ return useValue ? value : void 0;
35
+ };
36
+ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
37
+ if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
38
+ return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
7
39
  };
8
40
  import { css, html, LitElement } from "lit";
9
- import { property } from "lit/decorators.js";
41
+ import { property, state } from "lit/decorators.js";
10
42
  import { base } from "@deepfuture/dui-core/base";
11
43
  import { customEvent } from "@deepfuture/dui-core/event";
12
44
  export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
@@ -74,144 +106,186 @@ const styles = css `
74
106
  * Supports pointer drag, keyboard navigation (arrows, Page Up/Down, Home/End),
75
107
  * and a hidden native range input for accessibility.
76
108
  */
77
- export class DuiSlider extends LitElement {
78
- static { this.tagName = "dui-slider"; }
79
- static { this.styles = [base, styles]; }
80
- #value_accessor_storage = 0;
81
- /** Current value. */
82
- get value() { return this.#value_accessor_storage; }
83
- set value(value) { this.#value_accessor_storage = value; }
84
- #min_accessor_storage = 0;
85
- /** Minimum value. */
86
- get min() { return this.#min_accessor_storage; }
87
- set min(value) { this.#min_accessor_storage = value; }
88
- #max_accessor_storage = 100;
89
- /** Maximum value. */
90
- get max() { return this.#max_accessor_storage; }
91
- set max(value) { this.#max_accessor_storage = value; }
92
- #step_accessor_storage = 1;
93
- /** Step increment. */
94
- get step() { return this.#step_accessor_storage; }
95
- set step(value) { this.#step_accessor_storage = value; }
96
- #disabled_accessor_storage = false;
97
- /** Whether the slider is disabled. */
98
- get disabled() { return this.#disabled_accessor_storage; }
99
- set disabled(value) { this.#disabled_accessor_storage = value; }
100
- #name_accessor_storage = "";
101
- /** Name for form submission. */
102
- get name() { return this.#name_accessor_storage; }
103
- set name(value) { this.#name_accessor_storage = value; }
104
- #dragging_accessor_storage = false;
105
- get #dragging() { return this.#dragging_accessor_storage; }
106
- set #dragging(value) { this.#dragging_accessor_storage = value; }
107
- get #progress() {
108
- const range = this.max - this.min;
109
- if (range === 0)
110
- return 0;
111
- return ((this.value - this.min) / range) * 100;
112
- }
113
- #clampValue(value) {
114
- const stepped = Math.round(value / this.step) * this.step;
115
- return Math.max(this.min, Math.min(this.max, stepped));
116
- }
117
- #getValueFromPosition(clientX) {
118
- const track = this.shadowRoot?.querySelector("[part='track']");
119
- if (!track)
120
- return this.value;
121
- const rect = track.getBoundingClientRect();
122
- const percentage = (clientX - rect.left) / rect.width;
123
- const rawValue = this.min + percentage * (this.max - this.min);
124
- return this.#clampValue(rawValue);
125
- }
126
- #onPointerDown = (event) => {
127
- if (this.disabled)
128
- return;
129
- event.preventDefault();
130
- this.#dragging = true;
131
- const newValue = this.#getValueFromPosition(event.clientX);
132
- if (newValue !== this.value) {
133
- this.value = newValue;
134
- this.dispatchEvent(valueChangeEvent({ value: newValue }));
109
+ let DuiSlider = (() => {
110
+ let _classSuper = LitElement;
111
+ let _value_decorators;
112
+ let _value_initializers = [];
113
+ let _value_extraInitializers = [];
114
+ let _min_decorators;
115
+ let _min_initializers = [];
116
+ let _min_extraInitializers = [];
117
+ let _max_decorators;
118
+ let _max_initializers = [];
119
+ let _max_extraInitializers = [];
120
+ let _step_decorators;
121
+ let _step_initializers = [];
122
+ let _step_extraInitializers = [];
123
+ let _disabled_decorators;
124
+ let _disabled_initializers = [];
125
+ let _disabled_extraInitializers = [];
126
+ let _name_decorators;
127
+ let _name_initializers = [];
128
+ let _name_extraInitializers = [];
129
+ let _private_dragging_decorators;
130
+ let _private_dragging_initializers = [];
131
+ let _private_dragging_extraInitializers = [];
132
+ let _private_dragging_descriptor;
133
+ return class DuiSlider extends _classSuper {
134
+ static {
135
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
136
+ _value_decorators = [property({ type: Number })];
137
+ _min_decorators = [property({ type: Number })];
138
+ _max_decorators = [property({ type: Number })];
139
+ _step_decorators = [property({ type: Number })];
140
+ _disabled_decorators = [property({ type: Boolean, reflect: true })];
141
+ _name_decorators = [property()];
142
+ _private_dragging_decorators = [state()];
143
+ __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);
144
+ __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);
145
+ __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);
146
+ __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);
147
+ __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);
148
+ __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);
149
+ __esDecorate(this, _private_dragging_descriptor = { get: __setFunctionName(function () { return this.#dragging_accessor_storage; }, "#dragging", "get"), set: __setFunctionName(function (value) { this.#dragging_accessor_storage = value; }, "#dragging", "set") }, _private_dragging_decorators, { kind: "accessor", name: "#dragging", static: false, private: true, access: { has: obj => #dragging in obj, get: obj => obj.#dragging, set: (obj, value) => { obj.#dragging = value; } }, metadata: _metadata }, _private_dragging_initializers, _private_dragging_extraInitializers);
150
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
135
151
  }
136
- document.addEventListener("pointermove", this.#onPointerMove);
137
- document.addEventListener("pointerup", this.#onPointerUp);
138
- };
139
- #onPointerMove = (event) => {
140
- if (!this.#dragging)
141
- return;
142
- const newValue = this.#getValueFromPosition(event.clientX);
143
- if (newValue !== this.value) {
144
- this.value = newValue;
145
- this.dispatchEvent(valueChangeEvent({ value: newValue }));
152
+ static tagName = "dui-slider";
153
+ static styles = [base, styles];
154
+ #value_accessor_storage = __runInitializers(this, _value_initializers, 0);
155
+ /** Current value. */
156
+ get value() { return this.#value_accessor_storage; }
157
+ set value(value) { this.#value_accessor_storage = value; }
158
+ #min_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _min_initializers, 0));
159
+ /** Minimum value. */
160
+ get min() { return this.#min_accessor_storage; }
161
+ set min(value) { this.#min_accessor_storage = value; }
162
+ #max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, 100));
163
+ /** Maximum value. */
164
+ get max() { return this.#max_accessor_storage; }
165
+ set max(value) { this.#max_accessor_storage = value; }
166
+ #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1));
167
+ /** Step increment. */
168
+ get step() { return this.#step_accessor_storage; }
169
+ set step(value) { this.#step_accessor_storage = value; }
170
+ #disabled_accessor_storage = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _disabled_initializers, false));
171
+ /** Whether the slider is disabled. */
172
+ get disabled() { return this.#disabled_accessor_storage; }
173
+ set disabled(value) { this.#disabled_accessor_storage = value; }
174
+ #name_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _name_initializers, ""));
175
+ /** Name for form submission. */
176
+ get name() { return this.#name_accessor_storage; }
177
+ set name(value) { this.#name_accessor_storage = value; }
178
+ #dragging_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _private_dragging_initializers, false));
179
+ get #dragging() { return _private_dragging_descriptor.get.call(this); }
180
+ set #dragging(value) { return _private_dragging_descriptor.set.call(this, value); }
181
+ get #progress() {
182
+ const range = this.max - this.min;
183
+ if (range === 0)
184
+ return 0;
185
+ return ((this.value - this.min) / range) * 100;
146
186
  }
147
- };
148
- #onPointerUp = () => {
149
- if (!this.#dragging)
150
- return;
151
- this.#dragging = false;
152
- this.dispatchEvent(valueCommittedEvent({ value: this.value }));
153
- document.removeEventListener("pointermove", this.#onPointerMove);
154
- document.removeEventListener("pointerup", this.#onPointerUp);
155
- };
156
- #onKeyDown = (event) => {
157
- if (this.disabled)
158
- return;
159
- let newValue = this.value;
160
- const largeStep = this.step * 10;
161
- switch (event.key) {
162
- case "ArrowRight":
163
- case "ArrowUp":
164
- event.preventDefault();
165
- newValue = this.#clampValue(this.value + this.step);
166
- break;
167
- case "ArrowLeft":
168
- case "ArrowDown":
169
- event.preventDefault();
170
- newValue = this.#clampValue(this.value - this.step);
171
- break;
172
- case "PageUp":
173
- event.preventDefault();
174
- newValue = this.#clampValue(this.value + largeStep);
175
- break;
176
- case "PageDown":
177
- event.preventDefault();
178
- newValue = this.#clampValue(this.value - largeStep);
179
- break;
180
- case "Home":
181
- event.preventDefault();
182
- newValue = this.min;
183
- break;
184
- case "End":
185
- event.preventDefault();
186
- newValue = this.max;
187
- break;
188
- default:
189
- return;
187
+ #clampValue(value) {
188
+ const stepped = Math.round(value / this.step) * this.step;
189
+ return Math.max(this.min, Math.min(this.max, stepped));
190
190
  }
191
- if (newValue !== this.value) {
192
- this.value = newValue;
193
- this.dispatchEvent(valueChangeEvent({ value: newValue }));
194
- this.dispatchEvent(valueCommittedEvent({ value: newValue }));
191
+ #getValueFromPosition(clientX) {
192
+ const track = this.shadowRoot?.querySelector("[part='track']");
193
+ if (!track)
194
+ return this.value;
195
+ const rect = track.getBoundingClientRect();
196
+ const percentage = (clientX - rect.left) / rect.width;
197
+ const rawValue = this.min + percentage * (this.max - this.min);
198
+ return this.#clampValue(rawValue);
195
199
  }
196
- };
197
- #onNativeInput = (event) => {
198
- const target = event.target;
199
- const newValue = parseFloat(target.value);
200
- if (!isNaN(newValue) && newValue !== this.value) {
201
- this.value = newValue;
202
- this.dispatchEvent(valueChangeEvent({ value: newValue }));
200
+ #onPointerDown = (__runInitializers(this, _private_dragging_extraInitializers), (event) => {
201
+ if (this.disabled)
202
+ return;
203
+ event.preventDefault();
204
+ this.#dragging = true;
205
+ const newValue = this.#getValueFromPosition(event.clientX);
206
+ if (newValue !== this.value) {
207
+ this.value = newValue;
208
+ this.dispatchEvent(valueChangeEvent({ value: newValue }));
209
+ }
210
+ document.addEventListener("pointermove", this.#onPointerMove);
211
+ document.addEventListener("pointerup", this.#onPointerUp);
212
+ });
213
+ #onPointerMove = (event) => {
214
+ if (!this.#dragging)
215
+ return;
216
+ const newValue = this.#getValueFromPosition(event.clientX);
217
+ if (newValue !== this.value) {
218
+ this.value = newValue;
219
+ this.dispatchEvent(valueChangeEvent({ value: newValue }));
220
+ }
221
+ };
222
+ #onPointerUp = () => {
223
+ if (!this.#dragging)
224
+ return;
225
+ this.#dragging = false;
226
+ this.dispatchEvent(valueCommittedEvent({ value: this.value }));
227
+ document.removeEventListener("pointermove", this.#onPointerMove);
228
+ document.removeEventListener("pointerup", this.#onPointerUp);
229
+ };
230
+ #onKeyDown = (event) => {
231
+ if (this.disabled)
232
+ return;
233
+ let newValue = this.value;
234
+ const largeStep = this.step * 10;
235
+ switch (event.key) {
236
+ case "ArrowRight":
237
+ case "ArrowUp":
238
+ event.preventDefault();
239
+ newValue = this.#clampValue(this.value + this.step);
240
+ break;
241
+ case "ArrowLeft":
242
+ case "ArrowDown":
243
+ event.preventDefault();
244
+ newValue = this.#clampValue(this.value - this.step);
245
+ break;
246
+ case "PageUp":
247
+ event.preventDefault();
248
+ newValue = this.#clampValue(this.value + largeStep);
249
+ break;
250
+ case "PageDown":
251
+ event.preventDefault();
252
+ newValue = this.#clampValue(this.value - largeStep);
253
+ break;
254
+ case "Home":
255
+ event.preventDefault();
256
+ newValue = this.min;
257
+ break;
258
+ case "End":
259
+ event.preventDefault();
260
+ newValue = this.max;
261
+ break;
262
+ default:
263
+ return;
264
+ }
265
+ if (newValue !== this.value) {
266
+ this.value = newValue;
267
+ this.dispatchEvent(valueChangeEvent({ value: newValue }));
268
+ this.dispatchEvent(valueCommittedEvent({ value: newValue }));
269
+ }
270
+ };
271
+ #onNativeInput = (event) => {
272
+ const target = event.target;
273
+ const newValue = parseFloat(target.value);
274
+ if (!isNaN(newValue) && newValue !== this.value) {
275
+ this.value = newValue;
276
+ this.dispatchEvent(valueChangeEvent({ value: newValue }));
277
+ }
278
+ };
279
+ #onNativeChange = () => {
280
+ this.dispatchEvent(valueCommittedEvent({ value: this.value }));
281
+ };
282
+ disconnectedCallback() {
283
+ super.disconnectedCallback();
284
+ document.removeEventListener("pointermove", this.#onPointerMove);
285
+ document.removeEventListener("pointerup", this.#onPointerUp);
203
286
  }
204
- };
205
- #onNativeChange = () => {
206
- this.dispatchEvent(valueCommittedEvent({ value: this.value }));
207
- };
208
- disconnectedCallback() {
209
- super.disconnectedCallback();
210
- document.removeEventListener("pointermove", this.#onPointerMove);
211
- document.removeEventListener("pointerup", this.#onPointerUp);
212
- }
213
- render() {
214
- return html `
287
+ render() {
288
+ return html `
215
289
  <div
216
290
  part="root"
217
291
  role="group"
@@ -245,23 +319,7 @@ export class DuiSlider extends LitElement {
245
319
  />
246
320
  </div>
247
321
  `;
248
- }
249
- }
250
- __decorate([
251
- property({ type: Number })
252
- ], DuiSlider.prototype, "value", null);
253
- __decorate([
254
- property({ type: Number })
255
- ], DuiSlider.prototype, "min", null);
256
- __decorate([
257
- property({ type: Number })
258
- ], DuiSlider.prototype, "max", null);
259
- __decorate([
260
- property({ type: Number })
261
- ], DuiSlider.prototype, "step", null);
262
- __decorate([
263
- property({ type: Boolean, reflect: true })
264
- ], DuiSlider.prototype, "disabled", null);
265
- __decorate([
266
- property()
267
- ], DuiSlider.prototype, "name", null);
322
+ }
323
+ };
324
+ })();
325
+ export { DuiSlider };
@@ -1 +1,3 @@
1
- export { DuiSpinner } from "./spinner.js";
1
+ import { DuiSpinner } from "./spinner.js";
2
+ export { DuiSpinner };
3
+ export declare const spinnerFamily: (typeof DuiSpinner)[];
package/spinner/index.js CHANGED
@@ -1 +1,3 @@
1
- export { DuiSpinner } from "./spinner.js";
1
+ import { DuiSpinner } from "./spinner.js";
2
+ export { DuiSpinner };
3
+ export const spinnerFamily = [DuiSpinner];
@@ -1,9 +1,37 @@
1
1
  /** Ported from original DUI: deep-future-app/app/client/components/dui/spinner */
2
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
- 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;
6
- return c > 3 && r && Object.defineProperty(target, key, r), r;
2
+ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
3
+ function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
4
+ var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
5
+ var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
6
+ var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
7
+ var _, done = false;
8
+ for (var i = decorators.length - 1; i >= 0; i--) {
9
+ var context = {};
10
+ for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
11
+ for (var p in contextIn.access) context.access[p] = contextIn.access[p];
12
+ context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
13
+ var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
14
+ if (kind === "accessor") {
15
+ if (result === void 0) continue;
16
+ if (result === null || typeof result !== "object") throw new TypeError("Object expected");
17
+ if (_ = accept(result.get)) descriptor.get = _;
18
+ if (_ = accept(result.set)) descriptor.set = _;
19
+ if (_ = accept(result.init)) initializers.unshift(_);
20
+ }
21
+ else if (_ = accept(result)) {
22
+ if (kind === "field") initializers.unshift(_);
23
+ else descriptor[key] = _;
24
+ }
25
+ }
26
+ if (target) Object.defineProperty(target, contextIn.name, descriptor);
27
+ done = true;
28
+ };
29
+ var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
30
+ var useValue = arguments.length > 2;
31
+ for (var i = 0; i < initializers.length; i++) {
32
+ value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
33
+ }
34
+ return useValue ? value : void 0;
7
35
  };
8
36
  import { css, html, LitElement, svg } from "lit";
9
37
  import { property } from "lit/decorators.js";
@@ -105,27 +133,41 @@ const styles = css `
105
133
  /**
106
134
  * A loading indicator with multiple animation variants and sizes.
107
135
  */
108
- export class DuiSpinner extends LitElement {
109
- static { this.tagName = "dui-spinner"; }
110
- static { this.styles = [base, styles]; }
111
- #variant_accessor_storage = "";
112
- /** Animation variant. */
113
- get variant() { return this.#variant_accessor_storage; }
114
- set variant(value) { this.#variant_accessor_storage = value; }
115
- #getSvg() {
116
- switch (this.variant) {
117
- case "lucide-loader":
118
- return lucideLoaderSvg;
119
- case "lucide-loader-circle":
120
- return lucideLoaderCircleSvg;
121
- default:
122
- return pulseSvg;
136
+ let DuiSpinner = (() => {
137
+ let _classSuper = LitElement;
138
+ let _variant_decorators;
139
+ let _variant_initializers = [];
140
+ let _variant_extraInitializers = [];
141
+ return class DuiSpinner extends _classSuper {
142
+ static {
143
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
144
+ _variant_decorators = [property({ reflect: true })];
145
+ __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
146
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
123
147
  }
124
- }
125
- render() {
126
- return html `${this.#getSvg()}`;
127
- }
128
- }
129
- __decorate([
130
- property({ reflect: true })
131
- ], DuiSpinner.prototype, "variant", null);
148
+ static tagName = "dui-spinner";
149
+ static styles = [base, styles];
150
+ #variant_accessor_storage = __runInitializers(this, _variant_initializers, "");
151
+ /** Animation variant. */
152
+ get variant() { return this.#variant_accessor_storage; }
153
+ set variant(value) { this.#variant_accessor_storage = value; }
154
+ #getSvg() {
155
+ switch (this.variant) {
156
+ case "lucide-loader":
157
+ return lucideLoaderSvg;
158
+ case "lucide-loader-circle":
159
+ return lucideLoaderCircleSvg;
160
+ default:
161
+ return pulseSvg;
162
+ }
163
+ }
164
+ render() {
165
+ return html `${this.#getSvg()}`;
166
+ }
167
+ constructor() {
168
+ super(...arguments);
169
+ __runInitializers(this, _variant_extraInitializers);
170
+ }
171
+ };
172
+ })();
173
+ export { DuiSpinner };
package/switch/index.d.ts CHANGED
@@ -1 +1,3 @@
1
- export { DuiSwitch, checkedChangeEvent } from "./switch.js";
1
+ import { DuiSwitch, checkedChangeEvent } from "./switch.js";
2
+ export { DuiSwitch, checkedChangeEvent };
3
+ export declare const switchFamily: (typeof DuiSwitch)[];
package/switch/index.js CHANGED
@@ -1 +1,3 @@
1
- export { DuiSwitch, checkedChangeEvent } from "./switch.js";
1
+ import { DuiSwitch, checkedChangeEvent } from "./switch.js";
2
+ export { DuiSwitch, checkedChangeEvent };
3
+ export const switchFamily = [DuiSwitch];