Make date, time and datetime components clearable

Author: lehni

packages/admin/src/mixins/TypeMixin.js

@@ -248,10 +248,23 @@ export default {
     },
 
     // @overridable
-    async focusElement() {
-      await this.focusSchema()
+    focusElement() {
+      const { element = this } = this.$refs
+      if (element.focus) {
+        element.focus()
+      } else {
+        element.$el?.focus?.()
+      }
+    },
+
+    // @overridable
+    blurElement() {
       const { element = this } = this.$refs
-      ;(element.$el || element).focus?.()
+      if (element.blur) {
+        element.blur()
+      } else {
+        element.$el?.blur?.()
+      }
     },
 
     async focusSchema() {
@@ -260,14 +273,20 @@ export default {
       await this.tabComponent?.focus()
     },
 
-    focus() {
+    async focus() {
+      await this.focusSchema()
       this.scrollIntoView()
       this.focusElement()
     },
 
+    blur() {
+      this.blurElement()
+    },
+
     clear() {
       this.value = null
       this.changedValue = undefined
+      this.blur()
       this.onChange()
     },
 

packages/admin/src/styles/_button.scss

@@ -199,10 +199,11 @@
     display: none;
 
     @at-root .dito-component:hover {
-      // Support two levels of nesting inside .dito-component, used by TypeColor
+      // Support 3 levels of nesting inside .dito-component, used by TypeColor
       & > #{$self},
       & > * > #{$self},
-      & > * > * > #{$self} {
+      & > * > * > #{$self},
+      & > * > * > * > #{$self} {
         display: block;
       }
     }

packages/admin/src/types/DitoTypeCode.vue

@@ -94,6 +94,10 @@ export default DitoTypeComponent.register('code', {
   methods: {
     focusElement() {
       this.$el.querySelector('textarea')?.focus()
+    },
+
+    blurElement() {
+      this.$el.querySelector('textarea')?.focus()
     }
   }
 })

packages/admin/src/types/DitoTypeDate.vue

@@ -9,6 +9,13 @@
     :format="formats"
     v-bind="attributes"
   )
+    template(#after)
+      button.dito-button-clear.dito-button-overlay(
+        v-if="showClearButton"
+        :disabled="disabled"
+        @click.stop="clear"
+        @mousedown.stop
+      )
 </template>
 
 <script>

packages/admin/src/types/DitoTypeMarkup.vue

@@ -423,7 +423,11 @@ export default DitoTypeComponent.register('markup', {
     },
 
     focusElement() {
-      this.editor.focus()
+      this.editor.commands.focus()
+    },
+
+    blurElement() {
+      this.editor.commands.blur()
     }
   }
 })

packages/admin/src/types/DitoTypeMultiselect.vue

@@ -174,6 +174,10 @@ export default DitoTypeComponent.register('multiselect', {
       this.$refs.element.activate()
     },
 
+    blurElement() {
+      this.$refs.element.deactivate()
+    },
+
     onOpen() {
       this.populate = true
     },

packages/ui/src/components/DatePicker.vue

@@ -22,6 +22,10 @@ Trigger.dito-date-picker(
       @blur="onFocus(false)"
       @keydown="onKeyDown"
     )
+      template(#before)
+        slot(name="before")
+      template(#after)
+        slot(name="after")
   // icon(type="calendar" :color="iconColor")
   template(#popup)
     Calendar.dito-date-picker-popup(

packages/ui/src/components/DateTimePicker.vue

@@ -14,6 +14,10 @@
       @blur="onFocus(false)"
       @keydown="onKeyDown"
     )
+      template(#before)
+        slot(name="before")
+      template(#after)
+        slot(name="after")
     DatePicker(
       ref="date"
       v-model="currentValue"

packages/ui/src/components/TimePicker.vue

@@ -22,6 +22,10 @@ Trigger.dito-time-picker(
       @blur="onFocus(false)"
       @keydown="onKeyDown"
     )
+      template(#before)
+        slot(name="before")
+      template(#after)
+        slot(name="after")
     //- icon(type="time"
     //- :color="disabled ? '#bfbfbf' : (text ? '#666' : '#bfbfbf')"
     //- )