wip listbox concept

2026-06-07 07:12:23 +03:00 · 2022-11-16 13:58:06 -08:00
parent 4942cb20ac
commit 6c9a480a04
8 changed files with 203 additions and 36 deletions
@@ -1,17 +1,39 @@
 <template>
  <div id="app">
-    <v-select v-model="selected" v-bind="config" />
+    <ListBox
+      v-model="selected"
+      :open="open"
+      class="px-2 text-left border border-gray-500 rounded w-64 relative bg-blue-100 h-12"
+    >
+      {{ selected?.label }}
+
+      <ListBoxMenu
+        class="absolute inset-0 top-12 w-full h-64 overflow-y-scroll bg-red-100 space-y-1"
+      >
+        <ListBoxOption
+          @click="selected = country"
+          v-for="country in config.options"
+          :key="country.id"
+          class="px-2 py-1"
+        >
+          {{ country.label }}
+        </ListBoxOption>
+      </ListBoxMenu>
+    </ListBox>
  </div>
 </template>

 <script>
-import vSelect from '@/components/Select.vue'
 import countries from '../docs/.vuepress/data/countryCodes.js'
+import ListBox from '@/components/ListBox/ListBox.vue'
+import ListBoxMenu from '@/components/ListBox/ListBoxMenu.vue'
+import ListBoxOption from '@/components/ListBox/ListBoxOption.vue'

 export default {
-  components: { vSelect },
+  components: { ListBoxOption, ListBoxMenu, ListBox },
  data: () => ({
    selected: null,
+
    config: {
      options: countries,
    },
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vue Select Dev</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vue Select Dev</title>
+  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body>
 <div id="app"></div>
@@ -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": {
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ListBoxInjectionKey } from '@/keys.js'
+import type { ComputedRef, PropType } from 'vue'
+import { provide, defineEmits, computed, ref } from 'vue'
+
+export interface ListBoxProps {
+  modelValue: PropType<unknown>
+  open?: boolean
+}
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = withDefaults(defineProps<ListBoxProps>(), {
+  open: false,
+})
+
+export type ComputedListBoxInjectionProps = ComputedRef<ListBoxProps>
+
+provide<ComputedListBoxInjectionProps>(
+  ListBoxInjectionKey,
+  computed<ListBoxProps>(() => ({
+    open: props.open,
+    modelValue: props.modelValue,
+  }))
+)
+</script>
+
+<template>
+  <button
+    tabindex="0"
+    type="button"
+    aria-haspopup="true"
+    :aria-expanded="open"
+    @click.exact="open = !open"
+  >
+    <slot></slot>
+  </button>
+</template>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { defineProps, inject } from 'vue'
+import { ListBoxInjectionKey } from '@/keys'
+import type { ComputedListBoxInjectionProps } from '@/components/ListBox/ListBox.vue'
+
+withDefaults(
+  defineProps<{
+    as?: string
+  }>(),
+  {
+    as: 'div',
+  }
+)
+
+const listBoxProps = inject<ComputedListBoxInjectionProps>(ListBoxInjectionKey)
+</script>
+
+<template>
+  <Component :is="as" v-show="listBoxProps?.open">
+    <slot></slot>
+  </Component>
+</template>
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+withDefaults(
+  defineProps<{
+    as?: string
+  }>(),
+  {
+    as: 'div',
+  }
+)
+</script>
+
+<template>
+  <Component :is="as">
+    <slot></slot>
+  </Component>
+</template>
@@ -0,0 +1 @@
+export const ListBoxInjectionKey = Symbol()
@@ -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"
				`@@ -0,0 +1 @@`
				`export const ListBoxInjectionKey = Symbol()`