forstok-ui-lib 6.6.0 → 6.6.2

package/package.json

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

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

@@ -1,6 +1,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';
+import { ModeListTableColumn, modeTable } from '../../typeds';
 
 const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
   let style = ``
@@ -1412,6 +1412,486 @@ export const FoContainer = styled.section<{ $mode?: 'detail' }>`
     }
   `}
 `
+export const PopupTableHead = styled.div` 
+  display: grid;
+  grid-template-columns: 1fr 100px 100px 100px;
+  padding: 16px 16px 12px;
+  grid-gap: 12px;
+  border-bottom: 1px solid var(--sec-clr-ln);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mt-clr);
+  > div:not(:first-child) {
+    justify-self: end;
+  }
+`
+export const PopupTableItem = styled.div` 
+  display: grid;
+  grid-template-columns: 28px 1fr 100px 100px 100px;
+  grid-gap: 16px;
+  justify-content: center;
+  align-items: center;
+  > a:nth-child(n+3), 
+  > span:nth-child(n+3), 
+  div:nth-child(n+3) {
+    justify-self: end;
+  }
+`
+export const PopupTableBody = styled.div` 
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 10px;
+  padding: 12px 16px 16px;
+`
+const getTableModFunc = ({ $mode }:{ $mode?: modeTable }) => css`
+  ${($mode === 'picklist' || $mode === 'listing' || $mode === 'price') && css`
+    background-color: transparent;
+    border: none;
+    width: 100%;
+    border-radius: 0;
+    margin: 0 0 16px !important;
+    ${PopupTableHead} {
+      background-color: var(--sec-clr-bg);
+      padding: 16px 16px 16px;
+      justify-content: center;
+      align-items: center;
+      border-top: 1px solid var(--sec-clr-ln);
+    }
+    ${PopupTableItem} {
+      border-top: 1px solid var(--pri-clr-ln);
+      padding: 12px 16px 4px 16px;
+      justify-content: center;
+      &:first-child{ 
+        border: none; 
+      }
+      &:last-child { 
+        border-bottom: 1px solid var(--pri-clr-ln); 
+        padding-bottom: 14px;
+      }
+    }
+    ${PopupTableBody} {
+      padding: 0;
+    }
+    @media only screen and (min-width: 1024px) {
+      padding: 0 16px 16px 16px;
+      margin-bottom: 0;
+    }
+    
+    ${$mode === 'picklist' && css`
+      ${PopupTableHead}, 
+      ${PopupTableBody} { 
+        width: 938px; 
+      }
+      @media only screen and (min-width: 1024px) {
+        ${PopupTableHead}, 
+        ${PopupTableBody} { 
+          width: 100%; 
+        }
+      }
+      ${PopupTableHead} {
+        grid-template-columns: 1fr 100px 72px 72px 69px 69px 51px;
+        padding: 16px 16px 12px;
+        > div:nth-child(2) { 
+          justify-self: start; 
+        }
+      }
+      ${PopupTableItem} {
+        grid-template-columns: 28px 1fr 100px 72px 72px 69px 69px 51px;
+        padding: 12px 16px 12px;
+        > *:nth-child(3) { 
+          justify-self: start; 
+        }
+      }
+    `}
+
+    ${$mode === 'listing' && css`
+      margin: 0 0 16px !important;
+      ${PopupTableHead}, 
+      ${PopupTableItem} {
+        grid-template-columns: 1fr 340px var(--qty-pd20);
+        > div:nth-child(2) { 
+          justify-self: start; 
+        }
+      }
+      @media only screen and (min-width: 1024px) {
+        padding: 16px 0 0;
+      }
+    `}
+  `}
+
+  ${($mode === 'price' || $mode === 'price-full' || $mode === 'price-mid') && css`
+    margin: 0 0 16px !important;
+    ${PopupTableHead}, 
+    ${PopupTableItem} {
+      grid-template-columns: ${$mode === 'price' ? '1fr 95px 118px' : ($mode === 'price-mid' ? '1fr 95px repeat(2, 118px)' : '1fr 95px repeat(4, 118px)' )};
+    }
+    ${PopupTableHead} {
+      > div {
+        justify-self: start;
+      }
+    }
+    ${PopupTableItem} {
+      padding: 4px 0 16px;
+      border-bottom: 1px solid var(--sec-clr-ln);
+      &:last-child {
+        border-bottom: 0;
+        padding-bottom: 0;
+      }
+    }
+    @media only screen and (min-width: 1024px) {
+      padding: 0;
+    }
+  `}
+`
+export const PopupTable = styled.div<{ $mode?: modeTable }>` 
+  background-color: var(--sec-clr-bg);
+  border: 1px solid var(--sec-clr-ln);
+  border-radius: var(--sec-rd);
+  overflow-x: auto;
+  margin: 0 0 16px;
+  ${PopupTableHead}, 
+  ${PopupTableBody} { 
+    width: 733px; 
+  }
+  @media only screen and (min-width: 375px) {
+    margin: 0 12px 16px 16px;
+  }
+  @media only screen and (min-width: 768px) {
+    margin: 0 30px 16px 34px;
+    overflow-x: unset;
+    ${PopupTableHead}, 
+    ${PopupTableBody} { 
+      width: 100%; 
+    }
+  }
+  ${getTableModFunc}
+`
+export const PopupList = styled.div<{ $mode?: string }>`
+  padding: 0 15px;
+  overflow: hidden;
+  i.arrow-down:before {
+    transform: none;
+  }
+  ${({ $mode }) => $mode === 'single' && css`
+    padding: 0 15px;
+    ${PopupItem} {
+      padding: 20px 16px 14px 0;
+      @media only screen and (min-width: 768px) {
+        padding: 20px 16px 14px;
+      }
+    }
+  `}
+  ${({ $mode }) => !$mode && css`
+    &.is-shown {
+      ${PopupTable} {
+        top: 0;
+        position: relative;
+        border: 1px solid var(--sec-clr-ln);
+        &.is-loading {
+          height: 0 !important;
+          border: none;
+        }
+      }
+      i.arrow-down:before {
+        transform: rotate(180deg);
+      }
+    }
+    ${PopupTable} {
+      overflow-y: hidden;
+      transition: height .35s ease;
+      border: none;
+      position: absolute;
+      top: -99999%;
+    }
+  `}
+`
+const getPopupItemModFunc = ({ $mode, $isReadyToShip, $isNoTable, $isMarkAsPickedUp }:{ $mode?: 'multiple' | 'package' | 'master', $isReadyToShip?: boolean, $isNoTable?: boolean, $isMarkAsPickedUp?: boolean }) => {
+  let style = ``
+  const Accpx = $isNoTable ? '12px' : '25px'
+  if ($mode === 'multiple') {
+    style += `
+      position: relative;
+      grid-template-columns: ${Accpx} 28px 1.5fr 20px;
+      > div {
+        &:first-child {
+          justify-self: center;
+          cursor: pointer;
+          align-self: center;
+        }
+        &:last-child > div:last-child {  
+          cursor: pointer; 
+        }
+      }
+      @media (max-width: 767.98px) {
+        > div:nth-last-child(2) {
+          width: 100%;
+          display: inline-grid;
+          grid-area: 2/ 2/ auto/ span 2;
+          justify-content: start;
+          justify-items: start;
+          grid-auto-flow: row;
+          grid-template-columns: 1fr;
+          > div { 
+            width: 100%; 
+            min-width: unset; 
+          }
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        grid-template-columns: ${Accpx} 28px 1.5fr 3fr 20px;
+      }
+    `
+    if ($isReadyToShip) {
+      style += `
+        align-items: self-start;
+        > div {
+          &:nth-child(2) { 
+            align-self: baseline; 
+          }
+          &:nth-child(4) {
+            height: 30px;
+            padding-top: 0;
+            display: grid;
+            align-content: center;
+            align-self: start;
+          }
+          &:nth-child(5) {
+            > div, 
+            > input { 
+              margin-bottom: 10px; 
+            }
+          }
+          &:last-child { 
+            padding-top: 10px; 
+          }
+        }
+        @media (max-width: 767.98px) {
+          > div:nth-last-child(3) {
+            grid-area: 2/ 2/ auto/ span 2;
+            > span { 
+              text-align: left !important; 
+            }
+          }
+          > div:nth-last-child(2) {
+            grid-area: 3/ 2/ auto/ span 3;
+            > div { 
+              width: 100%; 
+            }
+          }
+        }
+        @media only screen and (min-width: 768px) {
+          grid-template-columns: ${Accpx} 28px 1.5fr 100px 300px 20px !important;
+          > div:nth-child(5) {
+            > div, 
+            > input {
+              margin-bottom: 0;
+            }
+          }
+        }
+        @media only screen and (min-width: 1024px) {
+          grid-template-columns: ${Accpx} 28px 1.5fr 110px 355px 20px !important;
+        }
+      `
+    }
+  } else if ($isReadyToShip) {
+    style +=`
+      grid-template-columns: 28px 1.5fr;
+      align-items: self-start;
+      > div:nth-child(1) {
+        align-self: baseline;
+      }
+      > div:nth-child(3) {
+        height: 30px;
+        padding-top: 0;
+        display: grid;
+        align-content: center;
+        align-self: start;
+      }
+      > div:nth-child(4) {
+        > div, 
+        > input {
+          margin-bottom: 10px;
+        }
+      }
+      @media (max-width: 767.98px) {
+        > div:nth-last-child(3) {
+          grid-area: unset;
+        }
+        > div:nth-last-child(2) {
+          grid-area: 2/ 2/ auto/ span 2;
+          > span { 
+            text-align: left !important; 
+          }
+        }
+        > div:last-child {
+          grid-area: 3/ 2/ auto/ span 3;
+          justify-content: start;
+          justify-items: start;
+          > div { 
+            width: 100%; 
+          }
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        grid-template-columns: 28px 1.5fr 100px 300px !important;
+        > div:nth-child(4) {
+          > div, 
+          > input {
+            margin-bottom: 0;
+          }
+        }
+      }
+      @media only screen and (min-width: 1024px) {
+        grid-template-columns: 28px 1.5fr 110px 355px !important;
+      }
+    `
+  } else if ($isMarkAsPickedUp) {
+    style +=`
+      grid-template-columns: 28px 2fr 3fr;
+      > div:last-child {
+        justify-self: end;
+      }
+    `
+  } else if ($mode === 'package') {
+    style +=`
+      grid-template-columns: 28px 160px 1.5fr;
+    `
+  } else if ($mode === 'master') {
+    style +=`
+      padding: 0;
+      grid-template-columns: 34px 1fr;
+      grid-gap: 8px;
+    `
+  } else {
+    style +=`
+      grid-template-columns: 28px 1.5fr;
+      @media (max-width: 767.98px) {
+        > div:nth-last-child(1) {
+          width: 100%;
+          display: inline-grid;
+          grid-area: 2/ 2/ auto/ span 2;
+          justify-content: start;
+          justify-items: start;
+          grid-auto-flow: row;
+          grid-template-columns: 1fr;
+          > div { 
+            width: 100%; 
+            min-width: unset; 
+          }
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        grid-template-columns: 28px 1.5fr 3fr;
+      }
+      & + ${PopupTable} {
+        margin: 0 0 16px;
+        @media only screen and (min-width: 768px) {
+          margin: 0 16px 16px;
+        }
+      }
+    `
+  }
+  return style
+}
+export const PopupItem = styled.div<{ $mode?: 'multiple' | 'package' | 'master', $isReadyToShip?: boolean, $isNoTable?: boolean, $isMarkAsPickedUp?: boolean }>`
+  display: inline-grid;
+  width: 100%;
+  grid-template-columns: 25px 32px 1.25fr 20px;
+  grid-gap: 10px;
+  align-items: self-start;
+  padding: 20px 0px 16px;
+  div > img {
+    display: grid;
+  }
+  ${getPopupItemModFunc}
+`
+const PopupRowGroupStyle = {
+  warning: css`
+    justify-content: start;
+    position: relative;
+    > i {
+      position: absolute;
+      top: 10px;
+      right: -5px; 
+      &:before { 
+        display: inline-block; 
+      }
+    }
+    @media only screen and (min-width: 768px) {
+      grid-template-areas:  'a c'
+                            'b b';
+      > i {
+        position: relative;
+        top: 10px;
+        right: auto;
+        left: 10px;
+        &:before {
+          display: grid; 
+        }
+      }
+    }
+  `,
+  items: css`
+    grid-gap: 3px;
+    strong {
+      ${multiElipsis}
+    }
+  `,
+} as const
+export const PopupRowGroup = styled.div<{ $mode?: 'warning' | 'items' }>` 
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 2px;
+  ${({ $mode }) => $mode && $mode in PopupRowGroupStyle ? PopupRowGroupStyle[$mode] : ''}
+`
+const getPopupColumnGroupModFunc = ({ $content, $mode }:{ $content?: 'right', $mode?: 'ext' }) => css`
+  ${($content && $content === 'right') && css`
+    grid-gap: 10px;
+    justify-content: end;
+    align-items: start;
+    > div {
+      min-width: 170px;
+      width: 170px;
+    }
+    @media only screen and (min-width: 768px) {
+      > div {
+        min-width: 145px;
+        width: 145px;
+      }
+    }
+    @media only screen and (min-width: 1024px) {
+      > div {
+        min-width: 160px;
+        width: 160px;
+      }
+    }
+  `}
+
+  ${($mode && $mode === 'ext') && css`
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-flow: unset;
+    input::placeholder {
+      font-style: normal;
+    }
+  `}
+`
+export const PopupColumnGroup = styled.div<{ $content?: 'right', $mode?: 'ext' }>` 
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  justify-content: left;
+  align-items: end;
+  ${getPopupColumnGroupModFunc}
+`
+export const PopupItemName = styled.span` 
+  font-weight: 600;
+  color: var(--hd-clr);
+  text-transform: capitalize;
+  ${elipsis}
+`
+export const PopupItemLabel = styled.div` 
+  ${elipsis}
+`
 export const BreadcrumbContainer = styled.aside` 
   position: relative;
   padding: 0;
@@ -3280,7 +3760,7 @@ export const FilterButton = styled.div`
   grid-template-columns: 1fr auto;
   gap: 4px;
 `
-export const IconDot = styled.span<{ $mode?: 'list' | 'header' | 'chat', $width?: string, $height?: string, $size?: 'string' }>`
+export const IconDot = styled.span<{ $mode?: 'list' | 'header' | 'chat', $width?: string, $height?: string, $size?: string }>`
   display: grid;
   min-width: 18px;
   height: 18px;

package/src/typeds/shares.typed.ts

@@ -310,4 +310,12 @@ export type TInDetailProps = {
   hasTab?: boolean
   tabDef?: string
   hasSubscription?: boolean
-}
+}
+
+export type modeTable =
+  | 'picklist'
+  | 'listing'
+  | 'price'
+  | 'price'
+  | 'price-full'
+  | 'price-mid'