@symbo.ls/datepicker 3.1.2 → 3.3.2

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "3.1.2",
+  "version": "3.3.2",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "dependencies": {
-    "@symbo.ls/atoms": "^3.1.2",
-    "@symbo.ls/button": "^3.1.2",
-    "@symbo.ls/dialog": "^3.1.2",
+    "@symbo.ls/atoms": "^3.2.3",
+    "@symbo.ls/button": "^3.2.3",
+    "@symbo.ls/dialog": "^3.2.3",
     "headless-datepicker": "^1.0.1"
   },
-  "source": "src/index.js"
+  "source": "index.js",
+  "type": "module",
+  "module": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 symbo.ls
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/days.js

@@ -1,47 +0,0 @@
-'use strict'
-
-export const DatePickerDay = {
-  extends: 'Button',
-  state: true,
-
-  props: ({ state, key }) => {
-    const rootState = state.parent.parent.parent
-    const date = new Date(state._d)
-    const isSelected = rootState.activeDay === date.toString()
-    const gridColumnStart = 7 - state.parent.weekItems.weeks[0].dates.length
-    const { moment } = state
-    moment._d = date
-    const isWeekend = moment.day() === 0 || moment.day() === 6
-    // const isWeekend = state.moment.day() === 0 || state.moment.day() === 6
-    // const isWeekend = state.moment.isWeekend
-
-    return {
-      isSelected,
-      isWeekend,
-      date: date.toString(),
-      textAlign: 'center',
-      fontSize: 'Z1',
-      round: '100%',
-      height: 'B1',
-      aspectRatio: '1/1',
-      lineHeight: '.9',
-      background: 'transparent',
-      theme: 'field @dark .color',
-      text: parseInt(key) + 1,
-      ':first-child': {
-        style: { gridColumnStart }
-      },
-      '.isSelected': { theme: 'primary' },
-      '!isSelected': {
-        '.isWeekend': { opacity: '.5' },
-        ':hover': { theme: 'field' }
-      }
-    }
-  },
-
-  onClick: (event, element, state) => {
-    state.parent.parent.parent.update({
-      activeDay: element.props.date
-    })
-  }
-}

package/grid.js

@@ -1,107 +0,0 @@
-'use strict'
-
-import { DatePickerDay } from './days'
-import { HeadlessDatepicker } from 'headless-datepicker'
-
-export const calendar = new HeadlessDatepicker.Calendar({
-  calendarMode: 'exact'
-})
-
-const extractMonthDays = (data) => {
-  const result = []
-
-  data.weeks.forEach((week) => {
-    week.dates.forEach((date) => {
-      result.push({ ...date, _d: date.moment._d.toString() })
-    })
-  })
-
-  return result
-}
-
-export const DatePickerGrid = {
-  extends: 'Grid',
-
-  props: {
-    columns: 'repeat(7, 1fr)',
-    minWidth: '100%',
-    gap: 'W2',
-    padding: '- Z',
-    style: { scrollSnapAlign: 'center' }
-  },
-
-  childExtends: DatePickerDay,
-  childrenAs: 'state',
-  children: ({ state }) => state.days
-}
-
-export const DatePickerGridContainer = {
-  props: {
-    maxWidth: 'F3+B',
-    position: 'relative',
-    content: {
-      overflow: 'hidden',
-      style: { scrollSnapType: 'x mandatory' }
-    },
-    style: {
-      button: {
-        padding: '0'
-      }
-    },
-    ':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'
-    },
-    ':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'
-    }
-  },
-
-  state: ({ parent }) => {
-    const state = parent.state
-    if (!state.activeYear) return
-    return (new Array(12)).fill(undefined).map((v, k) => {
-      const year = state.activeYear
-      const month = k + 1
-      const weekItems = calendar.getMonth({ year, month })
-      return {
-        year,
-        month,
-        weekItems,
-        days: extractMonthDays(weekItems)
-      }
-    })
-  },
-
-  Flex: {
-    childProps: {
-      onRender: (el, state) => {
-        const { key } = el
-        const isSelected = state.parent.parent.activeMonth === parseInt(key)
-        if (isSelected) {
-          window.requestAnimationFrame(() => {
-            el.parent.parent.node.scrollTo({
-              left: el.node.offsetLeft,
-              behavior: state.initialized ? 'smooth' : 'instant'
-            })
-          })
-        // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
-        }
-      }
-    },
-    childExtends: 'DatePickerGrid',
-    childrenAs: 'state',
-    children: ({ state }) => state.parse()
-  }
-}

package/index.js

@@ -1,75 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/atoms'
-import { Dialog } from '@symbo.ls/dialog'
-
-export * from './days'
-export * from './weekdays'
-export * from './months'
-export * from './years'
-export * from './grid'
-
-export const DatePicker = {
-  extends: [Dialog, Flex],
-
-  state: ({ props }) => {
-    const date = new Date()
-    const activeYear = date.getFullYear()
-    const activeMonth = date.getMonth()
-    const activeDay = date.getDate()
-    return {
-      yearRange: props.yearRange || [activeYear - 30, activeYear],
-      activeYear: props.activeYear || activeYear,
-      activeMonth: props.activeMonth || activeMonth,
-      activeDay: props.activeDay || activeDay,
-      selectedDay: props.selectedDay || null
-    }
-  },
-
-  props: {
-    width: 'fit-content',
-    margin: '0',
-    userSelect: 'none',
-    maxHeight: 'G+B2'
-  },
-
-  DatePickerYears: {},
-
-  Flex: {
-    props: {
-      flow: 'column',
-      padding: 'A1 - - -',
-      position: 'relative'
-    },
-
-    DatePickerMonthsSlider: {},
-
-    DatePickerWeekDays: {},
-
-    DatePickerGridContainer: {},
-
-    DialogFooter: {}
-  }
-}
-
-export const DatePickerTwoColumns = {
-  extends: DatePicker,
-  DatePickerYears: {},
-  Flex: {
-    DatePickerMonthsSlider: {
-      props: {
-        maxWidth: `${544 / 16}em`
-      }
-    },
-    DatePickerWeekDays: {
-      props: {
-        maxWidth: `${544 / 16}em`
-      }
-    },
-    monthNumbersContainer: {
-      props: {
-        maxWidth: `${544 / 16}em`
-      }
-    }
-  }
-}

package/months.js

@@ -1,145 +0,0 @@
-'use strict'
-
-export const DatePickerMonthsSlider = {
-  display: 'flex',
-  props: {
-    position: 'relative',
-    overflow: 'hidden',
-    alignItems: 'center',
-    padding: '- - A2 -',
-    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': {
-        padding: '0',
-        width: 'A',
-        height: 'A',
-        position: 'absolute',
-        zIndex: '35',
-        background: 'transparent',
-        ':first-child': { left: '18px' },
-        ':last-child': { right: '18px' }
-      }
-    }
-  },
-
-  Button_left: {
-    props: {
-      icon: 'arrowLeft',
-      '@dark': {
-        theme: 'primary @dark .color-only'
-      },
-      '@light': {
-        theme: 'primary @light .color-only'
-      }
-    },
-    onClick: (ev, el, s) => {
-      const { activeMonth, activeYear } = s
-      if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
-      else {
-        s.update({
-          activeYear: activeYear - 1,
-          activeMonth: 11
-        })
-      }
-    }
-  },
-
-  Flex: {
-    props: {
-      flex: '1',
-      overflow: 'hidden',
-      style: { scrollSnapType: 'x mandatory' },
-      '::-webkit-scrollbar': { display: 'none' }
-    },
-
-    childExtends: {
-      tag: 'h6',
-      fontSize: 'Z1',
-      textAlign: 'center',
-      boxSizing: 'content-box',
-      minWidth: '272px',
-      style: { scrollSnapAlign: 'center' },
-
-      isSelected: ({ state, key }) => state.activeMonth === parseInt(key),
-      '.isSelected': { opacity: '1' },
-
-      onUpdate: (el, state) => {
-        const { props } = el
-        const { isSelected } = props
-        if (isSelected) {
-          window.requestAnimationFrame(() => {
-            el.parent.parent.node.scrollTo({
-              left: el.node.offsetLeft,
-              behavior: state.initialized ? 'smooth' : 'instant'
-            })
-          })
-          // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true })
-        }
-      }
-    },
-
-    children: ({ 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: {
-    props: {
-      icon: 'arrowRight',
-      '@dark': {
-        theme: 'primary @dark .color-only'
-      },
-      '@light': {
-        theme: 'primary @light .color-only'
-      }
-    },
-
-    onClick: (ev, el, s) => {
-      const { activeMonth, activeYear } = s
-      if (activeMonth < 11) s.update({ activeMonth: activeMonth + 1 })
-      else {
-        s.update({
-          activeYear: activeYear + 1,
-          activeMonth: 0
-        })
-      }
-    }
-  }
-}

package/weekdays.js

@@ -1,36 +0,0 @@
-'use strict'
-
-export const DatePickerWeekDays = {
-  extends: 'Grid',
-  props: {
-    overflow: 'hidden',
-    padding: '- Z A',
-    width: '100%',
-    columns: 'repeat(7, 1fr)',
-    gap: 'W2',
-    style: {
-      button: {
-        padding: '0'
-      }
-    }
-  },
-  childExtends: {
-    tag: 'span',
-    display: '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

@@ -1,85 +0,0 @@
-'use strict'
-
-export const DatePickerYears = {
-  tag: 'aside',
-  overflow: 'hidden',
-  position: 'relative',
-
-  style: {
-    button: {
-      padding: '0'
-    }
-  },
-
-  ':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%)'
-  },
-
-  if: ({ state }) => state.yearRange,
-
-  Flex: {
-    flow: 'column',
-    gap: 'B',
-    padding: 'A Z A1 B',
-    maxHeight: '100%',
-    overflow: 'hidden auto',
-    '::-webkit-scrollbar': { display: 'none' },
-    childExtends: {
-      extends: 'Button',
-
-      fontSize: 'Y1',
-      opacity: '.4',
-      background: 'transparent',
-      transition: 'opacity .25s ease',
-      isSelected: ({ state, text }) => state.activeYear === text,
-      '.isSelected': { opacity: '1' },
-      ':hover': { opacity: '1' },
-      onClick: (event, element, state) =>
-        state.update(
-          {
-            activeYear: element.text
-          },
-          { isHoisted: true }
-        ),
-      onRender: (el, state) => {
-        const { props } = el
-        const { isSelected } = props
-        if (!isSelected) return
-        window.requestAnimationFrame(() => {
-          el.parent.parent.node.scrollTop = el.node.offsetTop - 100
-        })
-      }
-    },
-
-    children: element => {
-      const { yearRange } = element.state
-      if (!yearRange) return
-
-      const [start, end] = yearRange
-      const yearsArray = new Array(end + 1 - start)
-        .fill(undefined)
-        .map((v, k) => {
-          return { text: start + k }
-        })
-        .reverse()
-      return yearsArray
-    }
-  }
-}