tosijs-ui 1.16.21 → 1.16.22
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/CHANGELOG.md +70 -0
- package/README.md +2 -2
- package/bin/make-icon-data.js +1 -1
- package/dist/code-editor.js +2 -3
- package/dist/data-table.js +1 -1
- package/dist/doc-browser.d.ts +4 -0
- package/dist/doc-browser.js +46 -101
- package/dist/doc-system/doc-system-styles.js +11 -0
- package/dist/doc-system/doc-system.js +1 -1
- package/dist/doc-system/highlight-styles.js +11 -16
- package/dist/doc-system/routing.d.ts +9 -0
- package/dist/doc-system/routing.js +22 -6
- package/dist/doc-system/site/build-warnings.d.ts +10 -0
- package/dist/doc-system/site/build-warnings.js +24 -0
- package/dist/doc-system/site/dev-auth.d.ts +13 -0
- package/dist/doc-system/site/dev-auth.js +40 -2
- package/dist/doc-system/site/dev-server.js +13 -1
- package/dist/doc-system/site/docs.d.ts +14 -0
- package/dist/doc-system/site/docs.js +61 -81
- package/dist/doc-system/site/epub.js +6 -2
- package/dist/doc-system/site/generate-site.js +15 -5
- package/dist/doc-system/site/orchestrator.js +1 -0
- package/dist/doc-system/site/site-config.d.ts +25 -0
- package/dist/editable-rect.js +1 -3
- package/dist/highlight-block.js +3 -10
- package/dist/icon-rules.d.ts +10 -0
- package/dist/icon-rules.js +13 -5
- package/dist/icon-svg.js +13 -19
- package/dist/icons.js +12 -15
- package/dist/iife.js +91 -95
- package/dist/iife.js.map +23 -23
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/live-example/component.js +3 -4
- package/dist/menu.js +2 -2
- package/dist/natural-compare.js +6 -2
- package/dist/password-strength.js +1 -1
- package/dist/pocket-bar.js +2 -2
- package/dist/size-break.js +4 -3
- package/dist/track-drag.js +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/llms.txt +12 -8
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export * from './layout.js';
|
|
|
20
20
|
export * from './live-theme.js';
|
|
21
21
|
export * from './localize.js';
|
|
22
22
|
export { makeSorter } from './make-sorter.js';
|
|
23
|
+
export { naturalCompare, naturalSorter, isBlank } from './natural-compare.js';
|
|
23
24
|
export * from './mapbox.js';
|
|
24
25
|
export * from './match-shortcut.js';
|
|
25
26
|
export * from './markdown-viewer.js';
|
package/dist/index.js
CHANGED
|
@@ -70,6 +70,7 @@ export * from './layout.js';
|
|
|
70
70
|
export * from './live-theme.js';
|
|
71
71
|
export * from './localize.js';
|
|
72
72
|
export { makeSorter } from './make-sorter.js';
|
|
73
|
+
export { naturalCompare, naturalSorter, isBlank } from './natural-compare.js';
|
|
73
74
|
export * from './mapbox.js';
|
|
74
75
|
export * from './match-shortcut.js';
|
|
75
76
|
export * from './markdown-viewer.js';
|
|
@@ -583,10 +583,9 @@ attribute directly.
|
|
|
583
583
|
`tosijs`/`tosijs-ui` are the host's own instances, so `tosi()` singletons stay shared;
|
|
584
584
|
namespace your state to keep examples from stomping each other. (The boolean `iframe`
|
|
585
585
|
attribute is a back-compat alias for `mode="iframe"`.)
|
|
586
|
-
- **`ide`** — fully sandboxed
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
*(Recognized now; its distinct real-module execution is in progress.)*
|
|
586
|
+
- **`ide`** — reserved for a fully sandboxed mode (published dependencies in an isolated
|
|
587
|
+
realm). **Today it runs exactly like `iframe`**, so don't choose it for isolation it does
|
|
588
|
+
not yet provide.
|
|
590
589
|
|
|
591
590
|
*Fully-isolated examples (a separate module realm, so even `tosi()` state and
|
|
592
591
|
imported dependencies are sandboxed — the way tjs-lang's playgrounds do it with a
|
package/dist/menu.js
CHANGED
|
@@ -98,7 +98,7 @@ const menuItems = [
|
|
|
98
98
|
{
|
|
99
99
|
icon: 'tosi',
|
|
100
100
|
caption: 'tosi',
|
|
101
|
-
action: 'https://
|
|
101
|
+
action: 'https://tosijs.net'
|
|
102
102
|
},
|
|
103
103
|
{
|
|
104
104
|
icon: 'tosiPlatform',
|
|
@@ -373,7 +373,7 @@ way.
|
|
|
373
373
|
|
|
374
374
|
## Localization
|
|
375
375
|
|
|
376
|
-
If you set `localized: true` in `PopMenuOptions` then menu captions will be
|
|
376
|
+
If you set `localized: true` in `PopMenuOptions` then menu captions will be
|
|
377
377
|
passed through `localize`. You'll need to provide the appropriate localized strings,
|
|
378
378
|
of course.
|
|
379
379
|
|
package/dist/natural-compare.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
+
/*{ "parent": "Helper Libraries" }*/
|
|
1
2
|
/*#
|
|
2
3
|
# naturalCompare
|
|
3
4
|
|
|
4
|
-
<!--{ "parent": "Helper Libraries" }-->
|
|
5
|
-
|
|
6
5
|
Comparing values the way a reader expects, for sorting tables, navs and lists.
|
|
7
6
|
|
|
8
7
|
```js
|
|
@@ -12,6 +11,11 @@ const rows = ['9', '399', '1200', '3.5', '40']
|
|
|
12
11
|
preview.textContent = rows.slice().sort(naturalCompare).join(', ')
|
|
13
12
|
// 3.5, 9, 40, 399, 1200 — not 1200, 3.5, 399, 40, 9
|
|
14
13
|
```
|
|
14
|
+
```test
|
|
15
|
+
test('numeric strings sort numerically', () => {
|
|
16
|
+
expect(preview.textContent).toBe('3.5, 9, 40, 399, 1200')
|
|
17
|
+
})
|
|
18
|
+
```
|
|
15
19
|
|
|
16
20
|
A raw `>` compares strings **lexically**, so any column of numeric strings sorts by first
|
|
17
21
|
digit — and real data is full of them: CSV and TSV imports, BigQuery exports, JSON where
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*#
|
|
2
2
|
# password strength
|
|
3
3
|
|
|
4
|
-
Just wrap
|
|
4
|
+
Just wrap a `<tosi-password-strength>` element around an `<input>`
|
|
5
5
|
and it will gauge its content strength as a password. It will also
|
|
6
6
|
let you **securely verify** that the password hasn't been breached.
|
|
7
7
|
|
package/dist/pocket-bar.js
CHANGED
|
@@ -70,7 +70,7 @@ them to see the bar grow in its `direction`.
|
|
|
70
70
|
|
|
71
71
|
## Attributes
|
|
72
72
|
|
|
73
|
-
- `icon` — the handle icon (any icon name or [composition](icon-composition)). By
|
|
73
|
+
- `icon` — the handle icon (any icon name or [composition](/icon-composition/)). By
|
|
74
74
|
default it hints the growth axis: `moreHorizontal` (⋯) for a horizontal bar,
|
|
75
75
|
`moreVertical` (⋮) for a vertical one.
|
|
76
76
|
- `direction` — where the bar grows, using the `FloatPosition` vocabulary
|
|
@@ -78,7 +78,7 @@ them to see the bar grow in its `direction`.
|
|
|
78
78
|
(the default) grows a **horizontal** bar toward the nearer edge of the screen.
|
|
79
79
|
`e` / `w` (and `en` / `es` / `wn` / `ws`) grow a horizontal bar; `n` / `s` (and
|
|
80
80
|
`ne` / `nw` / `se` / `sw`) grow a **vertical** one. The bar is placed
|
|
81
|
-
edge-contiguous with the handle via [positionFloat](
|
|
81
|
+
edge-contiguous with the handle via [positionFloat](/pop-float/).
|
|
82
82
|
- `open` — reflects the open state. Hover / focus / tap peek it open; clicking the
|
|
83
83
|
handle keeps it open until you click the handle again or click outside.
|
|
84
84
|
|
package/dist/size-break.js
CHANGED
|
@@ -3,9 +3,10 @@ const { slot } = elements;
|
|
|
3
3
|
/*#
|
|
4
4
|
# size-break
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
`<tosi-sizebreak>` shows different content at different sizes, for example a row of buttons
|
|
7
|
+
that becomes a menu when there is no room for it. [Container
|
|
8
|
+
queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries)
|
|
9
|
+
can restyle content by size; this swaps the content itself, without CSS.
|
|
9
10
|
|
|
10
11
|
Note that the sizes referred to are of the `<tosi-sizebreak>`'s `.offsetParent`, and it watches for
|
|
11
12
|
the window's `resize` events and its own (via `ResizeObserver`).
|
package/dist/track-drag.js
CHANGED
|
@@ -96,7 +96,7 @@ console warning about handlers that delay scrolling, and that warning only ever
|
|
|
96
96
|
|
|
97
97
|
## findHighestZ
|
|
98
98
|
|
|
99
|
-
`findHighestZ(selector = 'body *'): number` returns the
|
|
99
|
+
`findHighestZ(selector = 'body *'): number` returns the highest `z-index` of any element
|
|
100
100
|
matching `selector`.
|
|
101
101
|
*/
|
|
102
102
|
/*{ "parent": "Helper Libraries" }*/
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "1.16.
|
|
1
|
+
export declare const version = "1.16.22";
|
package/dist/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '1.16.
|
|
1
|
+
export const version = '1.16.22';
|
package/llms.txt
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# tosijs-ui v1.16.
|
|
1
|
+
# tosijs-ui v1.16.22
|
|
2
2
|
|
|
3
3
|
Simple, robust web-components for use with tosijs or anything else.
|
|
4
4
|
|
|
@@ -30,7 +30,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
|
|
|
30
30
|
- https://ui.tosijs.net/adopting-the-doc-system/ — Adopting the doc system
|
|
31
31
|
A first hour with tosijs-ui/site: the minimum that works, how to tell it is actually working, and the four things that fail silently while the site still serves 200s.
|
|
32
32
|
- https://ui.tosijs.net/appendices/ — Appendices
|
|
33
|
-
|
|
33
|
+
Upgrading and release tooling.
|
|
34
34
|
- https://ui.tosijs.net/carousel/ — carousel
|
|
35
35
|
This is a minimalist carousel component that supports the usual stuff.
|
|
36
36
|
- https://ui.tosijs.net/code-editor/ — code
|
|
@@ -46,13 +46,15 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
|
|
|
46
46
|
- https://ui.tosijs.net/diff/ — diff
|
|
47
47
|
`<tosi-diff>` renders a unified, line-by-line diff between two strings — the kind
|
|
48
48
|
- https://ui.tosijs.net/doc-browser/ — doc-browser
|
|
49
|
-
|
|
49
|
+
`createDocBrowser()` renders a documentation corpus as a browsable, searchable testbed with
|
|
50
50
|
- https://ui.tosijs.net/doc-site-system/ — Doc-Site System
|
|
51
51
|
How tosijs-ui's static, pre-rendered, hydrating documentation-site system works — and how to adopt it (tosijs-ui/site) in your own project.
|
|
52
52
|
- https://ui.tosijs.net/doc-system/ — doc-system
|
|
53
53
|
`<tosi-doc-system>` turns a folder of pre-rendered, statically-served pages into a
|
|
54
54
|
- https://ui.tosijs.net/docs/ — docs
|
|
55
|
-
|
|
55
|
+
`extractDocs` collects documentation from markdown files and `/*#` comment blocks in source
|
|
56
|
+
- https://ui.tosijs.net/documentation-system/ — Documentation System
|
|
57
|
+
tosijs-ui/site: turn markdown and doc comments into a static, pre-rendered documentation site with live, self-testing examples, an ePub and print.
|
|
56
58
|
- https://ui.tosijs.net/drag-and-drop/ — drag & drop
|
|
57
59
|
A lightweight library that leverages HTML5 drag and drop behavior.
|
|
58
60
|
- https://ui.tosijs.net/editable-rect/ — editable-rect
|
|
@@ -80,7 +82,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
|
|
|
80
82
|
- https://ui.tosijs.net/highlight-block/ — highlight-block
|
|
81
83
|
`<tosi-highlight>` pretty-prints a static code sample. It is **not** an editor — for that
|
|
82
84
|
- https://ui.tosijs.net/highlight-styles/ — highlight-styles
|
|
83
|
-
The syntax-highlighting token palette, on its own.
|
|
85
|
+
The syntax-highlighting token palette, on its own. The package ships no CSS files (every
|
|
84
86
|
- https://ui.tosijs.net/icon-composition/ — Icon Composition
|
|
85
87
|
This is a toy for playing with the icon composition language introduced in tosijs-ui 1.5.10. It's documented [here](/...
|
|
86
88
|
- https://ui.tosijs.net/icons/ — icons
|
|
@@ -108,7 +110,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
|
|
|
108
110
|
- https://ui.tosijs.net/menu/ — menu
|
|
109
111
|
Being able to pop a menu up anywhere is just so nice, and `tosijs-ui` allows menus
|
|
110
112
|
- https://ui.tosijs.net/migrating/ — Migrating from older versions
|
|
111
|
-
Breaking changes and migration checklists for tosijs-ui releases you may be upgrading past — 1.16.0's tosijs 1.10 typing and sanitize-by-default, 1.11.0's validator seam, 1.9.1's Node resolution fix, 1.7.0's editor change and the 1.3.0 xinjs-ui rename.
|
|
113
|
+
Breaking changes and migration checklists for tosijs-ui releases you may be upgrading past — 1.16.21's tosijs floor, 1.16.19's throwing iconSvg, 1.16.17's tjs-lang 0.14, 1.16.0's tosijs 1.10 typing and sanitize-by-default, 1.11.0's validator seam, 1.9.1's Node resolution fix, 1.7.0's editor change and the 1.3.0 xinjs-ui rename.
|
|
112
114
|
- https://ui.tosijs.net/month/ — month
|
|
113
115
|
This is a component for displaying a month and selecting days within that month.
|
|
114
116
|
- https://ui.tosijs.net/natural-compare/ — naturalCompare
|
|
@@ -117,8 +119,10 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
|
|
|
117
119
|
`TosiNotification` provides a singleton custom `<tosi-notification>` element that manages
|
|
118
120
|
- https://ui.tosijs.net/one-source-every-artifact/ — One Source
|
|
119
121
|
How the tosijs doc system turns a single corpus of doc-comments and markdown into a static SEO site, a self-testing live playground with in-browser TypeScript, an ePub and PDF, and an agent-debuggable page — all deploying as static files.
|
|
122
|
+
- https://ui.tosijs.net/no-header-demo/ — Page without the header
|
|
123
|
+
A page using header: false with layout: full-screen — no site chrome at all, for an app page with its own toolbar.
|
|
120
124
|
- https://ui.tosijs.net/password-strength/ — password strength
|
|
121
|
-
Just wrap
|
|
125
|
+
Just wrap a `<tosi-password-strength>` element around an `<input>`
|
|
122
126
|
- https://ui.tosijs.net/pocket-bar/ — pocket bar
|
|
123
127
|
A **pocket toolbar**: a single icon at rest that expands into a bar of your controls
|
|
124
128
|
- https://ui.tosijs.net/pop-float/ — popFloat
|
|
@@ -144,7 +148,7 @@ don't clobber each other; the `iframe` attribute isolates DOM/CSS, not state.
|
|
|
144
148
|
- https://ui.tosijs.net/side-nav/ — sidebar
|
|
145
149
|
The default layout for iOS / iPadOS apps is to hide the sidebar when displaying content on small
|
|
146
150
|
- https://ui.tosijs.net/size-break/ — size-break
|
|
147
|
-
|
|
151
|
+
`<tosi-sizebreak>` shows different content at different sizes, for example a row of buttons
|
|
148
152
|
- https://ui.tosijs.net/sizer/ — sizer
|
|
149
153
|
This is a super-simple component that you can put in a fixed size element allowing it to be resized
|
|
150
154
|
- https://ui.tosijs.net/data-table/ — table
|