From f2d086426b8106109394972507d9ed9495535fb7 Mon Sep 17 00:00:00 2001
From: jacky <xinjie.zhang@gmail.com>
Date: Sun, 4 Dec 2022 00:05:47 +0800
Subject: [PATCH] Implement headless listbox

---
 .gitignore              |   8 ++
 README.md               |   2 +-
 components/listbox.html | 220 ++++++++++++++++++++++++++++++++++++++++
 examples/listbox.html   | 109 ++++++++++++++++++++
 package.json            |  17 ++++
 5 files changed, 355 insertions(+), 1 deletion(-)
 create mode 100644 .gitignore
 create mode 100644 components/listbox.html
 create mode 100644 examples/listbox.html
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..278c18a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+*.log
+.DS_Store
+dev/
+ref/
+node_modules/
+yarn.lock
+doc
+__tests__
\ No newline at end of file
diff --git a/README.md b/README.md
index 42f7346..f0ae0b5 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# vimesh-headless
\ No newline at end of file
+# Vimesh Headless UI
\ No newline at end of file
diff --git a/components/listbox.html b/components/listbox.html
new file mode 100644
index 0000000..ca906b0
--- /dev/null
+++ b/components/listbox.html
@@ -0,0 +1,220 @@
+<template x-component:hui="listbox" x-modelable="value" x-data="{
+    value: null,
+    get disabled() {return $prop('disabled')}
+}">
+    <slot></slot>
+    <script>
+        return {
+            _elActive: null,
+            _elSelected: null,
+            _isOpen: false,
+            getComponent(type) {
+                let comps = $vui.filterComponents(this.$el, type)
+                return comps.length > 0 ? comps[0] : null
+            },
+            get compButton() {
+                return this.getComponent('listbox-button')
+            },
+            get compLabel() {
+                return this.getComponent('listbox-label')
+            },
+            get compOptions() {
+                return this.getComponent('listbox-options')
+            },
+            open() {
+                this._isOpen = true
+                $vui.focus(this.compOptions)
+            },
+            close() { this._isOpen = false },
+            get isOpen() { return this._isOpen },
+            isActive(el) {
+                return this._elActive === el
+            },
+            isSelected(el) {
+                return this._elSelected === el
+            },
+            activate(el) {
+                this._elActive = el
+                if (this._elActive) {
+                    $vui.scrollIntoView(this._elActive)
+                }
+            },
+            get allOptions() {
+                return $vui.filterComponents(this.$el, 'listbox-option')
+            },
+            get enabledOptions() {
+                let options = []
+                this.allOptions.forEach(el => !$vui.$data(el).disabled && options.push(el))
+                return options
+            },
+            activateFirstOrSelected() {
+                if (this._elSelected) {
+                    this.activate(this._elSelected)
+                } else {
+                    this.activateFirst()
+                }
+            },
+            activateWithStep(step) {
+                let elOptions = this.enabledOptions
+                let count = elOptions.length
+                if (!this._elActive) this._elActive = elOptions[0]
+                if (count > 0) {
+                    let activeIndex = elOptions.indexOf(this._elActive)
+                    if (activeIndex === -1) activeIndex = 0
+                    let index = activeIndex + step
+                    if (index < 0)
+                        index = 0
+                    else if (index >= count)
+                        index = count - 1
+                    this.activate(elOptions[index])
+                }
+            },
+            activateFirst() {
+                let elOptions = this.enabledOptions
+                let count = elOptions.length
+                if (count > 0) this.activate(elOptions[0])
+            },
+            activateLast() {
+                let elOptions = this.enabledOptions
+                let count = elOptions.length
+                if (count > 0) this.activate(elOptions[count - 1])
+            },
+            select(el) {
+                if (!el) return
+                this._elSelected = el
+                this.value = $vui.$data(el).value
+            },
+            selectActive() {
+                if (this._elActive) {
+                    this.select(this._elActive)
+                }
+            }
+        }
+    </script>
+</template>
+
+<template x-component:hui="listbox-label" @click="$api.focusButton()">
+    <slot></slot>
+    <script>
+        return {
+            focusButton() {
+                let context = this.$api.of('listbox')
+                $vui.focus(context.compButton)
+            }
+        }
+    </script>
+</template>
+
+<template x-component:hui="listbox-button" @click="$api.toggle()" tabindex="0" @keydown="$api.onKeydown($event)">
+    <slot></slot>
+    <script>
+        return {
+            get context() { return this.of('listbox') },
+            onKeydown(e) {
+                let context = this.context
+                switch (e.key) {
+                    case 'Space':
+                    case 'Enter':
+                    case 'ArrowDown':
+                        e.preventDefault()
+                        context.open()
+                        $vui.nextTick(() => context.activateFirstOrSelected())
+                        break;
+
+                    case 'ArrowUp':
+                        e.preventDefault()
+                        context.open()
+                        $vui.nextTick(() => context.activateLast())
+                        break;
+                }
+            },
+            toggle() {
+                let context = this.context
+                if (context.isOpen)
+                    context.close()
+                else {
+                    context.open()
+                    $vui.nextTick(() => context.activateFirstOrSelected())
+                }
+            }
+        }
+    </script>
+</template>
+
+<template x-component:hui="listbox-options" tabindex="0" x-data="{
+    get isOpen(){return $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()">
+    <slot></slot>
+    <script>
+        return {
+            get context() { return this.of('listbox') },
+            get isOpen() { return this.context.isOpen },
+            onSelectActive() {
+                this.context.selectActive()
+                this.context.close()
+            },
+            onKeydown(e) {
+                let context = this.context
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault()
+                        e.stopPropagation()
+                        context.activateWithStep(1)
+                        break;
+
+                    case 'ArrowUp':
+                        e.preventDefault()
+                        e.stopPropagation()
+                        context.activateWithStep(-1)
+                        break;
+                    case 'Home':
+                    case 'PageUp':
+                        e.preventDefault()
+                        e.stopPropagation()
+                        context.activateFirst()
+                        break
+
+                    case 'End':
+                    case 'PageDown':
+                        e.preventDefault()
+                        e.stopPropagation()
+                        context.activateLast()
+                        break
+                }
+            }
+        }
+    </script>
+</template>
+
+<template x-component:hui="listbox-option" x-data="{
+    get disabled() {return $prop('disabled')},
+    get active() {return $api.active},
+    get value() {return $prop('value')},
+    get selected() {return $api.selected},
+}" @mousemove="$api.activate()" @click="$api.onSelect()" :tabindex="-1">
+    <slot></slot>
+    <script>
+        return {
+            get context() { return this.of('listbox') },
+            get active() {
+                let context = this.context
+                return context && context.isActive && context.isActive(this.$el)
+            },
+            get selected() {
+                let context = this.context
+                return context && context.isSelected && context.isSelected(this.$el)
+            },
+            activate() { this.context.activate(this.$el) },
+            select() { this.context.select(this.$el) },
+            close() { this.context.close() },
+            onSelect() {
+                if (!this.disabled) {
+                    this.select()
+                    this.close()
+                }
+            }
+        }
+    </script>
+</template>
\ No newline at end of file
diff --git a/examples/listbox.html b/examples/listbox.html
new file mode 100644
index 0000000..09c18cf
--- /dev/null
+++ b/examples/listbox.html
@@ -0,0 +1,109 @@
+<head>
+    <!--
+    <script src="https://unpkg.com/@vimesh/style" defer></script>
+    <script src="https://unpkg.com/@vimesh/ui"></script>
+    <script src="https://unpkg.com/alpinejs" defer></script>
+    -->
+
+    <script src="../node_modules/@vimesh/style/dist/vs.dev.js" defer></script>
+    <script src="../node_modules/@vimesh/ui/dist/vui.dev.js"></script>
+    <script src="../node_modules/alpinejs/dist/cdn.js" defer></script>
+
+    <script>
+        $vui.config.importMap = {
+            "*": '../components/${component}.html'
+        }
+    </script>
+    <style>
+        [x-cloak] {
+            display: none !important;
+        }
+    </style>
+
+    <script>
+
+        people = [
+            { id: 1, name: 'Wade Cooper', disabled: true },
+            { id: 2, name: 'Arlene Mccoy' },
+            { id: 3, name: 'Devon Webb' },
+            { id: 4, name: 'Tom Cook' },
+            { id: 5, name: 'Tanya Fox', disabled: true },
+            { id: 6, name: 'Hellen Schmidt' },
+            { id: 7, name: 'Caroline Schultz' },
+            { id: 8, name: 'Mason Heaney' },
+            { id: 9, name: 'Claudie Smitham' },
+            { id: 10, name: 'Emil Schaefer' },
+        ]
+
+    </script>
+</head>
+
+<body x-cloak x-import="hui/listbox" class="p-2" x-data="{
+    people, 
+    active : null,
+    keyword : '',
+    get filteredPeople() {
+        return this.people.filter((p) => !this.keyword || p.name.toLowerCase().startsWith(this.keyword))
+    }}">
+
+    <div>
+        <label for="keyword" class="block text-sm font-medium leading-5 text-gray-700"> Keyword: </label>
+        <div class="relative mt-1 rounded-md shadow-sm">
+            <input x-model="keyword" class="form-input block w-full sm:text-sm sm:leading-5" />
+        </div>
+    </div>
+
+    <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
+        <div class="mx-auto w-full max-w-xs">
+            <div class="space-y-1">
+                <hui-listbox x-model="active">
+                    <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">Assigned to
+                    </hui-listbox-label>
+
+                    <div class="relative">
+                        <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-3 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 truncate h-5" x-text="active && active.name || ' '"></span>
+                                <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
+                                        stroke="currentColor">
+                                        <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
+                                            strokeLinejoin="round" />
+                                    </svg>
+                                </span>
+                            </hui-listbox-button>
+                        </span>
+
+                        <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
+                            <hui-listbox-options
+                                class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
+                                <template x-for="person in filteredPeople" :key="person.name">
+                                    <hui-listbox-option :value="person" :class="['relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+                                            active ? 'text-white bg-indigo-600' : 'text-gray-900',
+                                            disabled ? 'bg-gray-50 text-gray-300' : ''
+                                        ]" :disabled="person.disabled">
+                                        <span :class="['block truncate', selected ? 'font-semibold' : 'font-normal']"
+                                            x-text="person.name">
+                                        </span>
+                                        <template x-if="selected">
+                                            <span
+                                                :class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-indigo-600'] ">
+                                                <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
+                                                    <path fillRule="evenodd"
+                                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                                        clipRule="evenodd" />
+                                                </svg>
+                                            </span>
+                                        </template>
+                                    </hui-listbox-option>
+                                </template>
+                            </hui-listbox-options>
+                        </div>
+                    </div>
+                </hui-listbox>
+            </div>
+        </div>
+    </div>
+
+</body>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..70bbcb2
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@vimesh/headless",
+  "version": "0.1.0",
+  "repository": "https://github.com/vimeshjs/vimesh-headless.git",
+  "author": "Jacky ZHANG <xinjie.zhang@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "http-server"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@vimesh/style": "^1.0.0",
+    "@vimesh/ui": "^0.9.5",
+    "alpinejs": "^3.10.5",
+    "http-server": "^14.1.1"
+  }
+}