@simai-studio/view 0.0.0-stage → 1.1.0

package/dist/smart/view/css/view.css

@@ -0,0 +1,208 @@
+@charset "UTF-8";
+@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
+/* sf-view's own sheet (data-view.css): its first paint, the skeleton
+   _startFirstPaint draws and a server prints. Until 1.6.0 these rules were in
+   sf-view-table's sheet and data-view.css was the table's and the page row's styles,
+   bundled through their index.js; the view now carries only its own. */
+/* ─── sf-view's first paint (its skeleton, index.js _startFirstPaint) ──
+   The view's first paint is the shape of the table: the skeleton's rows have
+   to be as tall as the rows the table draws when the host answers. Lengths are
+   the table's own tokens: a cell's padding, a line of the row's text, a
+   control of the row's step. The table chooses table or compact list in code
+   (isList: its container below list-below, 600 px by default); a printed
+   skeleton cannot measure, so a container query at the same width chooses. */
+@layer sf.components {
+  /* Until the host's first answer only the skeleton shows: the table and the
+     page row the page gave stand back, before the view's code too (in its
+     shadow root they are in the layout it hides). */
+  sf-view[data-sf-awaiting] > :not([slot=first-paint]) {
+    /* Important: a printed part host carries display: contents inline. */
+    display: none !important;
+  }
+  sf-data-view[data-sf-awaiting] > :not([slot=first-paint]) {
+    /* Important: a printed part host carries display: contents inline. */
+    display: none !important;
+  }
+  sf-view > .sf-data-view-skeleton {
+    --sf-data-view-skeleton--pad: var(--sf-space-1);
+    --sf-data-view-skeleton--control: var(--sf-ui-1--control-height);
+    display: grid;
+    grid-gap: var(--sf-space-3);
+    gap: var(--sf-space-3);
+    grid-gap: var(--sf-space-3);
+    grid-gap: var(--sf-data-view-gap, var(--sf-space-3));
+    gap: var(--sf-data-view-gap, var(--sf-space-3));
+    container-type: inline-size;
+  }
+  sf-data-view > .sf-data-view-skeleton {
+    --sf-data-view-skeleton--pad: var(--sf-space-1);
+    --sf-data-view-skeleton--control: var(--sf-ui-1--control-height);
+    display: grid;
+    grid-gap: var(--sf-space-3);
+    gap: var(--sf-space-3);
+    grid-gap: var(--sf-space-3);
+    grid-gap: var(--sf-data-view-gap, var(--sf-space-3));
+    gap: var(--sf-data-view-gap, var(--sf-space-3));
+    container-type: inline-size;
+  }
+  sf-view > .sf-data-view-skeleton[data-size="1/2"] {
+    --sf-data-view-skeleton--pad: var(--sf-ui-1\/2--space-y);
+    --sf-data-view-skeleton--control: var(--sf-ui-1\/2--control-height);
+  }
+  sf-data-view > .sf-data-view-skeleton[data-size="1/2"] {
+    --sf-data-view-skeleton--pad: var(--sf-ui-1\/2--space-y);
+    --sf-data-view-skeleton--control: var(--sf-ui-1\/2--control-height);
+  }
+  /* A bar is a line of the row's text (its line height, the letters' height
+     in the middle); a control block is as tall as the step's control. The
+     whole box is here, not only its lengths: the skeleton component's sheet
+     (which also sizes .sf-skeleton-text) arrives later through the Loader, and
+     a bar with no height of its own until then grows the list when it does. */
+  .sf-data-view-skeleton .sf-skeleton-text {
+    --sf-skeleton-text--height: var(--sf-text-size-1);
+    --sf-skeleton-text--line: var(--sf-text-height-1);
+    display: block;
+    height: var(--sf-skeleton-text--height);
+    block-size: var(--sf-skeleton-text--height);
+    margin-top: calc((var(--sf-skeleton-text--line) - var(--sf-skeleton-text--height)) / 2);
+    margin-bottom: calc((var(--sf-skeleton-text--line) - var(--sf-skeleton-text--height)) / 2);
+    margin-block: calc((var(--sf-skeleton-text--line) - var(--sf-skeleton-text--height)) / 2);
+    width: 50%;
+    inline-size: 50%;
+    max-width: 100%;
+    max-inline-size: 100%;
+  }
+  .sf-data-view-skeleton[data-size="1/2"] .sf-skeleton-text {
+    --sf-skeleton-text--height: var(--sf-b0);
+    --sf-skeleton-text--line: var(--sf-text-height-1\/2);
+  }
+  .sf-data-view-skeleton .sf-skeleton-text[data-control] {
+    --sf-skeleton-text--height: var(--sf-data-view-skeleton--control);
+    --sf-skeleton-text--line: var(--sf-data-view-skeleton--control);
+    width: var(--sf-data-view-skeleton--control);
+    inline-size: var(--sf-data-view-skeleton--control);
+    flex: none;
+  }
+  .sf-data-view-skeleton .sf-skeleton-text[data-control=button] {
+    width: calc(var(--sf-data-view-skeleton--control) * 3);
+    inline-size: calc(var(--sf-data-view-skeleton--control) * 3);
+  }
+  .sf-data-view-skeleton .sf-skeleton-text[data-control=field] {
+    width: auto;
+    inline-size: auto;
+    min-width: calc(var(--sf-data-view-skeleton--control) * 2.5);
+    min-inline-size: calc(var(--sf-data-view-skeleton--control) * 2.5);
+    flex: 1 1 auto;
+  }
+  /* The table's section: its toolbar, then its rows, a step apart. */
+  .sf-data-view-skeleton-records {
+    display: grid;
+    grid-gap: var(--sf-space-1\/3);
+    gap: var(--sf-space-1\/3);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-data-view-skeleton-toolbar {
+    display: flex;
+    gap: var(--sf-space-1\/3);
+  }
+  /* A row (the head first) as tall as the table's: the cell padding, the
+     row's tallest content -- a line of text, or the row menu's control -- and
+     the line under it. */
+  .sf-data-view-skeleton-table > div {
+    display: flex;
+    align-items: center;
+    gap: var(--sf-space-1);
+    padding-top: var(--sf-data-view-skeleton--pad);
+    padding-bottom: var(--sf-data-view-skeleton--pad);
+    padding-block: var(--sf-data-view-skeleton--pad);
+    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
+    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
+            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
+  }
+  .sf-data-view-skeleton-table > div > span {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-data-view-skeleton-table > div > span[data-chrome] {
+    flex: none;
+    width: var(--sf-data-view-skeleton--control);
+    inline-size: var(--sf-data-view-skeleton--control);
+  }
+  .sf-data-view-skeleton-table > div > span[data-chrome] > .sf-skeleton-text:not([data-control]) {
+    width: 1lh;
+    inline-size: 1lh;
+  }
+  .sf-data-view-skeleton-table > div > span:nth-child(3n+1) > .sf-skeleton-text {
+    width: 75%;
+    inline-size: 75%;
+  }
+  .sf-data-view-skeleton-table > div > span:nth-child(3n+2) > .sf-skeleton-text {
+    width: 60%;
+    inline-size: 60%;
+  }
+  .sf-data-view-skeleton-table > div:nth-child(even) > span > .sf-skeleton-text {
+    width: 66%;
+    inline-size: 66%;
+  }
+  .sf-data-view-skeleton-table > div:first-child > span > .sf-skeleton-text {
+    width: 40%;
+    inline-size: 40%;
+  }
+  /* The compact list's record, as sf-view-table .sf-table-list-item: its box, its
+     title and the fields under it (one line each), its menu. */
+  .sf-data-view-skeleton-list {
+    display: none;
+  }
+  .sf-data-view-skeleton-list > div {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: start;
+    grid-gap: var(--sf-a8);
+    gap: var(--sf-a8);
+    padding: var(--sf-a8);
+    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
+    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
+            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
+  }
+  .sf-data-view-skeleton-list > div > .sf-skeleton-text:first-child {
+    width: 1lh;
+    inline-size: 1lh;
+  }
+  .sf-data-view-skeleton-list > div > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-a4);
+    min-width: 0;
+    min-inline-size: 0;
+  }
+  .sf-data-view-skeleton-list > div > div > .sf-skeleton-text:first-child {
+    width: 60%;
+    inline-size: 60%;
+  }
+  .sf-data-view-skeleton-list > div > div > .sf-skeleton-text:nth-child(even) {
+    width: 75%;
+    inline-size: 75%;
+  }
+  /* The page row's words: as long as the words they stand for. */
+  .sf-data-view-skeleton nav .sf-skeleton-text:not([data-control]) {
+    width: 5em;
+    inline-size: 5em;
+  }
+  .sf-data-view-skeleton[data-layout=list] .sf-data-view-skeleton-table {
+    display: none;
+  }
+  .sf-data-view-skeleton[data-layout=list] .sf-data-view-skeleton-list {
+    display: block;
+  }
+  @container (width < 600px) {
+    .sf-data-view-skeleton[data-layout=auto] .sf-data-view-skeleton-table {
+      display: none;
+    }
+    .sf-data-view-skeleton[data-layout=auto] .sf-data-view-skeleton-list {
+      display: block;
+    }
+  }
+}

package/dist/smart/view/css/view.min.css

@@ -0,0 +1,2 @@
+@layer sf.reset, sf.tokens, sf.base, sf.utilities, sf.components, sf.overrides, sf.states;
+@layer sf.components{sf-view[data-sf-awaiting]>:not([slot=first-paint]){display:none !important}sf-data-view[data-sf-awaiting]>:not([slot=first-paint]){display:none !important}sf-view>.sf-data-view-skeleton{--sf-data-view-skeleton--pad: var(--sf-space-1);--sf-data-view-skeleton--control: var(--sf-ui-1--control-height);display:grid;grid-gap:var(--sf-space-3);gap:var(--sf-space-3);grid-gap:var(--sf-space-3);grid-gap:var(--sf-data-view-gap, var(--sf-space-3));gap:var(--sf-data-view-gap, var(--sf-space-3));container-type:inline-size}sf-data-view>.sf-data-view-skeleton{--sf-data-view-skeleton--pad: var(--sf-space-1);--sf-data-view-skeleton--control: var(--sf-ui-1--control-height);display:grid;grid-gap:var(--sf-space-3);gap:var(--sf-space-3);grid-gap:var(--sf-space-3);grid-gap:var(--sf-data-view-gap, var(--sf-space-3));gap:var(--sf-data-view-gap, var(--sf-space-3));container-type:inline-size}sf-view>.sf-data-view-skeleton[data-size="1/2"]{--sf-data-view-skeleton--pad: var(--sf-ui-1\/2--space-y);--sf-data-view-skeleton--control: var(--sf-ui-1\/2--control-height)}sf-data-view>.sf-data-view-skeleton[data-size="1/2"]{--sf-data-view-skeleton--pad: var(--sf-ui-1\/2--space-y);--sf-data-view-skeleton--control: var(--sf-ui-1\/2--control-height)}.sf-data-view-skeleton .sf-skeleton-text{--sf-skeleton-text--height: var(--sf-text-size-1);--sf-skeleton-text--line: var(--sf-text-height-1);display:block;height:var(--sf-skeleton-text--height);block-size:var(--sf-skeleton-text--height);margin-top:calc((var(--sf-skeleton-text--line) - var(--sf-skeleton-text--height))/2);margin-bottom:calc((var(--sf-skeleton-text--line) - var(--sf-skeleton-text--height))/2);margin-block:calc((var(--sf-skeleton-text--line) - var(--sf-skeleton-text--height))/2);width:50%;inline-size:50%;max-width:100%;max-inline-size:100%}.sf-data-view-skeleton[data-size="1/2"] .sf-skeleton-text{--sf-skeleton-text--height: var(--sf-b0);--sf-skeleton-text--line: var(--sf-text-height-1\/2)}.sf-data-view-skeleton .sf-skeleton-text[data-control]{--sf-skeleton-text--height: var(--sf-data-view-skeleton--control);--sf-skeleton-text--line: var(--sf-data-view-skeleton--control);width:var(--sf-data-view-skeleton--control);inline-size:var(--sf-data-view-skeleton--control);flex:none}.sf-data-view-skeleton .sf-skeleton-text[data-control=button]{width:calc(var(--sf-data-view-skeleton--control)*3);inline-size:calc(var(--sf-data-view-skeleton--control)*3)}.sf-data-view-skeleton .sf-skeleton-text[data-control=field]{width:auto;inline-size:auto;min-width:calc(var(--sf-data-view-skeleton--control)*2.5);min-inline-size:calc(var(--sf-data-view-skeleton--control)*2.5);flex:1 1 auto}.sf-data-view-skeleton-records{display:grid;grid-gap:var(--sf-space-1\/3);gap:var(--sf-space-1\/3);min-width:0;min-inline-size:0}.sf-data-view-skeleton-toolbar{display:flex;gap:var(--sf-space-1\/3)}.sf-data-view-skeleton-table>div{display:flex;align-items:center;gap:var(--sf-space-1);padding-top:var(--sf-data-view-skeleton--pad);padding-bottom:var(--sf-data-view-skeleton--pad);padding-block:var(--sf-data-view-skeleton--pad);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-data-view-skeleton-table>div>span{display:flex;flex:1 1 0;min-width:0;min-inline-size:0}.sf-data-view-skeleton-table>div>span[data-chrome]{flex:none;width:var(--sf-data-view-skeleton--control);inline-size:var(--sf-data-view-skeleton--control)}.sf-data-view-skeleton-table>div>span[data-chrome]>.sf-skeleton-text:not([data-control]){width:1lh;inline-size:1lh}.sf-data-view-skeleton-table>div>span:nth-child(3n+1)>.sf-skeleton-text{width:75%;inline-size:75%}.sf-data-view-skeleton-table>div>span:nth-child(3n+2)>.sf-skeleton-text{width:60%;inline-size:60%}.sf-data-view-skeleton-table>div:nth-child(even)>span>.sf-skeleton-text{width:66%;inline-size:66%}.sf-data-view-skeleton-table>div:first-child>span>.sf-skeleton-text{width:40%;inline-size:40%}.sf-data-view-skeleton-list{display:none}.sf-data-view-skeleton-list>div{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:start;grid-gap:var(--sf-a8);gap:var(--sf-a8);padding:var(--sf-a8);border-bottom:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-after:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant)}.sf-data-view-skeleton-list>div>.sf-skeleton-text:first-child{width:1lh;inline-size:1lh}.sf-data-view-skeleton-list>div>div{display:flex;flex-direction:column;gap:var(--sf-a4);min-width:0;min-inline-size:0}.sf-data-view-skeleton-list>div>div>.sf-skeleton-text:first-child{width:60%;inline-size:60%}.sf-data-view-skeleton-list>div>div>.sf-skeleton-text:nth-child(even){width:75%;inline-size:75%}.sf-data-view-skeleton nav .sf-skeleton-text:not([data-control]){width:5em;inline-size:5em}.sf-data-view-skeleton[data-layout=list] .sf-data-view-skeleton-table{display:none}.sf-data-view-skeleton[data-layout=list] .sf-data-view-skeleton-list{display:block}@container (width < 600px){.sf-data-view-skeleton[data-layout=auto] .sf-data-view-skeleton-table{display:none}.sf-data-view-skeleton[data-layout=auto] .sf-data-view-skeleton-list{display:block}}}