@mekari/pixel-date-picker - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

package.json

 {
   "name": "@mekari/pixel-date-picker",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Mekari Pixel | Date picker component",
@@ -30,6 +30,6 @@ "homepage": "https://mekari.design/",
     "@mekari/pixel-simple-grid": "^0.0.8",
-    "@mekari/pixel-button": "^0.1.9",
+    "@mekari/pixel-button": "^0.1.10",
     "@mekari/pixel-button-icon": "^0.6.0",
     "@mekari/pixel-icon": "^0.8.2",
-    "@mekari/pixel-input": "^0.3.11",
+    "@mekari/pixel-input": "^0.3.12",
     "@mekari/pixel-text": "^0.1.0",
@@ -36,0 +36,0 @@ "@mekari/pixel-utils": "^0.2.0",

src/calendar/calendar-panel.js

@@ -320,9 +320,2 @@ import {
       if (this.type !== 'week') return ''
-      const start = row[0].getTime()
-      const end = row[6].getTime()
-      const active = this.innerValue.some((v) => {
-        const time = v.getTime()
-        return time >= start && time <= end
-      })
-      return active ? `${this.prefixClass}-active-week` : ''
     }
@@ -369,3 +362,4 @@ },
         inline: this.inline,
-        isNotClickbale: this.isNotClickbale
+        isNotClickbale: this.isNotClickbale,
+        type: this.type
       },
@@ -372,0 +366,0 @@ on: {

src/calendar/table-date.js

@@ -67,2 +67,6 @@ import { getWeek, format } from 'date-format-parse'
       default: false
+    },
+    type: {
+      type: String,
+      default: 'date'
     }
@@ -135,2 +139,3 @@ },
       let { target } = evt
+
       if (target.tagName.toUpperCase() === 'DIV') {
@@ -163,8 +168,7 @@ target = target.parentNode
     },
-    cellStyle(item) {
+    cellStyle(item, row, col) {
       const dateStatus = this.getDateStatus(item)
-
       let activeStyle = dateStatus.active
         ? {
-            color: 'white',
+            color: this.type !== 'week' ? 'white' : 'unset',
             backgroundColor: 'blue.400',
@@ -193,3 +197,2 @@ _hover: {
         disabledStyle = {
-          // backgroundColor: 'blackAlpha.200',
           cursor: 'default',
@@ -251,2 +254,13 @@ color: 'gray.100',
 
+      let resetWeekStyle =
+        this.type === 'week'
+          ? {
+              backgroundColor: 'transparent',
+              borderRadius: 0,
+              _hover: {
+                boxShadow: 'unset'
+              }
+            }
+          : {}
+
       return {
@@ -275,5 +289,16 @@ fontSize: 'md',
         ...endRange,
-        ...todayStyle
+        ...todayStyle,
+        ...resetWeekStyle
       }
     },
+    weekStyle() {
+      if (this.type === 'week') {
+        return {
+          _hover: {
+            backgroundColor: 'ice.50'
+          }
+        }
+      }
+      return {}
+    },
     renderPinBar(h) {
@@ -311,2 +336,3 @@ return h(
   },
+
   render(h) {
@@ -360,3 +386,2 @@ const tableDateStyle = {
                     pr: index === 0 ? '2px' : 0,
-                    // pr: '2px',
                     fontWeight: 'semibold'
@@ -397,3 +422,4 @@ }
                       as: 'tr',
-                      pt: '6px'
+                      pt: '6px',
+                      ...this.weekStyle()
                     },
@@ -412,3 +438,3 @@ class: this.getRowClasses(row)
                             title: this.getCellTitle(item),
-                            ...this.cellStyle(item)
+                            ...this.cellStyle(item, row, col)
                           },
@@ -415,0 +441,0 @@ on: {

src/date-picker.js

@@ -333,3 +333,3 @@ import { useId, createStyledAttrsMixin, isUndef, getElementById } from '@mekari/pixel-utils'
     },
-    emitValue(date, type, close = true) {
+    emitValue(date, type, close = true, weekNumber) {
       // fix IE11/10 trigger input event when input is focused. (placeholder !== '')
@@ -340,3 +340,3 @@ this._isInvalid = false
       this.$emit('input', value)
-      this.$emit('change', value, type)
+      this.$emit('change', value, type, type === 'week' && weekNumber)
       if (close) {
@@ -387,3 +387,4 @@ this.isPopoverOpen = false
         // this.type === 'datetime', click the time should close popup
-        !this.validMultipleType && (type === this.type || type === 'time')
+        !this.validMultipleType && (type === this.type || type === 'time'),
+        this.getWeek(val, this.locale.formatLocale)
       )
@@ -765,1 +766,3 @@ // }
 }
+
+export { getWeek }

src/scrollbar/scrollbar-vertical.js

 /* istanbul ignore file */
 import getScrollbarWidth from '../util/scrollbar-width'
+import { MpBox } from '@mekari/pixel-box'
+import {
+  _styleScrollbar,
+  _styleScrollBarWrap,
+  _styleScrollBarTrack,
+  _styleScrollBarThumb
+} from './scroolbar.style'
 
 export default {
-  inject: {
-    prefixClass: {
-      default: 'mx'
-    }
-  },
+  // inject: {
+  //   prefixClass: {
+  //     default: 'mx'
+  //   }
+  // },
   data() {
@@ -14,3 +21,4 @@ return {
       thumbTop: '',
-      thumbHeight: ''
+      // thumbHeight: '20%',
+      scroolHover: false
     }
@@ -33,5 +41,7 @@ },
       const heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight
-      this.thumbHeight = heightPercentage < 100 ? `${heightPercentage}%` : ''
+      console.log(wrap.clientHeight, wrap.scrollHeight, heightPercentage)
+      // this.thumbHeight = heightPercentage < 100 ? `${heightPercentage}%` : ''
     },
     handleScroll(evt) {
+      console.log('handleScroll')
       const el = evt.currentTarget
@@ -42,2 +52,3 @@ const { scrollHeight, scrollTop } = el
     handleDragstart(evt) {
+      console.log('handleDragstart', this._draggable)
       evt.stopImmediatePropagation()
@@ -50,2 +61,3 @@ this._draggable = true
     handleDraging(evt) {
+      console.log('handleDraging', this._draggable)
       if (!this._draggable) return
@@ -60,2 +72,3 @@ const { clientY } = evt
     handleDragend() {
+      console.log('handleDragend', this._draggable)
       if (this._draggable) {
@@ -66,5 +79,81 @@ this._draggable = false
     },
-    render() {
-      return null
+    handleMouseOver() {
+      this.scroolHover = true
+      // console.log('handleMouseOver')
+    },
+    handleMouseOut() {
+      this.scroolHover = false
+      // console.log('handleMouseOut')
     }
+  },
+  render(h) {
+    return h(
+      MpBox,
+      {
+        attrs: {
+          'el-id': 'scrollbar',
+          position: 'relative',
+          overflow: 'hidden',
+          flex: 1,
+          ..._styleScrollbar
+        },
+        on: {
+          mouseover: this.handleMouseOver,
+          mouseout: this.handleMouseOut
+        }
+      },
+      [
+        h(
+          MpBox,
+          {
+            attrs: {
+              'el-id': 'scrollbar-wrap',
+              marginRight: `-${this.scrollbarWidth}`,
+              ..._styleScrollBarWrap,
+              role: 'group'
+              // _hover:{
+              //   '& scrollbar-thumb':{
+
+              //   }
+              // }
+            },
+            on: {
+              scroll: this.handleScroll
+            },
+            ref: 'wrap'
+          },
+          [this.$slots.default]
+        ),
+        h(
+          MpBox,
+          {
+            class: 'scrollbar-track',
+            attrs: {
+              'el-id': 'scrollbar-track',
+              ..._styleScrollBarTrack,
+              opacity: this.scroolHover ? 1 : 0,
+              _groupHover: {
+                background: 'red'
+              }
+            }
+          },
+          [
+            h(MpBox, {
+              class: 'scrollbar-thumb',
+              attrs: {
+                'el-id': 'scrollbar-thumb',
+                ..._styleScrollBarThumb,
+                // height: this.thumbHeight,
+                height: '25%',
+                top: this.thumbTop
+              },
+              on: {
+                mousedown: this.handleDragstart
+              },
+              ref: 'thumb'
+            })
+          ]
+        )
+      ]
+    )
   }
@@ -71,0 +160,0 @@ }

src/time/list-columns.js

 import ScrollbarVertical from '../scrollbar/scrollbar-vertical'
 import { getScrollParent } from '../util/dom'
+import { MpBox } from '@mekari/pixel-box'
+import { MpFlex } from '@mekari/pixel-flex'
+import { MpText } from '@mekari/pixel-text'
 
@@ -166,3 +169,3 @@ const padNumber = (value) => {
       const { target, currentTarget } = evt
-      if (target.tagName.toUpperCase() !== 'LI') return
+      if (target.tagName.toUpperCase() !== 'P') return
       const type = currentTarget.getAttribute('data-type')
@@ -176,3 +179,76 @@ const colIndex = parseInt(currentTarget.getAttribute('data-index'), 10)
   render(h) {
-    return null
+    return h(
+      MpFlex,
+      {
+        attrs: {
+          'el-id': 'time-columns',
+          overflow: 'hidden',
+          width: '100%',
+          height: '100%',
+          textAlign: 'center'
+        }
+      },
+      [
+        // this.columns.map(
+        //   (item, index) =>
+        // h(
+        //   ScrollbarVertical,
+        //   {
+        //     attrs: {
+        //       key: index
+        //     }
+        //   },
+        //   [
+
+        this.columns.map((col, i) =>
+          // h(MpBox, { attrs: { 'el-id': 'time-column' } }, [
+          h(ScrollbarVertical, { attrs: { key: i } }, [
+            h(
+              MpBox,
+              {
+                attrs: { as: 'ul', 'data-index': i, 'data-type': col.type },
+                on: {
+                  click: this.handleSelect
+                },
+                directives: [{ name: 'pixel', value: { listStyle: 'none', margin: 0, padding: 0 } }]
+              },
+              [
+                col.list.map((item, j) => {
+                  const activeStatus = this.getClasses(item.value, col.type)
+                  return h(
+                    MpBox,
+                    {
+                      class: activeStatus,
+                      attrs: {
+                        as: 'li',
+                        cursor: 'pointer',
+                        _hover: {
+                          // color:
+                          background: 'blue.50'
+                        },
+
+                        _disabled: {}
+                      }
+                    },
+                    [
+                      h(
+                        MpText,
+                        {
+                          attrs: {
+                            'data-index': j,
+                            lineHeight: '2xl',
+                            fontWeight: activeStatus === 'active' ? 'semibold' : 'reguler'
+                          }
+                        },
+                        item.text
+                      )
+                    ]
+                  )
+                })
+              ]
+            )
+          ])
+        )
+      ]
+    )
   }
@@ -179,0 +255,0 @@ }

src/time/list-options.js

@@ -27,3 +27,3 @@ import { format } from 'date-format-parse'
   name: 'ListOptions',
-  components: { ScrollbarVertical },
+  // components: { ScrollbarVertical },
   inject: {
@@ -61,2 +61,3 @@ getLocale: {
       }
+      console.log('here..')
       const start = parseOption(options.start)
@@ -82,2 +83,3 @@ const end = parseOption(options.end)
       }
+
       return result
@@ -87,3 +89,3 @@ }
   mounted() {
-    this.scrollToSelected()
+    // this.scrollToSelected()
   },
@@ -104,21 +106,22 @@ methods: {
       this.$emit('select', value, 'time')
-    },
-    render(h) {
-      return h(ScrollbarVertical, null, [
-        this.list.map((item) => {
-          return h(
-            'div',
-            {
-              attrs: {
-                key: item.value
-              },
-              on: {
-                click: () => this.handleSelect(item.value)
-              }
+    }
+  },
+  render(h) {
+    // return h(MpBox, {}, [])
+    return h(ScrollbarVertical, null, [
+      this.list.map((item) => {
+        return h(
+          'div',
+          {
+            attrs: {
+              key: item.value
             },
-            [item.text]
-          )
-        })
-      ])
-    }
+            on: {
+              click: () => this.handleSelect(item.value)
+            }
+          },
+          [item.text]
+        )
+      })
+    ])
   }
@@ -125,0 +128,0 @@ }

src/time/time-panel.js

 import { format } from 'date-format-parse'
 import { getValidDate } from '../util/date'
 import ListColumns from './list-columns'
-import ListOptions from './list-options'
 import { getLocale } from '../locale'
+import { MpBox } from '@mekari/pixel-box'
 
 export default {
   name: 'TimePanel',
-  components: { ListColumns, ListOptions },
+  // components: { ListColumns, ListOptions, MpBox, MpText },
   inject: {
@@ -191,2 +191,33 @@ getLocale: {
     }
+  },
+  render(h) {
+    return h(
+      MpBox,
+      {
+        attrs: {
+          'el-id': 'time-content',
+          height: '224px',
+          overflow: 'hidden'
+        }
+      },
+      [
+        h(ListColumns, {
+          attrs: {
+            date: this.innerValue,
+            'hour-options': this.hourOptions,
+            'minute-options': this.minuteOptions,
+            'second-options': this.secondOptions,
+            'hour-step': this.hourStep,
+            'minute-step': this.minuteStep,
+            'second-step': this.secondStep,
+            'scroll-duration': this.scrollDuration,
+            getClasses: this.getClasses
+          },
+          bind: this.ShowHourMinuteSecondAMPM,
+          on: {
+            select: this.handleSelect
+          }
+        })
+      ]
+    )
   }
@@ -193,0 +224,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

386925

increased by3.72%

Number of package files

85

increased by1.19%

Lines of code

14322

increased by3.73%

Dependency changes

• Updated@mekari/pixel-button@^0.1.10

• Updated@mekari/pixel-input@^0.3.12