Fix issues in menu and listbox

components/listbox.html

@@ -5,7 +5,7 @@
 }">
 
  <input type="hidden" :name="$prop('name')" :value="$prop('value', '')">
- 
+
  <slot></slot>
  <script>
  const _ = $vui._
@@ -72,9 +72,13 @@
  select(val) {
  if (!this.multiple)
  this.value = val
- else if (_.isArray(this.value))
- this.value.indexOf(val) === -1 && this.value.push(val)
- else
+ else if (_.isArray(this.value)) {
+ let index = this.value.indexOf(val)
+ if (index === -1)
+ this.value.push(val)
+ else
+ this.value.splice(index, 1)
+ } else
  this.value = [val]
  },
  selectActive() {
@@ -205,7 +209,8 @@
  onSelect() {
  if (!this.disabled) {
  this.select()
- this.close()
+ if (!this.context.multiple)
+ this.close()
  }
  }
  }

components/menu.html

@@ -117,8 +117,8 @@
 <template x-component:hui="menu-items" tabindex="0" x-data="{
  get isOpen(){return $api && $api.isOpen}
 }" x-trap="isOpen" x-show="isOpen" @click.outside="$api.context.close()" @keydown="$api.onKeydown($event)"
- @keydown.escape.stop.prevent="$api.context.close()" @keydown.enter.stop.prevent="$api.onSelectActive()"
- @keydown.space.stop.prevent="$api.onSelectActive()">
+ @keydown.tab.stop.prevent="$api.context.close()" @keydown.escape.stop.prevent="$api.context.close()"
+ @keydown.enter.stop.prevent="$api.onSelectActive()" @keydown.space.stop.prevent="$api.onSelectActive()">
  <slot></slot>
  <script>
  return {

components/popover.html

@@ -42,7 +42,8 @@
  }
  </script>
 </template>
-<template x-component:hui.unwrap="popover-button" @click="$api.onToggle()" @keydown.enter.stop.prevent="$api.onToggle()"
+<template x-component:hui.unwrap="popover-button" @click="$api.onToggle()"
+ @keydown.escape.stop.prevent="$api.context.close()" @keydown.enter.stop.prevent="$api.onToggle()"
  @keydown.space.stop.prevent="$api.onToggle()" @keyup.space.stop.prevent="" @keydown.tab="$api.onTabDown($event)"
  @keyup.tab="$api.onTabUp($event)">
  <button>
@@ -89,7 +90,8 @@
 </template>
 <template x-component:hui="popover-panel" x-show="$api && $api.context.isOpen"
  x-effect="$api && $api.context.isOpen && $prop('focus') && $focus.first()"
- @mousedown.window="$api && $api.onMouseDown($event)" @keydown.tab="$api.onTab($event)">
+ @keydown.escape.stop.prevent="$api.context.close()" @mousedown.window="$api && $api.onMouseDown($event)"
+ @keydown.tab="$api.onTab($event)">
  <slot></slot>
  <script>
  return {

playground/components/header.html

@@ -1,7 +1,7 @@
 <template x-component:app="header" class="bg-gray-900 flex">
  <img src="./assets/logo.svg" class="w-8 inline-block flex-none">
  <span class="ml-2 text-2xl text-white align-middle flex-1"> Vimesh Headless UI </span>
- <a class="text-gray-400 hover:text-white flex-none" href="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/vimeshjs/vimesh-headless"><span class="sr-only">GitHub repository</span>
+ <a class="text-gray-400 hover:text-white flex-none" target="_blank" href="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/vimeshjs/vimesh-headless"><span class="sr-only">GitHub repository</span>
  <svg viewBox="0 0 16 16" fill="currentColor" class="h-8 w-8 mx-2"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a>
  <script>
  return {

playground/components/key-caster.html

@@ -0,0 +1,61 @@
+<script>
+ let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
+ let KeyDisplay = isMac
+ ? {
+ ArrowUp: '↑',
+ ArrowDown: '↓',
+ ArrowLeft: '←',
+ ArrowRight: '→',
+ Home: '↖',
+ End: '↘',
+ Alt: '⌥',
+ CapsLock: '⇪',
+ Meta: '⌘',
+ Shift: '⇧',
+ Control: '⌃',
+ Backspace: '⌫',
+ Delete: '⌦',
+ Enter: '↵',
+ Escape: '⎋',
+ Tab: '⇥',
+ ShiftTab: '⇤',
+ PageUp: '⇞',
+ PageDown: '⇟',
+ ' ': '␣',
+ }
+ : {
+ ArrowUp: '↑',
+ ArrowDown: '↓',
+ ArrowLeft: '←',
+ ArrowRight: '→',
+ Meta: 'Win',
+ Control: 'Ctrl',
+ Backspace: '⌫',
+ Delete: 'Del',
+ Escape: 'Esc',
+ PageUp: 'PgUp',
+ PageDown: 'PgDn',
+ ' ': '␣',
+ }
+
+ function setupKeyCasterData() {
+ let keys = []
+ return {
+ keys,
+ onKeyDown(event) {
+ this.keys.unshift(
+ event.shiftKey && event.key !== 'Shift'
+ ? KeyDisplay[`Shift${event.key}`] || event.key
+ : KeyDisplay[event.key] || event.key
+ )
+ setTimeout(() => this.keys.pop(), 2000)
+ }
+ }
+ }
+</script>
+<template x-component:app.unwrap="key-caster" x-data="setupKeyCasterData()" @keydown.window="onKeyDown($event)">
+ <div class="pointer-events-none fixed right-4 bottom-68 z-50 cursor-default select-none overflow-hidden rounded-md bg-blue-800 px-4 py-2 text-2xl tracking-wide text-blue-100 shadow"
+ x-show="keys.length > 0">
+ <span x-text="keys.slice().reverse().join(' ')"></span>
+ </div>
+</template>

playground/components/side-menu.html

@@ -2,17 +2,21 @@
  <ul>
  <template x-for="item in routes" :key="item.path">
  <template x-if="!item.hidden">
- <a :href="'#' + item.path">
- <li x-text="item.name"
- class="flex items-center whitespace-nowrap rounded py-1 px-6 font-medium transition-colors duration-200 hover:bg-gray-700 hover:text-white lg:py-1 lg:px-4 lg:text-sm text-white">
+ <a :href="'#' + item.path" tabindex="-1">
+ <li x-text="item.name" tabindex="-1"
+ class="flex items-center whitespace-nowrap rounded py-1 px-6 font-medium transition-colors duration-200 hover:bg-gray-700 lg:py-1 lg:px-4 lg:text-sm "
+ :class="$api && $api.isCurrent(item) ? 'text-white' : 'text-gray-500 hover:text-gray-200'"
+ >
  </li>
  </a>
  </template>
  </template>
  </ul>
  <script>
  return {
-
+ isCurrent(item) {
+ return this.$route.path === item.path
+ }
  }
  </script>
 </template>

playground/dev.html

@@ -32,7 +32,7 @@
  { name: 'Tabs', path: '/tabs/basic', page: 'tabs/basic' },
  { name: 'Combobox', path: '/combobox/basic', page: 'combobox/basic' },
  { name: 'Listbox', path: '/listbox/basic', page: 'listbox/basic' },
- { name: 'Listbox Multi', path: '/listbox/multi', page: 'listbox/multi' },
+ { name: 'Listbox Multi Select', path: '/listbox/multi', page: 'listbox/multi' },
  { name: 'Radio Group', path: '/radio-group/basic', page: 'radio-group/basic' },
  { name: 'Something Wrong!', path: '(.*)', page: 'home', hidden: true }
  ]
@@ -45,7 +45,7 @@
  </style>
 </head>
 
-<body x-cloak x-import="app:header,footer,side-menu,code-viewer"
+<body x-cloak x-import="app:header,footer,side-menu,code-viewer,key-caster"
  class="h-full w-full font-sans text-gray-900 antialiased flex flex-col" x-data="root">
  <app-header class="flex-none h-16 px-1 py-3 flex"></app-header>
  <div class="flex-1 flex">
@@ -56,6 +56,7 @@
  language="html" :code="$route.code"></app-code-viewer>
  </div>
  </div>
+ <app-key-caster></app-key-caster>
  <template x-component:app="router-view" x-shtml="$api && $api.pageContent || ''"
  x-import:dynamic="$api && $api.pageToImport">
  <script>

playground/pages/listbox/multi.html

@@ -34,7 +34,7 @@
  <span class="inline-block w-full rounded-md shadow-sm">
  <hui-listbox-button
  class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
- <span class="block flex flex-wrap gap-2">
+ <span class="flex flex-wrap gap-2">
  <template x-if="activePersons.length === 0">
  <span class="p-0.5">Empty</span>
  </template>

playground/pages/menu/basic.html

@@ -39,7 +39,7 @@
 
 <template x-component:app.unwrap="menu-item">
  <hui-menu-item>
- <a :href="$prop('href')" :class="[
+ <a tabindex="-1" :href="$prop('href')" :class="[
  'flex justify-between w-full text-left px-4 py-2 text-sm leading-5',
  active ? 'bg-indigo-500 text-white' : 'text-gray-700',
  disabled ? 'cursor-not-allowed opacity-50' : '']">

playground/pages/menu/with-popper.html

@@ -1,21 +1,28 @@
 <script src="https://unpkg.com/@popperjs/core@2"></script>
-<template x-component:page="menu-with-popper" x-import="hui:menu" x-data="{
- trigger: null,
- container: null,
- initPopper(){
- if (!this.trigger || !this.container) return
- Popper.createPopper(this.trigger,this.container, {
- placement: 'bottom-end',
- strategy: 'fixed',
- modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
- })
+<script>
+ function setupMenuWithPopperData() {
+ return {
+ trigger: null,
+ container: null,
+ init() {
+ $vui.effect(() => {
+ if (!this.trigger || !this.container) return
+ Popper.createPopper(this.trigger, this.container, {
+ placement: 'bottom-end',
+ strategy: 'fixed',
+ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
+ })
+ })
+ }
+ }
  }
-}">
+</script>
+<template x-component:page="menu-with-popper" x-import="hui:menu" x-data="setupMenuWithPopperData()">
  <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
  <div class="mt-64 inline-block text-left">
  <hui-menu id="id-menu">
  <span class="inline-flex rounded-md shadow-sm">
- <hui-menu-button x-init="trigger=$el;initPopper()"
+ <hui-menu-button x-init="trigger=$el"
  class="focus:shadow-outline-blue inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out hover:text-gray-500 focus:border-blue-300 focus:outline-none active:bg-gray-50 active:text-gray-800">
  <span>Options</span>
  <svg class="ml-2 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -27,7 +34,7 @@
  </span>
 
  <template x-teleport="body">
- <hui-menu-items x-init="container=$el;initPopper()"
+ <hui-menu-items x-init="container=$el"
  class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none">
  <div class="px-4 py-3">
  <p class="text-sm leading-5">Signed in as</p>

playground/pages/popover/basic.html

@@ -1,16 +1,39 @@
+<script src="https://unpkg.com/@popperjs/core@2"></script>
 <script>
  function setupPopoverBasicData() {
  let links = ['First', 'Second', 'Third', 'Fourth']
- //trigger1, container1, trigger2, container2
- return { links }
+ return {
+ links,
+ trigger1: null,
+ container1: null,
+ trigger2: null,
+ container2: null,
+ init() {
+ $vui.effect(() => {
+ if (!this.trigger1 || !this.container1) return
+ Popper.createPopper(this.trigger1, this.container1, {
+ placement: 'bottom-start',
+ strategy: 'fixed'
+ })
+ })
+
+ $vui.effect(() => {
+ if (!this.trigger2 || !this.container2) return
+ Popper.createPopper(this.trigger2, this.container2, {
+ placement: 'bottom-start',
+ strategy: 'fixed'
+ })
+ })
+ }
+ }
  }
 </script>
 <template x-component:page="popover-basic" x-import="hui:popover" x-data="setupPopoverBasicData()">
  <div class="flex items-center justify-center space-x-12 p-12">
  <button>Previous</button>
 
- <hui-popover-group as="nav" ar-label="Mythical University" class="flex space-x-3">
- <hui-popover class="relative"> 
+ <hui-popover-group ar-label="Mythical University" class="flex space-x-3">
+ <hui-popover class="relative">
  <hui-popover-overlay x-transition:enter="transition ease-out duration-300 transform"
  x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
  x-transition:leave="transition ease-in duration-300 transform"
@@ -42,36 +65,39 @@
  </hui-popover-panel>
  </hui-popover>
 
- <!--
- <hui-popover as="div" class="relative">
- <hui-popover-button ref="trigger1"
+ <hui-popover class="relative">
+ <hui-popover-button x-init="trigger1=$el"
  class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
  Portal</hui-popover-button>
- <Portal>
- <PopoverPanel ref="container1" class="flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
- <button v-for="(link, i) of links" :key="i"
- class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
- Portal - {{ link }}
- </button>
- </PopoverPanel>
- </Portal>
+ <template x-teleport="body">
+ <hui-popover-panel x-init="container1=$el"
+ class="flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
+ <template x-for="(link, i) of links" :key="i">
+ <button
+ class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
+ Portal - <span x-text="link"></span>
+ </button>
+ </template>
+ </hui-popover-panel>
+ </template>
  </hui-popover>
 
- <hui-popover as="div" class="relative">
- <hui-popover-button ref="trigger2"
+ <hui-popover class="relative">
+ <hui-popover-button x-init="trigger2=$el"
  class="border-2 border-transparent bg-gray-300 px-3 py-2 focus:border-blue-900 focus:outline-none">
  Focus in portal</hui-popover-button>
- <Portal>
- <PopoverPanel ref="container2" focus
+ <template x-teleport="body">
+ <hui-popover-panel x-init="container2=$el" focus
  class="flex w-64 flex-col border-2 border-blue-900 bg-gray-100">
- <button v-for="(link, i) of links" :key="i"
- class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
- Focus in Portal - {{ link }}
- </button>
- </PopoverPanel>
- </Portal>
+ <template x-for="(link, i) of links" :key="i">
+ <button
+ class="border-2 border-transparent px-3 py-2 text-left hover:bg-gray-200 focus:border-blue-900 focus:bg-gray-200 focus:outline-none">
+ Focus in Portal - <span x-text="link"></span>
+ </button>
+ </template>
+ </hui-popover-panel>
+ </template>
  </hui-popover>
- -->
  </hui-popover-group>
 
  <button>Next</button>