@symbo.ls/datepicker 2.11.29 → 2.11.49

package/index.js

@@ -1,157 +1,363 @@
 'use strict'
 
-import style from './style'
-
-import { SquareButton, Button } from '@symbo.ls/button'
+import { Button } from '@symbo.ls/button'
 import { Flex, Grid } from '@symbo.ls/atoms'
 
-const buttonProps = {
-  theme: 'quaternary',
-  background: 'transparent',
-  color: '--theme-quinary-dark-color',
-  ':hover': {
-    theme: 'quinary .child'
-  }
-}
-
-const aside = {
+export const DatePickerYears = {
+  tag: 'aside',
   props: {
-    gap: 'X2',
-    margin: '-Z - -Z -X2',
-    padding: 'Z - Z X2',
-    minHeight: '100%',
-    height: '100%',
-    width: '--spacing-D'
+    overflow: 'hidden',
+    position: 'relative',
+
+    ':before': {
+      content: '""',
+      boxSize: 'A1 100%',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      background: 'linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      zIndex: '10'
+    },
+    ':after': {
+      content: '""',
+      boxSize: 'B 100%',
+      position: 'absolute',
+      bottom: '0',
+      left: '0',
+      background: 'linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)'
+    }
   },
 
-  cnt: {
-    extend: Flex,
+  Flex: {
     props: {
       flow: 'column',
-      overflow: 'hidden auto',
-      boxSize: '100% --spacing-D',
-      top: '0',
-      position: 'absolute',
+      gap: 'B',
+      padding: 'A Z A1 B1',
       maxHeight: '100%',
-      justifyContent: 'flex-end'
+      overflow: 'hidden auto',
+      '::-webkit-scrollbar': { display: 'none' }
     },
 
     childExtend: {
       extend: Button,
-      props: {
-        ...buttonProps,
-        fontSize: 'Z1'
-      },
-      text: ({ state }) => state.value
+      props: ({ state, text }) => ({
+        fontSize: 'Y1',
+        color: 'white',
+        opacity: '.4',
+        background: 'transparent',
+        transition: 'opacity .25s ease',
+        isActive: state.activeYear === text,
+        '.isActive': { opacity: '1' },
+        ':hover': { opacity: '1' }
+      }),
+      on: {
+        click: (event, element, state) => state.update({ activeYear: element.text }),
+        render: (el, state) => {
+          const { props } = el
+          const { isActive } = props
+          if (isActive) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollTop = el.node.offsetTop - 100
+            })
+          }
+        }
+      }
+    },
+
+    $setCollection: ({ state, parent }) => {
+      const { yearRange } = parent.parent.props
+
+      if (yearRange) {
+        const [start, end] = yearRange
+        const yearsArray = (new Array(end + 1 - start)).fill(undefined).map((v, k) => {
+          return { text: start + k }
+        }).reverse()
+        return yearsArray
+      }
+
+      return [
+        { text: '2023' },
+        { text: '2022' },
+        { text: '2021' },
+        { text: '2020' },
+        { text: '2019' },
+        { text: '2018' },
+        { text: '2017' },
+        { text: '2016' },
+        { text: '2015' },
+        { text: '2014' },
+        { text: '2013' },
+        { text: '2012' },
+        { text: '2012' },
+        { text: '2012' }
+      ]
     }
   }
-
 }
 
-const main = {
+export const DatePickerMonthsSlider = {
   extend: Flex,
-
   props: {
-    flex: 1,
-    gap: 'X2',
-    flow: 'column',
+    position: 'relative',
+    overflow: 'hidden',
+    alignItems: 'center',
+    padding: '- - B -',
+    maxWidth: `${272 / 16}em`,
+    boxSizing: 'border-box',
+    ':before': {
+      content: '""',
+      position: 'absolute',
+      boxSize: '100% 100px',
+      background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      left: '0',
+      top: '0',
+      zIndex: '30',
+      pointerEvents: 'none'
+    },
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      boxSize: '100% 100px',
+      background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      right: '0',
+      top: '0',
+      zIndex: '30',
+      pointerEvents: 'none'
+    },
 
-    header: {
-      align: 'center space-between'
+    style: {
+      '> button': {
+        width: '16px',
+        height: '16px',
+        position: 'absolute',
+        zIndex: '35',
+        background: 'transparent',
+        color: '#0079FD',
+        ':first-child': { left: '18px' },
+        ':last-child': { right: '18px' }
+      }
     }
   },
 
-  header: {
-    extend: Flex,
-    left: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: 'C',
-        icon: 'arrowAngleLeft'
-      }
-    },
-    month: {
-      tag: 'span',
-      text: 'December'
+  leftButton: {
+    extend: Button,
+    props: { icon: 'arrowLeft' }
+  },
+
+  Flex: {
+    props: {
+      flex: '1',
+      overflow: 'auto hidden',
+      '::-webkit-scrollbar': { display: 'none' }
     },
-    right: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: 'C',
-        icon: 'arrowAngleRight'
+
+    childExtend: {
+      tag: 'h6',
+      props: ({ state, key }) => ({
+        fontSize: 'Z1',
+        textAlign: 'center',
+        boxSizing: 'content-box',
+        minWidth: '272px',
+
+        isActive: state.activeMonth === parseInt(key),
+        '.isActive': { opacity: '1' }
+      }),
+
+      render: (el, state) => {
+        const { props } = el
+        const { isActive } = props
+        if (isActive) {
+          window.requestAnimationFrame(() => {
+            el.parent.parent.node.scrollLeft = el.node.offsetLeft
+          })
+        }
       }
+    },
+
+    $setCollection: ({ state, parent }) => {
+      return [
+        { text: 'January' },
+        { text: 'February' },
+        { text: 'March' },
+        { text: 'April' },
+        { text: 'May' },
+        { text: 'June' },
+        { text: 'July' },
+        { text: 'August' },
+        { text: 'September' },
+        { text: 'October' },
+        { text: 'November' },
+        { text: 'December' }
+      ]
     }
   },
-  days: {
+
+  rightButton: { extend: Button, props: { icon: 'arrowRight' } }
+}
+
+export const DatePickerWeekDays = {
+  extend: Grid,
+  props: {
+    overflow: 'hidden',
+    padding: '- Z Z',
+    width: '100%',
+    columns: 'repeat(7, 1fr)',
+    gap: 'W2'
+  },
+  childExtend: {
+    tag: 'span',
     extend: Flex,
     props: {
-      flow: 'column',
-      gap: 'X2'
-    },
-    childExtend: {
-      extend: Grid,
-      props: {
-        columns: 'repeat(7, 1fr)',
-        gap: 'X2'
+      fontSize: 'Y1',
+      textTransform: 'capitalize',
+      align: 'center center',
+      ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' },
+    }
+  },
+  ...[
+    { text: 'Mo' },
+    { text: 'Tu' },
+    { text: 'We' },
+    { text: 'Th' },
+    { text: 'Fr' },
+    { text: 'Sa' },
+    { text: 'Su' }
+  ]
+}
+
+export const DatePickerGrid = {
+  extend: Grid,
+  props: {
+    columns: 'repeat(7, 1fr)',
+    minWidth: '100%',
+    gap: 'W2',
+    padding: `- Z`
+  },
+  childExtend: {
+    extend: Button,
+    props: ({ state, key }) => ({
+      isActive: state.activeDay === parseInt(key) + 1,
+      textAlign: 'center',
+      fontSize: 'Z1',
+      round: '100%',
+      height: 'B1',
+      aspectRatio: '1/1',
+      lineHeight: '.9',
+      background: 'transparent',
+      theme: 'secondary @dark .color',
+      '.isActive': { theme: 'primary' },
+      '!isActive': { 
+        ':hover': { theme: 'secondary' },
+        ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' },
+       },
+    }),
+    on: {
+      click: (event, element, state) => {
+        state.update({ activeDay: element.text })
+        console.log(state.activeDay + '.' + state.activeMonth + '.' + state.activeYear)
       }
+    }
+  },
+  $setPropsCollection: (el, s) => {
+    const daysInMonth = new Date(s.activeYear, s.activeMonth, 0).getDate()
+    const days = (new Array(daysInMonth)).fill(undefined)
+      .map((v, k) => ({ text: k + 1 }))
+    return days
+  }
+}
+
+const monthNumbersContainer = {
+  props: {
+    maxWidth: `${272 / 16}em`,
+    position: 'relative',
+    ':before': {
+      content: '""',
+      position: 'absolute',
+      boxSize: '100% 12px',
+      background: 'linear-gradient(to right, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      left: '0',
+      top: '0',
+      zIndex: '30'
     },
-    weekDays: {
-      childExtend: {
-        extend: Button,
-        props: {
-          ...buttonProps,
-          fontSize: 'Z1',
-          padding: 'X2'
-        }
-      },
-      ...[
-        { text: 'Mo' },
-        { text: 'Tu' },
-        { text: 'We' },
-        { text: 'Th' },
-        { text: 'Fr' },
-        { text: 'Sa' },
-        { text: 'Su' }
-      ]
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      boxSize: '100% 12px',
+      background: 'linear-gradient(to left, var(--theme-tertiary-dark-background) 0%, transparent 100%)',
+      right: '0',
+      top: '0',
+      zIndex: '30'
     },
+    content: {
+      overflow: 'auto hidden'
+    }
+  },
 
-    cnt: {
-      childExtend: {
-        extend: SquareButton,
-
-        props: ({ key, state }) => ({
-          ...buttonProps,
-          theme: 'quaternary',
-          active: key === '18',
-          '.active': {
-            theme: 'quinary'
-          }
-        })
-      },
+  content: {
+    extend: Flex,
+    childExtend: DatePickerGrid,
+    ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
+  }
+}
 
-      ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
+const props = {
+  yearRange: [1993, 2023],
+  theme: 'tertiary',
+  round: 'Z2',
+  margin: 'E',
+  overflow: 'hidden',
+  maxHeight: '318px',
+  boxSize: 'fit-content fit-content',
+  padding: '- Z - -',
+  style: {
+    button: {
+      padding: '0'
     }
   }
 }
 
 export const DatePicker = {
-  style,
   extend: Flex,
-
-  props: {
-    position: 'relative',
-    theme: 'quaternary',
-    transition: 'A all',
-    round: 'Z',
-    padding: 'Z Z2 Z X2',
-    gap: 'X2',
-    depth: 16,
-    minHeight: '0',
-    align: 'stretch center'
+  state: {
+    activeYear: 1993,
+    activeMonth: 8,
+    activeDay: 14
   },
 
-  aside,
-  main
+  props,
+
+  DatePickerYears: {},
+
+  Flex: {
+    props: {
+      flow: 'column',
+      padding: '20px - - -',
+      position: 'relative',
+    },
+    
+    DatePickerMonthsSlider: {},
+
+    DatePickerWeekDays: {},
+
+    monthNumbersContainer,
+
+    DialogFooter: {}
+  }
+}
+
+export const DatePickerTwoColumns = {
+  extend: DatePicker,
+  props: {
+    calendar: {
+      months: {
+        maxWidth: `${544 / 16}em`
+      },
+      weekDaysContainer: {
+        maxWidth: `${544 / 16}em`
+      },
+      monthNumbersContainer: {
+        maxWidth: `${544 / 16}em`
+      }
+    }
+  }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.29",
+  "version": "2.11.49",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "cb520b92aca9016f8c18fcbd79dd6199cbb9353a",
+  "gitHead": "396ff036bf106d7813a1688d842d7a36d407cf31",
   "dependencies": {
     "@symbo.ls/block": "latest",
     "@symbo.ls/icon": "latest",

package/style.js

@@ -1,18 +0,0 @@
-'use strict'
-
-export default {
-  main: {
-    'section > header span:nth-child(6)': {
-      opacity: 0.5
-    },
-    'section > header span:nth-child(7)': {
-      opacity: 0.5
-    },
-    'section > div button:nth-child(7n)': {
-      opacity: 0.5
-    },
-    'section > div button:nth-child(7n - 1)': {
-      opacity: 0.5
-    }
-  }
-}