@symbo.ls/datepicker 2.11.70 → 2.11.78

package/days.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { Button } from '@symbo.ls/button'
+
+export const DatePickerDay = {
+  extend: Button,
+  state: true,
+
+  props: ({ state, key }) => {
+    const isSelected = state.parent.activeDay === parseInt(key) + 1
+    const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length
+
+    return {
+      isSelected,
+      textAlign: 'center',
+      fontSize: 'Z1',
+      round: '100%',
+      height: 'B1',
+      aspectRatio: '1/1',
+      lineHeight: '.9',
+      background: 'transparent',
+      theme: 'secondary @dark .color',
+      text: parseInt(key) + 1,
+      ':first-child': {
+        style: { gridColumnStart }
+      },
+      '.isSelected': { theme: 'primary' },
+      '!isSelected': {
+        ':hover': { theme: 'secondary' },
+        ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
+      }
+    }
+  },
+
+  on: {
+    click: (event, element, state) => {
+      state.parent.parent.update({
+        active: state.parse()
+      })
+      console.log(state)
+    }
+  }
+}
+
+export const DatePickerGrid = {
+  extend: Grid,
+
+  props: {
+    columns: 'repeat(7, 1fr)',
+    minWidth: '100%',
+    gap: 'W2',
+    padding: '- Z'
+  },
+
+  childExtend: DatePickerDay,
+
+  $setStateCollection: (el, s) => {
+    return s.days
+  }
+}

package/index.js

@@ -1,9 +1,10 @@
 'use strict'
 
-import { Flex, Grid } from '@symbo.ls/atoms'
-import { Button } from '@symbo.ls/button'
+import { Flex } from '@symbo.ls/atoms'
 import { Dialog } from '@symbo.ls/dialog'
 import { HeadlessDatepicker } from 'headless-datepicker'
+import { DatePickerGrid } from './days'
+
 const calendar = new HeadlessDatepicker.Calendar({
   calendarMode: 'exact'
 })
@@ -20,282 +21,6 @@ const extractMonthDays = (data) => {
   return result
 }
 
-export const DatePickerYears = {
-  tag: 'aside',
-  props: {
-    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%)'
-    }
-  },
-
-  Flex: {
-    props: {
-      flow: 'column',
-      gap: 'B',
-      padding: 'A Z A1 B1',
-      maxHeight: '100%',
-      overflow: 'hidden auto',
-      '::-webkit-scrollbar': { display: 'none' }
-    },
-
-    childExtend: {
-      extend: Button,
-      props: ({ state, text }) => ({
-        fontSize: 'Y1',
-        color: 'white',
-        opacity: '.4',
-        background: 'transparent',
-        transition: 'opacity .25s ease',
-        isSelected: state.activeYear === text,
-        '.isSelected': { opacity: '1' },
-        ':hover': { opacity: '1' }
-      }),
-      on: {
-        click: (event, element, state) => state.update({ activeYear: element.text }),
-        render: (el, state) => {
-          const { props } = el
-          const { isSelected } = props
-          if (isSelected) {
-            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' }
-      ]
-    }
-  }
-}
-
-export const DatePickerMonthsSlider = {
-  extend: Flex,
-  props: {
-    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'
-    },
-
-    style: {
-      '> button': {
-        width: '16px',
-        height: '16px',
-        position: 'absolute',
-        zIndex: '35',
-        background: 'transparent',
-        color: '#0079FD',
-        ':first-child': { left: '18px' },
-        ':last-child': { right: '18px' }
-      }
-    }
-  },
-
-  Button_left: { icon: 'arrowLeft' },
-
-  Flex: {
-    props: {
-      flex: '1',
-      overflow: 'auto hidden',
-      '::-webkit-scrollbar': { display: 'none' }
-    },
-
-    childExtend: {
-      tag: 'h6',
-      props: ({ state, key }) => ({
-        fontSize: 'Z1',
-        textAlign: 'center',
-        boxSizing: 'content-box',
-        minWidth: '272px',
-
-        isSelected: state.activeMonth === parseInt(key),
-        '.isSelected': { opacity: '1' }
-      }),
-
-      render: (el, state) => {
-        const { props } = el
-        const { isSelected } = props
-        if (isSelected) {
-          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' }
-      ]
-    }
-  },
-
-  Button_right: { 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: {
-      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 DatePickerDay = {
-  extend: Button,
-  state: true,
-
-  props: ({ state, key }) => {
-    const isSelected = state.parent.activeDay === parseInt(key) + 1
-    const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length
-
-    return {
-      isSelected,
-      textAlign: 'center',
-      fontSize: 'Z1',
-      round: '100%',
-      height: 'B1',
-      aspectRatio: '1/1',
-      lineHeight: '.9',
-      background: 'transparent',
-      theme: 'secondary @dark .color',
-      text: parseInt(key) + 1,
-      ':first-child': {
-        style: { gridColumnStart }
-      },
-      '.isSelected': { theme: 'primary' },
-      '!isSelected': {
-        ':hover': { theme: 'secondary' },
-        ':nth-child(7n-1), &:nth-child(7n)': { opacity: '.5' }
-      }
-    }
-  },
-
-  on: {
-    click: (event, element, state) => {
-      state.parent.parent.update({
-        active: state.parse()
-      })
-      console.log(state)
-    }
-  }
-}
-
-export const DatePickerGrid = {
-  extend: Grid,
-
-  props: {
-    columns: 'repeat(7, 1fr)',
-    minWidth: '100%',
-    gap: 'W2',
-    padding: '- Z'
-  },
-
-  childExtend: DatePickerDay,
-
-  $setStateCollection: (el, s) => {
-    return s.days
-  }
-}
-
 const monthNumbersContainer = {
   props: {
     maxWidth: `${272 / 16}em`,
@@ -347,7 +72,7 @@ const monthNumbersContainer = {
 
 const props = {
   yearRange: [1993, 2023],
-  maxHeight: '318px',
+  maxHeight: 'G+B',
   boxSize: 'fit-content fit-content',
   style: {
     button: {
@@ -406,3 +131,8 @@ export const DatePickerTwoColumns = {
     }
   }
 }
+
+export * from './years'
+export * from './months'
+export * from './weekdays'
+export * from './days'

package/months.js

@@ -0,0 +1,115 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+export const DatePickerMonthsSlider = {
+  extend: Flex,
+  props: {
+    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'
+    },
+
+    style: {
+      '> button': {
+        width: '16px',
+        height: '16px',
+        position: 'absolute',
+        zIndex: '35',
+        background: 'transparent',
+        ':first-child': { left: '18px' },
+        ':last-child': { right: '18px' }
+      }
+    }
+  },
+
+  Button_left: {
+    icon: 'arrowLeft',
+    '@dark': {
+      theme: 'primary @dark .color-only'
+    },
+    '@light': {
+      theme: 'primary @light .color-only'
+    }
+  },
+
+  Flex: {
+    props: {
+      flex: '1',
+      overflow: 'auto hidden',
+      '::-webkit-scrollbar': { display: 'none' }
+    },
+
+    childExtend: {
+      tag: 'h6',
+      props: ({ state, key }) => ({
+        fontSize: 'Z1',
+        textAlign: 'center',
+        boxSizing: 'content-box',
+        minWidth: '272px',
+
+        isSelected: state.activeMonth === parseInt(key),
+        '.isSelected': { opacity: '1' }
+      }),
+
+      render: (el, state) => {
+        const { props } = el
+        const { isSelected } = props
+        if (isSelected) {
+          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' }
+      ]
+    }
+  },
+
+  Button_right: {
+    icon: 'arrowRight',
+    '@dark': {
+      theme: 'primary @dark .color-only'
+    },
+    '@light': {
+      theme: 'primary @light .color-only'
+    }
+  }
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.70",
+  "version": "2.11.78",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "329c180a4cf02896ec76566a5b2f5368f62a6b06",
+  "gitHead": "f31271cb9c74ceb58d495e530510a36b2b8e7775",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",

package/weekdays.js

@@ -0,0 +1,33 @@
+'use strict'
+
+import { Flex, Grid } from '@symbo.ls/atoms'
+
+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: {
+      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' }
+  ]
+}

package/years.js

@@ -0,0 +1,95 @@
+'use strict'
+
+import { Button } from '@symbo.ls/button'
+
+export const DatePickerYears = {
+  tag: 'aside',
+  props: {
+    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%)'
+    }
+  },
+
+  Flex: {
+    props: {
+      flow: 'column',
+      gap: 'B',
+      padding: 'A Z A1 B1',
+      maxHeight: '100%',
+      overflow: 'hidden auto',
+      '::-webkit-scrollbar': { display: 'none' }
+    },
+
+    childExtend: {
+      extend: Button,
+      props: ({ state, text }) => ({
+        fontSize: 'Y1',
+        color: 'white',
+        opacity: '.4',
+        background: 'transparent',
+        transition: 'opacity .25s ease',
+        isSelected: state.activeYear === text,
+        '.isSelected': { opacity: '1' },
+        ':hover': { opacity: '1' }
+      }),
+      on: {
+        click: (event, element, state) => state.update({ activeYear: element.text }),
+        render: (el, state) => {
+          const { props } = el
+          const { isSelected } = props
+          if (isSelected) {
+            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' }
+      ]
+    }
+  }
+}