@symbo.ls/datepicker 2.11.90 → 2.11.94

package/days.js

@@ -8,14 +8,20 @@ export const DatePickerDay = {
   state: true,
 
   props: ({ state, key }) => {
-    const isSelected = state.parent.parent.activeDay === parseInt(key) + 1
+    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 isWeekend = state.moment.isoWeekday()
+    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%',
@@ -38,10 +44,9 @@ export const DatePickerDay = {
 
   on: {
     click: (event, element, state) => {
-      state.parent.parent.update({
-        active: state.parse()
+      state.parent.parent.parent.update({
+        activeDay: element.props.date
       })
-      console.log(state)
     }
   }
 }
@@ -59,6 +64,22 @@ export const DatePickerGrid = {
   childExtend: DatePickerDay,
 
   $setStateCollection: (el, s) => {
+    // console.warn(s.days)
     return s.days
+  },
+
+  on: {
+    render: (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: 'smooth'
+          })
+        })
+      }
+    }
   }
 }

package/index.js

@@ -5,7 +5,7 @@ import { Dialog } from '@symbo.ls/dialog'
 import { HeadlessDatepicker } from 'headless-datepicker'
 import { DatePickerGrid } from './days'
 
-const calendar = new HeadlessDatepicker.Calendar({
+export const calendar = new HeadlessDatepicker.Calendar({
   calendarMode: 'exact'
 })
 
@@ -14,7 +14,7 @@ const extractMonthDays = (data) => {
 
   data.weeks.forEach((week) => {
     week.dates.forEach((date) => {
-      result.push(date)
+      result.push({ ...date, _d: date.moment._d.toString() })
     })
   })
 
@@ -81,6 +81,8 @@ export const DatePicker = {
   },
 
   props: {
+    width: 'fit-content',
+    margin: '0',
     maxHeight: 'G+B2'
   },
 

package/months.js

@@ -46,12 +46,26 @@ export const DatePickerMonthsSlider = {
   },
 
   Button_left: {
-    icon: 'arrowLeft',
-    '@dark': {
-      theme: 'primary @dark .color-only'
+    props: {
+      icon: 'arrowLeft',
+      '@dark': {
+        theme: 'primary @dark .color-only'
+      },
+      '@light': {
+        theme: 'primary @light .color-only'
+      }
     },
-    '@light': {
-      theme: 'primary @light .color-only'
+    on: {
+      click: (ev, el, s) => {
+        const { activeMonth, activeYear } = s
+        if (activeMonth > 0) s.update({ activeMonth: activeMonth - 1 })
+        else {
+          s.update({
+            activeYear: activeYear - 1,
+            activeMonth: 11
+          })
+        }
+      }
     }
   },
 
@@ -74,13 +88,18 @@ export const DatePickerMonthsSlider = {
         '.isSelected': { opacity: '1' }
       }),
 
-      render: (el, state) => {
-        const { props } = el
-        const { isSelected } = props
-        if (isSelected) {
-          window.requestAnimationFrame(() => {
-            el.parent.parent.node.scrollLeft = el.node.offsetLeft
-          })
+      on: {
+        update: (el, state) => {
+          const { props } = el
+          const { isSelected } = props
+          if (isSelected) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollTo({
+                left: el.node.offsetLeft,
+                behavior: 'smooth'
+              })
+            })
+          }
         }
       }
     },
@@ -104,12 +123,26 @@ export const DatePickerMonthsSlider = {
   },
 
   Button_right: {
-    icon: 'arrowRight',
-    '@dark': {
-      theme: 'primary @dark .color-only'
+    props: {
+      icon: 'arrowRight',
+      '@dark': {
+        theme: 'primary @dark .color-only'
+      },
+      '@light': {
+        theme: 'primary @light .color-only'
+      }
     },
-    '@light': {
-      theme: 'primary @light .color-only'
+    on: {
+      click: (ev, el, s) => {
+        const { activeMonth, activeYear } = s
+        if (activeMonth < 11) s.update({ activeMonth: activeMonth + 1 })
+        else {
+          s.update({
+            activeYear: activeYear + 1,
+            activeMonth: 0
+          })
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "2.11.90",
+  "version": "2.11.94",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "4c5a23152b7b38852c4f7115c2565dfe724382ee",
+  "gitHead": "80354d405a3dd6085ee93472538ebef687c97764",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",