From 6c9a480a04175f61b13804a72169715829db090f Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Wed, 16 Nov 2022 13:58:06 -0800 Subject: [PATCH 1/4] wip listbox concept --- dev/Dev.vue | 28 +++++- index.html | 7 +- package.json | 2 +- src/components/ListBox/ListBox.vue | 38 +++++++ src/components/ListBox/ListBoxMenu.vue | 22 ++++ src/components/ListBox/ListBoxOption.vue | 18 ++++ src/keys.js | 1 + yarn.lock | 123 +++++++++++++++++------ 8 files changed, 203 insertions(+), 36 deletions(-) create mode 100644 src/components/ListBox/ListBox.vue create mode 100644 src/components/ListBox/ListBoxMenu.vue create mode 100644 src/components/ListBox/ListBoxOption.vue create mode 100644 src/keys.js diff --git a/dev/Dev.vue b/dev/Dev.vue index ab8e964..df64178 100644 --- a/dev/Dev.vue +++ b/dev/Dev.vue @@ -1,17 +1,39 @@
diff --git a/package.json b/package.json index 8b89fab..a3170b7 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "typescript": "^4.7.4", "vite": "^3.0.0", "vitest": "^0.18.1", - "vue": "^3.2.37", + "vue": "^3.2.45", "vue-tsc": "^0.38.8" }, "config": { diff --git a/src/components/ListBox/ListBox.vue b/src/components/ListBox/ListBox.vue new file mode 100644 index 0000000..b5d9cac --- /dev/null +++ b/src/components/ListBox/ListBox.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/components/ListBox/ListBoxMenu.vue b/src/components/ListBox/ListBoxMenu.vue new file mode 100644 index 0000000..9bd6132 --- /dev/null +++ b/src/components/ListBox/ListBoxMenu.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/ListBox/ListBoxOption.vue b/src/components/ListBox/ListBoxOption.vue new file mode 100644 index 0000000..0fb17e7 --- /dev/null +++ b/src/components/ListBox/ListBoxOption.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/keys.js b/src/keys.js new file mode 100644 index 0000000..bfb290d --- /dev/null +++ b/src/keys.js @@ -0,0 +1 @@ +export const ListBoxInjectionKey = Symbol() diff --git a/yarn.lock b/yarn.lock index 4aea1f1..c43e7a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -765,6 +765,16 @@ estree-walker "^2.0.2" source-map "^0.6.1" +"@vue/compiler-core@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b" + integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/shared" "3.2.45" + estree-walker "^2.0.2" + source-map "^0.6.1" + "@vue/compiler-dom@3.2.37", "@vue/compiler-dom@^3.2.37": version "3.2.37" resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz#10d2427a789e7c707c872da9d678c82a0c6582b5" @@ -773,7 +783,31 @@ "@vue/compiler-core" "3.2.37" "@vue/shared" "3.2.37" -"@vue/compiler-sfc@3.2.37", "@vue/compiler-sfc@^3.2.37": +"@vue/compiler-dom@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce" + integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw== + dependencies: + "@vue/compiler-core" "3.2.45" + "@vue/shared" "3.2.45" + +"@vue/compiler-sfc@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70" + integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/compiler-core" "3.2.45" + "@vue/compiler-dom" "3.2.45" + "@vue/compiler-ssr" "3.2.45" + "@vue/reactivity-transform" "3.2.45" + "@vue/shared" "3.2.45" + estree-walker "^2.0.2" + magic-string "^0.25.7" + postcss "^8.1.10" + source-map "^0.6.1" + +"@vue/compiler-sfc@^3.2.37": version "3.2.37" resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz#3103af3da2f40286edcd85ea495dcb35bc7f5ff4" integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg== @@ -797,6 +831,14 @@ "@vue/compiler-dom" "3.2.37" "@vue/shared" "3.2.37" +"@vue/compiler-ssr@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2" + integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ== + dependencies: + "@vue/compiler-dom" "3.2.45" + "@vue/shared" "3.2.45" + "@vue/eslint-config-prettier@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-7.0.0.tgz#44ab55ca22401102b57795c59428e9dade72be34" @@ -825,43 +867,66 @@ estree-walker "^2.0.2" magic-string "^0.25.7" -"@vue/reactivity@3.2.37", "@vue/reactivity@^3.2.37": +"@vue/reactivity-transform@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d" + integrity sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/compiler-core" "3.2.45" + "@vue/shared" "3.2.45" + estree-walker "^2.0.2" + magic-string "^0.25.7" + +"@vue/reactivity@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0" + integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A== + dependencies: + "@vue/shared" "3.2.45" + +"@vue/reactivity@^3.2.37": version "3.2.37" resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.37.tgz#5bc3847ac58828e2b78526e08219e0a1089f8848" integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A== dependencies: "@vue/shared" "3.2.37" -"@vue/runtime-core@3.2.37": - version "3.2.37" - resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.37.tgz#7ba7c54bb56e5d70edfc2f05766e1ca8519966e3" - integrity sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ== +"@vue/runtime-core@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f" + integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A== dependencies: - "@vue/reactivity" "3.2.37" - "@vue/shared" "3.2.37" + "@vue/reactivity" "3.2.45" + "@vue/shared" "3.2.45" -"@vue/runtime-dom@3.2.37": - version "3.2.37" - resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz#002bdc8228fa63949317756fb1e92cdd3f9f4bbd" - integrity sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw== +"@vue/runtime-dom@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59" + integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA== dependencies: - "@vue/runtime-core" "3.2.37" - "@vue/shared" "3.2.37" + "@vue/runtime-core" "3.2.45" + "@vue/shared" "3.2.45" csstype "^2.6.8" -"@vue/server-renderer@3.2.37": - version "3.2.37" - resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.37.tgz#840a29c8dcc29bddd9b5f5ffa22b95c0e72afdfc" - integrity sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA== +"@vue/server-renderer@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f" + integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g== dependencies: - "@vue/compiler-ssr" "3.2.37" - "@vue/shared" "3.2.37" + "@vue/compiler-ssr" "3.2.45" + "@vue/shared" "3.2.45" "@vue/shared@3.2.37", "@vue/shared@^3.2.37": version "3.2.37" resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.37.tgz#8e6adc3f2759af52f0e85863dfb0b711ecc5c702" integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw== +"@vue/shared@3.2.45": + version "3.2.45" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2" + integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg== + "@vue/test-utils@^2.0.2": version "2.0.2" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.2.tgz#0b5edd683366153d5bc5a91edc62f292118710eb" @@ -5481,16 +5546,16 @@ vue-tsc@^0.38.8: dependencies: "@volar/vue-typescript" "0.38.8" -vue@^3.2.37: - version "3.2.37" - resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e" - integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ== +vue@^3.2.45: + version "3.2.45" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8" + integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA== dependencies: - "@vue/compiler-dom" "3.2.37" - "@vue/compiler-sfc" "3.2.37" - "@vue/runtime-dom" "3.2.37" - "@vue/server-renderer" "3.2.37" - "@vue/shared" "3.2.37" + "@vue/compiler-dom" "3.2.45" + "@vue/compiler-sfc" "3.2.45" + "@vue/runtime-dom" "3.2.45" + "@vue/server-renderer" "3.2.45" + "@vue/shared" "3.2.45" w3c-hr-time@^1.0.2: version "1.0.2" From 5a5e9378d9eff0c480b8b83c187a07e88e169ce9 Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Wed, 16 Nov 2022 20:55:04 -0800 Subject: [PATCH 2/4] allow open prop to control menu state --- dev/Dev.vue | 40 +++++++----------------- docs/guide/opening.md | 7 ++--- src/components/ListBox/ListBox.vue | 40 ++++++++++++++++++------ src/components/ListBox/ListBoxMenu.vue | 6 ++-- src/components/ListBox/ListBoxOption.vue | 15 +++++++-- src/{keys.js => keys.ts} | 0 6 files changed, 58 insertions(+), 50 deletions(-) rename src/{keys.js => keys.ts} (100%) diff --git a/dev/Dev.vue b/dev/Dev.vue index df64178..85b1762 100644 --- a/dev/Dev.vue +++ b/dev/Dev.vue @@ -1,22 +1,26 @@