forstok-ui-lib 6.5.1 → 6.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.5.1",
+  "version": "6.5.3",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/stylesheets/shares.styles.ts

@@ -2878,6 +2878,72 @@ const listTableStyles = {
       }
     }
   `,
+  'order-nocheck': css`
+    ${ItemTable} {
+      grid-template-columns: 118px 90px minmax(auto, max-content);
+      &[role=rowheader] > div[role=group] {
+        grid-template-columns: var(--order) 40px 80px 80px 88px minmax(145px, auto);
+      }
+      ._refCollapse > div:not(._refCollapseContainer), 
+      ._refCollapseContainer > div {
+        grid-template-columns: var(--order) 40px 80px 80px;
+      }
+      &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
+      ._refCollapse > div, 
+      ._refCollapseContainer > div {
+        &:nth-child(n+2) {
+          border-top: none;
+        }
+      }
+    }
+    @media only screen and (min-width: 1280px) {
+      ${ItemTable} {
+        grid-template-columns: 118px 118px minmax(auto, max-content);
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 40px 80px 80px 107px minmax(145px, auto);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 40px 80px 80px;
+        }
+      }
+    }
+    @media only screen and (min-width: 1366px) {
+      ${ItemTable} {
+        grid-template-columns: 120px 118px minmax(auto, max-content);
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 40px 90px 80px 130px minmax(150px, auto);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 40px 90px 80px;
+        }
+      }
+    }
+    @media only screen and (min-width: 1800px) {
+      ${ItemTable} {
+        grid-template-columns: minmax(125px, 170px) minmax(85px, 145px) minmax(auto, max-content);
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 50px 110px 130px 130px minmax(50px, 2000px);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 50px 110px 130px;
+        }
+      }
+    }
+    @media only screen and (min-width: 1920px) {
+      ${ItemTable} {
+        &[role=rowheader] > div[role=group] {
+          grid-template-columns: var(--order) 50px 110px 145px 130px minmax(50px, 2000px);
+        }
+        ._refCollapse > div:not(._refCollapseContainer), 
+        ._refCollapseContainer > div {
+          grid-template-columns: var(--order) 50px 110px 145px;
+        }
+      }
+    }
+  `,
   'table-customheader': css`
       overflow: hidden;
   > div {
@@ -4038,4 +4104,52 @@ export const APILabel = styled.label`
   top: 12px;
   z-index: 1;
   border-radius: var(--ter-rd);
-`
+`
+
+export const TableContentWrapper = styled.div<{ $mode?: 'package' }>`
+  position: relative;
+  width: 100%;
+  height: 48px;
+  display: inline-grid;
+  grid-auto-flow: column;
+  justify-content: flex-start;
+  align-items: center;
+  grid-gap: 40px;
+  border-bottom: 1px solid var(--ter-clr-ln);
+  padding: 0 30px;
+  &:not(:first-child) {
+    border-bottom: 1px solid var(--ter-clr-ln);
+  }
+  @media only screen and (min-width: 375px) { 
+    padding: 0 34px; 
+  }
+  @media only screen and (min-width: 768px) { 
+    padding: 0 33px; 
+  }
+  @media only screen and (min-width: 1024px) { 
+    padding: 0 39px; 
+  }
+  @media only screen and (min-width: 1366px) {
+    padding: 0 47px; 
+  }
+
+  ${({ $mode }) => $mode === 'package' && css`
+    grid-template-columns: 16px 220px auto;
+    grid-gap: 11px;
+    justify-content: normal;
+    padding: 0 7px 0 3px;
+    @media only screen and (min-width: 375px) { 
+      padding: 0 7px; 
+    }
+    @media only screen and (min-width: 768px) { 
+      grid-gap: 12px; 
+      padding: 0 7px 0 5px; 
+    }
+    @media only screen and (min-width: 1024px) { 
+      padding: 0 7px 0 11px; 
+    }
+    @media only screen and (min-width: 1366px) { 
+      padding: 0 11px 0 19px; 
+    }
+  `}
+`

package/src/typeds/shares.typed.ts

@@ -291,4 +291,5 @@ export type ModeListTableColumn =
   | 'warehouses'
   | 'archived'
   | 'order'
+  | 'order-nocheck'
   | 'table-customheader';