@ktjs/mui 0.18.9 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1296 -33
- package/dist/index.iife.js +492 -203
- package/dist/index.mjs +443 -156
- package/package.json +3 -2
package/dist/index.iife.js
CHANGED
|
@@ -1,94 +1,349 @@
|
|
|
1
|
-
var __ktjs_mui__ = (function (exports
|
|
1
|
+
var __ktjs_mui__ = (function (exports) {
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
// Cached native methods for performance optimization
|
|
5
|
+
const $isArray = Array.isArray;
|
|
6
|
+
const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
|
|
7
|
+
|
|
8
|
+
// Error handling utilities
|
|
9
|
+
const $throw = (message) => {
|
|
10
|
+
throw new Error('@ktjs/shared: ' + message);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
// DOM manipulation utilities
|
|
14
|
+
// # dom natives
|
|
15
|
+
/**
|
|
16
|
+
* & Remove `bind` because it is shockingly slower than wrapper
|
|
17
|
+
* & `window.document` is safe because it is not configurable and its setter is undefined
|
|
6
18
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
19
|
+
const $appendChild = HTMLElement.prototype.appendChild;
|
|
20
|
+
const originAppend = HTMLElement.prototype.append;
|
|
21
|
+
const $append = // for ie 9/10/11
|
|
22
|
+
typeof originAppend === 'function'
|
|
23
|
+
? originAppend
|
|
24
|
+
: function (...nodes) {
|
|
25
|
+
if (nodes.length < 50) {
|
|
26
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
27
|
+
const node = nodes[i];
|
|
28
|
+
if (typeof node === 'string') {
|
|
29
|
+
$appendChild.call(this, document.createTextNode(node));
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
$appendChild.call(this, node);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
const fragment = document.createDocumentFragment();
|
|
38
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
39
|
+
const node = nodes[i];
|
|
40
|
+
if (typeof node === 'string') {
|
|
41
|
+
$appendChild.call(fragment, document.createTextNode(node));
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
$appendChild.call(fragment, node);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
$appendChild.call(this, fragment);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const { get: $buttonDisabledGetter$2, set: $buttonDisabledSetter$2 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
|
|
51
|
+
|
|
52
|
+
// Shared utilities and cached native methods for kt.js framework
|
|
53
|
+
// Re-export all utilities
|
|
54
|
+
Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
|
|
55
|
+
|
|
56
|
+
const booleanHandler = (element, key, value) => {
|
|
57
|
+
if (key in element) {
|
|
58
|
+
element[key] = !!value;
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
element.setAttribute(key, value);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
const valueHandler = (element, key, value) => {
|
|
65
|
+
if (key in element) {
|
|
66
|
+
element[key] = value;
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
element.setAttribute(key, value);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
// Attribute handlers map for optimized lookup
|
|
73
|
+
const handlers = {
|
|
74
|
+
checked: booleanHandler,
|
|
75
|
+
selected: booleanHandler,
|
|
76
|
+
value: valueHandler,
|
|
77
|
+
valueAsDate: valueHandler,
|
|
78
|
+
valueAsNumber: valueHandler,
|
|
79
|
+
defaultValue: valueHandler,
|
|
80
|
+
defaultChecked: booleanHandler,
|
|
81
|
+
defaultSelected: booleanHandler,
|
|
82
|
+
disabled: booleanHandler,
|
|
83
|
+
readOnly: booleanHandler,
|
|
84
|
+
multiple: booleanHandler,
|
|
85
|
+
required: booleanHandler,
|
|
86
|
+
autofocus: booleanHandler,
|
|
87
|
+
open: booleanHandler,
|
|
88
|
+
controls: booleanHandler,
|
|
89
|
+
autoplay: booleanHandler,
|
|
90
|
+
loop: booleanHandler,
|
|
91
|
+
muted: booleanHandler,
|
|
92
|
+
defer: booleanHandler,
|
|
93
|
+
async: booleanHandler,
|
|
94
|
+
hidden: (element, _key, value) => (element.hidden = !!value),
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const defaultHandler = (element, key, value) => element.setAttribute(key, value);
|
|
98
|
+
function attrIsObject(element, attr) {
|
|
99
|
+
const classValue = attr.class || attr.className;
|
|
100
|
+
if (classValue !== undefined) {
|
|
101
|
+
element.setAttribute('class', classValue);
|
|
102
|
+
}
|
|
103
|
+
const style = attr.style;
|
|
104
|
+
if (style) {
|
|
105
|
+
if (typeof style === 'string') {
|
|
106
|
+
element.setAttribute('style', style);
|
|
107
|
+
}
|
|
108
|
+
else if (typeof style === 'object') {
|
|
109
|
+
for (const key in style) {
|
|
110
|
+
element.style[key] = style[key];
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
for (const key in attr) {
|
|
115
|
+
if (key === 'class' ||
|
|
116
|
+
key === 'className' ||
|
|
117
|
+
key === 'style' ||
|
|
118
|
+
key === 'children' ||
|
|
119
|
+
key === 'k-if' ||
|
|
120
|
+
key === 'ref') {
|
|
121
|
+
continue;
|
|
122
|
+
}
|
|
123
|
+
const o = attr[key];
|
|
124
|
+
// normal event handler
|
|
125
|
+
if (key.startsWith('on:')) {
|
|
126
|
+
element.addEventListener(key.slice(3), o); // chop off the `on:`
|
|
127
|
+
}
|
|
128
|
+
// normal attributes
|
|
129
|
+
else {
|
|
130
|
+
(handlers[key] || defaultHandler)(element, key, o);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
function applyAttr(element, attr) {
|
|
135
|
+
if (!attr) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
if (typeof attr === 'object' && attr !== null) {
|
|
139
|
+
attrIsObject(element, attr);
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
throw new Error('kt.js: attr must be an object.');
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
function apdSingle(element, c) {
|
|
147
|
+
// & JSX should ignore false, undefined, and null
|
|
148
|
+
if (c === false || c === undefined || c === null) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
if (typeof c === 'object' && c !== null && 'isKT' in c) {
|
|
152
|
+
$append.call(element, c.value);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
$append.call(element, c);
|
|
156
|
+
// Handle KTFor anchor
|
|
157
|
+
const list = c.__kt_for_list__;
|
|
158
|
+
if ($isArray(list)) {
|
|
159
|
+
apd(element, list);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
function apd(element, c) {
|
|
164
|
+
if ($isThenable(c)) {
|
|
165
|
+
c.then((r) => apd(element, r));
|
|
166
|
+
}
|
|
167
|
+
else if ($isArray(c)) {
|
|
168
|
+
for (let i = 0; i < c.length; i++) {
|
|
169
|
+
// & might be thenable here too
|
|
170
|
+
const ci = c[i];
|
|
171
|
+
if ($isThenable(ci)) {
|
|
172
|
+
const comment = document.createComment('ktjs-promise-placeholder');
|
|
173
|
+
$append.call(element, comment);
|
|
174
|
+
ci.then((awaited) => comment.replaceWith(awaited));
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
apdSingle(element, ci);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
else {
|
|
182
|
+
// & here is thened, so must be a simple elementj
|
|
183
|
+
apdSingle(element, c);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
function applyContent(element, content) {
|
|
187
|
+
if ($isArray(content)) {
|
|
188
|
+
for (let i = 0; i < content.length; i++) {
|
|
189
|
+
apd(element, content[i]);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
apd(element, content);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
const svgTempWrapper = document.createElement('div');
|
|
198
|
+
/**
|
|
199
|
+
* Create an enhanced HTMLElement.
|
|
200
|
+
* - Only supports HTMLElements, **NOT** SVGElements or other Elements.
|
|
201
|
+
* @param tag tag of an `HTMLElement`
|
|
202
|
+
* @param attr attribute object or className
|
|
203
|
+
* @param content a string or an array of HTMLEnhancedElement as child nodes
|
|
204
|
+
*
|
|
205
|
+
* ## About
|
|
206
|
+
* @package @ktjs/core
|
|
207
|
+
* @author Kasukabe Tsumugi <futami16237@gmail.com>
|
|
208
|
+
* @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
|
|
209
|
+
* @license MIT
|
|
210
|
+
* @link https://github.com/baendlorel/kt.js
|
|
211
|
+
* @link https://baendlorel.github.io/ Welcome to my site!
|
|
212
|
+
* @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
|
|
213
|
+
* @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
|
|
214
|
+
*/
|
|
215
|
+
const h = (tag, attr, content) => {
|
|
216
|
+
if (typeof tag !== 'string') {
|
|
217
|
+
$throw('tagName must be a string.');
|
|
218
|
+
}
|
|
219
|
+
// * start creating the element
|
|
220
|
+
const element = document.createElement(tag);
|
|
221
|
+
// * Handle content
|
|
222
|
+
applyAttr(element, attr);
|
|
223
|
+
applyContent(element, content);
|
|
224
|
+
if (tag === 'svg') {
|
|
225
|
+
svgTempWrapper.innerHTML = element.outerHTML;
|
|
226
|
+
return svgTempWrapper.firstChild;
|
|
227
|
+
}
|
|
228
|
+
return element;
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
const dummyRef = { value: null };
|
|
232
|
+
/**
|
|
233
|
+
* @param tag html tag or function component
|
|
234
|
+
* @param props properties/attributes
|
|
235
|
+
*/
|
|
236
|
+
function jsx(tag, props = {}) {
|
|
237
|
+
const ref = props.ref?.isKT ? props.ref : dummyRef;
|
|
238
|
+
let el;
|
|
239
|
+
if ('k-if' in props && !props['k-if']) {
|
|
240
|
+
// & make comment placeholder in case that ref might be redrawn later
|
|
241
|
+
el = document.createComment('k-if');
|
|
242
|
+
ref.value = el;
|
|
243
|
+
return el;
|
|
244
|
+
}
|
|
245
|
+
// Handle function components
|
|
246
|
+
if (typeof tag === 'function') {
|
|
247
|
+
el = tag(props);
|
|
248
|
+
}
|
|
249
|
+
else {
|
|
250
|
+
el = h(tag, props, props.children);
|
|
251
|
+
}
|
|
252
|
+
ref.value = el;
|
|
253
|
+
return el;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* JSX runtime for React 17+ automatic runtime
|
|
257
|
+
* This is called when using jsx: "react-jsx" or "react-jsxdev"
|
|
258
|
+
*/
|
|
259
|
+
const jsxs = jsx;
|
|
260
|
+
|
|
261
|
+
// Cached native methods for performance optimization
|
|
262
|
+
const $defines = Object.defineProperties;
|
|
263
|
+
|
|
264
|
+
// String manipulation utilities
|
|
265
|
+
/**
|
|
266
|
+
* Default empty function
|
|
267
|
+
*/
|
|
268
|
+
const $emptyFn = (() => true);
|
|
269
|
+
const { get: $buttonDisabledGetter$1, set: $buttonDisabledSetter$1 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
|
|
270
|
+
// # DOM utilities
|
|
271
|
+
const parseStyle = (style) => {
|
|
272
|
+
if (typeof style === 'string') {
|
|
273
|
+
return style;
|
|
274
|
+
}
|
|
12
275
|
if (style && typeof style === 'object') {
|
|
13
|
-
|
|
276
|
+
return Object.entries(style)
|
|
14
277
|
.map(([key, value]) => {
|
|
15
278
|
// Convert camelCase to kebab-case
|
|
16
279
|
const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
|
|
17
280
|
return `${cssKey}: ${value}`;
|
|
18
281
|
})
|
|
19
282
|
.join('; ');
|
|
20
|
-
styleString = styleString ? `${styleString}; ${sxStyles}` : sxStyles;
|
|
21
283
|
}
|
|
284
|
+
return '';
|
|
285
|
+
};
|
|
286
|
+
const generateHandler = (props, key) => {
|
|
287
|
+
const handler = props[key];
|
|
288
|
+
if (typeof handler === 'function') {
|
|
289
|
+
return handler;
|
|
290
|
+
}
|
|
291
|
+
else if (handler && typeof handler === 'object' && handler.isKT) {
|
|
292
|
+
return (value) => (handler.value = value);
|
|
293
|
+
}
|
|
294
|
+
return $emptyFn;
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
// Shared utilities and cached native methods for kt.js framework
|
|
298
|
+
// Re-export all utilities
|
|
299
|
+
Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
|
|
300
|
+
|
|
301
|
+
function Alert(props) {
|
|
302
|
+
const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
|
|
303
|
+
const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
|
|
22
304
|
// Icon SVG paths for different severities
|
|
23
305
|
const getIcon = () => {
|
|
24
|
-
if (icon === false)
|
|
306
|
+
if (icon === false) {
|
|
25
307
|
return null;
|
|
26
|
-
|
|
308
|
+
}
|
|
309
|
+
if (icon) {
|
|
27
310
|
return icon;
|
|
311
|
+
}
|
|
28
312
|
const iconSize = '22px';
|
|
29
313
|
const iconClass = 'mui-alert-icon';
|
|
30
314
|
switch (severity) {
|
|
31
315
|
case 'success':
|
|
32
|
-
return (
|
|
316
|
+
return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
|
|
33
317
|
case 'error':
|
|
34
|
-
return (
|
|
318
|
+
return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }));
|
|
35
319
|
case 'warning':
|
|
36
|
-
return (
|
|
320
|
+
return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
|
|
37
321
|
case 'info':
|
|
38
322
|
default:
|
|
39
|
-
return (
|
|
323
|
+
return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
|
|
40
324
|
}
|
|
41
325
|
};
|
|
42
326
|
const alertIcon = getIcon();
|
|
43
|
-
const alert = (
|
|
327
|
+
const alert = (jsxs("div", { class: classes, style: parseStyle(props.style), role: "alert", children: [alertIcon && jsx("div", { class: "mui-alert-icon-wrapper", children: alertIcon }), jsx("div", { class: "mui-alert-message", children: children }), onClose && (jsx("button", { class: "mui-alert-close", "on:click": onClose, "aria-label": "Close", children: jsx("svg", { viewBox: "0 0 24 24", width: "18px", height: "18px", children: jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }))] }));
|
|
44
328
|
return alert;
|
|
45
329
|
}
|
|
46
330
|
|
|
47
|
-
const emptyFn = () => { };
|
|
48
|
-
const generateHandler = (props, key) => {
|
|
49
|
-
const handler = props[key];
|
|
50
|
-
if (typeof handler === 'function') {
|
|
51
|
-
return handler;
|
|
52
|
-
}
|
|
53
|
-
else if (handler && typeof handler === 'object' && handler.isKT) {
|
|
54
|
-
return (value) => (handler.value = value);
|
|
55
|
-
}
|
|
56
|
-
return emptyFn;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const parseStyle = (style) => {
|
|
60
|
-
if (typeof style === 'string') {
|
|
61
|
-
return style;
|
|
62
|
-
}
|
|
63
|
-
if (style && typeof style === 'object') {
|
|
64
|
-
return Object.entries(style)
|
|
65
|
-
.map(([key, value]) => {
|
|
66
|
-
// Convert camelCase to kebab-case
|
|
67
|
-
const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
|
|
68
|
-
return `${cssKey}: ${value}`;
|
|
69
|
-
})
|
|
70
|
-
.join('; ');
|
|
71
|
-
}
|
|
72
|
-
return '';
|
|
73
|
-
};
|
|
74
|
-
|
|
75
331
|
/**
|
|
76
332
|
* Button component - mimics MUI Button appearance and behavior
|
|
77
333
|
*/
|
|
78
334
|
function Button(props) {
|
|
79
|
-
|
|
335
|
+
let { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = $emptyFn, } = props;
|
|
80
336
|
const classes = [
|
|
81
337
|
'mui-button',
|
|
82
338
|
`mui-button-${variant}`,
|
|
83
339
|
`mui-button-${variant}-${color}`,
|
|
84
340
|
`mui-button-size-${size}`,
|
|
85
|
-
fullWidth
|
|
86
|
-
iconOnly
|
|
87
|
-
disabled
|
|
341
|
+
fullWidth ? 'mui-button-fullwidth' : '',
|
|
342
|
+
iconOnly ? 'mui-button-icon-only' : '',
|
|
343
|
+
disabled ? 'mui-button-disabled' : '',
|
|
88
344
|
props.class ? props.class : '',
|
|
89
|
-
]
|
|
90
|
-
|
|
91
|
-
.join(' ');
|
|
345
|
+
].join(' ');
|
|
346
|
+
const rippleContainer = jsx("span", { class: "mui-button-ripple" });
|
|
92
347
|
const handleClick = (e) => {
|
|
93
348
|
if (disabled) {
|
|
94
349
|
e.preventDefault();
|
|
@@ -96,7 +351,6 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
96
351
|
}
|
|
97
352
|
// Create ripple effect
|
|
98
353
|
const button = e.currentTarget;
|
|
99
|
-
const rippleContainer = button.querySelector('.mui-button-ripple');
|
|
100
354
|
if (rippleContainer) {
|
|
101
355
|
const rect = button.getBoundingClientRect();
|
|
102
356
|
const size = Math.max(rect.width, rect.height);
|
|
@@ -109,13 +363,21 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
109
363
|
ripple.classList.add('mui-button-ripple-effect');
|
|
110
364
|
rippleContainer.appendChild(ripple);
|
|
111
365
|
// Remove ripple after animation
|
|
112
|
-
setTimeout(() =>
|
|
113
|
-
ripple.remove();
|
|
114
|
-
}, 600);
|
|
366
|
+
setTimeout(() => ripple.remove(), 600);
|
|
115
367
|
}
|
|
116
368
|
onClick(e);
|
|
117
369
|
};
|
|
118
|
-
|
|
370
|
+
const container = (jsxs("button", { class: classes, style: parseStyle(props.style), type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), rippleContainer] }));
|
|
371
|
+
$defines(container, {
|
|
372
|
+
disabled: {
|
|
373
|
+
get: $buttonDisabledGetter$1,
|
|
374
|
+
set: function (value) {
|
|
375
|
+
$buttonDisabledSetter$1.call(this, value);
|
|
376
|
+
this.classList.toggle('mui-button-disabled', value);
|
|
377
|
+
},
|
|
378
|
+
},
|
|
379
|
+
});
|
|
380
|
+
return container;
|
|
119
381
|
}
|
|
120
382
|
|
|
121
383
|
/**
|
|
@@ -146,17 +408,17 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
146
408
|
};
|
|
147
409
|
let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
|
|
148
410
|
const onChange = generateHandler(props, 'kt:change');
|
|
149
|
-
const inputEl = (
|
|
411
|
+
const inputEl = (jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
|
|
150
412
|
// Unchecked icon
|
|
151
|
-
const uncheckedIcon = (
|
|
413
|
+
const uncheckedIcon = (jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }) }) }));
|
|
152
414
|
// Checked icon
|
|
153
|
-
const checkedIcon = (
|
|
415
|
+
const checkedIcon = (jsx("span", { class: "mui-checkbox-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }) }));
|
|
154
416
|
// Indeterminate icon
|
|
155
|
-
const indeterminateIcon = (
|
|
417
|
+
const indeterminateIcon = (jsx("span", { class: "mui-checkbox-icon-indeterminate", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" }) }) }));
|
|
156
418
|
// Initialize icon state
|
|
157
419
|
toggleIcon(checked, indeterminate);
|
|
158
|
-
const container = (
|
|
159
|
-
|
|
420
|
+
const container = (jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [inputEl, jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
|
|
421
|
+
$defines(container, {
|
|
160
422
|
checked: {
|
|
161
423
|
get() {
|
|
162
424
|
return checked;
|
|
@@ -221,8 +483,8 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
221
483
|
}
|
|
222
484
|
return Checkbox(o);
|
|
223
485
|
});
|
|
224
|
-
const container = (
|
|
225
|
-
|
|
486
|
+
const container = (jsx("div", { class: `mui-checkbox-group ${row ? 'mui-checkbox-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "group", children: checkboxes }));
|
|
487
|
+
$defines(container, {
|
|
226
488
|
value: {
|
|
227
489
|
get() {
|
|
228
490
|
return Array.from(selectedValues);
|
|
@@ -269,7 +531,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
269
531
|
* Only handles open/close state, title and content are passed as props
|
|
270
532
|
*/
|
|
271
533
|
function Dialog(props) {
|
|
272
|
-
let { open = false, 'kt:close': onClose = emptyFn, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
|
|
534
|
+
let { open = false, 'kt:close': onClose = $emptyFn, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
|
|
273
535
|
// Handle ESC key - store handler for cleanup
|
|
274
536
|
const keyDownHandler = (e) => {
|
|
275
537
|
if (e.key === 'Escape') {
|
|
@@ -283,7 +545,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
283
545
|
}
|
|
284
546
|
};
|
|
285
547
|
// Backdrop element
|
|
286
|
-
const container = (
|
|
548
|
+
const container = (jsx("div", { class: `kt-dialog-backdrop ${open ? 'kt-dialog-backdrop-open' : ''}`, "on:click": handleBackdropClick, style: { display: open ? 'flex' : 'none' }, children: jsxs("div", { class: `kt-dialog-paper ${maxWidth ? `kt-dialog-maxWidth-${maxWidth}` : ''} ${fullWidth ? 'kt-dialog-fullWidth' : ''}`, "on:click": (e) => e.stopPropagation(), children: [jsx("div", { "k-if": title, class: "kt-dialog-title", children: jsx("h2", { children: title }) }), jsx("div", { "k-if": children, class: "kt-dialog-content", children: children }), jsx("div", { "k-if": actions, class: "kt-dialog-actions", children: actions })] }) }));
|
|
287
549
|
document.addEventListener('keydown', keyDownHandler);
|
|
288
550
|
// Store cleanup function
|
|
289
551
|
const originalRemove = container.remove;
|
|
@@ -293,26 +555,28 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
293
555
|
}
|
|
294
556
|
return originalRemove.call(container);
|
|
295
557
|
};
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
558
|
+
$defines(container, {
|
|
559
|
+
open: {
|
|
560
|
+
get: () => open,
|
|
561
|
+
set: (isOpen) => {
|
|
562
|
+
if (isOpen === open) {
|
|
563
|
+
return;
|
|
564
|
+
}
|
|
565
|
+
open = isOpen;
|
|
566
|
+
if (isOpen) {
|
|
567
|
+
// Opening: set display first, then add class with double RAF for animation
|
|
568
|
+
container.style.display = 'flex';
|
|
569
|
+
setTimeout(() => container.classList.add('kt-dialog-backdrop-open'), 50);
|
|
570
|
+
}
|
|
571
|
+
else {
|
|
572
|
+
container.classList.remove('kt-dialog-backdrop-open');
|
|
573
|
+
setTimeout(() => {
|
|
574
|
+
if (!open) {
|
|
575
|
+
container.style.display = 'none';
|
|
576
|
+
}
|
|
577
|
+
}, 225);
|
|
578
|
+
}
|
|
579
|
+
},
|
|
316
580
|
},
|
|
317
581
|
});
|
|
318
582
|
return container;
|
|
@@ -338,58 +602,73 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
338
602
|
if (htmlFor) {
|
|
339
603
|
labelProps.for = htmlFor;
|
|
340
604
|
}
|
|
341
|
-
const element = component === 'legend' ? (
|
|
605
|
+
const element = component === 'legend' ? (jsxs("legend", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] })) : (jsxs("label", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] }));
|
|
342
606
|
return element;
|
|
343
607
|
}
|
|
344
608
|
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
609
|
+
// Cached native methods for performance optimization
|
|
610
|
+
const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
|
|
611
|
+
|
|
612
|
+
// Shared utilities and cached native methods for kt.js framework
|
|
613
|
+
// Re-export all utilities
|
|
614
|
+
Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
|
|
349
615
|
|
|
350
616
|
document.createElement('div');
|
|
351
617
|
|
|
618
|
+
class KTRef {
|
|
619
|
+
/**
|
|
620
|
+
* Indicates that this is a KTRef instance
|
|
621
|
+
*/
|
|
622
|
+
isKT = true;
|
|
623
|
+
_value;
|
|
624
|
+
_onChanges;
|
|
625
|
+
constructor(_value, _onChanges) {
|
|
626
|
+
this._value = _value;
|
|
627
|
+
this._onChanges = _onChanges;
|
|
628
|
+
}
|
|
629
|
+
/**
|
|
630
|
+
* If new value and old value are both nodes, the old one will be replaced in the DOM
|
|
631
|
+
*/
|
|
632
|
+
get value() {
|
|
633
|
+
return this._value;
|
|
634
|
+
}
|
|
635
|
+
set value(newValue) {
|
|
636
|
+
if (newValue === this._value) {
|
|
637
|
+
return;
|
|
638
|
+
}
|
|
639
|
+
// replace the old node with the new one in the DOM if both are nodes
|
|
640
|
+
if (this._value instanceof Node && newValue instanceof Node) {
|
|
641
|
+
if (newValue.contains(this._value)) {
|
|
642
|
+
this._value.remove();
|
|
643
|
+
}
|
|
644
|
+
this._value.replaceWith(newValue);
|
|
645
|
+
}
|
|
646
|
+
const oldValue = this._value;
|
|
647
|
+
this._value = newValue;
|
|
648
|
+
for (let i = 0; i < this._onChanges.length; i++) {
|
|
649
|
+
this._onChanges[i](newValue, oldValue);
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
addOnChange(callback) {
|
|
653
|
+
this._onChanges.push(callback);
|
|
654
|
+
}
|
|
655
|
+
removeOnChange(callback) {
|
|
656
|
+
for (let i = this._onChanges.length - 1; i >= 0; i--) {
|
|
657
|
+
if (this._onChanges[i] === callback) {
|
|
658
|
+
this._onChanges.splice(i, 1);
|
|
659
|
+
return true;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
return false;
|
|
663
|
+
}
|
|
664
|
+
}
|
|
352
665
|
/**
|
|
353
666
|
* Reference to the created HTML element.
|
|
354
667
|
* - can alse be used to store normal values, but it is not reactive.
|
|
355
668
|
* @param value mostly an HTMLElement
|
|
356
669
|
*/
|
|
357
670
|
function ref(value, onChange) {
|
|
358
|
-
|
|
359
|
-
let _onChanges = [];
|
|
360
|
-
return {
|
|
361
|
-
isKT: true,
|
|
362
|
-
get value() {
|
|
363
|
-
return _value;
|
|
364
|
-
},
|
|
365
|
-
set value(newValue) {
|
|
366
|
-
if (newValue === _value) {
|
|
367
|
-
return;
|
|
368
|
-
}
|
|
369
|
-
// replace the old node with the new one in the DOM if both are nodes
|
|
370
|
-
if (_value instanceof Node && newValue instanceof Node) {
|
|
371
|
-
if (newValue.contains(_value)) {
|
|
372
|
-
_value.remove();
|
|
373
|
-
}
|
|
374
|
-
_value.replaceWith(newValue);
|
|
375
|
-
}
|
|
376
|
-
const oldValue = _value;
|
|
377
|
-
_value = newValue;
|
|
378
|
-
for (let i = 0; i < _onChanges.length; i++) {
|
|
379
|
-
_onChanges[i](newValue, oldValue);
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
addOnChange: (callback) => _onChanges.push(callback),
|
|
383
|
-
removeOnChange: (callback) => {
|
|
384
|
-
for (let i = _onChanges.length - 1; i >= 0; i--) {
|
|
385
|
-
if (_onChanges[i] === callback) {
|
|
386
|
-
_onChanges.splice(i, 1);
|
|
387
|
-
return true;
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
return false;
|
|
391
|
-
},
|
|
392
|
-
};
|
|
671
|
+
return new KTRef(value, []);
|
|
393
672
|
}
|
|
394
673
|
/**
|
|
395
674
|
* A helper to create redrawable elements
|
|
@@ -407,13 +686,12 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
407
686
|
*/
|
|
408
687
|
function createRedrawable(creator) {
|
|
409
688
|
const elRef = ref();
|
|
410
|
-
elRef.value = creator();
|
|
411
689
|
const redraw = () => {
|
|
412
690
|
elRef.value = creator(); // ref setter automatically calls replaceWith
|
|
413
|
-
elRef.
|
|
691
|
+
elRef.redraw = redraw;
|
|
414
692
|
return elRef.value;
|
|
415
693
|
};
|
|
416
|
-
|
|
694
|
+
redraw();
|
|
417
695
|
return elRef;
|
|
418
696
|
}
|
|
419
697
|
|
|
@@ -432,16 +710,18 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
432
710
|
// Calculate progress percentage
|
|
433
711
|
let progressValue = Math.min(Math.max(value, 0), 100);
|
|
434
712
|
const barRef = ref();
|
|
435
|
-
const container = (
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
713
|
+
const container = (jsx("div", { class: classes, style: styleString, role: "progressbar", "aria-valuenow": progressValue, children: jsx("div", { ref: barRef, class: "mui-linear-progress-bar", style: variant === 'determinate' ? `width: ${progressValue}%` : '' }) }));
|
|
714
|
+
$defines(container, {
|
|
715
|
+
progress: {
|
|
716
|
+
get() {
|
|
717
|
+
return progressValue;
|
|
718
|
+
},
|
|
719
|
+
set(newValue) {
|
|
720
|
+
progressValue = Math.min(Math.max(newValue, 0), 100);
|
|
721
|
+
if (variant === 'determinate') {
|
|
722
|
+
barRef.value.style.width = `${progressValue}%`;
|
|
723
|
+
}
|
|
724
|
+
},
|
|
445
725
|
},
|
|
446
726
|
});
|
|
447
727
|
return container;
|
|
@@ -507,14 +787,14 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
507
787
|
const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
|
|
508
788
|
let isFocused = false;
|
|
509
789
|
const inputEl = multiline
|
|
510
|
-
? (
|
|
511
|
-
: (
|
|
512
|
-
const helperTextEl =
|
|
513
|
-
const wrapperRef = createRedrawable(() => (
|
|
514
|
-
const container = (
|
|
790
|
+
? (jsx("textarea", { class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, rows: rows, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }))
|
|
791
|
+
: (jsx("input", { type: type, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
|
|
792
|
+
const helperTextEl = jsx("p", { class: "mui-textfield-helper-text", children: helperText });
|
|
793
|
+
const wrapperRef = createRedrawable(() => (jsxs("div", { class: "mui-textfield-wrapper", children: [jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] })));
|
|
794
|
+
const container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: parseStyle(props.style), children: [wrapperRef, helperTextEl] }));
|
|
515
795
|
// Initialize classes
|
|
516
796
|
setTimeout(() => updateContainerClass(), 0);
|
|
517
|
-
|
|
797
|
+
$defines(container, {
|
|
518
798
|
value: {
|
|
519
799
|
get() {
|
|
520
800
|
return inputEl.value;
|
|
@@ -530,7 +810,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
530
810
|
},
|
|
531
811
|
set(newLabel) {
|
|
532
812
|
label = newLabel;
|
|
533
|
-
wrapperRef.
|
|
813
|
+
wrapperRef.redraw(); // label takes too much and should be redrawn
|
|
534
814
|
updateContainerClass();
|
|
535
815
|
},
|
|
536
816
|
},
|
|
@@ -612,13 +892,13 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
612
892
|
onChange(checked, value);
|
|
613
893
|
};
|
|
614
894
|
let { checked = false, value = '', label: text = '', size = 'small', disabled = false, color = 'primary' } = props;
|
|
615
|
-
const input = (
|
|
616
|
-
const uncheckedIcon = (
|
|
617
|
-
const checkedIcon = (
|
|
895
|
+
const input = (jsx("input", { type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
|
|
896
|
+
const uncheckedIcon = (jsx("span", { class: "mui-radio-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
|
|
897
|
+
const checkedIcon = (jsx("span", { class: "mui-radio-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
|
|
618
898
|
// initialize icon state
|
|
619
899
|
toggleIcon(checked);
|
|
620
|
-
const container = (
|
|
621
|
-
|
|
900
|
+
const container = (jsxs("label", { class: `mui-radio-wrapper ${props.class ?? ''} mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, style: parseStyle(props.style), children: [input, jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
|
|
901
|
+
$defines(container, {
|
|
622
902
|
value: {
|
|
623
903
|
get() {
|
|
624
904
|
return value;
|
|
@@ -664,8 +944,8 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
664
944
|
}
|
|
665
945
|
return Radio(o);
|
|
666
946
|
});
|
|
667
|
-
const container = (
|
|
668
|
-
|
|
947
|
+
const container = (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ?? ''}`, style: parseStyle(props.style), role: "radiogroup", children: radios }));
|
|
948
|
+
$defines(container, {
|
|
669
949
|
value: {
|
|
670
950
|
get() {
|
|
671
951
|
return value;
|
|
@@ -687,7 +967,8 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
687
967
|
const onChange = generateHandler(props, 'kt:change');
|
|
688
968
|
let isOpen = false;
|
|
689
969
|
let isFocused = false;
|
|
690
|
-
const selectRef =
|
|
970
|
+
const selectRef = ref();
|
|
971
|
+
const selectLabelRef = ref();
|
|
691
972
|
// Toggle dropdown
|
|
692
973
|
const toggleMenu = () => {
|
|
693
974
|
if (disabled) {
|
|
@@ -700,12 +981,9 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
700
981
|
const updateMenu = () => {
|
|
701
982
|
if (isOpen) {
|
|
702
983
|
menu.value.style.display = 'block';
|
|
703
|
-
// Trigger reflow to enable animation
|
|
704
|
-
menu.value.offsetHeight;
|
|
705
|
-
menu.value.classList.add('mui-select-menu-open');
|
|
984
|
+
void menu.value.offsetHeight; // & Trigger reflow to enable animation
|
|
706
985
|
}
|
|
707
986
|
else {
|
|
708
|
-
menu.value.classList.remove('mui-select-menu-open');
|
|
709
987
|
// Hide after animation completes
|
|
710
988
|
setTimeout(() => {
|
|
711
989
|
if (!isOpen) {
|
|
@@ -713,6 +991,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
713
991
|
}
|
|
714
992
|
}, 200);
|
|
715
993
|
}
|
|
994
|
+
menu.value.classList.toggle('mui-select-menu-open', isOpen);
|
|
716
995
|
selectRef.value.classList.toggle('mui-select-open', isOpen);
|
|
717
996
|
};
|
|
718
997
|
// Handle option click
|
|
@@ -722,11 +1001,8 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
722
1001
|
onChange(value);
|
|
723
1002
|
updateMenu();
|
|
724
1003
|
updateLabelState();
|
|
725
|
-
valueDisplay.
|
|
726
|
-
setTimeout(() =>
|
|
727
|
-
// Trigger redraw of parent if needed
|
|
728
|
-
menu.value.redraw();
|
|
729
|
-
}, 200);
|
|
1004
|
+
valueDisplay.redraw();
|
|
1005
|
+
setTimeout(() => menu.redraw(), 200);
|
|
730
1006
|
};
|
|
731
1007
|
// Close menu when clicking outside
|
|
732
1008
|
const handleClickOutside = (e) => {
|
|
@@ -746,32 +1022,46 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
746
1022
|
};
|
|
747
1023
|
// Update label focused state
|
|
748
1024
|
const updateLabelState = () => {
|
|
749
|
-
|
|
750
|
-
if (labelElement) {
|
|
751
|
-
if (isFocused || value) {
|
|
752
|
-
labelElement.classList.add('focused');
|
|
753
|
-
}
|
|
754
|
-
else {
|
|
755
|
-
labelElement.classList.remove('focused');
|
|
756
|
-
}
|
|
757
|
-
}
|
|
1025
|
+
selectLabelRef.value.classList?.toggle('focused', isFocused || !!value);
|
|
758
1026
|
};
|
|
759
|
-
const valueDisplay =
|
|
1027
|
+
const valueDisplay = createRedrawable(() => {
|
|
760
1028
|
const o = options.find((opt) => opt.value === value);
|
|
761
1029
|
let inner;
|
|
762
1030
|
if (o === undefined) {
|
|
763
|
-
inner =
|
|
1031
|
+
inner = jsx("span", { class: "mui-select-placeholder", children: placeholder || '\u00a0' });
|
|
764
1032
|
}
|
|
765
1033
|
else {
|
|
766
1034
|
inner = o.label;
|
|
767
1035
|
}
|
|
768
|
-
return
|
|
1036
|
+
return jsx("div", { class: "mui-select-display", children: inner });
|
|
769
1037
|
});
|
|
770
|
-
const menu =
|
|
771
|
-
return (
|
|
1038
|
+
const menu = createRedrawable(() => {
|
|
1039
|
+
return (jsx("div", { class: "mui-select-menu", style: "display: none;", children: options.map((option) => (jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
|
|
772
1040
|
});
|
|
773
1041
|
// Create container
|
|
774
|
-
const container = (
|
|
1042
|
+
const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [jsx("label", { "k-if": label, ref: selectLabelRef, class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
|
|
1043
|
+
$defines(container, {
|
|
1044
|
+
value: {
|
|
1045
|
+
get: () => value,
|
|
1046
|
+
set: (newValue) => {
|
|
1047
|
+
value = newValue;
|
|
1048
|
+
updateLabelState();
|
|
1049
|
+
valueDisplay.redraw();
|
|
1050
|
+
menu.redraw();
|
|
1051
|
+
},
|
|
1052
|
+
},
|
|
1053
|
+
disabled: {
|
|
1054
|
+
get: () => disabled,
|
|
1055
|
+
set: (newDisabled) => {
|
|
1056
|
+
disabled = newDisabled;
|
|
1057
|
+
if (disabled) {
|
|
1058
|
+
isOpen = false;
|
|
1059
|
+
updateMenu();
|
|
1060
|
+
}
|
|
1061
|
+
container.classList.toggle('mui-select-disabled', disabled);
|
|
1062
|
+
},
|
|
1063
|
+
},
|
|
1064
|
+
});
|
|
775
1065
|
// Add global click listener
|
|
776
1066
|
setTimeout(() => {
|
|
777
1067
|
document.removeEventListener('click', handleClickOutside);
|
|
@@ -782,91 +1072,91 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
782
1072
|
}
|
|
783
1073
|
|
|
784
1074
|
function DownloadIcon(props) {
|
|
785
|
-
return (
|
|
1075
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }));
|
|
786
1076
|
}
|
|
787
1077
|
|
|
788
1078
|
function CompressIcon(props) {
|
|
789
|
-
return (
|
|
1079
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 9h16v2H4zm0 4h16v2H4zm8-9 4 4H8zm0 14 4-4H8z" }) }));
|
|
790
1080
|
}
|
|
791
1081
|
|
|
792
1082
|
function SubtitlesIcon(props) {
|
|
793
|
-
return (
|
|
1083
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }));
|
|
794
1084
|
}
|
|
795
1085
|
|
|
796
1086
|
function SettingsIcon(props) {
|
|
797
|
-
return (
|
|
1087
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" }) }));
|
|
798
1088
|
}
|
|
799
1089
|
|
|
800
1090
|
function NewReleasesIcon(props) {
|
|
801
|
-
return (
|
|
1091
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z" }) }));
|
|
802
1092
|
}
|
|
803
1093
|
|
|
804
1094
|
function FolderOpenIcon(props) {
|
|
805
|
-
return (
|
|
1095
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }));
|
|
806
1096
|
}
|
|
807
1097
|
|
|
808
1098
|
function PlayArrowIcon(props) {
|
|
809
|
-
return (
|
|
1099
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M8 5v14l11-7z" }) }));
|
|
810
1100
|
}
|
|
811
1101
|
|
|
812
1102
|
function ContentPasteIcon(props) {
|
|
813
|
-
return (
|
|
1103
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }) }));
|
|
814
1104
|
}
|
|
815
1105
|
|
|
816
1106
|
function DeleteIcon(props) {
|
|
817
|
-
return (
|
|
1107
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) }));
|
|
818
1108
|
}
|
|
819
1109
|
|
|
820
1110
|
function StopIcon(props) {
|
|
821
|
-
return (
|
|
1111
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 6h12v12H6z" }) }));
|
|
822
1112
|
}
|
|
823
1113
|
|
|
824
1114
|
function FileOpenIcon(props) {
|
|
825
|
-
return (
|
|
1115
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H15l6-6V4c0-1.1-.9-2-2-2zm-1 7V3.5L18.5 9H13z" }) }));
|
|
826
1116
|
}
|
|
827
1117
|
|
|
828
1118
|
function ColorLensIcon(props) {
|
|
829
|
-
return (
|
|
1119
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }));
|
|
830
1120
|
}
|
|
831
1121
|
|
|
832
1122
|
function WallpaperIcon(props) {
|
|
833
|
-
return (
|
|
1123
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" }) }));
|
|
834
1124
|
}
|
|
835
1125
|
|
|
836
1126
|
function ExpandMoreIcon(props) {
|
|
837
|
-
return (
|
|
1127
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }));
|
|
838
1128
|
}
|
|
839
1129
|
|
|
840
1130
|
function SaveIcon(props) {
|
|
841
|
-
return (
|
|
1131
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" }) }));
|
|
842
1132
|
}
|
|
843
1133
|
|
|
844
1134
|
function UploadFileIcon(props) {
|
|
845
|
-
return (
|
|
1135
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z" }) }));
|
|
846
1136
|
}
|
|
847
1137
|
|
|
848
1138
|
function VideoFileIcon(props) {
|
|
849
|
-
return (
|
|
1139
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-7v-1.5l2 1.5-2 1.5V13H8v-2h8z" }) }));
|
|
850
1140
|
}
|
|
851
1141
|
|
|
852
1142
|
function QueuePlayNextIcon(props) {
|
|
853
|
-
return (
|
|
1143
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5c0-1.11-.9-2-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8-4.5 4.5L18 21l3-3-3-3 1.5-1.5L24 18z" }) }));
|
|
854
1144
|
}
|
|
855
1145
|
|
|
856
1146
|
function MenuIcon(props) {
|
|
857
|
-
return (
|
|
1147
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) }));
|
|
858
1148
|
}
|
|
859
1149
|
|
|
860
1150
|
function HomeIcon(props) {
|
|
861
|
-
return (
|
|
1151
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }) }));
|
|
862
1152
|
}
|
|
863
1153
|
|
|
864
1154
|
function ContentCopyIcon(props) {
|
|
865
|
-
return (
|
|
1155
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }));
|
|
866
1156
|
}
|
|
867
1157
|
|
|
868
1158
|
function SelectAllIcon(props) {
|
|
869
|
-
return (
|
|
1159
|
+
return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z" }) }));
|
|
870
1160
|
}
|
|
871
1161
|
|
|
872
1162
|
exports.Alert = Alert;
|
|
@@ -881,7 +1171,6 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
881
1171
|
exports.Dialog = Dialog;
|
|
882
1172
|
exports.DownloadIcon = DownloadIcon;
|
|
883
1173
|
exports.ExpandMoreIcon = ExpandMoreIcon;
|
|
884
|
-
exports.FileOpen = FileOpenIcon;
|
|
885
1174
|
exports.FileOpenIcon = FileOpenIcon;
|
|
886
1175
|
exports.FolderOpenIcon = FolderOpenIcon;
|
|
887
1176
|
exports.FormLabel = FormLabel;
|
|
@@ -906,4 +1195,4 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
|
|
|
906
1195
|
|
|
907
1196
|
return exports;
|
|
908
1197
|
|
|
909
|
-
})({}
|
|
1198
|
+
})({});
|