refactor(time-picker): invalid time input el style

packages/common/TimePicker/src/main.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="n-time-picker">
+  <div
+    class="n-time-picker"
+    :class="{
+      'n-time-picker--invalid': isValueInvalid,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
+  >
     <n-input
       ref="activator"
       v-model="displayTimeString"
-      class="n-date-picker-panel__time-input n-time-picker-input"
+      class="n-time-picker-input"
       :force-focus="active"
       placeholder="Select time"
       lazy-focus
@@ -282,17 +288,12 @@ export default {
     }
   },
   watch: {
-    computedTime (time) {
-      this.refreshTimeString(time)
+    computedTime (value) {
+      this.refreshTimeString(value)
       this.$nextTick().then(this.scrollTimer)
     },
     value (value, oldValue) {
       this.$emit('change', value, oldValue)
-      this.$nextTick().then(() => {
-        if (!this.isValueInvalid) {
-          this.memorizedValue = this.value
-        }
-      })
     },
     active (value) {
       if (this.isValueInvalid) {

styles/TimePicker.scss

@@ -9,6 +9,27 @@
       width: 180px;
     }
   }
+  @include b(time-picker) {
+    @include m(invalid) {
+      & > {
+        @include b(input) {
+          @include e(input) {
+            text-decoration: line-through;
+            text-decoration-color: $--time-picker-text-decoration-color;
+          }
+        }
+      }
+    }
+    @include m(transition-disabled) {
+      & > {
+        @include b(input) {
+          input {
+            transition: none;
+          }
+        }
+      }
+    }
+  }
   @include b(time-picker-selector) {
     @include once {
       outline: none;

styles/themes/dark/components/TimePicker.scss

@@ -5,6 +5,7 @@
     'active': $--n-primary-color,
     'invalid': $--error-6
   ) !global;
+  $--time-picker-text-decoration-color: $--n-secondary-text-color !global;
   $--time-picker-item-background-color: (
     'hover': change-color($--n-primary-color, $alpha: .2),
     'invalid': change-color($--error-6, $alpha: .2)

styles/themes/light/components/TimePicker.scss

@@ -5,6 +5,7 @@
     'active': $--n-primary-color,
     'invalid': $--error-6
   ) !global;
+  $--time-picker-text-decoration-color: $--n-secondary-text-color !global;
   $--time-picker-item-background-color: (
     'hover': change-color($--n-primary-color, $alpha: .15),
     'invalid': change-color($--error-6, $alpha: .15)