forstok-ui-lib 6.4.1 → 6.4.3

package/package.json

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

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

@@ -2,18 +2,6 @@ import styled, { css } from 'styled-components';
 import { responseWidth, formLabel, elipsis, multiElipsis, headTable, clearList, dropBase, buttonStyle, buttonActiveStyle, buttonHoverStyle } from './bases.styles';
 import { ModeListTableColumn } from '../../typeds';
 
-const initialStyles = css `
-  width: 32px;
-  height: 32px;
-  align-items: center;
-  display: grid;
-  background-color: #000;
-`
-const fullGrid = css`
-  display: inline-grid;
-  width: 100%;
-`
-
 const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
   let style = ``
   if ($mode === 'list') {
@@ -1145,493 +1133,6 @@ const getTableItemModFunc = ({ $mode }:{ $mode?: string }) => {
   }
   return style;
 }
-const getPageWrapperModFunc = ({ $mode }:{ $mode?: string }) => {
-  let style = ``;
-  if ($mode === 'noPageOption') {
-    style += ` 
-      @media only screen and (min-width: 768px) {
-        > div:first-child {
-          justify-content: center;
-        }
-      }
-    `
-  }
-  return style;
-}
-const getPageButtonModFunc = ({ $activated, $disabled }:{ $activated?: boolean, $disabled?: boolean }) => {
-  let style = ``;
-  if ($activated) {
-    style +=`
-      ${buttonActiveStyle}
-    `
-  } else if ($disabled) {
-    style +=`
-      background: var(--mt-clr-bg);
-      border-color: var(--ck-clr-ln);
-      opacity: .5;
-      cursor: auto;
-    `
-  }
-  return style;
-}
-const getSearchFilterContainerModFunc = ({ $mode }:{ $mode?: string }) => {
-  let style = ``
-  if ($mode === 'detail') {
-    style +=`
-      padding-bottom: 10px;
-    `
-  }
-  return style
-}
-const getSearchWrapperModFunc = ({ width }:{ width?: string }) => {
-  let style = ``
-  if (width) {
-    const _width = width ? parseInt(width) : 0
-    style += ` 
-      grid-template-columns: ${(_width + 5)+'px'} 1fr;
-      button {
-        width: ${width};
-      }
-    `
-  }
-  return style
-}
-const getListTableFunc = ({ $mode }:{ $mode?: string }) => {
-  let style = `` 
-  if ($mode === 'item') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--checkbox) var(--item) minmax(auto, max-content) var(--time) minmax(88px, auto);
-        &[role=rowheader] > div[role=group], 
-        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
-        ._refCollapse > div:not(._refCollapseContainer), 
-        ._refCollapseContainer > div {
-          grid-template-columns: var(--variant) var(--sku) var(--qty-big) var(--price) var(--status-small);
-        }
-        input[name=checkbox-list] {
-          & + span { 
-            top: 8px;
-          }
-        }
-      }
-    `
-  } else if ($mode === 'listing') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--checkbox) var(--item) minmax(auto, max-content) minmax(88px, auto);
-        &[role=rowheader] > div[role=group], 
-        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
-        ._refCollapse > div:not(._refCollapseContainer), 
-        ._refCollapseContainer > div {
-          grid-template-columns: var(--variant) var(--sku) var(--sku) var(--qty-big) var(--price) var(--status-small);
-        }
-        input[name=checkbox-list] {
-          & + span { 
-            top: 8px;
-          }
-        }
-      }
-    `
-  } else if ($mode === 'quantity') { 
-    style += `
-      padding: 0 10px;
-      > div {
-        overflow: auto;
-      }
-      ${ItemTable} {
-        width: 100%;
-        display: flex;
-        margin: 0;
-        padding: 0;
-        grid-gap: 0;
-        &[role=rowheader] > div[role=group], 
-        &[role=row] > div[role=group], 
-        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
-        &[role=row] > div[role=cellgroup], 
-        ._refCollapse > div:not(._refCollapseContainer), 
-        ._refCollapseContainer > div {
-          display: flex;
-          flex: 2;
-          grid-gap: 0;
-        }
-        &[role=row] > div[role=cellgroup] {
-          flex-direction: column;
-        }
-        &[role=rowheader] > div[role=columnheader], 
-        &[role=rowheader] > div[role=group] > div[role=cell], 
-        &[role=row] > div[role=cell], 
-        &[role=row] > div[role=cellgroup] > div[role=rowgroup] > div[role=cell], 
-        ._refCollapse > div:not(._refCollapseContainer) > div[role=cell], 
-        ._refCollapseContainer > div > div[role=cell]  {
-          flex-direction: column;
-          padding: 16px 6px;
-          align-self: stretch;
-          width: 100%;
-        }
-        &[role=rowheader] > div[role=columnheader], 
-        &[role=rowheader] > div[role=group] > div[role=cell] {
-          padding: 27px 6px 18px;
-        }
-        &[role=rowheader] {
-          padding: 0;
-        }
-        &[role=row] > div[role=cellgroup] > div[role=rowgroup], 
-        ._refCollapse > div, 
-        ._refCollapseContainer > div {
-          padding-bottom: 0;
-          padding-top: 0;
-          &:nth-child(n+2) {
-            padding-top: 0;
-          }
-          &:last-child {
-            padding-bottom: 0;
-          }
-        }
-        &:last-child {
-          margin-bottom: 0;
-        }
-        .column-product {
-          min-width: calc(var(--item-min) + 25px);
-          max-width: calc(var(--item-max) + 25px);
-          flex: 1;
-          padding-left: 19px !important;
-        }
-        .column-master-sku {
-          min-width: calc(var(--sku-min) + 12px);
-          max-width: calc(var(--sku-max) + 12px);
-          flex: 1;
-        }
-        .column-warehouse {
-          min-width: calc(var(--warehouse-min) + 12px);
-          max-width: calc(var(--warehouse-max) + 12px);
-          flex: 3;
-        }
-        .column-on-hand-total {
-          min-width: 87px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-on-hand-damage {
-          min-width: 97px;
-          max-width: 102px;
-          flex: 2;
-        }
-        .column-on-hand-normal {
-          min-width: 97px;
-          max-width: 102px;
-          flex: 2;
-        }
-        .column-reserved-orders {
-          min-width: 87px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-picked {
-          min-width: 87px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-packed {
-          min-width: 87px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-handover {
-          min-width: calc(var(--qty-big-min) + 12px);
-          max-width: calc(var(--qty-big-max) + 12px);
-          flex: 2;
-        }
-        .column-promotion-allocation {
-          min-width: calc(var(--qty-big-min) + 12px);
-          max-width: calc(var(--qty-big-max) + 12px);
-          flex: 2;
-        }
-        .column-available-to-sell {
-          min-width: 95px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-in-transit {
-          min-width: 95px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-waiting-inbound {
-          min-width: 95px;
-          max-width: 97px;
-          flex: 2;
-        }
-        .column-inbounded {
-          min-width: 110px;
-          max-width: 112px;
-          flex: 2;
-        }
-        .column-waiting-outbound {
-          min-width: 110px;
-          max-width: 112px;
-          flex: 2;
-        }
-        .column-last-updated {
-          min-width: calc(var(--time-min) + 12px);
-          max-width: calc(var(--time-max) + 12px);
-          flex: 2;
-        }
-        .column-actions {
-          min-width: 96px;
-          flex: 1;
-          padding-right: 12px !important;
-        }
-      }
-    `
-  } else if ($mode === 'picklist') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--checkbox) var(--time) var(--id) var(--status) var(--person) var(--warehouse) var(--ref) var(--time) minmax(185px, auto);
-      }
-    `
-  } else if ($mode === 'package') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--checkbox) var(--time) var(--id) var(--status) var(--person) var(--warehouse) var(--person) var(--ref) var(--time) minmax(110px, auto);
-      }
-    `
-  } else if ($mode === 'shipment') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--checkbox) var(--time) var(--id-big) var(--status) minmax(80px, 160px) minmax(80px, 160px) minmax(95px, 160px) var(--ref) minmax(140px, auto);
-      }
-    `
-  } else if ($mode === 'invoice') { 
-    style += `
-      ${ItemTable} {
-        @media only screen and (max-width: 1279px) {
-          width: unset;
-        }
-        grid-template-columns: var(--checkbox) var(--id-big) var(--status-small) var(--store) var(--price) var(--price) var(--ref) var(--person) var(--time) minmax(180px, auto);
-      }
-    `
-  } else if ($mode === 'payment-receive') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--time) 155px var(--person) var(--qty) var(--price) minmax(110px, auto);
-      }
-    `
-  } else if($mode ==='sales-return') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--id-big) var(--status) var(--warehouse) var(--person) var(--person) var(--ref-big) var(--time) minmax(120px, auto);
-      }
-    `
-  } else if ($mode === 'activity') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--time) var(--id-big) var(--item) var(--status) var(--email) var(--status)  var(--status) minmax(110px, auto);
-      }
-    `
-  } else if ($mode === 'putaway') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(--ref) var(--person) var(--time) minmax(60px, auto);
-      }
-    `
-  } else if ($mode === 'inbound') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(140px, 160px) var(--person) var(--time) minmax(170px, auto);
-      }
-    `
-  } else if ($mode === 'lowstock') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--checkbox) var(--item) var(--variant) var(--sku) var(--warehouse) var(--qty-big) var(--statusnow) var(--time) minmax(60px, auto);
-      }
-    `
-  } else if ($mode === 'price') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--time) var(--id-big) var(--status) var(--qty) var(--email) var(--status) minmax(60px, auto);
-      }
-    `
-  } else if ($mode === 'stock-adjustment') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(140px, 150px) var(--person) var(--time) minmax(160px, auto);
-      }
-    `
-  } else if ($mode === 'stock-outbound') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--id-pd20) var(--status-big) var(--warehouse) var(--ref) minmax(150px,160px) var(--person) var(--time) minmax(160px, auto);
-      }
-    `
-  } else if ($mode === 'stock-transfer') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--id) var(--status-big) var(--warehouse) var(--warehouse) minmax(120px, 130px) var(--person) var(--time) minmax(140px, auto);
-      }
-    `
-  } else if ($mode === 'promotion') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--store) var(--id-big) var(--ref-big) minmax(95px,150px) var(--status-small) var(--time) var(--time) minmax(50px, 88px) var(--time) minmax(88px, auto);
-      }
-    `
-  } else if ($mode === 'stock-history') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: minmax(120px, 360px) var(--sku) var(--warehouse) minmax(85px,120px) minmax(105px,190px) var(--qty-small) var(--qty-small) var(--qty-big) var(--time) minmax(75px, 88px);
-        > *:last-child {
-          display: unset;
-          justify-content: unset;
-        }
-        @media only screen and (max-width: 1279px) {
-          width: unset;
-        }
-      }
-    `
-  } else if ($mode === 'price-history') {
-    style += `
-      ${ItemTable} {
-        @media only screen and (max-width: 1279px) {
-          width: unset;
-        }
-        > *:last-child {
-          display: unset;
-          justify-content: unset;
-        }
-        grid-template-columns: minmax(135px,145px) minmax(120px,360px) var(--sku) var(--store) var(--price) var(--price) minmax(75px,120px) minmax(80px,120px) var(--time) var(--status) minmax(75px,88px);
-      }
-    `
-  } else if ($mode === 'turnover') {
-    style += `
-      ${ItemTable} {
-        @media only screen and (max-width: 1279px) {
-          width: unset;
-        }
-        > *:last-child {
-          display: unset;
-          justify-content: unset;
-        }
-        grid-template-columns: minmax(120px,360px) var(--sku) var(--warehouse) repeat(4, var(--qty)) minmax(75px,88px);
-      }
-    `
-  }
-  else if ($mode === 'days-outofstock') {
-    style += `
-      ${ItemTable} {
-        @media only screen and (max-width: 1279px) {
-          width: unset;
-        }
-        > *:last-child {
-          display: unset;
-          justify-content: unset;
-        }
-        grid-template-columns: minmax(120px,360px) var(--sku) var(--warehouse) var(--qty-big) var(--qty) var(--qty-big) var(--time) minmax(75px,88px);
-      }
-    `
-  } else if ($mode === 'warehouses') {
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--warehouse) var(--status) var(--id-big) var(--qty-big) var(--time) minmax(110px, auto);
-      }
-    `
-  } else if ($mode === 'archived') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--time-pd20) minmax(auto, max-content) minmax(88px, auto);
-        &[role=rowheader] > div[role=group], &[role=row] > div[role=cellgroup] > div[role=rowgroup], ._refCollapse > div:not(._refCollapseContainer), ._refCollapseContainer > div {
-          grid-template-columns: var(--sku) var(--item);
-        }
-      }
-    `
-  } else if ($mode === 'pos-order') { 
-    style += `
-      ${ItemTable} {
-        @media only screen and (max-width: 1279px) {
-          width: unset;
-        }
-        grid-template-columns: var(--id-pd20) minmax(80px, 120px) var(--time)  var(--person) var(--qty) var(--price) var(--status) minmax(180px, auto);
-      }
-    `
-  } else if ($mode === 'account-user') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: var(--person) var(--email) minmax(80px, 120px) minmax(120px, 200px) var(--status) var(--time) minmax(110px, auto);
-      }
-    `
-  } else if ($mode === 'account-role') { 
-    style += `
-      ${ItemTable} {
-        grid-template-columns: minmax(120px, 250px) var(--qty) minmax(80px, 130px) var(--time) minmax(110px, auto);
-      }
-    `
-  }
-  return style
-}
-const getIconDotModifiedStyled = ({ $mode }:{ $mode?: string }) => {
-  let style = ``
-  if ($mode === 'list' || $mode === 'header') {
-    style +=`
-      position: absolute;
-      top: 0;
-      left: 0;
-      transform: scale(1) translate(-50%, -50%);
-      transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      transform-origin: 100% 0%; 
-    `
-    if ($mode === 'header') {
-      style +=` 
-        left: unset;
-        right: 0;
-        z-index: 99;
-        transform: scale(1) translate(50%, -50%);
-      `
-    }
-  } else if ($mode === 'chat') {
-    style += `
-      position: absolute;
-      z-index: 8;
-      left: 18px;
-      top: 0;
-      padding: 0.2em 0.3em;
-      font-weight: bold;
-      font-size: 10px;
-      min-width: 16px;
-      height: 16px;
-    `
-  }
-  return style
-}
-const getCardModFunc = ({ $mode }:{ $mode?: string }) => {
-  const globalEmptyCss = css`
-    text-align: center;
-    color: var(--mt-clr);
-  `
-  let style = ``
-  if ($mode === 'empty') {
-    style +=`
-      ${globalEmptyCss}
-    `
-  } else if ($mode === 'empty-invoice') {
-    style +=` 
-      ${globalEmptyCss}
-      > div {
-        display: grid;
-        align-content: center;
-        grid-gap: 4px;
-        margin: 0 16px;
-      }
-    `
-  } else {
-    style += `
-      width: 958px;
-      @media only screen and (min-width: 1024px) { 
-        width: unset; 
-      }
-    `
-  }
-  return style;
-}
 const getListModFunc = ({ $mode }:{ $mode?: string }) => {
   let style = ``
   if ($mode === 'shipment') {
@@ -1708,46 +1209,6 @@ const getCreateContainerModFunc = ({ $mode }:{ $mode?: string }) => {
   }
   return style
 }
-const getCreateHeaderWrapperModFunc = ({ $mode }:{ $mode?: string }) => {
-  let style = ``
-  if ($mode === 'edit-master') {
-    style +=`
-      aside { 
-        grid-template-rows: none; 
-      }
-    `
-  }
-  return style
-}
-const getPopupCardModFunc = ({ $mode }:{ $mode?: string }) => {
-  let style = ''
-  if ($mode === 'mass-payment') {
-    style += `
-      margin: 0;
-      @media only screen and (min-width: 768px) {
-        padding: 1em 24px;
-      }
-    `
-  }
-  return style;
-}
-const getNavChildItemModFunc = ({ $activated, $mode }:{ $activated?: boolean, $mode?: string }) => {
-  let style = ``
-  if ($activated) {
-    style +=`
-      div, 
-      a {
-        font-weight: 600;
-      }  
-    `
-  }
-  if ($mode === 'counter') {
-    style +=`
-      grid-template-columns: auto 20px;
-    `
-  }
-  return style
-}
 
 export const HeaderContainer = styled.aside` 
   display: grid;
@@ -4440,4 +3901,99 @@ export const ScrollArrowContainer = styled.section`
       color: var(--sec-clr-lnk__hvr);
     }
   }
+`
+
+export const BulkSelectContainer = styled.div` 
+  position: relative;
+  display: grid;
+  grid-auto-flow: dense;
+  grid-gap: 10px;
+  > article {
+    font-weight: 600;
+    padding: 3px 4px 3px 0;
+    display: grid;
+    grid-auto-flow: column;
+    &:only-child {
+      margin-left: 0;
+    }
+    &:nth-child(4) {
+      padding-left: 14px;
+    }
+    &:nth-child(4):last-child {
+      width: 200%;
+      padding-left: 0;
+      margin-left: 0;
+    }
+    > section, 
+    > button {
+      margin: -8px -6px -7px -6px;
+    }
+    > section {
+      > section {
+        button {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: block;
+          max-width: 100%;
+          width: 28vw;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+  > section, 
+  > article {
+    max-height: 20px;
+    align-items: center;
+  }
+  @media only screen and (min-width: 375px) {
+    > article {
+      > section {
+        > section {
+          button {
+            width: 31vw;
+          }
+        }
+      }
+    }
+  } 
+  @media only screen and (min-width: 768px) {
+    grid-auto-flow: column;
+    grid-gap: 20px;
+    ._refSelectedBulk {
+      display: none;
+    }
+    > section, 
+    > article {
+      height: auto;
+      max-height: auto;
+      font-size: .875rem;
+      align-items: unset;
+    }
+    > article {
+      &:nth-child(4), 
+      &:last-child, 
+      &:nth-child(4):last-child {
+        width: auto;
+        padding-left: 3px;
+        margin-bottom: 0;
+        text-align: left;
+        > span {
+          padding-left: 0;
+          font-weight: 600;
+        }
+      }
+      > section {
+        > section {
+          button {
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+  @media only screen and (min-width: 1024px) {
+    grid-gap: 32px;
+  }
 `

package/src/typeds/base.typed.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent, ChangeEvent, DragEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ClipboardEvent } from 'react';
+import { Moment } from 'moment'
 
 type RemoveUnderscoreFirstLetter<S extends string> =
   S extends `${infer FirstLetter}${infer U}`
@@ -66,4 +67,6 @@ export interface TUPage {
         endCursor: string;
       } | null)[]
     | null;
-}
+}
+
+export type TMoment = Moment | null