# Fix

- When "maxDate" is not specified, the problem that the time after the current time cannot be selected - On some devices, the options are cut off in the middle
plusone-masaki · Jan 31, 2022 · db52a25 · db52a25
1 parent 65055fc
commit db52a25
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 35 deletions.
diff --git a/src/assets/sass/vue-drumroll-datetime-picker.sass b/src/assets/sass/vue-drumroll-datetime-picker.sass
@@ -11,9 +11,6 @@
   .-selected
     color: var(--selected-color)
 
-  .vdd-flex
-    display: flex
-
 .v-drumroll-picker__overlay
   height: 100%
   left: 0
@@ -48,19 +45,27 @@
   pointer-events: auto
   position: relative
 
+  & .vue-scroll-picker,
+  & .vue-scroll-picker-list,
+  & .vue-scroll-picker-list-rotator
+    position: relative
+    width: fit-content
+
   & > .vue-scroll-picker-layer
     pointer-events: none
 
     .top, .bottom
       background: transparent
 
   & > .vue-scroll-picker-group
+    display: flex
     margin-left: .5em
     margin-right: .5em
     position: relative
 
   & .vue-scroll-picker-item
     text-align: var(--picker-align)
+    width: auto
 
 .v-drumroll-picker--dialog
   .v-drumroll-picker__container

diff --git a/src/mixins/useBindings.js b/src/mixins/useBindings.js
@@ -3,7 +3,7 @@ import { calculatePattern, datestring } from '../modules/format-helper'
 
 export default {
   props: {
-    align: { type: String, default: 'center' },
+    align: { type: String, default: 'right' },
     defaultValue: { type: String, default: undefined },
     pattern: { type: Object, default: undefined },
     format: { type: [String, Object], default: undefined },

diff --git a/src/modules/format-helper.js b/src/modules/format-helper.js
@@ -31,23 +31,6 @@ export const guessDateOrder = (baseFormat) => {
     .map(item => item.type)
 }
 
-export const calculateWidth = str => {
-  let result = 0
-  for (let i = 0; i < str.length; i++) {
-    const chr = str.charCodeAt(i)
-    if ((chr >= 0x00 && chr < 0x81) ||
-      (chr === 0xf8f0) ||
-      (chr >= 0xff61 && chr < 0xffa0) ||
-      (chr >= 0xf8f1 && chr < 0xf8f4)) {
-      result += 0.6
-    } else {
-      result += 1
-    }
-  }
-
-  return result
-}
-
 /**
  * Format date string
  *

diff --git a/src/pickers/BaseDatePicker.js b/src/pickers/BaseDatePicker.js
@@ -1,7 +1,7 @@
 import { ScrollPickerGroup } from 'vue-scroll-picker'
 import * as constants from '../assets/constants'
 import dayjs from '../modules/dayjs'
-import { calculateWidth, guessDateOrder } from '../modules/format-helper'
+import { guessDateOrder } from '../modules/format-helper'
 import useSensitivity from '../mixins/useSensitivity'
 import DrumDivider from '../components/DrumDivider'
 import BasePicker from './BasePicker'
@@ -151,7 +151,7 @@ export default {
 
       let valueObj = dayjs.unix(value)
       if (valueObj.isBefore(this.minDate)) valueObj = dayjs(this.minDate)
-      if (valueObj.isAfter(this.maxDate)) valueObj = dayjs(this.maxDate)
+      if (this.maxDate && valueObj.isAfter(this.maxDate)) valueObj = dayjs(this.maxDate)
 
       if (this.value || valueObj.format(this.format) !== this.formatDefaultValue) {
         this.$emit('input', valueObj.format(this.format))
@@ -162,14 +162,12 @@ export default {
   render (h) {
     const divider = this.separator || this.drumPattern.dividerDate || this.drumPattern['divider-date']
     const drumDivider = divider ? h(DrumDivider, { props: { divider } }) : null
-    const sampleDate = dayjs('1989-12-31')
 
     const drums = {
       year: h(BasePicker, {
         props: {
           items: this.years,
           unit: 'year',
-          width: calculateWidth(sampleDate.format(this.drumPattern.year)) + 'em',
           ...this.$props,
           value: this.value || this.defaultValue,
         },
@@ -181,7 +179,6 @@ export default {
         props: {
           items: this.months,
           unit: 'month',
-          width: calculateWidth(sampleDate.format(this.drumPattern.month)) + 'em',
           ...this.$props,
           value: this.value || this.defaultValue,
         },
@@ -193,7 +190,6 @@ export default {
         props: {
           items: this.days,
           unit: 'date',
-          width: calculateWidth(sampleDate.format(this.drumPattern.date)) + 'em',
           ...this.$props,
           value: this.value || this.defaultValue,
         },
@@ -210,6 +206,6 @@ export default {
       if (divider && i < dateOrder.length - 1) pickers.push(drumDivider)
     }
 
-    return h(ScrollPickerGroup, { class: 'vdd-flex' }, pickers)
+    return h(ScrollPickerGroup, pickers)
   },
 }
diff --git a/src/pickers/BasePicker.js b/src/pickers/BasePicker.js
@@ -18,15 +18,13 @@ export default {
     height: { type: [String, Number], default: '10em' },
     unit: { type: String, required: true },
     value: { type: [String, Number], default: undefined },
-    width: { type: [String, Number], default: '2em' },
   },
 
   render (h, { props, listeners }) {
     return h(ScrollPicker, {
       style: {
         '--picker-align': props.align,
         height: typeof props.height === 'string' ? props.height : props.height + 'px',
-        width: typeof props.width === 'string' ? props.width : props.width + 'px',
       },
       props: {
         options: props.items,

diff --git a/src/pickers/BaseTimePicker.js b/src/pickers/BaseTimePicker.js
@@ -4,7 +4,6 @@ import DrumDivider from '../components/DrumDivider'
 import BasePicker from './BasePicker'
 import * as constants from '../assets/constants'
 import useSensitivity from '../mixins/useSensitivity'
-import { calculateWidth } from '../modules/format-helper'
 
 export default {
   name: 'BaseTimePicker',
@@ -124,15 +123,13 @@ export default {
   render (h) {
     const divider = this.separator || this.drumPattern.dividerTime || this.drumPattern['divider-time']
     const drumDivider = divider ? h(DrumDivider, { props: { divider } }) : null
-    const sampleDate = dayjs('1989-12-31 10:10:10')
 
     // 時
     const hourPicker = h(BasePicker, {
       props: {
         ...this.$props,
         items: this.hours,
         unit: 'hour',
-        width: calculateWidth(sampleDate.format(this.drumPattern.hour)) + 'em',
       },
       on: {
         input: this.onInput,
@@ -145,14 +142,13 @@ export default {
         ...this.$props,
         items: this.minutes,
         unit: 'minute',
-        width: calculateWidth(sampleDate.format(this.drumPattern.minute)) + 'em',
       },
       on: {
         input: this.onInput,
       },
     })
 
-    return h(ScrollPickerGroup, { class: 'vdd-flex' }, [
+    return h(ScrollPickerGroup, [
       hourPicker,
       drumDivider,
       minutePicker,