Merge pull request #6 from wanli-song/develop

modify(timepicker, datepicker): disabled
2024-12-15 04:42:23 +08:00 · 2019-12-23 21:02:41 +08:00 · 2019-12-23 21:02:41 +08:00 · ec38037d31
commit ec38037d31
parent 79c4b9c646 26442f33e0
75 changed files with 935 additions and 199 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,6 +1,6 @@
 module.exports = {
  extends: ['plugin:vue/recommended', '@vue/standard'],
-   parserOptions: {
+  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
@ -14,5 +14,5 @@ module.exports = {
        }
      }
    ]
-  }
+  },
 }
--- a/demo/debugComponents/iconTransitionDebug.vue
+++ b/demo/debugComponents/iconTransitionDebug.vue
@ -46,13 +46,11 @@
 <script>
 import mdCash from 'naive-ui/lib/icons/md-cash'
 import mdContacts from 'naive-ui/lib/icons/md-contacts'
-import iosContacts from 'naive-ui/lib/icons/ios-contacts'

 export default {
  components: {
    mdCash,
-    mdContacts,
-    iosContacts
+    mdContacts
  },
  data () {
    return {
--- a/demo/documentation/components/cascader/enUS/filter.md
+++ b/demo/documentation/components/cascader/enUS/filter.md
@ -0,0 +1,111 @@
+# Filter
+```html
+<n-cascader
+  v-model="value1"
+  placeholder="Filterable Multiple (Leaf Only)"
+  :options="options"
+  filterable
+  :filter="filter1"
+  multiple
+  style="margin-bottom:10px;"
+/>
+<n-cascader
+  v-model="value2"
+  placeholder="Filterable Multiple"
+  :options="options"
+  filterable
+  :filter="filter2"
+  multiple
+  :leaf-only="false"
+  style="margin-bottom:10px;"
+/>
+<n-cascader
+  v-model="value3"
+  placeholder="Filterable Single (Leaf Only)"
+  :options="options"
+  filterable
+  :filter="filter3"
+  style="margin-bottom:10px;"
+/>
+<n-cascader
+  v-model="value4"
+  placeholder="Filterable Single"
+  :options="options"
+  filterable
+  :filter="filter4"
+  :leaf-only="false"
+/>
+```
+```js
+function genOptions (depth = 3, iterator = 1, prefix = '') {
+  const length = 12
+  const options = []
+  for (let i = 1; i <= length; ++i) {
+    if (iterator === 1) {
+      options.push({
+        value: `${i}`,
+        label: `${i}`,
+        disabled: i % 5 === 0,
+        children: genOptions(depth, iterator + 1, '' + i)
+      })
+    } else if (iterator === depth) {
+      options.push({
+        value: `${prefix}-${i}`,
+        label: `${prefix}-${i}`,
+        disabled: i % 5 === 0
+
+      })
+    } else {
+      options.push({
+        value: `${prefix}-${i}`,
+        label: `${prefix}-${i}`,
+        disabled: i % 5 === 0,
+        children: genOptions(depth, iterator + 1, `${prefix}-${i}`)
+      })
+    }
+  }
+  return options
+}
+
+export default {
+  data () {
+    return {
+      value1: null,
+      options: genOptions(),
+      value2: null,
+      value3: null,
+      value4: null,
+    }
+  },
+  methods: {
+    filter1 (pattern, option, path) {
+      if (option.label.indexOf(pattern + '-1')>-1) {
+        return true
+      } else {
+        return false
+      }
+    },
+    filter2 (pattern, option, path) {
+      if (path[0].label===pattern) {
+        return true
+      } else {
+        return false
+      }
+    },
+    filter3 (pattern, option, path) {
+      if (option.label.indexOf(pattern + '-1')>-1) {
+        return true
+      } else {
+        return false
+      }
+    },
+    filter4 (pattern, option, path) {
+      if (path[0].label===pattern) {
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+}
+```
--- a/demo/documentation/components/cascader/enUS/index.md
+++ b/demo/documentation/components/cascader/enUS/index.md
@ -13,4 +13,5 @@ single-leaf-only-lazy
 multiple-leaf-only-lazy
 single-lazy
 multiple-lazy
+filter
 ```
--- a/demo/documentation/components/cascader/enUS/multipleLeafOnlySearch.md
+++ b/demo/documentation/components/cascader/enUS/multipleLeafOnlySearch.md
@ -45,6 +45,6 @@ export default {
      value: null,
      options: genOptions()
    }
-  }
+  },
 }
 ```
--- a/demo/documentation/components/datePicker/enUS/date.md
+++ b/demo/documentation/components/datePicker/enUS/date.md
@ -3,7 +3,9 @@
 <n-date-picker
  v-model="timestamp"
  type="date"
+  :disabledTime="disabledTime"
 />
+{{timestamp}}
 <n-date-picker v-model="timestamp2" type="date" />
 ```
 ```js
@ -13,6 +15,11 @@ export default {
      timestamp: null,
      timestamp2: 1000000
    }
+  },
+  methods: {
+    disabledTime (current) {
+      return (current >= 1574092800000) && (current < 1574438400000)
+    }
  }
 }
 ```
--- a/demo/documentation/components/datePicker/enUS/daterange.md
+++ b/demo/documentation/components/datePicker/enUS/daterange.md
@ -3,6 +3,7 @@
 <n-date-picker
  v-model="range1"
  type="daterange"
+  :disabledTime="disabledTime"
 />
 <n-date-picker
  v-model="range2"
@ -16,6 +17,11 @@ export default {
      range1: null,
      range2: [1562774466000, 1567180866000]
    };
+  },
+  methods: {
+    disabledTime (current) {
+      return (current >= 1574092800000) && (current < 1576771200000)
+    }
  }
 }
 ```
--- a/demo/documentation/components/datePicker/enUS/datetime.md
+++ b/demo/documentation/components/datePicker/enUS/datetime.md
@ -3,6 +3,7 @@
 <n-date-picker
  v-model="timestamp"
  type="datetime"
+  :disabledTime= "disabledTime"
 />
 <n-date-picker v-model="timestamp2" type="datetime" />
 ```
@ -13,6 +14,11 @@ export default {
      timestamp: null,
      timestamp2: 1000000
    }
+  },
+  methods: {
+    disabledTime (current) {
+      return current > 1573552182000 && current < 1573811382000
+    }
  }
 }
 ```
--- a/demo/documentation/components/datePicker/enUS/disabledTime.md
+++ b/demo/documentation/components/datePicker/enUS/disabledTime.md
@ -0,0 +1,98 @@
+# Disabled Time
+```html
+<n-date-picker
+  v-model="timestamp1"
+  type="date"
+  :date-disabled = "dateDisabled"
+/>
+<n-date-picker
+  v-model="timestamp2"
+  type="datetime"
+  :date-disabled = "dateDisabled"
+  :timeDisabled= "timeDisabled"
+/>
+<n-date-picker
+  v-model="timestamp3"
+  type="daterange"
+  :date-disabled = "dateRangeDisabled"
+/>
+<n-date-picker
+  v-model="timestamp4"
+  type="datetimerange"
+  :date-disabled = "dateRangeDisabled"
+  :time-disabled= "timeRangeDisabled"
+/>
+```
+```js
+export default {
+  data () {
+    return {
+      timestamp1: 1576339200000,
+      timestamp2: null,
+      timestamp3: null,
+      timestamp4: null,
+    }
+  },
+  methods: {
+    dateDisabled (current) {
+      return current >= 1576339200000 && current <= 1576425600000
+      // Tue Nov 12 2019 17:49:42 GMT+0800 (China Standard Time) -
+      // Fri Nov 15 2019 17:49:42 GMT+0800 (China Standard Time)
+    },
+    timeDisabled (current) {
+      return {
+        hourDisabled: (hour) => {
+          if (current === 1576512000000) {
+            return hour > 1 && hour <= 19
+          } else {
+            return false
+          }
+        },
+        minuteDisabled: (minute, selectedHour) => {
+          if (current === 1576512000000 && selectedHour === 22) {
+            return minute >= 20 && minute <= 30
+          } else {
+            return false
+          }
+        },
+        secondDisabled: (second, selectedMinute, selectedHour) => {
+          if (current === 1576512000000 && selectedHour === 12 && selectedMinute >= 40 && selectedMinute <= 50) {
+            return second >= 20 && second <= 30
+          } else {
+            return false
+          }
+        },
+      }
+    },
+    dateRangeDisabled (current) {
+      return current >= 1576339200000 && current <= 1576425600000
+    },
+    timeRangeDisabled (current, type) {
+      if (type === 'start') {
+        return {
+          hourDisabled: (hour) => {
+            if (current[0] === 1576512000000) {
+              return hour > 1 && hour <= 19
+            }
+          },
+          minuteDisabled: (minute, selectedHour) => {
+            if (current[0] === 1576512000000 && selectedHour === 20) {
+              return minute >= 20 && minute <= 30
+            }
+          },
+          secondDisabled: (second, selectedMinute, selectedHour) => {
+            if (current[0] === 1576512000000 && selectedHour === 12 && selectedMinute >= 40 && selectedMinute <= 50) {
+              return second >= 20 && second <= 30
+            }
+          },
+        }
+      }
+    },
+  },
+}
+```
+```css
+.n-date-picker {
+  margin: 0 12px 8px 0;
+}
+```
--- a/demo/documentation/components/datePicker/enUS/index.md
+++ b/demo/documentation/components/datePicker/enUS/index.md
@ -5,6 +5,7 @@ datetime
 daterange
 datetimerange
 disabled
+disabledTime
 actions
 events
 ```
--- a/demo/documentation/components/menu/enUS/basic.md
+++ b/demo/documentation/components/menu/enUS/basic.md
@ -1,6 +1,6 @@
 # Basic
 ```html
-<div style="width:500px;background:red;">
+<div style="width:500px">
  <n-menu :title="'Test'" 
    v-model="selected" 
    :defaultOpenNames="initOpenKeys"
--- a/demo/documentation/components/timePicker/enUS/basic.md
+++ b/demo/documentation/components/timePicker/enUS/basic.md
@ -2,6 +2,9 @@
 ```html
 <n-time-picker
  v-model="time0"
+  :disabledHours="disabledHours"
+  :disabledMinutes="disabledMinutes"
+  :disabledSeconds="disabledSeconds"
 />
 <n-time-picker v-model="time1" />
 ```
@ -12,6 +15,21 @@ export default {
      time0: null,
      time1: 1563937380000
    }
+  },
+  methods: {
+    disabledHours (hour) {
+      return hour>13 && hour<16
+    },
+    disabledMinutes (minute, selectedHour) {
+      if(Number(selectedHour) === 17) {
+        return minute > 13 &&  minute < 40
+      }
+    },
+    disabledSeconds (second, selectedHour, selectedMinute) {
+       if(Number(selectedHour) === 17 && Number(selectedMinute) === 10)  {
+        return second > 13 &&  second < 40
+      }
+    }
  }
 }
 ```
--- a/demo/documentation/components/timePicker/enUS/disabledTime.md
+++ b/demo/documentation/components/timePicker/enUS/disabledTime.md
@ -0,0 +1,44 @@
+# Disabled Time
+```html
+<n-time-picker
+  v-model="time0"
+  :hourDisabled="disabledHours"
+  :minuteDisabled="disabledMinutes"
+  :secondDisabled="disabledSeconds"
+/>
+
+```
+```js
+export default {
+  data () {
+    return {
+      time0: null,
+      time1: 1563937380000,
+    }
+  },
+  methods: {
+    disabledHours (hour) {
+      return hour > 13 && hour < 16
+    },
+    disabledMinutes (minute, selectedHour) {
+      if (Number(selectedHour) === 17) {
+        return minute >= 0 && minute < 9
+      } else {
+        return false
+      }
+    },
+    disabledSeconds (second, selectedMinute, selectedHour) {
+      if (Number(selectedHour) === 17 && Number(selectedMinute) === 10) {
+        return second > 13 && second < 40
+      } else {
+        return false
+      }
+    },
+  },
+}
+```
+```css
+.n-time-picker {
+  margin: 0 12px 8px 0;
+}
+```
--- a/demo/documentation/components/timePicker/enUS/index.md
+++ b/demo/documentation/components/timePicker/enUS/index.md
@ -1,4 +1,5 @@
 # Time Picker
 ```demo
 basic
+disabledTime
 ```
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
    "dev": "cross-env NODE_ENV=development && webpack-dev-server --config build/webpack.dev.js",
    "serve": "npm run dev",
    "lint": "eslint packages/**/*.{js,vue} test/**/*.{js,vue} build/**/*.{js,vue} demo/**/*.{js,vue} && stylelint \"styles/**/*.scss\"",
-    "lint-style": "stylelint  \"styles/**/*.scss\"",
+    "lint-style": "stylelint \"styles/**/*.scss\"  --fix",
    "test": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js",
    "test-cov": "cross-env NODE_ENV=development BABEL_ENV=test karma start test/unit/karma.conf.js && http-server test/unit/coverage",
    "test-release": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.release.js",
--- a/packages/common/Cascader/src/Cascader.vue
+++ b/packages/common/Cascader/src/Cascader.vue
@ -62,6 +62,7 @@
            :enable-all-options="enableAllOptions"
            :pattern="pattern"
            :filterable="filterable"
+            :filter="filter"
            :expand-trigger="expandTrigger"
            :active-id.sync="activeId"
            :lazy="lazy"
@ -163,6 +164,10 @@ export default {
    splitor: {
      type: String,
      default: ' / '
+    },
+    filter: {
+      type: [String, Function],
+      default: null
    }
  },
  data () {
--- a/packages/common/Cascader/src/CascaderAdapter.vue
+++ b/packages/common/Cascader/src/CascaderAdapter.vue
@ -58,6 +58,10 @@ export default {
    onLoad: {
      type: Function,
      default: () => {}
+    },
+    filter: {
+      type: Function,
+      default: null
    }
  },
  data () {
--- a/packages/common/Cascader/src/CascaderMenu.vue
+++ b/packages/common/Cascader/src/CascaderMenu.vue
@ -134,6 +134,10 @@ export default {
    onLoad: {
      type: Function,
      default: () => {}
+    },
+    filter: {
+      type: [String, Function],
+      default: null
    }
  },
  data () {
@ -154,11 +158,9 @@ export default {
      return this.expandTrigger === 'click'
    },
    linkedCascaderOptions () {
-      // console.log('linkedCascaderOptions called')
      return linkedCascaderOptions(this.options, this.type)
    },
    menuOptions () {
-      // console.log('menuOptions called')
      return menuOptions(this.linkedCascaderOptions, this.value, this.type)
    },
    menuModel () {
@ -193,9 +195,21 @@ export default {
      const filteredSelectOptions = []
      const type = this.type
      traverseWithCallback(this.menuOptions, option => {
-        if (Array.isArray(option.path) && option.path.some(
-          label => ~label.indexOf(this.pattern)
-        )) {
+        let flag = false
+        if (this.filter && option.label) {
+          let path = option.path.map((item) => {
+            return {
+              label: item,
+              value: item
+            }
+          })
+          flag = this.filter(this.pattern, { label: option.label, value: option.value }, path)
+        } else {
+          flag = option.path.some(
+            label => ~label.indexOf(this.pattern)
+          )
+        }
+        if (Array.isArray(option.path) && flag) {
          if (type === 'multiple' || type === 'single') {
            // console.log()
            if (option.isLeaf) {
@ -351,9 +365,9 @@ export default {
      this.$nextTick().then(() => {
        this.typeIsSelect = typeisSelect
        if (typeisSelect) {
-          const el = this.$refs.selectMenu.$el
+          const element = this.$refs.selectMenu.$el
          this.$parent.updatePosition(
-            el,
+            element,
            (el, activatorRect) => {
              el.style.minWidth = activatorRect.width + 'px'
            },
@ -396,15 +410,15 @@ export default {
          this.$refs.mask.showOnce(`Not all child nodes of "${option.label}" have been loaded`)
          return
        }
-        const traverseMultiple = option => {
-          if (!option || option.disabled) return
-          if (Array.isArray(option.children)) {
-            for (const child of option.children) {
+        const traverseMultiple = item => {
+          if (!item || item.disabled) return
+          if (Array.isArray(item.children)) {
+            for (const child of item.children) {
              traverseMultiple(child)
            }
          }
-          if (!option.children) {
-            newValues.push(option.value)
+          if (!item.children) {
+            newValues.push(item.value)
          }
        }
        traverseMultiple(option)
--- a/packages/common/DatePicker/src/main.vue
+++ b/packages/common/DatePicker/src/main.vue
@ -5,7 +5,8 @@
    :class="{
      [`n-date-picker--${size}-size`]: true,
      'n-date-picker--disabled': disabled,
-      'n-date-picker--range': isRange
+      'n-date-picker--range': isRange,
+      'n-date-picker--error': isErrorValue
    }"
  >
    <n-input
@ -33,7 +34,6 @@
      v-else
      ref="input"
      v-model="displayTime"
-      class="n-date-picker__input"
      :force-focus="active"
      :disabled="disabled"
      :lazy-focus="true"
@ -68,9 +68,12 @@
          :active="active"
          :actions="actions"
          :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
+          :time-disabled="timeDisabled"
          @blur="handlePanelBlur"
          @input="handlePanelInput"
          @close="closeCalendar"
+          @check-value="checkValue"
        />
        <date-panel
          v-else-if="type === 'date'"
@ -79,9 +82,11 @@
          :active="active"
          :actions="actions"
          :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
          @input="handlePanelInput"
          @blur="handlePanelBlur"
          @close="closeCalendar"
+          @check-value="checkValue"
        />
        <daterange-panel
          v-else-if="type === 'daterange'"
@ -90,9 +95,11 @@
          :active="active"
          :actions="actions"
          :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
          @input="handleRangePanelInput"
          @blur="handlePanelBlur"
          @close="closeCalendar"
+          @check-value="checkValue"
        />
        <datetimerange-panel
          v-else-if="type === 'datetimerange'"
@ -101,9 +108,12 @@
          :active="active"
          :actions="actions"
          :theme="synthesizedTheme"
+          :date-disabled="dateDisabled"
+          :time-disabled="timeDisabled"
          @input="handleRangePanelInput"
          @close="closeCalendar"
          @blur="handlePanelBlur"
+          @check-value="checkValue"
        />
      </div>
    </div>
@ -230,6 +240,30 @@ export default {
    actions: {
      type: Array,
      default: undefined
+    },
+    dateDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    timeDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    rangeTimeDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    disabledTime: {
+      type: Function,
+      default: () => {
+        return false
+      }
    }
  },
  data () {
@ -237,7 +271,8 @@ export default {
      displayTime: '',
      displayStartTime: '',
      displayEndTime: '',
-      active: false
+      active: false,
+      isErrorValue: false
    }
  },
  computed: {
@ -392,15 +427,12 @@ export default {
     * Input
     */
    handleTimeInput (v) {
-      console.log('handle input before strict parse')
      const newSelectedDateTime = strictParse(this.displayTime, this.computedFormat, new Date())
-      console.log('handle input', this.displayTime, this.computedFormat, newSelectedDateTime)
-      console.log('handle input new time', newSelectedDateTime, typeof newSelectedDateTime)
      if (isValid(newSelectedDateTime)) {
        this.$emit('input', getTime(newSelectedDateTime))
      }
    },
-    handleRangeInput (v) {
+    handleRangeInput (v, isErrorValue) {
      // const v = e.target.value
      if (v === null) v = [null, null]
      const [startTime, endTime] = v
@ -414,14 +446,12 @@ export default {
      }
      this.displayStartTime = startTime
      this.displayEndTime = endTime
-      // console.log('handleRangeInput', v, newStartTime, newEndTime)
    },
    /**
     * Click
     */
    handleActivatorClick (e) {
      if (this.disabled) return
-      // console.log('handleActivatorClick')
      if (this.active) {
        e.stopPropagation()
      } else {
@ -502,6 +532,9 @@ export default {
      }
      this.$emit('input', [startTime, endTime])
      this.refresh([startTime, endTime])
+    },
+    checkValue (isErrorValue) {
+      this.isErrorValue = isErrorValue
    }
  }
 }
--- a/packages/common/DatePicker/src/panel/date.vue
+++ b/packages/common/DatePicker/src/panel/date.vue
@ -59,7 +59,8 @@
            'n-date-picker-panel-dates__date--current': dateItem.isCurrentDate,
            'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
            'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
-            'n-date-picker-panel-dates__date--no-transition': noTransition
+            'n-date-picker-panel-dates__date--no-transition': noTransition,
+            'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
          }"
          @click="handleDateClick(dateItem)"
        >
@ -88,6 +89,10 @@
          round
          auto-text-color
          type="primary"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorTime || isErrorDate
+          }"
          @click="handleConfirmClick"
        >
          Confirm
--- a/packages/common/DatePicker/src/panel/daterange.vue
+++ b/packages/common/DatePicker/src/panel/daterange.vue
@ -65,7 +65,8 @@
              'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
              'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
              'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
            }"
            @click="handleDateClick(dateItem)"
            @mouseenter="handleDateMouseEnter(dateItem)"
@ -130,7 +131,8 @@
              'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
              'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
              'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
            }"
            @click="handleDateClick(dateItem)"
            @mouseenter="handleDateMouseEnter(dateItem)"
@ -161,6 +163,10 @@
          round
          auto-text-color
          type="primary"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorDateTime
+          }"
          @click="handleConfirmClick"
        >
          Confirm
--- a/packages/common/DatePicker/src/panel/datetime.vue
+++ b/packages/common/DatePicker/src/panel/datetime.vue
@ -14,7 +14,9 @@
      >
        <n-input
          v-model="displayDateString"
-          class="n-date-picker-panel-dates__date-input"
+          :class="{
+            'n-input--error': isErrorDate
+          }"
          placeholder="Select date"
          @blur="handleDateInputBlur"
          @input="handleDateInput"
@ -25,6 +27,9 @@
          class="n-date-picker-panel__time-input"
          :value="value"
          stop-selector-bubble
+          :hour-disabled="hourDisabled"
+          :minute-disabled="minuteDisabled"
+          :second-disabled="secondDisabled"
          @input="handleTimePickerInput"
        />
      </div>
@ -76,7 +81,8 @@
            'n-date-picker-panel-dates__date--current': dateItem.isCurrentDate,
            'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
            'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
-            'n-date-picker-panel-dates__date--no-transition': noTransition
+            'n-date-picker-panel-dates__date--no-transition': noTransition,
+            'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
          }"
          @click="handleDateClick(dateItem)"
        >
@ -105,6 +111,10 @@
          round
          auto-text-color
          type="primary"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorTime || isErrorDate
+          }"
          @click="handleConfirmClick"
        >
          Confirm
@ -155,6 +165,17 @@ export default {
      detaValidateFormat: DATE_VALIDATE_FORMAT
    }
  },
+  watch: {
+    active () {
+      if (this.active) {
+        this.initialValue = this.value
+      } else {
+        if (this.isErrorTime || this.isErrorDate) {
+          this.$emit('input', this.initialValue)
+        }
+      }
+    }
+  },
  methods: {
    adjustValue (datetime) {
      return startOfSecond(datetime)
--- a/packages/common/DatePicker/src/panel/datetimerange.vue
+++ b/packages/common/DatePicker/src/panel/datetimerange.vue
@ -25,6 +25,9 @@
          position-mode="absolute"
          class="n-date-picker-panel__time-input"
          :value="startTimeValue"
+          :hour-disabled="isStartHourDisabled(currentDate)"
+          :minute-disabled="isStartMinuteDisabled(currentDate)"
+          :second-disabled="isStartSecondDisabled(currentDate)"
          stop-selector-bubble
          @input="handleStartTimePickerInput"
        />
@ -45,6 +48,10 @@
          position-mode="absolute"
          class="n-date-picker-panel__time-input"
          :value="endTimeValue"
+          :hour-disabled="isEndHourDisabled(currentDate)"
+          :minute-disabled="isEndMinuteDisabled(currentDate)"
+          :second-disabled="isEndSecondDisabled(currentDate)"
+          :is-error-val="isErrorEndTime"
          stop-selector-bubble
          @input="handleEndTimePickerInput"
        />
@ -112,7 +119,8 @@
              'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
              'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
              'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
            }"
            @click="handleDateClick(dateItem)"
            @mouseenter="handleDateMouseEnter(dateItem)"
@ -185,7 +193,8 @@
              'n-date-picker-panel-dates__date--selected': dateItem.isSelectedDate,
              'n-date-picker-panel-dates__date--in-display-month': dateItem.isDateOfDisplayMonth,
              'n-date-picker-panel-dates__date--in-span': dateItem.isInSpan,
-              'n-date-picker-panel-dates__date--no-transition': noTransition
+              'n-date-picker-panel-dates__date--no-transition': noTransition,
+              'n-date-picker-panel-dates__date--disabled': dateDisabled(dateItem.timestamp)
            }"
            @click="handleDateClick(dateItem)"
            @mouseenter="handleDateMouseEnter(dateItem)"
@ -212,6 +221,10 @@
        </n-button>
        <n-button
          v-if="actions.includes('confirm')"
+          class="n-date-picker-panel-actions__confirm"
+          :class="{
+            'n-date-picker-panel-actions__confirm--disabled': isErrorDateTime
+          }"
          size="tiny"
          round
          auto-text-color
@ -280,7 +293,10 @@ export default {
  watch: {
    active (newActive) {
      if (newActive) {
+        this.initialValue = this.value
        this.syncCalendarTimeWithValue(this.value)
+      } else if (this.isErrorDateTime) {
+        this.$emit('input', this.initialTime)
      }
    },
    valueAsDateArray (newValue) {
--- a/packages/common/DatePicker/src/panel/dualCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/dualCalendarMixin.js
@ -6,6 +6,8 @@ import getYear from 'date-fns/getYear'
 import getMonth from 'date-fns/getMonth'
 import startOfMonth from 'date-fns/startOfMonth'
 import isValid from 'date-fns/isValid'
+import startOfHour from 'date-fns/startOfHour'
+import setHours from 'date-fns/setHours'
 import { dateArray } from '../../../../utils/dateUtils'

 import commonCalendarMixin from './commonCalendarMixin'
@ -43,6 +45,22 @@ export default {
    actions: {
      type: Array,
      default: () => ['clear', 'confirm']
+    },
+    dateDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    timeDisabled: {
+      type: Function,
+      default: () => {
+        return {
+          hourDisabled: () => false,
+          minuteDisabled: () => false,
+          secondDisabled: () => false
+        }
+      }
    }
  },
  data () {
@ -56,7 +74,19 @@ export default {
      isSelecting: false,
      startDateTime: null,
      memorizedStartDateTime: null,
-      endDateTime: null
+      endDateTime: null,
+      initialTime: null
+      // startHourDisabled: () => true,
+      // startMinuteDisabled: () => true,
+      // startSecondDisabled: () => true,
+      // endHourDisabled: () => true,
+      // endMinuteDisabled: () => true,
+      // endSecondDisabled: () => true
+      // isErrorStartTime: false,
+      // isErrorEndTime: false,
+      // isErrorStartDate: false,
+      // isErrorEndDate: false
+      // currentDate: []
    }
  },
  computed: {
@ -105,6 +135,109 @@ export default {
      if (isValid(startMoment)) {
        return [startMoment, endMoment]
      } else return null
+    },
+    isStartHourDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'start')
+        const startHourDisabled = (timeDisabled && timeDisabled.hourDisabled) || function () { return false }
+        return function (hour) {
+          return startHourDisabled(hour)
+        }
+      }
+    },
+    isStartMinuteDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'start')
+        const startMinuteDisabled = (timeDisabled && timeDisabled.minuteDisabled) || function () { return false }
+        return function (minute, selectedHour) {
+          return startMinuteDisabled(minute, selectedHour)
+        }
+      }
+    },
+    isStartSecondDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'start')
+        const startSecondDisabled = (timeDisabled && timeDisabled.secondDisabled) || function () { return false }
+        return function (second, selectedMinute, selectedHour) {
+          return startSecondDisabled(second, selectedMinute, selectedHour)
+        }
+      }
+    },
+    isEndHourDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'end')
+        const endHourDisabled = (timeDisabled && timeDisabled.hourDisabled) || function () { return false }
+        return function (hour) {
+          return endHourDisabled(hour)
+        }
+      }
+    },
+    isEndMinuteDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'end')
+        const endMinuteDisabled = (timeDisabled && timeDisabled.minuteDisabled) || function () { return false }
+        return function (minute, selectedHour) {
+          return endMinuteDisabled(minute, selectedHour)
+        }
+      }
+    },
+    isEndSecondDisabled () {
+      return function (val) {
+        const timeDisabled = this.timeDisabled(this.currentDate, 'end')
+        const endSecondDisabled = (timeDisabled && timeDisabled.secondDisabled) || function () { return false }
+        return function (second, selectedMinute, selectedHour) {
+          return endSecondDisabled(second, selectedMinute, selectedHour)
+        }
+      }
+    },
+    currentDate () {
+      if (!this.value) {
+        return [null, null]
+      }
+      let date = []
+      this.value.forEach((item, index) => {
+        if (item) {
+          date[index] = setHours(startOfHour(new Date(item)), 0).getTime()
+        }
+      })
+      return date
+    },
+    isErrorDateTime () {
+      if (!this.value) {
+        return false
+      }
+      return this.isErrorStartTime || this.isErrorEndTime ||
+      this.isErrorStartDate || this.isErrorEndDate
+    },
+    isErrorStartTime () {
+      if (!this.value) {
+        return false
+      }
+      const startDateTime = new Date(this.value[0])
+      return this.isStartHourDisabled(this.value)(startDateTime.getHours()) ||
+          this.isStartMinuteDisabled(this.value)(startDateTime.getMinutes(), startDateTime.getHours()) ||
+          this.isStartSecondDisabled(this.value)(startDateTime.getSeconds(), startDateTime.getMinutes(), startDateTime.getHours())
+    },
+    isErrorEndTime () {
+      if (!this.value) {
+        return false
+      }
+      let endDateTime = new Date(this.value[1])
+      return this.isEndHourDisabled(this.value)(endDateTime.getHours()) ||
+          this.isEndMinuteDisabled(this.value)(endDateTime.getMinutes(), endDateTime.getHours()) ||
+          this.isEndSecondDisabled(this.value)(endDateTime.getSeconds(), endDateTime.getMinutes(), endDateTime.getHours())
+    },
+    isErrorStartDate () {
+      if (!this.value) {
+        return false
+      }
+      return this.dateDisabled(setHours(startOfHour(new Date(this.value[0])), 0).getTime())
+    },
+    isErrorEndDate () {
+      if (!this.value) {
+        return false
+      }
+      return this.dateDisabled(setHours(startOfHour(new Date(this.value[1])), 0).getTime())
    }
  },
  watch: {
@ -127,6 +260,14 @@ export default {
          this.banTransitionOneTick()
        }
      }
+    },
+    isErrorDateTime (val) {
+      this.$emit('check-value', this.isErrorDateTime)
+    }
+  },
+  mounted () {
+    if (this.isErrorDateTime) {
+      this.$emit('check-value', this.isErrorDateTime)
    }
  },
  methods: {
@ -144,7 +285,6 @@ export default {
      this.closeCalendar()
    },
    syncCalendarTimeWithValue (value) {
-      // console.log('syncCalendarTimeWithValue', value)
      if (value === null) return
      const [startMoment, endMoment] = value
      this.startCalendarDateTime = new Date(startMoment)
@ -155,6 +295,9 @@ export default {
      }
    },
    handleDateClick (dateItem) {
+      if (this.dateDisabled(dateItem.timestamp)) {
+        return
+      }
      if (!this.isSelecting) {
        this.isSelecting = true
        this.memorizedStartDateTime = dateItem.timestamp
@ -179,6 +322,9 @@ export default {
      }
    },
    handleConfirmClick () {
+      if (this.isErrorDateTime) {
+        return
+      }
      this.$emit('confirm')
      this.closeCalendar()
    },
--- a/packages/common/DatePicker/src/panel/uniCalendarMixin.js
+++ b/packages/common/DatePicker/src/panel/uniCalendarMixin.js
@ -9,6 +9,8 @@ import getYear from 'date-fns/getYear'
 import getMonth from 'date-fns/getMonth'
 import getDate from 'date-fns/getDate'
 import isValid from 'date-fns/isValid'
+import startOfHour from 'date-fns/startOfHour'
+import setHours from 'date-fns/setHours'
 import { dateArray, strictParse } from '../../../../utils/dateUtils'

 export default {
@ -34,13 +36,30 @@ export default {
    actions: {
      type: Array,
      default: () => ['now', 'confirm']
+    },
+    dateDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    timeDisabled: {
+      type: Function,
+      default: () => {
+        return {
+          hourDisabled: () => false,
+          minuteDisabled: () => false,
+          secondDisabled: () => false
+        }
+      }
    }
  },
  data () {
    return {
      displayDateString: '',
      calendarDateTime: new Date(), // moment(),
-      currentDateTime: new Date() // moment()
+      currentDateTime: new Date(), // moment()
+      selectedDate: null
    }
  },
  computed: {
@ -67,6 +86,42 @@ export default {
      // } else {
      //   return null
      // }
+    },
+    isErrorDate () {
+      if (!this.value) {
+        return false
+      }
+      return this.dateDisabled(setHours(startOfHour(new Date(this.value)), 0).getTime())
+    },
+    isErrorTime () {
+      if (!this.value) {
+        return false
+      }
+      const time = new Date(this.value)
+      const hour = time.getHours()
+      const minute = time.getMinutes()
+      const second = time.getMinutes()
+      return this.hourDisabled(hour) ||
+          this.minuteDisabled(minute, hour) ||
+          this.secondDisabled(second, minute, hour)
+    },
+    isErrorDateTime () {
+      return this.isErrorDate || this.isErrorTime
+    },
+    currentDate () {
+      if (!this.value) {
+        return null
+      }
+      return setHours(startOfHour(new Date(this.value)), 0).getTime()
+    },
+    hourDisabled () {
+      return this.timeDisabled(this.currentDate).hourDisabled || function () { return false }
+    },
+    minuteDisabled () {
+      return this.timeDisabled(this.currentDate).minuteDisabled || function () { return false }
+    },
+    secondDisabled () {
+      return this.timeDisabled(this.currentDate).secondDisabled || function () { return false }
    }
  },
  watch: {
@ -88,6 +143,9 @@ export default {
      } else {
        this.displayDateString = ''
      }
+    },
+    isErrorDateTime () {
+      this.$emit('check-value', this.isErrorDateTime)
    }
  },
  created () {
@ -98,6 +156,11 @@ export default {
      this.displayDateString = ''
    }
  },
+  mounted () {
+    if (this.isErrorDateTime) {
+      this.$emit('check-value', this.isErrorDateTime)
+    }
+  },
  methods: {
    handleClickOutside () {
      this.closeCalendar()
@ -115,7 +178,6 @@ export default {
    // },
    handleDateInput (value) {
      const date = strictParse(value, this.dateFormat, new Date())// moment(value, this.dateFormat, true)
-      // console.log('handle date input', value)
      if (isValid(date)) {
        if (!this.valueAsDateTime) {
          this.$emit('input', getTime(this.adjustValue(new Date())))
@ -185,15 +247,18 @@ export default {
    setSelectedDateTimeToNow () {
      this.$emit('input', getTime(this.adjustValue(new Date())))
      this.calendarDateTime = new Date() // moment()
+      // this.checkDate(getTime(this.adjustValue(new Date())))
    },
    handleDateClick (dateItem) {
-      // console.log(dateItem)
+      if (this.dateDisabled(dateItem.timestamp)) {
+        return
+      }
      let newSelectedDateTime = new Date()
      if (this.valueAsDateTime !== null) {
        newSelectedDateTime = this.valueAsDateTime
      }
      newSelectedDateTime = set(newSelectedDateTime, dateItem.dateObject)
-      // console.log(newSelectedDateTime.format('YYYY MM DD'))
+      this.selectedDate = dateItem.dateObject
      this.$emit('input', getTime(this.adjustValue(newSelectedDateTime)))
    },
    /**
@ -211,6 +276,9 @@ export default {
      this.displayDateString = format(time, this.dateFormat)
    },
    handleConfirmClick () {
+      if (this.isErrorDate || this.isErrorTime) {
+        return
+      }
      this.$emit('confirm')
      this.closeCalendar()
    },
--- a/packages/common/Form/src/FormItem.vue
+++ b/packages/common/Form/src/FormItem.vue
@ -334,7 +334,7 @@ export default {
    },
    addValidationEventListeners () {
      const rules = this.synthesizedRules
-      if (rules.length >= 0) {
+      if (rules.length > 0) {
        this.$on('blur', this.handleContentBlur)
        this.$on('input', this.handleContentInput)
        this.$on('focus', this.handleContentFocus)
--- a/packages/common/Log/src/Log.vue
+++ b/packages/common/Log/src/Log.vue
@ -155,12 +155,12 @@ export default {
      }
    },
    scrollToTop (dismissEvent = false) {
-      this.scrollTo(dismissEvent, 'top')
+      this.scrollTo('top', dismissEvent)
    },
    scrollToBottom (dismissEvent = false) {
-      this.scrollTo(dismissEvent, 'bottom')
+      this.scrollTo('bottom', dismissEvent)
    },
-    scrollTo (dismissEvent = false, to) {
+    scrollTo (to, dismissEvent = false) {
      if (dismissEvent) {
        this.dismissEvent = true
      }
--- a/packages/common/Menu/src/menuItem.vue
+++ b/packages/common/Menu/src/menuItem.vue
@ -6,13 +6,13 @@
      'n-menu-item--selected': isSelected,
      'n-menu-item--disabled': isDisabled
    }"
-    @click="clickCallback"
+    @click="handleClick"
  >
    <span
      v-if="hasIcon"
      class="n-menu-title-icon"
    />
-    <span>{{ title }}{{ isDisabled }}</span>
+    <span>{{ title }}</span>
  </li>
 </template>
 <script>
@ -73,8 +73,8 @@ export default {
    }
  },
  methods: {
-    clickCallback () {
-      if (!this.disabled) {
+    handleClick () {
+      if (!this.isDisabled) {
        this.NMenu.changeSelect(this.name)
        this.$emit('click', this)
      }
--- a/packages/common/Menu/src/subMenu.vue
+++ b/packages/common/Menu/src/subMenu.vue
@ -6,12 +6,12 @@
      class="n-sub-menu-header"
      :style="{paddingLeft: paddingLeft + 'px'}"
      :class="{
-        'n-sub-menu-header--collapsed': collapsed,
-        'n-sub-menu-header--active': !collapsed,
+        'n-sub-menu-header--collapsed': isCollapsed,
+        'n-sub-menu-header--active': !isCollapsed,
        'n-sub-menu-header--has-icon': hasIcon,
        'n-sub-menu-header--disabled': disabled,
      }"
-      @click="clickCallback"
+      @click="handleClick"
    >
      <span
        v-if="hasIcon"
@ -20,7 +20,7 @@
      <span>{{ title }}</span>
    </div>
    <fade-in-height-expand-transition>
-      <ul v-if="!collapsed" class="n-sub-menu-content">
+      <ul v-if="!isCollapsed" class="n-sub-menu-content">
        <slot />
      </ul>
    </fade-in-height-expand-transition>
@ -77,28 +77,32 @@ export default {
      }
      return padding
    },
-    collapsed: {
-      get: function () {
-        let indexs = this.NMenu.openNames || this.NMenu.defaultOpenNames
-        if (indexs && indexs.includes(this.name)) {
-          this.isCollapsed = false
-        } else {
-          this.isCollapsed = true
-        }
-        return this.isCollapsed
-      },
-      set: function (val) {
-        this.isCollapsed = val
-      }
+    openNames () {
+      return this.NMenu.openNames || this.NMenu.defaultOpenNames
    }
  },
+  watch: {
+    openNames (value) {
+      this.setCollapsed()
+    }
+  },
+  mounted () {
+    this.setCollapsed()
+  },
  methods: {
-    clickCallback () {
+    handleClick () {
      if (!this.disabled) {
-        this.collapsed = !this.collapsed
+        this.isCollapsed = !this.isCollapsed
        this.NMenu.openKeysChangeCallback(this.name)
        this.$emit('click', this)
      }
+    },
+    setCollapsed () {
+      if (this.openNames && this.openNames.includes(this.name)) {
+        this.isCollapsed = false
+      } else {
+        this.isCollapsed = true
+      }
    }
  }
 }
--- a/packages/common/Popover/src/main.js
+++ b/packages/common/Popover/src/main.js
@ -4,9 +4,9 @@ import NPopoverContent from './PopoverContent'
 import activatorMixin from './activatorMixin'
 import genId from '../../../utils/genId'

-function mixin (component, mixin) {
+function mixin (component, mixins) {
  component.mixins = component.mixins || []
-  component.mixins.push(mixin)
+  component.mixins.push(mixins)
  return component
 }

--- a/packages/common/Select/src/Select.vue
+++ b/packages/common/Select/src/Select.vue
@ -376,7 +376,7 @@ export default {
        }
        let newValue = []
        if (Array.isArray(this.value)) {
-          const optionValues = new Set(this.synthesizedOptions.map(option => option.value))
+          const optionValues = new Set(this.synthesizedOptions.map(item => item.value))
          newValue = this.value.filter(value => optionValues.has(value) || this.memorizedValueOptionMap.has(value))
        }
        const index = newValue.findIndex(value => value === option.value)
--- a/packages/common/Table/Td/src/main.vue
+++ b/packages/common/Table/Td/src/main.vue
@ -1,6 +1,6 @@
 <template>
  <td>
-    <slot/>
+    <slot />
  </td>
 </template>

@ -10,6 +10,3 @@ export default {
  props: {}
 }
 </script>
-
-<style lang="scss" scoped>
-</style>
--- a/packages/common/TimePicker/src/main.vue
+++ b/packages/common/TimePicker/src/main.vue
@ -3,7 +3,10 @@
    <n-input
      ref="activator"
      v-model="displayTimeString"
-      class="n-date-picker-panel__time-input"
+      class="n-date-picker-panel__time-input n-time-picker-input"
+      :class="{
+        'n-time-picker-input--error': isErrorValue
+      }"
      :force-focus="active"
      placeholder="Select time"
      lazy-focus
@ -46,8 +49,8 @@
                    :key="hour"
                    class="n-time-picker-selector-time-row__item"
                    :class="{
-                      'n-time-picker-selector-time-row__item--active':
-                        hour === computedHour
+                      'n-time-picker-selector-time-row__item--active': hour === computedHour,
+                      'n-time-picker-selector-time-row__item--disabled': isHourDisabled(hour)
                    }"
                    @click="setHours(hour)"
                  >
@ -69,8 +72,8 @@
                    :key="minute"
                    class="n-time-picker-selector-time-row__item"
                    :class="{
-                      'n-time-picker-selector-time-row__item--active':
-                        minute === computedMinute
+                      'n-time-picker-selector-time-row__item--active': minute === computedMinute,
+                      'n-time-picker-selector-time-row__item--disabled': isMinuteDisabled(minute)
                    }"
                    @click="setMinutes(minute)"
                  >
@ -95,8 +98,8 @@
                      'n-time-picker-selector-time-row__item--active':
                        second === computedSecond,
                      'n-time-picker-selector-time-row__item--disabled':
-                        validator &&
-                        !validator(computedHour, computedMinute, second)
+                        isSecondDisabled(second) ||
+                        (validator && !validator(computedHour, computedMinute, second))
                    }"
                    @click="setSeconds(second)"
                  >
@ -110,7 +113,7 @@
                </n-scrollbar>
              </div>
            </div>
-            <div class="n-time-picker-selector__actions">
+            <div class="n-time-picker-selector-actions">
              <n-button
                size="tiny"
                round
@ -123,6 +126,10 @@
                round
                auto-text-color
                type="primary"
+                class="n-time-picker-selector-actions__confirm"
+                :class="{
+                  'n-time-picker-selector-actions__confirm--disabled': isErrorVal
+                }"
                @click="handleConfirmClick"
              >
                Confirm
@ -218,6 +225,24 @@ export default {
    validator: {
      type: Function,
      default: null
+    },
+    hourDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    minuteDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
+    },
+    secondDisabled: {
+      type: Function,
+      default: () => {
+        return false
+      }
    }
  },
  data () {
@ -225,7 +250,11 @@ export default {
      active: false,
      displayTimeString: this.value === null ? null : format(this.value, this.format),
      ...TIME_CONST,
-      memorizedValue: this.value
+      memorizedValue: this.value,
+      selectedHour: null,
+      selectedMinute: null,
+      selectedSecond: null
+      // isErrorVal: false
    }
  },
  computed: {
@ -244,6 +273,28 @@ export default {
    computedSecond () {
      if (this.computedTime) return format(this.computedTime, 'ss')
      else return null
+    },
+    isHourDisabled () {
+      let self = this
+      return function (hour) {
+        return self.hourDisabled(Number(hour)) || false
+      }
+    },
+    isMinuteDisabled () {
+      let self = this
+      return function (minute) {
+        return self.minuteDisabled(Number(minute), Number(self.computedHour)) || false
+      }
+    },
+    isSecondDisabled () {
+      let self = this
+      return function (second) {
+        return self.secondDisabled(Number(second), Number(this.computedMinute), Number(self.computedHour)) || false
+      }
+    },
+    isErrorVal () {
+      return this.isHourDisabled(this.computedHour) || this.isMinuteDisabled(this.computedMinute) ||
+    this.isSecondDisabled(this.computedSecond)
    }
  },
  watch: {
@ -253,8 +304,19 @@ export default {
    },
    value (value, oldValue) {
      this.$emit('change', value, oldValue)
+      // this.checkValue()
+    },
+    active (newVal) {
+      if (!newVal) {
+        if (this.isErrorVal) {
+          this.$emit('input', this.memorizedValue)
+        }
+      }
    }
  },
+  // mounted () {
+  //   this.checkValue()
+  // },
  methods: {
    afterBlur (e) {
      if (this.active) {
@ -281,25 +343,37 @@ export default {
      }
    },
    setHours (hour) {
+      if (this.isHourDisabled(hour)) {
+        return
+      }
      if (this.value === null) {
-        this.$emit('input', getTime(startOfHour(new Date())))
+        this.$emit('input', getTime(setHours(startOfHour(new Date()), hour)))
      } else {
        this.$emit('input', getTime(setHours(this.value, hour)))
      }
+      this.selectedHour = hour
    },
    setMinutes (minute) {
+      if (this.isMinuteDisabled(minute)) {
+        return
+      }
      if (this.value === null) {
-        this.$emit('input', getTime(startOfMinute(new Date())))
+        this.$emit('input', getTime(setMinutes(startOfMinute(new Date()), minute)))
      } else {
        this.$emit('input', getTime(setMinutes(this.value, minute)))
      }
+      this.selectedMinute = minute
    },
    setSeconds (second) {
+      if (this.isSecondDisabled(second)) {
+        return
+      }
      if (this.value === null) {
-        this.$emit('input', getTime(startOfSecond(new Date())))
+        this.$emit('input', getTime(setSeconds(startOfSecond(new Date()), second)))
      } else {
        this.$emit('input', getTime(setSeconds(this.value, second)))
      }
+      this.selectedSecond = second
    },
    refreshTimeString (time) {
      if (time === undefined) time = this.computedTime
@ -358,9 +432,7 @@ export default {
    },
    closeTimeSelector (returnFocus = false) {
      this.active = false
-      if (returnFocus) {
-
-      } else {
+      if (!returnFocus) {
        this.$emit('blur', this.value)
      }
    },
@ -372,6 +444,9 @@ export default {
      this.active = false
    },
    handleConfirmClick () {
+      if (this.isErrorVal) {
+        return
+      }
      this.refreshTimeString()
      this.closeTimeSelector()
    }
--- a/packages/deprecated/NimbusFormCard/src/main.vue
+++ b/packages/deprecated/NimbusFormCard/src/main.vue
@ -101,9 +101,9 @@ export default {
        body.appendChild(footerPatch)
        if (timeout) {
          window.setTimeout(() => {
-            const body = this.$refs.body
-            if (body) {
-              body.removeChild(footerPatch)
+            const bodyDom = this.$refs.body
+            if (bodyDom) {
+              bodyDom.removeChild(footerPatch)
            }
          }, timeout)
        }
@ -122,9 +122,9 @@ export default {
        body.appendChild(headerPatch)
        if (timeout) {
          window.setTimeout(() => {
-            const body = this.$refs.body
-            if (body) {
-              body.removeChild(headerPatch)
+            const bodyDom = this.$refs.body
+            if (bodyDom) {
+              bodyDom.removeChild(headerPatch)
            }
          }, timeout)
        }
--- a/packages/mixins/placeable.js
+++ b/packages/mixins/placeable.js
@ -268,12 +268,12 @@ export default {

      // console.log(this.$refs.contentInner)
      if (this.$refs.contentInner) {
-        let el = this.$refs.contentInner
+        let element = this.$refs.contentInner
        if (this.$refs.contentInner.$el) {
-          el = this.$refs.contentInner.$el
+          element = this.$refs.contentInner.$el
        }
        if (this.widthMode === 'activator') {
-          el.style.minWidth = activatorBoundingClientRect.width + 'px'
+          element.style.minWidth = activatorBoundingClientRect.width + 'px'
        }
      }
      if (el && cb) {
--- a/packages/utils/data/menuModel.js
+++ b/packages/utils/data/menuModel.js
@ -146,10 +146,10 @@ function rootedOptions (options) {
 */
 function patchedOptions (options, patches) {
  // console.log('patchedOptions input', options, patches)
-  function traverse (options, depth = 0, parentId = 0) {
-    if (!Array.isArray(options)) return
-    for (let i = 0; i < options.length; ++i) {
-      const option = options[i]
+  function traverse (items, depth = 0, parentId = 0) {
+    if (!Array.isArray(items)) return
+    for (let i = 0; i < items.length; ++i) {
+      const option = items[i]
      const id = `${parentId}_${i + 1}`
      // console.log('iterate on option', id)
      if (!hasChildren(option)) {
@ -254,13 +254,13 @@ function applyDrop ([sourceNode, targetNode, type]) {
 }

 function linkedCascaderOptions (options, type) {
-  const linkedCascaderOptions = options
+  const cascaderOptions = options
  const path = []
-  function traverse (options, parent = null, depth = 0, parentId = 0) {
-    if (!Array.isArray(options)) return
-    const length = options.length
+  function traverse (items, parent = null, depth = 0, parentId = 0) {
+    if (!Array.isArray(items)) return
+    const length = items.length
    for (let i = 0; i < length; ++i) {
-      const option = options[i]
+      const option = items[i]
      if (depth > 0) path.push(option.label)
      /**
       * option.type determine option ui status
@ -319,16 +319,15 @@ function linkedCascaderOptions (options, type) {
      }
      if (depth > 0) path.pop()
    }
-    markAvailableSiblingIds(options)
-    markFirstAvailableChildId(options)
+    markAvailableSiblingIds(items)
+    markFirstAvailableChildId(items)
  }
-  traverse(linkedCascaderOptions)
-  return linkedCascaderOptions
+  traverse(cascaderOptions)
+  return cascaderOptions
 }

-function menuOptions (linkedCascaderOptions, value, type) {
+function menuOptions (cascaderOptions, value, type) {
  const valueSet = new Set(value)
-  const checkedOptions = []
  function traverse (options) {
    if (!Array.isArray(options)) return
    const length = options.length
@ -349,7 +348,6 @@ function menuOptions (linkedCascaderOptions, value, type) {
          } else {
            option.checked = valueSet.has(option.value)
            if (option.checked) {
-              checkedOptions.push(option)
              option.checkedLeafCount = 1
              if (option.disabled) {
                option.availableLeafCount = 0
@ -370,7 +368,6 @@ function menuOptions (linkedCascaderOptions, value, type) {
          option.checkedLeafCount = NaN
        }
        option.checked = valueSet.has(option.value)
-        checkedOptions.push(option)
      } else if (type === 'single' || type === 'single-all-options') {
        if (hasChildren(option)) {
          traverse(option.children)
@ -379,18 +376,18 @@ function menuOptions (linkedCascaderOptions, value, type) {
      }
    }
  }
-  traverse(linkedCascaderOptions)
+  traverse(cascaderOptions)
  // console.log('menuOptions', linkedCascaderOptions)
-  return linkedCascaderOptions
+  return cascaderOptions
 }

 function optionPath (options, optionId) {
  const path = []
  if (optionId === null) return path
  let done = false
-  function traverseOptions (options) {
-    if (!Array.isArray(options) || !options.length) return
-    for (const option of options) {
+  function traverseOptions (items) {
+    if (!Array.isArray(items) || !items.length) return
+    for (const option of items) {
      if (done) return
      path.push(option)
      if (option.id === optionId) {
@ -429,8 +426,8 @@ function menuModel (options, activeId, trackId, loadingId) {
     */
    if (option.depth === 0) continue
    if (hasChildren(option)) {
-      model.push(option.children.map(option => {
-        return processedOption(option, activeIds, trackId, loadingId)
+      model.push(option.children.map(item => {
+        return processedOption(item, activeIds, trackId, loadingId)
      }))
    }
  }
--- a/packages/utils/dom/calcPlacementTransform.js
+++ b/packages/utils/dom/calcPlacementTransform.js
@ -3,7 +3,7 @@ export default function calcPlacementTransform (placement, activatorRect, conten
  let contentTop = null
  let contentRight = null
  let contentBottom = null
-  let suggesetedTransfromOrigin = 'none'
+  let suggesetedTransfromOrigin
  if (placement === 'top-start') {
    contentTop = activatorRect.top - contentRect.height
    contentLeft = activatorRect.left
@ -29,7 +29,6 @@ export default function calcPlacementTransform (placement, activatorRect, conten
    contentLeft = activatorRect.left - contentRect.width
    suggesetedTransfromOrigin = 'bottom right'
  } else if (placement === 'right-start') {
-    console.log(activatorRect, contentRect)
    const toWindowBottom = window.innerHeight - activatorRect.top - contentRect.height
    const toWindowRight = window.innerWidth - activatorRect.right - contentRect.width
    if (toWindowBottom < 0) {
@ -59,11 +58,11 @@ export default function calcPlacementTransform (placement, activatorRect, conten
    const toWindowRight = window.innerWidth - activatorRect.left - contentRect.width
    if (contentRect.height > toWindowBottom && activatorRect.top > toWindowBottom) {
      contentBottom = toWindowBottom + activatorRect.height
-      contentTop = null
+      // contentTop = null
      suggesetedTransfromOrigin = 'bottom'
    } else {
      contentTop = activatorRect.top + activatorRect.height
-      contentBottom = null
+      // contentBottom = null
      suggesetedTransfromOrigin = 'top'
    }
    if (toWindowRight < 0) {
--- a/styles/AdvancedTable.scss
+++ b/styles/AdvancedTable.scss
@ -110,9 +110,6 @@
        &::-webkit-scrollbar-track {
          background: transparent;
        }
-        &::-webkit-scrollbar-thumb {
-          border-radius: 2.5px;
-        }
        &::-webkit-scrollbar-corner {
          background: transparent;
        }
--- a/styles/Anchor.scss
+++ b/styles/Anchor.scss
@ -61,7 +61,7 @@
        display: flex;
        flex-direction: column;
        & > {
-            @include b(anchor-link) {
+          @include b(anchor-link) {
            padding-left: 16px;
          }
        }
@ -81,7 +81,7 @@
          padding-right: 16px;
          transition: color .3s $default-cubic-bezier;
        }
-        color: map-get($--anchor-link-title-text-color, 'default');;
+        color: map-get($--anchor-link-title-text-color, 'default');
        &:hover, &:focus {
          color: map-get($--anchor-link-title-text-color, 'hover');
        }
--- a/styles/BackTop.scss
+++ b/styles/BackTop.scss
@ -13,7 +13,7 @@
    }
    @include e(default-button) {
      @include once {
-        transition: box-shadow .3s $default-cubic-bezier, fill .3s $default-cubic-bezier;;
+        transition: box-shadow .3s $default-cubic-bezier, fill .3s $default-cubic-bezier;
        border-radius: 20px;
        height: 40px;
        width: 40px;
--- a/styles/BaseLoading.scss
+++ b/styles/BaseLoading.scss
@ -1,7 +1,6 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';

-
@keyframes n-base-loading-rotate {
  to {
    transform: rotate(1turn)
--- a/styles/BasePicker.scss
+++ b/styles/BasePicker.scss
@ -296,6 +296,4 @@
      }
    }
  }
-}
-
-
+}
--- a/styles/BaseSelectMenu.scss
+++ b/styles/BaseSelectMenu.scss
@ -102,7 +102,7 @@
      }
    }
    @include b(base-select-menu-light-bar) {
-      transition: background-color .3s $default-cubic-bezier;
+      // transition: background-color .3s $default-cubic-bezier;
      position: absolute;
      width:100%;
      background-color: $--base-select-menu-light-bar-background-color;
--- a/styles/Checkbox.scss
+++ b/styles/Checkbox.scss
@ -41,8 +41,8 @@
          transform: scale(0.5);
          transform-origin: center;
          transition: transform 0.3s $default-cubic-bezier,
-          opacity 0.3s $default-cubic-bezier,
-          border-color 0.3s $default-cubic-bezier;
+            opacity 0.3s $default-cubic-bezier,
+            border-color 0.3s $default-cubic-bezier;
        }
        @include e(check-mark) {
          content: "";
@ -56,8 +56,8 @@
          transform: scale(0.5);
          transform-origin: center;
          transition: transform 0.3s $default-cubic-bezier,
-          opacity 0.3s $default-cubic-bezier,
-          border-color 0.3s $default-cubic-bezier;
+            opacity 0.3s $default-cubic-bezier,
+            border-color 0.3s $default-cubic-bezier;
        }
      }
      @include e(label) {
--- a/styles/CustomInput.scss
+++ b/styles/CustomInput.scss
@ -27,7 +27,6 @@
      }
      .n-input-key-value__item--action {
        width: 70px;
-        display: inline-block;
        align-items: center;
        display: flex;
        margin-left: 13px;
--- a/styles/DatePicker.scss
+++ b/styles/DatePicker.scss
@ -9,6 +9,13 @@
      @include m(range) {
        // width: 382px;
      }
+      @include m (error) {
+        @include b(input) {
+          @include e(input) {
+            color: red;
+          }
+        }
+      }
    }  
  }
  
@ -90,6 +97,14 @@
        @include b(time-picker) {
          width: 145px;
        }
+        @include b(input) {
+          @include m(error) {
+            color: red;
+            @include e(input) {
+              color: red;
+            }
+          }
+        }
      }
      border-bottom: 1px solid $--date-picker-divider-color;
    }
@ -147,6 +162,12 @@
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
+        @include e(date-input) {
+          color: red;
+          @include m(error) {
+            color: red;
+          }
+        }
      }
      @include e(date) {
        @include once {
@ -218,6 +239,10 @@
            background-color: map-get($--date-picker-item-sup-color, 'active');
          }
        }
+        @include m(disabled) {
+          cursor: not-allowed;
+          opacity: 0.45;
+        }
      }
    }
    @include e(divider) {
@ -238,6 +263,12 @@
          margin-bottom: 0;
          margin-right: 12px;
        }
+        @include e(confirm) {
+          @include m(disabled) {
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        }
      }
      border-top: 1px solid $--date-picker-divider-color;
    }
--- a/styles/Input.scss
+++ b/styles/Input.scss
@ -93,7 +93,7 @@
        height: $--input-icon-size;
        width: $--input-icon-size;
        @include b(icon) {
-          font-size: $--input-icon-size;;
+          font-size: $--input-icon-size;
          path {
            transition: fill .3s $default-cubic-bezier;
          }
--- a/styles/Log.scss
+++ b/styles/Log.scss
@ -41,14 +41,18 @@
      color: $--n-secondary-text-color;
      background-color: $--n-dialog-color;
      line-height: 34px;
+      /* stylelint-disable */
      font-family: 'Lato';
+      /* stylelint-enable */
      white-space: nowrap;
      overflow: hidden;
      @include e(content) {
        display: inline-block;
        vertical-align: bottom;
        line-height: 34px;
+        /* stylelint-disable */
        font-family: 'Lato';
+        /* stylelint-enable */
        padding-left: 40px;
        padding-right: 20px;
        white-space: nowrap;
--- a/styles/Menu.scss
+++ b/styles/Menu.scss
@ -6,7 +6,6 @@ $layout-nav-height: 64px;

@include themes-mixin() {
  @include b(menu) {
-    background-color: $menu-background-color;
    width: 100%;
    transition:width .3s;
    @include b(menu-container) {
@ -44,8 +43,27 @@ $layout-nav-height: 64px;
                clip-path: polygon(100% 0, 100% 100%, 0% 100%);
              }
            }
-            @include m(selected) {
+            // @include m(selected) {
+            //   background-image: $menu-item-selected-background-image;
+            // }
+            &::before { // item background
+              content: "";
+              background-size: 300%;
              background-image: $menu-item-selected-background-image;
+              background-position: $--menu-item-background-position;
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              bottom: 0;
+              z-index: 0;
+              transition: opacity 0.3s $default-cubic-bezier;
+              opacity: 0;
+            }
+            @include m(selected) {
+              &::before {
+                opacity: .9;
+              }
            }
            @include m(disabled) {
              opacity: 0.45;
--- a/styles/Notification.scss
+++ b/styles/Notification.scss
@ -47,13 +47,13 @@
    color: $--notification-text-color;
    @include once {
      transition:
-      background-color .3s $default-cubic-bezier,
-      color .3s $default-cubic-bezier,
-      opacity .3s $default-cubic-bezier,
-      transform .3s $default-cubic-bezier,
-      max-height .3s $default-cubic-bezier,
-      margin-bottom .3s linear,
-      box-shadow .3s $default-cubic-bezier;
+        background-color .3s $default-cubic-bezier,
+        color .3s $default-cubic-bezier,
+        opacity .3s $default-cubic-bezier,
+        transform .3s $default-cubic-bezier,
+        max-height .3s $default-cubic-bezier,
+        margin-bottom .3s linear,
+        box-shadow .3s $default-cubic-bezier;
      font-family: $default-font-family;
      font-size: 14px;
      font-weight: 400;
@ -114,7 +114,6 @@
        padding-top: 16px;
        padding-bottom: 16px;
        box-sizing: border-box;
-        width: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 40px;
--- a/styles/Slider.scss
+++ b/styles/Slider.scss
@ -138,13 +138,4 @@
    background-color: $--slider-indicator-background-color;
    box-shadow: $--slider-indicator-box-shadow;
  }
-}
-
-
-
-
-
-
-
-
-
+}
--- a/styles/Statistic.scss
+++ b/styles/Statistic.scss
@ -3,7 +3,9 @@
@include themes-mixin {
  @include b(statistic) {
    @include once {
+      /* stylelint-disable */
      font-family: 'Lato';
+      /* stylelint-enable */
    }
    @include b(statistic-value) {
      @include once {
--- a/styles/Switch.scss
+++ b/styles/Switch.scss
@ -58,13 +58,6 @@
          }
        }
      }
-      &::before {
-        box-shadow: $--switch-switcher-box-shadow;
-        transition: $--switch-switcher-transition;
-      }
-      &::after {
-        transition: $--switch-switcher-transition;
-      }
      background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
      &::before {
        background-image: map-get($map: $--switch-switcher-color, $key: 'inactive');
--- a/styles/Thing.scss
+++ b/styles/Thing.scss
@ -27,9 +27,9 @@
            font-weight: 700;
            transition: color .3s $default-cubic-bezier;
          }
-          @include e(extra) {
+          // @include e(extra) {
  
-          }
+          // }
          justify-content: space-between;
          align-items: center;
        }
--- a/styles/TimePicker.scss
+++ b/styles/TimePicker.scss
@ -8,6 +8,19 @@
      display: inline-block;
      width: 180px;
    }
+    @include b(time-picker-input) {
+      @include m(error) {
+        color: red;
+        input {
+          color: red!important;
+        }
+        // @include b(input) {
+        //   @include e(input) {
+        //     color: red
+        //   }
+        // }
+      }
+    }
  }
  @include b(time-picker-selector) {
    @include once {
@ -18,10 +31,16 @@
      width: 180px;
      overflow: hidden;
      @include fade-in-scale-up-transition(time-picker);
-      @include e(actions) {
+      @include b(time-picker-selector-actions) {
        padding: 10px 15px;
        display: flex;
        justify-content: space-around;
+        @include e(confirm) {
+          @include m(disabled) {
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        }
      }
    }
    background-color: $--time-picker-background-color;
@ -58,6 +77,10 @@
          background-color: $--time-picker-item-background-color;
          color: map-get($--time-picker-text-color, 'active');
        }
+        @include m(disabled) {
+          opacity: 0.45;
+          cursor: not-allowed;
+        }
      }
    }
  }
--- a/styles/Timeline.scss
+++ b/styles/Timeline.scss
@ -144,6 +144,4 @@ $--timeline-header-margin-top: (
      }
    }
  }
-}
-
-
+}
--- a/styles/base.scss
+++ b/styles/base.scss
@ -2,7 +2,6 @@
@import './themes/vars.scss';
@import './Detachable.scss';

-
 html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
--- a/styles/mixins/color.scss
+++ b/styles/mixins/color.scss
@ -0,0 +1 @@
+//
--- a/styles/themes/dark/components/Affix.scss
+++ b/styles/themes/dark/components/Affix.scss
@ -1,3 +1,3 @@
@mixin setup-dark-affix {
-  
+  //
 }
--- a/styles/themes/dark/components/AutoComplete.scss
+++ b/styles/themes/dark/components/AutoComplete.scss
@ -1,3 +1,3 @@
@mixin setup-dark-auto-complete {
-  
+  //
 }
--- a/styles/themes/dark/components/Drawer.scss
+++ b/styles/themes/dark/components/Drawer.scss
@ -1,3 +1,3 @@
@mixin setup-dark-drawer {
-  
+  //
 }
--- a/styles/themes/dark/components/Form.scss
+++ b/styles/themes/dark/components/Form.scss
@ -1,3 +1,3 @@
@mixin setup-dark-form {
-  
+  //
 }
--- a/styles/themes/dark/components/GradientText.scss
+++ b/styles/themes/dark/components/GradientText.scss
@ -6,7 +6,7 @@
    "error": linear-gradient(252deg, $--error-6 0%, $--error-hs 100%),
    "info": linear-gradient(252deg, $--info-6 0%, $--info-hs 100%),
  ) !global;
-};
+}

 // $default-text-gradient-warning: ;
 // $default-text-gradient-success: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
--- a/styles/themes/dark/components/List.scss
+++ b/styles/themes/dark/components/List.scss
@ -1,3 +1,3 @@
@mixin setup-dark-list {
-  
+  //
 }
--- a/styles/themes/dark/components/Menu.scss
+++ b/styles/themes/dark/components/Menu.scss
@ -1,5 +1,5 @@
@mixin setup-dark-menu {
  $menu-background-color: $--n-card-color !global;
-  $menu-item-selected-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
-  $--service-kayout-item-active-color: $--primary-6 !global;
+  $menu-item-selected-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
+  $--menu-item-background-position: 0% !global;
 }
--- a/styles/themes/dark/jsIndex.scss
+++ b/styles/themes/dark/jsIndex.scss
@ -2,6 +2,7 @@

@include setup-dark-theme($in-js-env: true);

+/* stylelint-disable */
 :export {
  primaryColor: $--primary-5;
  primaryHoverColor: $--primary-6;
@ -32,4 +33,5 @@
  borderColor: $--neutral-7;
  borderOverlayColor: $--overlay-7;
  cubicBezierEaseInOut: cubic-bezier(.4, 0, .2, 1);
-}
+}
+/* stylelint-enable */
--- a/styles/themes/light/components/Affix.scss
+++ b/styles/themes/light/components/Affix.scss
@ -1,3 +1,3 @@
@mixin setup-light-affix {
-  
+  //
 }
--- a/styles/themes/light/components/AutoComplete.scss
+++ b/styles/themes/light/components/AutoComplete.scss
@ -1,3 +1,3 @@
@mixin setup-light-auto-complete {
-  
+  //
 }
--- a/styles/themes/light/components/Drawer.scss
+++ b/styles/themes/light/components/Drawer.scss
@ -1,3 +1,3 @@
@mixin setup-light-drawer {
-  
+  //
 }
--- a/styles/themes/light/components/Form.scss
+++ b/styles/themes/light/components/Form.scss
@ -1,3 +1,3 @@
@mixin setup-light-form {
-  
+  //
 }
--- a/styles/themes/light/components/List.scss
+++ b/styles/themes/light/components/List.scss
@ -1,3 +1,3 @@
@mixin setup-light-list {
-  
+  //
 }
--- a/styles/themes/light/components/Menu.scss
+++ b/styles/themes/light/components/Menu.scss
@ -1,5 +1,5 @@
@mixin setup-light-menu {
  $menu-background-color: $--neutral-10 !global;
-  $menu-item-selected-background-image: linear-gradient(47deg, $--neutral-7, $--neutral-7) !global;
-  $--service-kayout-item-active-color: $--primary-6 !global;
+  $menu-item-selected-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
+  $--menu-item-background-position: 100% !global;
 }
--- a/styles/themes/light/components/NimbusForm.scss
+++ b/styles/themes/light/components/NimbusForm.scss
@ -1,5 +1,5 @@
@mixin setup-light-nimbus-form {
-  $--nimbus-form-background-color:white !global;;
+  $--nimbus-form-background-color:white !global;
  $--nimbus-form-title-color: $--n-text-color !global;
  $--nimbus-form-text-color: $--n-secondary-text-color !global;
  $--nimbus-form-divider-color:$--n-divider-color !global;
--- a/styles/themes/light/jsIndex.scss
+++ b/styles/themes/light/jsIndex.scss
@ -2,6 +2,7 @@

@include setup-light-theme($in-js-env: true);

+/* stylelint-disable */
 :export {
  primaryColor: $--primary-5;
  primaryHoverColor: $--primary-6;
@ -32,4 +33,5 @@
  borderColor: $--neutral-6;
  borderOverlayColor: $--overlay-6;
  cubicBezierEaseInOut: cubic-bezier(.4, 0, .2, 1);
-}
+}
+/* stylelint-enable */
--- a/test/unit/specs/packages/utils/data/menuModel.spec.js
+++ b/test/unit/specs/packages/utils/data/menuModel.spec.js
@ -1,6 +1,5 @@
 import {
  rootedOptions,
-  patchedOptions,
  linkedOptions,
  menuOptions
 } from 'packages/utils/component/menuModel'