tosijs-ui 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/dist/iife.js +70 -60
- package/dist/iife.js.map +42 -42
- package/dist/index.d.ts +1 -1
- package/dist/index.js +15 -37
- package/dist/index.js.map +39 -39
- package/dist/version.d.ts +1 -1
- package/package.json +2 -2
- package/dist/ab-test.js +0 -116
- package/dist/babylon-3d.js +0 -292
- package/dist/bodymovin-player.js +0 -172
- package/dist/bp-loader.js +0 -26
- package/dist/carousel.js +0 -308
- package/dist/code-editor.js +0 -102
- package/dist/color-input.js +0 -112
- package/dist/data-table.js +0 -774
- package/dist/drag-and-drop.js +0 -386
- package/dist/editable-rect.js +0 -450
- package/dist/filter-builder.js +0 -468
- package/dist/float.js +0 -170
- package/dist/form.js +0 -466
- package/dist/gamepad.js +0 -115
- package/dist/icon-data.js +0 -308
- package/dist/icon-types.js +0 -1
- package/dist/icons.js +0 -374
- package/dist/index-iife.js +0 -4
- package/dist/live-example.js +0 -611
- package/dist/localize.js +0 -381
- package/dist/make-sorter.js +0 -119
- package/dist/make-sorter.test.d.ts +0 -1
- package/dist/make-sorter.test.js +0 -48
- package/dist/mapbox.js +0 -161
- package/dist/markdown-viewer.js +0 -173
- package/dist/match-shortcut.js +0 -13
- package/dist/match-shortcut.test.d.ts +0 -1
- package/dist/match-shortcut.test.js +0 -194
- package/dist/menu.js +0 -614
- package/dist/notifications.js +0 -308
- package/dist/password-strength.js +0 -302
- package/dist/playwright.config.d.ts +0 -9
- package/dist/playwright.config.js +0 -73
- package/dist/pop-float.js +0 -231
- package/dist/rating.js +0 -192
- package/dist/rich-text.js +0 -296
- package/dist/segmented.js +0 -298
- package/dist/select.js +0 -427
- package/dist/side-nav.js +0 -106
- package/dist/size-break.js +0 -118
- package/dist/sizer.js +0 -92
- package/dist/src/ab-test.d.ts +0 -14
- package/dist/src/babylon-3d.d.ts +0 -53
- package/dist/src/bodymovin-player.d.ts +0 -32
- package/dist/src/bp-loader.d.ts +0 -0
- package/dist/src/carousel.d.ts +0 -113
- package/dist/src/code-editor.d.ts +0 -27
- package/dist/src/color-input.d.ts +0 -41
- package/dist/src/data-table.d.ts +0 -79
- package/dist/src/drag-and-drop.d.ts +0 -2
- package/dist/src/editable-rect.d.ts +0 -97
- package/dist/src/filter-builder.d.ts +0 -64
- package/dist/src/float.d.ts +0 -18
- package/dist/src/form.d.ts +0 -68
- package/dist/src/gamepad.d.ts +0 -34
- package/dist/src/icon-data.d.ts +0 -309
- package/dist/src/icon-types.d.ts +0 -7
- package/dist/src/icons.d.ts +0 -17
- package/dist/src/index.d.ts +0 -37
- package/dist/src/live-example.d.ts +0 -51
- package/dist/src/localize.d.ts +0 -30
- package/dist/src/make-sorter.d.ts +0 -3
- package/dist/src/mapbox.d.ts +0 -24
- package/dist/src/markdown-viewer.d.ts +0 -15
- package/dist/src/match-shortcut.d.ts +0 -9
- package/dist/src/menu.d.ts +0 -60
- package/dist/src/notifications.d.ts +0 -106
- package/dist/src/password-strength.d.ts +0 -35
- package/dist/src/pop-float.d.ts +0 -10
- package/dist/src/rating.d.ts +0 -62
- package/dist/src/rich-text.d.ts +0 -28
- package/dist/src/segmented.d.ts +0 -80
- package/dist/src/select.d.ts +0 -43
- package/dist/src/side-nav.d.ts +0 -36
- package/dist/src/size-break.d.ts +0 -18
- package/dist/src/sizer.d.ts +0 -34
- package/dist/src/tab-selector.d.ts +0 -91
- package/dist/src/tag-list.d.ts +0 -37
- package/dist/src/track-drag.d.ts +0 -5
- package/dist/src/version.d.ts +0 -1
- package/dist/src/via-tag.d.ts +0 -2
- package/dist/tab-selector.js +0 -326
- package/dist/tag-list.js +0 -375
- package/dist/track-drag.js +0 -143
- package/dist/version.js +0 -1
- package/dist/via-tag.js +0 -102
package/dist/markdown-viewer.js
DELETED
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import { Component, xin } from 'xinjs';
|
|
2
|
-
import { marked } from 'marked';
|
|
3
|
-
/*#
|
|
4
|
-
# markdown
|
|
5
|
-
|
|
6
|
-
`<xin-md>` renders markdown using [marked](https://www.npmjs.com/package/marked).
|
|
7
|
-
|
|
8
|
-
`<xin-md>` renders [markdown](https://www.markdownguide.org/) anywhere, either using the
|
|
9
|
-
`src` attribute to load the file asynchronously, or rendering the text inside it.
|
|
10
|
-
|
|
11
|
-
```html
|
|
12
|
-
<xin-md>
|
|
13
|
-
## hello
|
|
14
|
-
world
|
|
15
|
-
</xin-md>
|
|
16
|
-
```
|
|
17
|
-
```css
|
|
18
|
-
xin-md {
|
|
19
|
-
display: block;
|
|
20
|
-
padding: var(--spacing);
|
|
21
|
-
}
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Note that, by default, `<xin-md>` will use its `textContent` (not its `innerHTML`) as its source.
|
|
25
|
-
|
|
26
|
-
## rendering markdown from a url
|
|
27
|
-
|
|
28
|
-
Again, like an `<img>` tag, you can simply set a `<xin-md>`'s `src` attribute to a URL pointing
|
|
29
|
-
to markdown source and it will load it asynchronously and render it.
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
<xin-md src="/path/to/file.md">
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## setting its `value`
|
|
36
|
-
|
|
37
|
-
Or, just set the element's `value` and it will render it for you. You can try
|
|
38
|
-
this in the console, e.g.
|
|
39
|
-
|
|
40
|
-
```
|
|
41
|
-
$('.preview xin-md').value = 'testing\n\n## this is a test'
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## elements
|
|
45
|
-
|
|
46
|
-
`<xin-md>` also (optionally) allows the embedding of inline HTML elements without blocking markdown
|
|
47
|
-
rendering, so that you can embed specific elements while retaining markdown. You need to explicitly set
|
|
48
|
-
the `elements` property, and for markdown rendering not to be blocked, the html elements need to
|
|
49
|
-
start on a new line and not be indented. E.g.
|
|
50
|
-
|
|
51
|
-
```html
|
|
52
|
-
<xin-md elements>
|
|
53
|
-
<form>
|
|
54
|
-
### this is a form
|
|
55
|
-
<label>
|
|
56
|
-
fill in this field.
|
|
57
|
-
**It's important!**
|
|
58
|
-
<input>
|
|
59
|
-
</label>
|
|
60
|
-
</form>
|
|
61
|
-
</xin-md>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
In this case `<xin-md>` uses its `innerHTML` and not its `textContent`.
|
|
65
|
-
|
|
66
|
-
## context and template variables
|
|
67
|
-
|
|
68
|
-
`<xin-md>` also supports **template** values. You need to provide data to the element in the form
|
|
69
|
-
of `context` (an arbitrary object, or a JSON string), and then embed the template text using
|
|
70
|
-
handlebars-style doubled curly braces, e.g. `{{path.to.value}}`.
|
|
71
|
-
|
|
72
|
-
If no value is found, the original text is passed through.
|
|
73
|
-
|
|
74
|
-
Finally, note that template substitution occurs *before* markdown transformation, which means you can
|
|
75
|
-
pass context data through to HTML elements.
|
|
76
|
-
|
|
77
|
-
```html
|
|
78
|
-
<xin-md
|
|
79
|
-
elements
|
|
80
|
-
context='{"title": "template example", "foo": {"bar": 17}, "nested": "*work*: {{foo.bar}}"}'
|
|
81
|
-
>
|
|
82
|
-
## {{title}}
|
|
83
|
-
|
|
84
|
-
The magic number is <input type="number" value={{foo.bar}}>
|
|
85
|
-
|
|
86
|
-
Oh, and nested templates {{nested}}.
|
|
87
|
-
</xin-md>
|
|
88
|
-
```
|
|
89
|
-
*/
|
|
90
|
-
function populate(basePath, source) {
|
|
91
|
-
if (source == null) {
|
|
92
|
-
source = '';
|
|
93
|
-
}
|
|
94
|
-
else if (typeof source !== 'string') {
|
|
95
|
-
source = String(source);
|
|
96
|
-
}
|
|
97
|
-
return source.replace(/\{\{([^}]+)\}\}/g, (original, prop) => {
|
|
98
|
-
const value = xin[`${basePath}${prop.startsWith('[') ? prop : '.' + prop}`];
|
|
99
|
-
return value === undefined ? original : populate(basePath, String(value));
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
export class MarkdownViewer extends Component {
|
|
103
|
-
src = '';
|
|
104
|
-
value = '';
|
|
105
|
-
content = null;
|
|
106
|
-
elements = false;
|
|
107
|
-
context = {};
|
|
108
|
-
constructor() {
|
|
109
|
-
super();
|
|
110
|
-
this.initAttributes('src', 'elements', 'context');
|
|
111
|
-
}
|
|
112
|
-
connectedCallback() {
|
|
113
|
-
super.connectedCallback();
|
|
114
|
-
if (this.src !== '') {
|
|
115
|
-
;
|
|
116
|
-
(async () => {
|
|
117
|
-
const request = await fetch(this.src);
|
|
118
|
-
this.value = await request.text();
|
|
119
|
-
})();
|
|
120
|
-
}
|
|
121
|
-
else if (this.value === '') {
|
|
122
|
-
if (this.elements) {
|
|
123
|
-
this.value = this.innerHTML;
|
|
124
|
-
}
|
|
125
|
-
else {
|
|
126
|
-
this.value = this.textContent != null ? this.textContent : '';
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
didRender = () => {
|
|
131
|
-
/* do not care */
|
|
132
|
-
};
|
|
133
|
-
render() {
|
|
134
|
-
super.render();
|
|
135
|
-
xin[this.instanceId] =
|
|
136
|
-
typeof this.context === 'string' ? JSON.parse(this.context) : this.context;
|
|
137
|
-
const source = populate(this.instanceId, this.value);
|
|
138
|
-
if (this.elements) {
|
|
139
|
-
const chunks = source
|
|
140
|
-
.split('\n')
|
|
141
|
-
.reduce((chunks, line) => {
|
|
142
|
-
if (line.startsWith('<') || chunks.length === 0) {
|
|
143
|
-
chunks.push(line);
|
|
144
|
-
}
|
|
145
|
-
else {
|
|
146
|
-
const lastChunk = chunks[chunks.length - 1];
|
|
147
|
-
if (!lastChunk.startsWith('<') || !lastChunk.endsWith('>')) {
|
|
148
|
-
chunks[chunks.length - 1] += '\n' + line;
|
|
149
|
-
}
|
|
150
|
-
else {
|
|
151
|
-
chunks.push(line);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
return chunks;
|
|
155
|
-
}, []);
|
|
156
|
-
this.innerHTML = chunks
|
|
157
|
-
.map((chunk) => chunk.startsWith('<') && chunk.endsWith('>')
|
|
158
|
-
? chunk
|
|
159
|
-
: marked(chunk, { mangle: false, headerIds: false }))
|
|
160
|
-
.join('');
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
this.innerHTML = marked(source, {
|
|
164
|
-
mangle: false,
|
|
165
|
-
headerIds: false,
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
this.didRender();
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
export const markdownViewer = MarkdownViewer.elementCreator({
|
|
172
|
-
tag: 'xin-md',
|
|
173
|
-
});
|
package/dist/match-shortcut.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export const matchShortcut = (keystroke, shortcut) => {
|
|
2
|
-
shortcut = shortcut.toLocaleLowerCase();
|
|
3
|
-
const ctrlKey = !!shortcut.match(/\^|ctrl/);
|
|
4
|
-
const metaKey = !!shortcut.match(/⌘|meta/);
|
|
5
|
-
const altKey = !!shortcut.match(/⌥|⎇|alt|option/);
|
|
6
|
-
const shiftKey = !!shortcut.match(/⇧|shift/);
|
|
7
|
-
const baseKey = shortcut.slice(-1);
|
|
8
|
-
return (keystroke.key === baseKey &&
|
|
9
|
-
keystroke.metaKey === metaKey &&
|
|
10
|
-
keystroke.ctrlKey === ctrlKey &&
|
|
11
|
-
keystroke.altKey === altKey &&
|
|
12
|
-
keystroke.shiftKey === shiftKey);
|
|
13
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
import { test, expect } from 'bun:test';
|
|
2
|
-
import { matchShortcut } from './match-shortcut';
|
|
3
|
-
test('simple shortcuts', () => {
|
|
4
|
-
expect(matchShortcut({
|
|
5
|
-
shiftKey: false,
|
|
6
|
-
ctrlKey: false,
|
|
7
|
-
altKey: false,
|
|
8
|
-
metaKey: false,
|
|
9
|
-
key: 'x',
|
|
10
|
-
}, 'X')).toBe(true);
|
|
11
|
-
expect(matchShortcut({
|
|
12
|
-
shiftKey: false,
|
|
13
|
-
ctrlKey: false,
|
|
14
|
-
altKey: false,
|
|
15
|
-
metaKey: false,
|
|
16
|
-
key: 'x',
|
|
17
|
-
}, 'x')).toBe(true);
|
|
18
|
-
expect(matchShortcut({
|
|
19
|
-
shiftKey: false,
|
|
20
|
-
ctrlKey: false,
|
|
21
|
-
altKey: false,
|
|
22
|
-
metaKey: false,
|
|
23
|
-
key: 'x',
|
|
24
|
-
}, 'y')).toBe(false);
|
|
25
|
-
});
|
|
26
|
-
test('ctrl keys', () => {
|
|
27
|
-
expect(matchShortcut({
|
|
28
|
-
shiftKey: false,
|
|
29
|
-
ctrlKey: true,
|
|
30
|
-
altKey: false,
|
|
31
|
-
metaKey: false,
|
|
32
|
-
key: 'x',
|
|
33
|
-
}, 'ctrl-x')).toBe(true);
|
|
34
|
-
expect(matchShortcut({
|
|
35
|
-
shiftKey: false,
|
|
36
|
-
ctrlKey: true,
|
|
37
|
-
altKey: false,
|
|
38
|
-
metaKey: false,
|
|
39
|
-
key: 'x',
|
|
40
|
-
}, '^X')).toBe(true);
|
|
41
|
-
expect(matchShortcut({
|
|
42
|
-
shiftKey: false,
|
|
43
|
-
ctrlKey: true,
|
|
44
|
-
altKey: false,
|
|
45
|
-
metaKey: false,
|
|
46
|
-
key: 'x',
|
|
47
|
-
}, 'x')).toBe(false);
|
|
48
|
-
expect(matchShortcut({
|
|
49
|
-
shiftKey: false,
|
|
50
|
-
ctrlKey: false,
|
|
51
|
-
altKey: false,
|
|
52
|
-
metaKey: false,
|
|
53
|
-
key: 'x',
|
|
54
|
-
}, '^X')).toBe(false);
|
|
55
|
-
expect(matchShortcut({
|
|
56
|
-
shiftKey: false,
|
|
57
|
-
ctrlKey: false,
|
|
58
|
-
altKey: false,
|
|
59
|
-
metaKey: true,
|
|
60
|
-
key: 'x',
|
|
61
|
-
}, 'ctrl-x')).toBe(false);
|
|
62
|
-
});
|
|
63
|
-
test('meta keys', () => {
|
|
64
|
-
expect(matchShortcut({
|
|
65
|
-
shiftKey: false,
|
|
66
|
-
ctrlKey: false,
|
|
67
|
-
altKey: false,
|
|
68
|
-
metaKey: true,
|
|
69
|
-
key: 'x',
|
|
70
|
-
}, 'meta-x')).toBe(true);
|
|
71
|
-
expect(matchShortcut({
|
|
72
|
-
shiftKey: false,
|
|
73
|
-
ctrlKey: false,
|
|
74
|
-
altKey: false,
|
|
75
|
-
metaKey: true,
|
|
76
|
-
key: 'x',
|
|
77
|
-
}, '⌘-X')).toBe(true);
|
|
78
|
-
expect(matchShortcut({
|
|
79
|
-
shiftKey: false,
|
|
80
|
-
ctrlKey: false,
|
|
81
|
-
altKey: false,
|
|
82
|
-
metaKey: true,
|
|
83
|
-
key: 'x',
|
|
84
|
-
}, 'x')).toBe(false);
|
|
85
|
-
expect(matchShortcut({
|
|
86
|
-
shiftKey: false,
|
|
87
|
-
ctrlKey: false,
|
|
88
|
-
altKey: false,
|
|
89
|
-
metaKey: false,
|
|
90
|
-
key: 'x',
|
|
91
|
-
}, '⌘-X')).toBe(false);
|
|
92
|
-
expect(matchShortcut({
|
|
93
|
-
shiftKey: false,
|
|
94
|
-
ctrlKey: true,
|
|
95
|
-
altKey: false,
|
|
96
|
-
metaKey: false,
|
|
97
|
-
key: 'x',
|
|
98
|
-
}, 'meta-x')).toBe(false);
|
|
99
|
-
});
|
|
100
|
-
test('alt keys', () => {
|
|
101
|
-
expect(matchShortcut({
|
|
102
|
-
shiftKey: false,
|
|
103
|
-
ctrlKey: false,
|
|
104
|
-
altKey: true,
|
|
105
|
-
metaKey: false,
|
|
106
|
-
key: 'x',
|
|
107
|
-
}, '⌥x')).toBe(true);
|
|
108
|
-
expect(matchShortcut({
|
|
109
|
-
shiftKey: false,
|
|
110
|
-
ctrlKey: false,
|
|
111
|
-
altKey: true,
|
|
112
|
-
metaKey: false,
|
|
113
|
-
key: 'x',
|
|
114
|
-
}, 'alt-X')).toBe(true);
|
|
115
|
-
expect(matchShortcut({
|
|
116
|
-
shiftKey: false,
|
|
117
|
-
ctrlKey: false,
|
|
118
|
-
altKey: true,
|
|
119
|
-
metaKey: false,
|
|
120
|
-
key: 'x',
|
|
121
|
-
}, '⎇-x')).toBe(true);
|
|
122
|
-
expect(matchShortcut({
|
|
123
|
-
shiftKey: false,
|
|
124
|
-
ctrlKey: false,
|
|
125
|
-
altKey: true,
|
|
126
|
-
metaKey: false,
|
|
127
|
-
key: 'x',
|
|
128
|
-
}, 'option-X')).toBe(true);
|
|
129
|
-
expect(matchShortcut({
|
|
130
|
-
shiftKey: false,
|
|
131
|
-
ctrlKey: false,
|
|
132
|
-
altKey: true,
|
|
133
|
-
metaKey: false,
|
|
134
|
-
key: 'x',
|
|
135
|
-
}, 'x')).toBe(false);
|
|
136
|
-
expect(matchShortcut({
|
|
137
|
-
shiftKey: false,
|
|
138
|
-
ctrlKey: false,
|
|
139
|
-
altKey: false,
|
|
140
|
-
metaKey: false,
|
|
141
|
-
key: 'x',
|
|
142
|
-
}, 'option-X')).toBe(false);
|
|
143
|
-
expect(matchShortcut({
|
|
144
|
-
shiftKey: false,
|
|
145
|
-
ctrlKey: true,
|
|
146
|
-
altKey: false,
|
|
147
|
-
metaKey: false,
|
|
148
|
-
key: 'x',
|
|
149
|
-
}, '⎇x')).toBe(false);
|
|
150
|
-
});
|
|
151
|
-
test('chorded modifiers', () => {
|
|
152
|
-
expect(matchShortcut({
|
|
153
|
-
shiftKey: false,
|
|
154
|
-
ctrlKey: false,
|
|
155
|
-
altKey: true,
|
|
156
|
-
metaKey: true,
|
|
157
|
-
key: 'x',
|
|
158
|
-
}, '⌘⌥x')).toBe(true);
|
|
159
|
-
expect(matchShortcut({
|
|
160
|
-
shiftKey: false,
|
|
161
|
-
ctrlKey: false,
|
|
162
|
-
altKey: true,
|
|
163
|
-
metaKey: true,
|
|
164
|
-
key: 'x',
|
|
165
|
-
}, '⌘⌥x')).toBe(true);
|
|
166
|
-
expect(matchShortcut({
|
|
167
|
-
shiftKey: false,
|
|
168
|
-
ctrlKey: false,
|
|
169
|
-
altKey: false,
|
|
170
|
-
metaKey: true,
|
|
171
|
-
key: 'x',
|
|
172
|
-
}, '⌘⌥x')).toBe(false);
|
|
173
|
-
expect(matchShortcut({
|
|
174
|
-
shiftKey: false,
|
|
175
|
-
ctrlKey: false,
|
|
176
|
-
altKey: false,
|
|
177
|
-
metaKey: true,
|
|
178
|
-
key: 'x',
|
|
179
|
-
}, 'alt-meta-x')).toBe(false);
|
|
180
|
-
expect(matchShortcut({
|
|
181
|
-
shiftKey: false,
|
|
182
|
-
ctrlKey: false,
|
|
183
|
-
altKey: true,
|
|
184
|
-
metaKey: false,
|
|
185
|
-
key: 'x',
|
|
186
|
-
}, '⌘⌥x')).toBe(false);
|
|
187
|
-
expect(matchShortcut({
|
|
188
|
-
shiftKey: true,
|
|
189
|
-
ctrlKey: false,
|
|
190
|
-
altKey: true,
|
|
191
|
-
metaKey: false,
|
|
192
|
-
key: 'x',
|
|
193
|
-
}, '⌘⌥x')).toBe(false);
|
|
194
|
-
});
|