extracted selection logic to own feature and anhanched with range selection

2024-10-16 13:37:26 +02:00 · 2024-10-16 13:37:26 +02:00 · 1a963a665e
commit 1a963a665e
parent 40f46eba1d
15 changed files with 295 additions and 254 deletions
--- a/src/features/file/grid.css
+++ b/src/features/file/grid.css
@ -1,115 +0,0 @@
-.table {
-    position: relative;
-    display: grid;
-    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
-    align-content: start;
-    padding-inline: 1px;
-    margin-inline: -1px;
-
-    block-size: 100%;
-    overflow: clip auto;
-
-    background-color: var(--surface-1);
-
-    & input[type="checkbox"] {
-        margin: .1em;
-    }
-
-    & textarea {
-        resize: vertical;
-        min-block-size: 2em;
-        max-block-size: 50em;
-
-        background-color: var(--surface-1);
-        color: var(--text-1);
-        border-color: var(--text-2);
-        border-radius: var(--radii-s);
-    }
-
-    & .cell {
-        display: grid;
-        place-content: center stretch;
-        padding: .5em;
-        border: 1px solid transparent;
-        border-radius: var(--radii-m);
-
-        &:has(textarea:focus) {
-            border-color: var(--info);
-        }
-    }
-
-    & > :is(header, main, footer) {
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-    }
-
-    & > header {
-        position: sticky;
-        inset-block-start: 0;
-        background-color: inherit;
-    }
-
-    & label {
-        --bg: var(--text);
-        --alpha: 0;
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-        border: 1px solid transparent;
-        background-color: color(from var(--bg) srgb r g b / var(--alpha));
-
-        &:has(> .cell > :checked) {
-            --bg: var(--info);
-            --alpha: .1;
-            border-color: var(--bg);
-
-            & span {
-                font-variation-settings: 'GRAD' 1000;
-            }
-
-            & + :has(> .cell> :checked) {
-                border-block-start-color: transparent;
-            }
-
-            &:has(+ label > .cell > :checked) {
-                border-block-end-color: transparent;
-            }
-        }
-
-        &:hover {
-            --alpha: .2 !important;
-        }
-    }
-
-    & details {
-        display: contents;
-
-        &::details-content {
-            grid-column: span calc(2 + var(--columns));
-            display: grid;
-            grid-template-columns: subgrid;
-        }
-
-        &:not([open])::details-content {
-            display: none;
-        }
-
-        & > summary {
-            grid-column: 2 / span calc(1 + var(--columns));
-            padding: .5em;
-            padding-inline-start: calc(var(--depth) * 1em + .5em);
-
-        }
-
-        & > label > .cell > span {
-            padding-inline-start: calc(var(--depth) * 1em);
-        }
-    }
-}
-
-@property --depth {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
-}