From ddd464aea5029661f5a89392c186eea7dca59c15 Mon Sep 17 00:00:00 2001 From: thanksameeelian Date: Mon, 27 Mar 2023 17:39:47 -0500 Subject: [PATCH 1/5] set up for kselect in kmodal cohacking --- docs/pages/kselectinkmodal.vue | 75 ++++++++++++++++++++++++++++++++++ docs/tableOfContents.js | 5 +++ lib/KSelectinKModal.vue | 15 +++++++ 3 files changed, 95 insertions(+) create mode 100644 docs/pages/kselectinkmodal.vue create mode 100644 lib/KSelectinKModal.vue diff --git a/docs/pages/kselectinkmodal.vue b/docs/pages/kselectinkmodal.vue new file mode 100644 index 000000000..4174300fb --- /dev/null +++ b/docs/pages/kselectinkmodal.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js index 96fe3ba3b..19d39b2cc 100644 --- a/docs/tableOfContents.js +++ b/docs/tableOfContents.js @@ -259,6 +259,11 @@ export default [ isCode: true, keywords: ['field', 'box'], }), + new Page({ + path: '/kselectinkmodal', + title: 'KSelectInKModal', + isCode: true, + }), new Page({ path: '/kswitch', title: 'KSwitch', diff --git a/lib/KSelectinKModal.vue b/lib/KSelectinKModal.vue new file mode 100644 index 000000000..aae83ede6 --- /dev/null +++ b/lib/KSelectinKModal.vue @@ -0,0 +1,15 @@ + + + + + From 6f2f7adf5f093472097d13c624541705176e8bdf Mon Sep 17 00:00:00 2001 From: thanksameeelian Date: Mon, 3 Apr 2023 09:49:12 -0500 Subject: [PATCH 2/5] initial implementation of new keen ui code --- lib/KSelect/KeenUiSelect.vue | 842 ++++++------------ lib/KSelect/KeenUiSelectOption.vue | 105 +-- lib/KSelect/helpers/events.js | 44 + .../mixins/RespondsToExternalClick.vue | 38 + 4 files changed, 398 insertions(+), 631 deletions(-) create mode 100644 lib/KSelect/helpers/events.js create mode 100644 lib/KSelect/mixins/RespondsToExternalClick.vue diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue index b966eec45..bc0c33e32 100644 --- a/lib/KSelect/KeenUiSelect.vue +++ b/lib/KSelect/KeenUiSelect.vue @@ -1,182 +1,136 @@ - + diff --git a/lib/KSelect/KeenUiSelectOption.vue b/lib/KSelect/KeenUiSelectOption.vue index a3b93fd31..b719bf894 100644 --- a/lib/KSelect/KeenUiSelectOption.vue +++ b/lib/KSelect/KeenUiSelectOption.vue @@ -1,14 +1,24 @@ - + diff --git a/lib/KSelect/helpers/events.js b/lib/KSelect/helpers/events.js new file mode 100644 index 000000000..f8ad93bbc --- /dev/null +++ b/lib/KSelect/helpers/events.js @@ -0,0 +1,44 @@ +export function on(event, target, callback, options = { passive: true }) { + target.addEventListener(event, callback, options); + + return () => { + target.removeEventListener(event, callback, options); + }; +} + +// eslint-disable-next-line max-params +function onKey(key, event, target, callback, options) { + return on( + event, + target, + e => { + if (!key) { + // We call back for every key if there's no specific key + callback(e); + } else if (key === e.key || key === e.keyCode) { + // Otherwise we call back only if the key matches + callback(e); + } + }, + options + ); +} + +export function onKeydown(keys, target, callback, options) { + return onKey(keys, 'keydown', target, callback, options); +} + +export function onKeyup(keys, target, callback, options) { + return onKey(keys, 'keyup', target, callback, options); +} + +export function onKeypress(keys, target, callback, options) { + return onKey(keys, 'keypress', target, callback, options); +} + +export default { + on, + onKeydown, + onKeyup, + onKeypress, +}; diff --git a/lib/KSelect/mixins/RespondsToExternalClick.vue b/lib/KSelect/mixins/RespondsToExternalClick.vue new file mode 100644 index 000000000..0e29627cb --- /dev/null +++ b/lib/KSelect/mixins/RespondsToExternalClick.vue @@ -0,0 +1,38 @@ +import events from '../helpers/events'; + +export default { + emits: ['external-click'], + + beforeUnmount() { + if (typeof this.destroyExternalClickListener === 'function') { + this.removeExternalClickListener(); + } + }, + + methods: { + addExternalClickListener(elements = [this.$el], callback = null, options = { passive: true }) { + elements = Array.isArray(elements) ? elements : [elements]; + + this.destroyExternalClickListener = events.on('click', document, e => { + for (let i = 0; i < elements.length; i++) { + if (elements[i].contains(e.target)) { + return; // End early, click was internal + } + } + + if (typeof callback === 'function') { + callback(e); + } else { + this.$emit('external-click', e); + } + }, options); + }, + + removeExternalClickListener() { + if (this.destroyExternalClickListener) { + this.destroyExternalClickListener(); + this.destroyExternalClickListener = null; + } + } + } +}; From 9253de9bfc5a8f136064b627efa077931287a251 Mon Sep 17 00:00:00 2001 From: thanksameeelian Date: Mon, 3 Apr 2023 10:09:44 -0500 Subject: [PATCH 3/5] fixed all console errors --- lib/KSelect/KeenUiSelect.vue | 14 +++--- lib/KSelect/KeenUiSelectOption.vue | 6 +-- lib/KSelect/helpers/events.js | 44 ------------------- .../mixins/RespondsToExternalClick.vue | 2 +- 4 files changed, 11 insertions(+), 55 deletions(-) delete mode 100644 lib/KSelect/helpers/events.js diff --git a/lib/KSelect/KeenUiSelect.vue b/lib/KSelect/KeenUiSelect.vue index bc0c33e32..c5181560e 100644 --- a/lib/KSelect/KeenUiSelect.vue +++ b/lib/KSelect/KeenUiSelect.vue @@ -144,14 +144,14 @@