forstok-ui-lib 6.5.0 → 6.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "6.5.0",
+  "version": "6.5.2",
   "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 {

package/src/components/image/channel.tsx

@@ -4,7 +4,7 @@ import { InitialContainer, APILabel } from '../../assets/stylesheets/shares.styl
 
 import { ImageMode } from './type'
 
-const ImageChannel = ({ data, label, size, isImageOnly, $mode }:{ data?: any, label?: string, size?: string, isImageOnly?: boolean, $mode?: ImageMode }) => {
+const ImageChannelComponent = ({ data, label, size, isImageOnly, $mode }:{ data?: any, label?: string, size?: string, isImageOnly?: boolean, $mode?: ImageMode }) => {
   const fontSize = size ? ((parseInt(size) / 2) > 10 ? (parseInt(size) / 2) : 10) : 10
   const defSize = size || '20px'
 
@@ -59,4 +59,4 @@ const ImageChannel = ({ data, label, size, isImageOnly, $mode }:{ data?: any, la
   )
 }
 
-export default ImageChannel
+export default ImageChannelComponent

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { default as MessageComponent } from './message';
 export { default as MessageQuestionComponent } from './message/question'; 
 export { default as PopupComponent } from './popup';
 export { default as ImageComponent } from './image';
+export { default as ImageChannelComponent } from './image/channel';
 export { default as SelectComponent } from './select';
 export { default as MenuList } from './select/menulist';
 export { default as ErrorComponent } from './error';

package/src/typeds/shares.typed.ts

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