@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.100

package/scss/components/_table-row.scss

@@ -0,0 +1,240 @@
+@use 'sass:string';
+@use 'sass:map';
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='table-row'] {
+    :where(&) {
+      row-gap: var(--table-row-gap);
+
+      column-gap: var(--table-col-gap);
+
+      --label-line-limit: 1;
+      --label-truncation-mode: tail;
+    }
+
+    @for $i from 1 through 10 {
+      @container table (width > #{vars.$table-expanded-bp}) and (style(--table--expanded-columns: #{$i})) {
+        > :nth-child(n + #{$i + 1}) {
+          :where(&) {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // dissmantle list and turn it into a h-column row
+    @container table (width > #{vars.$table-expanded-bp}) {
+      :where(&) {
+        --itempadiend: var(--itempadistart);
+        &:after {
+          display: none;
+        }
+        --list--accessories-size: 0rem;
+        --list--accessories-display: none;
+        // background: red;
+        grid-auto-flow: column;
+
+        grid-auto-columns: minmax(0, 1fr);
+
+        // grid-template-columns: repeat(var(--table--expanded-columns), minmax(0, 1fr));
+        grid-template-rows: minmax(0, 1fr);
+      }
+
+      > :nth-child(n + 2) {
+        :where(&) {
+          color: var(--secondary);
+        }
+      }
+    }
+
+    @container table (width <= #{vars.$table-expanded-bp}) {
+      > :nth-child(n + 2) {
+        :where(&) {
+          display: none;
+
+          color: var(--secondary);
+        }
+      }
+
+      // table-view[preferred-compact-template] > & {
+      //   > :nth-child(n + 2) {
+      //     :where(&) {
+      //       display: grid;
+      //     }
+      //   }
+      // }
+      table-view[preferred-compact-template='title:trailing:subtitle'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 3) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: subtitle;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='trailing:title:subtitle'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 3) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: subtitle;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='title:subtitle:trailing'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 3) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: subtitle;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='title:trailing'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 2) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='*'] > & {
+        > :nth-child(n + 2) {
+          :where(&) {
+            display: grid;
+          }
+        }
+      }
+
+      // :where(& > :nth-child(n + 7)) {
+      //   grid-column: 1 / -1; /* span all columns */
+      // }
+
+      // :where(& > :nth-child(1)) {
+      //   grid-area: a;
+      // }
+      // :where(& > :nth-child(2)) {
+      //   grid-area: b;
+      // }
+      // :where(& > :nth-child(3)) {
+      //   grid-area: c;
+      // }
+      // :where(& > :nth-child(4)) {
+      //   grid-area: d;
+      // }
+      // :where(& > :nth-child(5)) {
+      //   grid-area: e;
+      // }
+      // :where(& > :nth-child(6)) {
+      //   grid-area: f;
+      // }
+    }
+  }
+}

package/scss/components/_table-view.scss

@@ -0,0 +1,232 @@
+@use 'sass:string';
+@use 'sass:map';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
+@use '../placeholders';
+
+@property --adaptable-table-style-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+$table-ifs: (
+  inset: (
+    --list--item-color: var(--insetgroupedlist-item-color,),
+    --list--item-background-color: var(--insetgroupedlist-item-background-color,),
+    --list--highlighteditem-color: var(--insetgroupedlist-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetgroupedlist-highlighteditem-background-color,),
+    --list--item-border-radius: 0,
+    --list--host-background-color: var(--insetgroupedlist-background-color,),
+    --list--host-padding-inline: var(--insetgroupedlist-padding-inline),
+    --list--host-padding-block: var(--insetgroupedlist-padding-block),
+    //
+    --list--adjacentdetailsitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetgroupedlist-openitem-background-color,),
+    --list--details-color: var(--insetgroupedlist-openitem-color,),
+    --list--opendetails-background-color: var(--insetgroupedlist-openitem-background-color,),
+    --list--opendetails-color: var(--insetgroupedlist-openitem-color,),
+    --list--opensummary-background-color: var(--insetgroupedlist-opensummary-background-color,),
+    --list--opensummary-color: var(--insetgroupedlist-opensummary-color,),
+  ),
+);
+$table-elses: (
+  --list--host-background-color: var(--list-background-color,),
+  --list--highlighteditem-background-color: var(--list-highlighteditem-background-color,),
+  --list--item-background-color: var(--list-item-background-color,),
+  --list--item-padding-inline-start: var(--list-item-padding-inline-start),
+  --list--item-padding-inline-end: var(--list-item-padding-inline-end),
+  --list--item-padding-block-start: var(--list-item-padding-block-start),
+  --list--item-padding-block-end: var(--list-item-padding-block-end),
+  --list--item-color: var(--list-item-color,),
+  --list--highlighteditem-color: var(--list-highlighteditem-color,),
+  //
+  --list--details-background-color: var(--list-openitem-background-color,),
+  --list--details-color: var(--list-openitem-color,),
+  --list--opensummary-background-color: var(--list-opensummary-background-color,),
+  --list--opensummary-color: var(--list-opensummary-color,),
+  //
+  --list--accessories-size: 1.1rem,
+  --list--accessories-display: grid,
+);
+
+@layer #{vars.$list-components-layer} {
+  table-view {
+    &:not(& &, list-view &, [is='form-view'] &) {
+      @extend %list;
+
+      :where(&) {
+        container: table / inline-size;
+
+        &::part(table-container) {
+          grid-template-columns: subgrid;
+        }
+
+        &::part(table-header-stack),
+        &::part(table-footer-stack) {
+          position: relative; // SAFARI BUG
+
+          padding-inline: var(--list--host-padding-inline, 0px);
+
+          background-color: var(--secondaryBackground);
+
+          column-gap: var(--toolbar-col-gap);
+
+          grid-auto-flow: column;
+          grid-template-columns: auto 1fr auto;
+          grid-template-rows: var(--toolbar-cell-min-size);
+
+          place-content: center; // middle of y axis
+        }
+
+        &::part(table-header-stack) {
+          border-radius: var(--insetlist-item-border-radius) var(--insetlist-item-border-radius) 0 0;
+
+          border-bottom: 1px solid var(--separator);
+        }
+
+        &::part(table-footer-stack) {
+          border-radius: 0 0 var(--insetlist-item-border-radius) var(--insetlist-item-border-radius);
+
+          border-top: 1px solid var(--separator);
+        }
+
+        &::part(table-header-leading-stack),
+        &::part(table-header-principal-stack),
+        &::part(table-header-trailing-stack),
+        &::part(table-footer-leading-stack),
+        &::part(table-footer-principal-stack),
+        &::part(table-footer-trailing-stack) {
+          grid-auto-flow: column;
+          grid-template-columns: minmax(0, 1fr);
+
+          column-gap: var(--toolbar-col-gap);
+        }
+      }
+
+      &::part(table-column-stack) {
+        grid-auto-flow: column;
+
+        grid-auto-columns: minmax(0, 1fr);
+
+        column-gap: var(--table-col-gap);
+
+        padding-inline: var(--list--host-padding-inline, 0px);
+
+        padding-block: var(--table-row-gap);
+
+        // color: var(--blue);
+        font-size: 0.875rem;
+        font-weight: 600;
+
+        background-color: var(--separator);
+      }
+
+      // SECTION: toolbars
+      > [slot^='header'],
+      > [slot^='footer'] {
+        :where(&) {
+          place-content: center;
+        }
+      }
+
+      :where(& > button[slot^='header'], & > button[slot^='footer']),
+      :where(& > picker-view > menu-view[slot^='header'], & > picker-view > menu-view[slot^='footer'])::part(menu-summary),
+      :where(& > menu-view[slot^='header'], & > menu-view[slot^='footer'])::part(menu-summary) {
+        border-radius: 0.7rem;
+      }
+
+      // SECTION: Cols hider
+      @container table (width <= #{vars.$table-expanded-bp}) {
+        :where(& > [slot='column']) {
+          display: none;
+        }
+
+        :where(&)::part(table-column-stack) {
+          display: none;
+        }
+      }
+
+      // SECTION: styleobserver
+      :where(&) {
+        &::part(table-container) {
+          transition: --adaptable-table-style-index 1ms step-start;
+
+          --adaptable-table-style-index: 0;
+          --adaptable-table-style: compact;
+        }
+
+        @container table (width > #{vars.$table-expanded-bp}) {
+          &::part(table-container) {
+            --adaptable-table-style-index: 1;
+            --adaptable-table-style: expanded;
+          }
+        }
+      }
+
+      // SECTION: Columns counter
+      :where(&) {
+        --table--expanded-columns: 1;
+
+        @for $i from 2 through 6 {
+          &:has(> [slot='column']:nth-child(#{$i} of [slot='column'])) {
+            --table--expanded-columns: #{$i};
+          }
+        }
+      }
+      // :where(&:has(> [slot='column']:nth-of-type(2)):not(:has(> [slot='column']:nth-of-type(3)))) {
+      //   --table--expanded-columns: 2;
+      // }
+      // :where(&:has(> [slot='column']:nth-of-type(3)):not(:has(> [slot='column']:nth-of-type(4)))) {
+      //   --table--expanded-columns: 3;
+      // }
+
+      // // @include mixins.center-toolbar-elements('&');
+      // :where(& > button[slot^='header'], & > button[slot^='footer']),
+      // :where(& > picker-view > menu-view)::part(menu-summary),
+      // :where(& > menu-view[slot^='header'], & > menu-view[slot^='footer'])::part(menu-summary) {
+      //   place-items: center;
+
+      //   place-content: center;
+      // }
+      // }
+
+      // wire
+      :where(&) {
+        @include mixins.write-props($table-elses);
+      }
+
+      // SECTION: ifs
+      @supports (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          @include mixins.write-ifs(--table-style, $table-ifs, $table-elses);
+        }
+      }
+
+      // SECTION: ifs polyfill
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&:not([table-style])) {
+          @each $v in maps.$table-styles-names {
+            @container style(--table-style: #{$v}) {
+              @include mixins.write-props(map.get($table-ifs, $v));
+            }
+          }
+        }
+        @each $v in maps.$table-styles-names {
+          :where(&[table-style='#{$v}']) {
+            @include mixins.write-props(map.get($table-ifs, $v));
+          }
+        }
+      }
+
+      // SECTION: attrs finally
+      @supports (x: #{string.unquote('attr(x type(*))')}) {
+        :where(&) {
+          --table-style: attr(table-style type(<custom-ident>), inherit);
+        }
+      }
+    }
+  }
+}

package/scss/components/_text-field.scss

@@ -0,0 +1,57 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  text-field {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+
+      grid-template-rows: minmax(0, 1fr);
+
+      // padding-inline: var(--toolbaritempadistart,) var(--toolbaritempadiend,);
+      // padding-block: var(--toolbaritempadbstart,) var(--toolbaritempadbend,);
+
+      &::part(text-field-stack) {
+        // display: grid;
+
+        grid-template-columns: auto minmax(0, 1fr);
+
+        grid-template-rows: minmax(0, 1fr);
+
+        column-gap: var(--labeled-content-column-gap);
+      }
+
+      &::part(text-field-label-stack) {
+        // display: grid;
+
+        color: var(--secondary);
+      }
+
+      &::part(text-field-input-stack) {
+        // display: grid;
+
+        place-items: stretch;
+        place-content: stretch;
+      }
+
+      &::part(text-field-form-input) {
+        // display: grid;
+
+        text-align: end;
+
+        appearance: none;
+
+        border: 0;
+
+        outline: 0;
+
+        padding: 0;
+
+        // padding-block: 0.1rem;
+
+        // padding-inline: 0.3rem;
+
+        background-color: transparent;
+      }
+    }
+  }
+}

package/scss/components/_text-view.scss

@@ -0,0 +1,57 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  text-view {
+    :where(&) {
+      //
+
+      // inline-size: min-content;
+    }
+
+    &[prose] {
+      :where(&) {
+        container: text-view / inline-size;
+
+        // font-size: clamp(1rem, var(--text-view--base-font-size) + 0.5rem, 3rem);
+
+        // --text-view--base-font-size: 1cqi;
+        // --text-view--h1-font-size: 5cqi;
+
+        --text-view--p-margin-block-start: 1rem;
+      }
+
+      p {
+        margin-block-start: var(--text-view--p-margin-block-start);
+      }
+
+      // @container text-view (width <= 576px) {
+      //   :where(&) {
+      //     --text-view--base-font-size: 1.3cqi;
+      //   }
+      // }
+      // @container text-view (width > 576px) {
+      //   :where(&) {
+      //     --text-view--base-font-size: 1.3cqi;
+      //   }
+      // }
+      // @container table (width > 768) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+      // @container table (width > 1024) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+      // @container table (width > 1280) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+      // @container table (width > 1536) {
+      //   --text-view--base-font-size: 100% * 16px;
+      // }
+
+      h1 {
+        :where(&) {
+          font-size: clamp(1rem, var(--text-view--h1-font-size) + 0.5rem, 3rem);
+        }
+      }
+    }
+  }
+}