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.
Files changed (94) hide show
  1. package/README.md +4 -2
  2. package/dist/iife.js +70 -60
  3. package/dist/iife.js.map +42 -42
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +15 -37
  6. package/dist/index.js.map +39 -39
  7. package/dist/version.d.ts +1 -1
  8. package/package.json +2 -2
  9. package/dist/ab-test.js +0 -116
  10. package/dist/babylon-3d.js +0 -292
  11. package/dist/bodymovin-player.js +0 -172
  12. package/dist/bp-loader.js +0 -26
  13. package/dist/carousel.js +0 -308
  14. package/dist/code-editor.js +0 -102
  15. package/dist/color-input.js +0 -112
  16. package/dist/data-table.js +0 -774
  17. package/dist/drag-and-drop.js +0 -386
  18. package/dist/editable-rect.js +0 -450
  19. package/dist/filter-builder.js +0 -468
  20. package/dist/float.js +0 -170
  21. package/dist/form.js +0 -466
  22. package/dist/gamepad.js +0 -115
  23. package/dist/icon-data.js +0 -308
  24. package/dist/icon-types.js +0 -1
  25. package/dist/icons.js +0 -374
  26. package/dist/index-iife.js +0 -4
  27. package/dist/live-example.js +0 -611
  28. package/dist/localize.js +0 -381
  29. package/dist/make-sorter.js +0 -119
  30. package/dist/make-sorter.test.d.ts +0 -1
  31. package/dist/make-sorter.test.js +0 -48
  32. package/dist/mapbox.js +0 -161
  33. package/dist/markdown-viewer.js +0 -173
  34. package/dist/match-shortcut.js +0 -13
  35. package/dist/match-shortcut.test.d.ts +0 -1
  36. package/dist/match-shortcut.test.js +0 -194
  37. package/dist/menu.js +0 -614
  38. package/dist/notifications.js +0 -308
  39. package/dist/password-strength.js +0 -302
  40. package/dist/playwright.config.d.ts +0 -9
  41. package/dist/playwright.config.js +0 -73
  42. package/dist/pop-float.js +0 -231
  43. package/dist/rating.js +0 -192
  44. package/dist/rich-text.js +0 -296
  45. package/dist/segmented.js +0 -298
  46. package/dist/select.js +0 -427
  47. package/dist/side-nav.js +0 -106
  48. package/dist/size-break.js +0 -118
  49. package/dist/sizer.js +0 -92
  50. package/dist/src/ab-test.d.ts +0 -14
  51. package/dist/src/babylon-3d.d.ts +0 -53
  52. package/dist/src/bodymovin-player.d.ts +0 -32
  53. package/dist/src/bp-loader.d.ts +0 -0
  54. package/dist/src/carousel.d.ts +0 -113
  55. package/dist/src/code-editor.d.ts +0 -27
  56. package/dist/src/color-input.d.ts +0 -41
  57. package/dist/src/data-table.d.ts +0 -79
  58. package/dist/src/drag-and-drop.d.ts +0 -2
  59. package/dist/src/editable-rect.d.ts +0 -97
  60. package/dist/src/filter-builder.d.ts +0 -64
  61. package/dist/src/float.d.ts +0 -18
  62. package/dist/src/form.d.ts +0 -68
  63. package/dist/src/gamepad.d.ts +0 -34
  64. package/dist/src/icon-data.d.ts +0 -309
  65. package/dist/src/icon-types.d.ts +0 -7
  66. package/dist/src/icons.d.ts +0 -17
  67. package/dist/src/index.d.ts +0 -37
  68. package/dist/src/live-example.d.ts +0 -51
  69. package/dist/src/localize.d.ts +0 -30
  70. package/dist/src/make-sorter.d.ts +0 -3
  71. package/dist/src/mapbox.d.ts +0 -24
  72. package/dist/src/markdown-viewer.d.ts +0 -15
  73. package/dist/src/match-shortcut.d.ts +0 -9
  74. package/dist/src/menu.d.ts +0 -60
  75. package/dist/src/notifications.d.ts +0 -106
  76. package/dist/src/password-strength.d.ts +0 -35
  77. package/dist/src/pop-float.d.ts +0 -10
  78. package/dist/src/rating.d.ts +0 -62
  79. package/dist/src/rich-text.d.ts +0 -28
  80. package/dist/src/segmented.d.ts +0 -80
  81. package/dist/src/select.d.ts +0 -43
  82. package/dist/src/side-nav.d.ts +0 -36
  83. package/dist/src/size-break.d.ts +0 -18
  84. package/dist/src/sizer.d.ts +0 -34
  85. package/dist/src/tab-selector.d.ts +0 -91
  86. package/dist/src/tag-list.d.ts +0 -37
  87. package/dist/src/track-drag.d.ts +0 -5
  88. package/dist/src/version.d.ts +0 -1
  89. package/dist/src/via-tag.d.ts +0 -2
  90. package/dist/tab-selector.js +0 -326
  91. package/dist/tag-list.js +0 -375
  92. package/dist/track-drag.js +0 -143
  93. package/dist/version.js +0 -1
  94. package/dist/via-tag.js +0 -102
@@ -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
- });
@@ -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
- });