@threadlabs/looma 0.25.6 → 0.25.7
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/components/ui-tree-item/ui-tree-item.html +14 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-tree-item.css +13 -0
- package/vanilla/UiTreeItem.d.ts +1 -0
- package/vanilla/UiTreeItem.js +1 -1
- package/vue/UiTreeItem.d.ts +9 -0
- package/vue/UiTreeItem.vue +35 -0
- package/vue/chunks/UiTreeItem.js +24 -1
- package/vue/components.css +115 -100
|
@@ -35,6 +35,9 @@
|
|
|
35
35
|
<prop name="selected" type="boolean" default="false"
|
|
36
36
|
>Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree's select request by updating
|
|
37
37
|
it.</prop>
|
|
38
|
+
<prop name="actionsVisible" type="boolean" default="false"
|
|
39
|
+
>Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;
|
|
40
|
+
touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.</prop>
|
|
38
41
|
<prop name="marquee" type="boolean" default="false"
|
|
39
42
|
>Scrolls a name too long for its row while a pointer hovers the row or keyboard focus is in it, rests at the end, then scrolls it again from the start. A
|
|
40
43
|
touch does not start it. Off by default: a tree of short names should not move, and a product decides whether reading the whole name matters more than a
|
|
@@ -371,6 +374,7 @@
|
|
|
371
374
|
the truncation mark while it shows: an ellipsis under it would read as a second one. */
|
|
372
375
|
.row:hover > .label,
|
|
373
376
|
.row:focus-within > .label,
|
|
377
|
+
:host([actionsVisible]) > .row > .label,
|
|
374
378
|
:host[data-move-source] > .row > .label {
|
|
375
379
|
text-overflow: clip;
|
|
376
380
|
mask-image: linear-gradient(
|
|
@@ -382,6 +386,7 @@
|
|
|
382
386
|
|
|
383
387
|
.row:hover > .label:dir(rtl),
|
|
384
388
|
.row:focus-within > .label:dir(rtl),
|
|
389
|
+
:host([actionsVisible]) > .row > .label:dir(rtl),
|
|
385
390
|
:host[data-move-source] > .row > .label:dir(rtl) {
|
|
386
391
|
mask-image: linear-gradient(
|
|
387
392
|
to left,
|
|
@@ -464,6 +469,7 @@
|
|
|
464
469
|
|
|
465
470
|
.row:hover > .actions,
|
|
466
471
|
.row:focus-within > .actions,
|
|
472
|
+
:host([actionsVisible]) > .row > .actions,
|
|
467
473
|
:host[data-move-source] > .row > .actions {
|
|
468
474
|
opacity: 1;
|
|
469
475
|
pointer-events: auto;
|
|
@@ -500,6 +506,14 @@
|
|
|
500
506
|
);
|
|
501
507
|
}
|
|
502
508
|
|
|
509
|
+
/* Persistent content has its own column on touch. Fade only the label's end. */
|
|
510
|
+
:host([actionsVisible]) > .row > .label {
|
|
511
|
+
mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
|
|
512
|
+
}
|
|
513
|
+
:host([actionsVisible]) > .row > .label:dir(rtl) {
|
|
514
|
+
mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
|
|
515
|
+
}
|
|
516
|
+
|
|
503
517
|
.row[data-ui-marquee] > .label:dir(rtl) {
|
|
504
518
|
mask-image: linear-gradient(
|
|
505
519
|
to left,
|