Close #2553 add trigger slot to pickers

buefy · Aug 4, 2020 · f2b6f3c · f2b6f3c
1 parent c339946
commit f2b6f3c
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 60 deletions.
diff --git a/docs/pages/components/clockpicker/api/clockpicker.js b/docs/pages/components/clockpicker/api/clockpicker.js
@@ -179,6 +179,11 @@ export default [
                 name: 'default',
                 description: 'Footer',
                 props: '—'
+            },
+            {
+                name: 'trigger',
+                description: 'Trigger',
+                props: '—'
             }
         ],
         methods: [

diff --git a/docs/pages/components/datepicker/api/datepicker.js b/docs/pages/components/datepicker/api/datepicker.js
@@ -300,6 +300,11 @@ export default [
                 name: 'header',
                 description: 'Header',
                 props: '—'
+            },
+            {
+                name: 'trigger',
+                description: 'Trigger',
+                props: '—'
             }
         ],
         events: [

diff --git a/docs/pages/components/timepicker/api/timepicker.js b/docs/pages/components/timepicker/api/timepicker.js
@@ -190,6 +190,11 @@ export default [
                 name: 'default',
                 description: 'Footer',
                 props: '—'
+            },
+            {
+                name: 'trigger',
+                description: 'Trigger',
+                props: '—'
             }
         ],
         methods: [

diff --git a/src/components/clockpicker/Clockpicker.vue b/src/components/clockpicker/Clockpicker.vue
@@ -9,27 +9,30 @@
             :append-to-body="appendToBody"
             append-to-body-copy-parent
             @active-change="onActiveChange">
-            <b-input
-                v-if="!inline"
-                ref="input"
-                slot="trigger"
-                autocomplete="off"
-                :value="formatValue(computedValue)"
-                :placeholder="placeholder"
-                :size="size"
-                :icon="icon"
-                :icon-pack="iconPack"
-                :loading="loading"
-                :disabled="disabled"
-                :readonly="!editable"
-                :rounded="rounded"
-                v-bind="$attrs"
-                :use-html5-validation="useHtml5Validation"
-                @click.native.stop="toggle(true)"
-                @keyup.native.enter="toggle(true)"
-                @change.native="onChange($event.target.value)"
-                @focus="handleOnFocus"
-                @blur="onBlur() && checkHtml5Validity()"/>
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-input
+                        ref="input"
+                        slot="trigger"
+                        autocomplete="off"
+                        :value="formatValue(computedValue)"
+                        :placeholder="placeholder"
+                        :size="size"
+                        :icon="icon"
+                        :icon-pack="iconPack"
+                        :loading="loading"
+                        :disabled="disabled"
+                        :readonly="!editable"
+                        :rounded="rounded"
+                        v-bind="$attrs"
+                        :use-html5-validation="useHtml5Validation"
+                        @click.native.stop="toggle(true)"
+                        @keyup.native.enter="toggle(true)"
+                        @change.native="onChange($event.target.value)"
+                        @focus="handleOnFocus"
+                        @blur="onBlur() && checkHtml5Validity()"/>
+                </slot>
+            </template>
             <div
                 class="card"
                 :disabled="disabled"

diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
@@ -16,26 +16,28 @@
             :append-to-body="appendToBody"
             append-to-body-copy-parent
             @active-change="onActiveChange">
-            <b-input
-                v-if="!inline"
-                ref="input"
-                slot="trigger"
-                autocomplete="off"
-                :value="formattedValue"
-                :placeholder="placeholder"
-                :size="size"
-                :icon="icon"
-                :icon-pack="iconPack"
-                :rounded="rounded"
-                :loading="loading"
-                :disabled="disabled"
-                :readonly="!editable"
-                v-bind="$attrs"
-                :use-html5-validation="false"
-                @click.native="onInputClick"
-                @keyup.native.enter="togglePicker(true)"
-                @change.native="onChange($event.target.value)"
-                @focus="handleOnFocus" />
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-input
+                        ref="input"
+                        autocomplete="off"
+                        :value="formattedValue"
+                        :placeholder="placeholder"
+                        :size="size"
+                        :icon="icon"
+                        :icon-pack="iconPack"
+                        :rounded="rounded"
+                        :loading="loading"
+                        :disabled="disabled"
+                        :readonly="!editable"
+                        v-bind="$attrs"
+                        :use-html5-validation="false"
+                        @click.native="onInputClick"
+                        @keyup.native.enter="togglePicker(true)"
+                        @change.native="onChange($event.target.value)"
+                        @focus="handleOnFocus" />
+                </slot>
+            </template>
 
             <b-dropdown-item
                 :disabled="disabled"

diff --git a/src/components/timepicker/Timepicker.vue b/src/components/timepicker/Timepicker.vue
@@ -9,25 +9,27 @@
             :append-to-body="appendToBody"
             append-to-body-copy-parent
             @active-change="onActiveChange">
-            <b-input
-                v-if="!inline"
-                ref="input"
-                slot="trigger"
-                autocomplete="off"
-                :value="formatValue(computedValue)"
-                :placeholder="placeholder"
-                :size="size"
-                :icon="icon"
-                :icon-pack="iconPack"
-                :loading="loading"
-                :disabled="disabled"
-                :readonly="!editable"
-                :rounded="rounded"
-                v-bind="$attrs"
-                :use-html5-validation="useHtml5Validation"
-                @keyup.native.enter="toggle(true)"
-                @change.native="onChange($event.target.value)"
-                @focus="handleOnFocus"/>
+            <template #trigger v-if="!inline">
+                <slot name="trigger">
+                    <b-input
+                        ref="input"
+                        autocomplete="off"
+                        :value="formatValue(computedValue)"
+                        :placeholder="placeholder"
+                        :size="size"
+                        :icon="icon"
+                        :icon-pack="iconPack"
+                        :loading="loading"
+                        :disabled="disabled"
+                        :readonly="!editable"
+                        :rounded="rounded"
+                        v-bind="$attrs"
+                        :use-html5-validation="useHtml5Validation"
+                        @keyup.native.enter="toggle(true)"
+                        @change.native="onChange($event.target.value)"
+                        @focus="handleOnFocus"/>
+                </slot>
+            </template>
 
             <b-dropdown-item
                 :disabled="disabled"