@xiee/utils 1.14.91 → 1.14.93
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/css/lt-interactive.css +39 -28
- package/css/lt-interactive.min.css +1 -1
- package/css/lt-interactive.min.css.map +1 -1
- package/js/lt-interactive.js +262 -75
- package/js/lt-interactive.min.js +1 -1
- package/js/lt-interactive.min.js.map +1 -1
- package/js/lt.js +87 -32
- package/js/lt.min.js +1 -1
- package/js/lt.min.js.map +1 -1
- package/package.json +1 -1
package/css/lt-interactive.css
CHANGED
|
@@ -17,19 +17,18 @@
|
|
|
17
17
|
.lti-search {
|
|
18
18
|
width: 100%;
|
|
19
19
|
padding: .5em 0 .5em 1.6em;
|
|
20
|
-
background
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.lti-search:focus {
|
|
28
|
-
padding-left: .5em;
|
|
29
|
-
background-image: none;
|
|
20
|
+
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="gray" stroke-width="2"><circle cx="6.5" cy="6.5" r="4.5"/><path d="M10 10l5 5"/></svg>') 0.4em center / 1em no-repeat;
|
|
21
|
+
/* on focus the magnifier goes away, leaving a small left pad so the caret
|
|
22
|
+
* sits just inside the edge rather than behind the icon's wider gutter */
|
|
23
|
+
&:focus {
|
|
24
|
+
padding-left: .5em;
|
|
25
|
+
background-image: none;
|
|
26
|
+
}
|
|
30
27
|
}
|
|
31
28
|
|
|
32
|
-
|
|
29
|
+
/* the click target is the label span, not the whole cell (so the resize grip
|
|
30
|
+
* stays separate), so the pointer cursor belongs on the label too */
|
|
31
|
+
.lti-sortable .lti-label {
|
|
33
32
|
cursor: pointer;
|
|
34
33
|
user-select: none;
|
|
35
34
|
}
|
|
@@ -71,10 +70,10 @@
|
|
|
71
70
|
cursor: col-resize;
|
|
72
71
|
user-select: none;
|
|
73
72
|
touch-action: none;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
&:hover {
|
|
74
|
+
background: currentColor;
|
|
75
|
+
opacity: 0.3;
|
|
76
|
+
}
|
|
78
77
|
}
|
|
79
78
|
/* while dragging, the pointer keeps the resize cursor anywhere on the table,
|
|
80
79
|
* and the drag selects no text */
|
|
@@ -94,23 +93,26 @@
|
|
|
94
93
|
}
|
|
95
94
|
}
|
|
96
95
|
|
|
97
|
-
/* the
|
|
98
|
-
*
|
|
96
|
+
/* the control bar lays its parts out left to right: an icon group, the filter
|
|
97
|
+
* chips, then the search box. Only the search box grows, so all the free space
|
|
98
|
+
* lands in it (pushing it to the right edge); the icons and chips keep their
|
|
99
|
+
* natural width. The search still fills the bar when it is the only control. */
|
|
99
100
|
.lti-bar {
|
|
100
101
|
display: flex;
|
|
101
102
|
align-items: center;
|
|
102
|
-
gap
|
|
103
|
-
.
|
|
104
|
-
|
|
103
|
+
/* a wide gap between the three parts (icons, chips, search) ... */
|
|
104
|
+
gap: 1.2em;
|
|
105
|
+
.lti-icons, .lti-chips {
|
|
106
|
+
flex: 0 0 auto;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
/* ... but a tight gap between the buttons / chips within a part */
|
|
110
|
+
gap: 0.3em;
|
|
105
111
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
.lti-search {
|
|
111
|
-
flex: 0 1 auto;
|
|
112
|
-
width: auto;
|
|
113
|
-
}
|
|
112
|
+
/* direct child only: a chip's popover holds its own `.lti-search` box */
|
|
113
|
+
& > .lti-search {
|
|
114
|
+
flex: 1 1 8em;
|
|
115
|
+
min-width: 6em;
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
|
|
@@ -140,6 +142,15 @@
|
|
|
140
142
|
}
|
|
141
143
|
}
|
|
142
144
|
|
|
145
|
+
/* the CSV download button: an icon button, same footprint as the eye button */
|
|
146
|
+
.lti-download {
|
|
147
|
+
border: none;
|
|
148
|
+
padding: 0;
|
|
149
|
+
width: 1.2em;
|
|
150
|
+
height: 1.2em;
|
|
151
|
+
background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="gray" stroke-width="1.5"><path d="M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5"/><path d="M2 11v3h12v-3"/></svg>');
|
|
152
|
+
}
|
|
153
|
+
|
|
143
154
|
/* typed filter chips sit after the search box in the head bar; each is a label,
|
|
144
155
|
* a summary of the current filter, and a funnel popping up the widget + box */
|
|
145
156
|
.lti-chip {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.lt-table{& :is(.lti-head,.lti-pager-row) td{padding-left:0;padding-right:0}& .lti-search{background
|
|
1
|
+
.lt-table{& :is(.lti-head,.lti-pager-row) td{padding-left:0;padding-right:0}& .lti-search{background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"gray\" stroke-width=\"2\"><circle cx=\"6.5\" cy=\"6.5\" r=\"4.5\"/><path d=\"M10 10l5 5\"/></svg>") .4em/1em no-repeat;width:100%;padding:.5em 0 .5em 1.6em;&:focus{background-image:none;padding-left:.5em}}& .lti-sortable .lti-label{cursor:pointer;user-select:none}& .lti-sort{margin-left:.3em;font-size:.8em}& .lti-empty td{text-align:center}& .lti-expand{cursor:pointer;background:0 0;border:none;margin-right:.4em;padding:0}& .lti-detail>td{padding-left:1.5em}& th:has(.lti-resizer){position:relative}& .lti-resizer{cursor:col-resize;user-select:none;touch-action:none;width:5px;height:100%;position:absolute;top:0;right:0;&:hover{opacity:.3;background:currentColor}}&.lti-resizing{cursor:col-resize;user-select:none}&.lti-fixed{table-layout:fixed;& thead th,& tbody tr:not(.lti-detail) td{overflow:hidden}}& .lti-bar{align-items:center;gap:1.2em;display:flex;& .lti-icons,& .lti-chips{flex:none;align-items:center;gap:.3em;display:flex}&>.lti-search{flex:8em;min-width:6em}}& .lti-cols{position:relative;& button{background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"gray\" stroke-width=\"1.5\"><path d=\"M1 8s2.5-4.5 7-4.5 7 4.5 7 4.5-2.5 4.5-7 4.5-7-4.5-7-4.5z\"/><circle cx=\"8\" cy=\"8\" r=\"2\"/></svg>") 50%/contain no-repeat;border:none;width:1.2em;height:1.2em;padding:0}& .lti-menu{z-index:1;background:canvas;border:1px solid;padding:.3em .6em;position:absolute;top:100%;left:0;& label{white-space:nowrap;cursor:pointer;display:block}}}& .lti-download{background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"gray\" stroke-width=\"1.5\"><path d=\"M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5\"/><path d=\"M2 11v3h12v-3\"/></svg>") 50%/contain no-repeat;border:none;width:1.2em;height:1.2em;padding:0}& .lti-chip{align-items:center;gap:.3em;display:inline-flex;&.lti-on .lti-chip-name{font-weight:600}& .lti-chip-cur{color:#555;font-variant-numeric:tabular-nums}}& .lti-pop{position:relative;& .lti-funnel{opacity:.55;background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"gray\"><path d=\"M1 2h14l-5.5 6.5V14l-3 1V8.5z\"/></svg>") 50%/contain no-repeat;border:none;width:1.1em;height:1.1em;padding:0}&.lti-on .lti-funnel{opacity:1}& .lti-pop-panel{z-index:1;flex-direction:column;display:flex;position:absolute;top:100%;left:0;&[hidden]{display:none}background:canvas;border:1px solid;gap:.5em;min-width:14em;max-width:90vw;padding:.6em}}& .lti-slider{height:1.2em;margin:.4em .6em;position:relative;&:before{content:"";background:#c8c8c8;border-radius:3px;height:3px;position:absolute;inset:50% 0 auto;transform:translateY(-50%)}& .lti-slider-fill{background:#4a90d9;height:3px;position:absolute;inset:50% 0;transform:translateY(-50%)}& .lti-thumb{cursor:pointer;touch-action:none;background:#4a90d9;border:2px solid #fff;border-radius:50%;width:14px;height:14px;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 2px #0006}}& .lti-slider-out{text-align:center;font-variant-numeric:tabular-nums}& .lti-pager{align-items:center;gap:.3em;display:flex}& button,& select{font:inherit;cursor:pointer}& .lti-pos{margin:0 auto 0 .3em}}
|
|
2
2
|
/*# sourceMappingURL=lt-interactive.min.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAKA,UAGE,kEAQA,
|
|
1
|
+
{"version":3,"mappings":"AAKA,UAGE,kEAQA,oSAME,iDAQF,2DAKA,4CAKA,kCAMA,oFASA,oCAKA,yCAGA,0HASE,4CAOF,kDAKA,+BAME,2DASF,qDAKE,6EAQA,sCAOF,8BAEE,uVAOA,6GAQE,0DASJ,4TAUA,4DAIE,wCAGA,8DAKF,6BAEE,oQAUA,+BAGA,gGAQE,uBACI,wFAUR,8DAIE,kIASA,0GAOA,6NAeF,sEAKA,sDAKA,8CAKA","sources":["lt-interactive.css"],"sourcesContent":["/* lt-interactive.css — controls for lt-interactive.js (search box, sortable\n * headers, column filters, pager). Classes are namespaced `lti-*` to avoid\n * clashing with core `lt-*`. Only properties that change a default are\n * declared. */\n\n.lt-table {\n /* the search box and the pager are full-width rows of the table, so they line\n * up with its edges rather than the cell text */\n :is(.lti-head, .lti-pager-row) td {\n padding-left: 0;\n padding-right: 0;\n }\n\n /* Each box fills its cell: the whole table for the search, one column for a\n * filter. A faded magnifier stands in for a placeholder — it says \"type here\n * to search\" in no language — and steps aside once the box has the focus. */\n .lti-search {\n width: 100%;\n padding: .5em 0 .5em 1.6em;\n background: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"gray\" stroke-width=\"2\"><circle cx=\"6.5\" cy=\"6.5\" r=\"4.5\"/><path d=\"M10 10l5 5\"/></svg>') 0.4em center / 1em no-repeat;\n /* on focus the magnifier goes away, leaving a small left pad so the caret\n * sits just inside the edge rather than behind the icon's wider gutter */\n &:focus {\n padding-left: .5em;\n background-image: none;\n }\n }\n\n /* the click target is the label span, not the whole cell (so the resize grip\n * stays separate), so the pointer cursor belongs on the label too */\n .lti-sortable .lti-label {\n cursor: pointer;\n user-select: none;\n }\n /* the ▲/▼ indicator, set off from the column label */\n .lti-sort {\n margin-left: 0.3em;\n font-size: 0.8em;\n }\n\n .lti-empty td {\n text-align: center;\n }\n\n /* the expand caret leads the first cell of each row; it carries its own\n * glyph (▸ / ▾), so it needs no borders or background of its own */\n .lti-expand {\n border: none;\n background: none;\n padding: 0;\n margin-right: 0.4em;\n cursor: pointer;\n }\n /* a row's detail spans every column; the inset marks it as belonging to the\n * row above it */\n .lti-detail > td {\n padding-left: 1.5em;\n }\n\n /* the drag grip sits on a column's right edge, inside its header cell */\n th:has(.lti-resizer) {\n position: relative;\n }\n .lti-resizer {\n position: absolute;\n top: 0;\n right: 0;\n width: 5px;\n height: 100%;\n cursor: col-resize;\n user-select: none;\n touch-action: none;\n &:hover {\n background: currentColor;\n opacity: 0.3;\n }\n }\n /* while dragging, the pointer keeps the resize cursor anywhere on the table,\n * and the drag selects no text */\n &.lti-resizing {\n cursor: col-resize;\n user-select: none;\n }\n /* column widths are authoritative once frozen, so a drag moves one edge only */\n &.lti-fixed {\n table-layout: fixed;\n /* a shrunk column hides its overflow rather than spilling into the next\n * column or out under the resize grip, so the grip can shrink it freely;\n * the detail row (full width, possibly tall) and the popover-bearing\n * filter/bar cells (<td>) are left to overflow */\n thead th, tbody tr:not(.lti-detail) td {\n overflow: hidden;\n }\n }\n\n /* the control bar lays its parts out left to right: an icon group, the filter\n * chips, then the search box. Only the search box grows, so all the free space\n * lands in it (pushing it to the right edge); the icons and chips keep their\n * natural width. The search still fills the bar when it is the only control. */\n .lti-bar {\n display: flex;\n align-items: center;\n /* a wide gap between the three parts (icons, chips, search) ... */\n gap: 1.2em;\n .lti-icons, .lti-chips {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n /* ... but a tight gap between the buttons / chips within a part */\n gap: 0.3em;\n }\n /* direct child only: a chip's popover holds its own `.lti-search` box */\n & > .lti-search {\n flex: 1 1 8em;\n min-width: 6em;\n }\n }\n\n /* the column-visibility menu: an eye button and the checklist it pops up */\n .lti-cols {\n position: relative;\n button {\n border: none;\n padding: 0;\n width: 1.2em;\n height: 1.2em;\n background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"gray\" stroke-width=\"1.5\"><path d=\"M1 8s2.5-4.5 7-4.5 7 4.5 7 4.5-2.5 4.5-7 4.5-7-4.5-7-4.5z\"/><circle cx=\"8\" cy=\"8\" r=\"2\"/></svg>');\n }\n .lti-menu {\n position: absolute;\n z-index: 1;\n top: 100%;\n left: 0;\n background: Canvas;\n border: 1px solid;\n padding: 0.3em 0.6em;\n label {\n display: block;\n white-space: nowrap;\n cursor: pointer;\n }\n }\n }\n\n /* the CSV download button: an icon button, same footprint as the eye button */\n .lti-download {\n border: none;\n padding: 0;\n width: 1.2em;\n height: 1.2em;\n background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"gray\" stroke-width=\"1.5\"><path d=\"M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5\"/><path d=\"M2 11v3h12v-3\"/></svg>');\n }\n\n /* typed filter chips sit after the search box in the head bar; each is a label,\n * a summary of the current filter, and a funnel popping up the widget + box */\n .lti-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.3em;\n &.lti-on .lti-chip-name {\n font-weight: 600;\n }\n .lti-chip-cur {\n color: #555;\n font-variant-numeric: tabular-nums;\n }\n }\n .lti-pop {\n position: relative;\n .lti-funnel {\n border: none;\n padding: 0;\n width: 1.1em;\n height: 1.1em;\n opacity: 0.55;\n background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"gray\"><path d=\"M1 2h14l-5.5 6.5V14l-3 1V8.5z\"/></svg>');\n }\n /* a funnel standing in for a header-level filter reads as active when its\n * column has a live term */\n &.lti-on .lti-funnel {\n opacity: 1;\n }\n .lti-pop-panel {\n position: absolute;\n z-index: 1;\n top: 100%;\n left: 0;\n display: flex;\n flex-direction: column;\n /* an explicit display beats the UA [hidden] rule, so re-hide it here */\n &[hidden] { display: none; }\n gap: 0.5em;\n min-width: 14em;\n max-width: 90vw;\n padding: 0.6em;\n background: Canvas;\n border: 1px solid;\n }\n }\n\n /* the custom range slider: a track with a fill band between two button thumbs */\n .lti-slider {\n position: relative;\n height: 1.2em;\n margin: 0.4em 0.6em;\n &::before {\n content: \"\";\n position: absolute;\n inset: 50% 0 auto;\n height: 3px;\n transform: translateY(-50%);\n background: #c8c8c8;\n border-radius: 3px;\n }\n .lti-slider-fill {\n position: absolute;\n inset: 50% 0;\n height: 3px;\n transform: translateY(-50%);\n background: #4a90d9;\n }\n .lti-thumb {\n position: absolute;\n top: 50%;\n width: 14px;\n height: 14px;\n padding: 0;\n transform: translate(-50%, -50%);\n border: 2px solid #fff;\n border-radius: 50%;\n background: #4a90d9;\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);\n cursor: pointer;\n touch-action: none;\n }\n }\n .lti-slider-out {\n text-align: center;\n font-variant-numeric: tabular-nums;\n }\n\n .lti-pager {\n display: flex;\n align-items: center;\n gap: 0.3em;\n }\n button, select {\n font: inherit;\n cursor: pointer;\n }\n /* push the row count away from the arrows, and the page size to the far end */\n .lti-pos {\n margin: 0 auto 0 0.3em;\n }\n}\n"],"names":[]}
|