Add radio-group

components/listbox.html

@@ -8,18 +8,14 @@
  _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')
+ return this.$findOne('listbox-button')
  },
  get compLabel() {
- return this.getComponent('listbox-label')
+ return this.$findOne('listbox-label')
  },
  get compOptions() {
- return this.getComponent('listbox-options')
+ return this.$findOne('listbox-options')
  },
  open() {
  this._isOpen = true
@@ -40,7 +36,7 @@
  }
  },
  get allOptions() {
- return $vui.filterComponents(this.$el, 'listbox-option')
+ return this.$find('listbox-option')
  },
  get enabledOptions() {
  let options = []
@@ -98,7 +94,7 @@
  <script>
  return {
  focusButton() {
- let context = this.$api.of('listbox')
+ let context = this.$api.$of('listbox')
  $vui.focus(context.compButton)
  }
  }
@@ -109,7 +105,7 @@
  <slot></slot>
  <script>
  return {
- get context() { return this.of('listbox') },
+ get context() { return this.$of('listbox') },
  onKeydown(e) {
  let context = this.context
  switch (e.key) {
@@ -142,14 +138,14 @@
 </template>
 
 <template x-component:hui="listbox-options" tabindex="0" x-data="{
- get isOpen(){return $api.isOpen}
+ 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()">
  <slot></slot>
  <script>
  return {
- get context() { return this.of('listbox') },
+ get context() { return this.$of('listbox') },
  get isOpen() { return this.context.isOpen },
  onSelectActive() {
  this.context.selectActive()
@@ -197,7 +193,7 @@
  <slot></slot>
  <script>
  return {
- get context() { return this.of('listbox') },
+ get context() { return this.$of('listbox') },
  get active() {
  let context = this.context
  return context && context.isActive && context.isActive(this.$el)

components/radio-group.html

@@ -0,0 +1,31 @@
+<template x-component:hui="radio-group" x-modelable="value" x-data="{value : null}">
+ <slot></slot>
+ <script>
+ return {
+ isChecked(el) {
+ return $vui.$data(el).$prop('value') === this.value
+ },
+ check(val) {
+ this.value = val
+ }
+ }
+ </script>
+</template>
+
+<template x-component:hui="radio-group-option" x-data="{
+ get checked() {return $api.context.isChecked($el)},
+}" @click="$api.onCheck()">
+ <slot></slot>
+ <script>
+ return {
+ onMounted() {
+ let container = this.$closest('radio-group')
+ if (!container) throw Error('radio-group-option should be contained in radio-group')
+ },
+ get context() { return this.$of('radio-group') },
+ onCheck() {
+ this.context.check(this.$prop('value'))
+ }
+ }
+ </script>
+</template>

components/switch.html

@@ -3,8 +3,7 @@
 </template>
 
 <template x-component:hui="switch" tabindex="0" x-modelable="checked" x-data="{
- checked: false,
- get disabled() {return $prop('disabled')}
+ checked: false
 }" @click="$api.toggle()">
  <slot></slot>
  <template x-if="checked">

examples/listbox.html → examples/listbox/listbox.html

@@ -5,13 +5,13 @@
  <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 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'
+ "*": '/components/${component}.html'
  }
  </script>
  <style>
@@ -23,14 +23,14 @@
  <script>
 
  people = [
- { id: 1, name: 'Wade Cooper', disabled: true },
+ { id: 1, name: 'Wade Cooper' },
  { 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: 8, name: 'Mason Heaney', disabled: true },
  { id: 9, name: 'Claudie Smitham' },
  { id: 10, name: 'Emil Schaefer' },
  ]
@@ -40,18 +40,8 @@
 
 <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>
+ active : people[0]
+}">
 
  <div class="flex h-full w-screen justify-center bg-gray-50 p-12">
  <div class="mx-auto w-full max-w-xs">
@@ -78,7 +68,7 @@
  <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">
+ <template x-for="person in people" :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' : ''

examples/radio-group/radio-group.html

@@ -0,0 +1,98 @@
+<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>
+ let data = {
+ active: 'access-2',
+ access: [
+ {
+ id: 'access-1',
+ name: 'Public access',
+ description: 'This project would be available to anyone who has the link',
+ },
+ {
+ id: 'access-2',
+ name: 'Private to Project Members',
+ description: 'Only members of this project would be able to access',
+ },
+ {
+ id: 'access-3',
+ name: 'Private to you',
+ description: 'You are the only one able to access this project',
+ },
+ ]
+ }
+ </script>
+</head>
+
+<body x-cloak x-import="hui/radio-group" class="p-2" x-data="data">
+
+ <div class="max-w-xl p-12">
+ <a href="/">Link before</a>
+ <hui-radio-group x-model="active">
+ <fieldset class="space-y-4">
+ <legend>
+ <h2 class="text-xl">Privacy setting</h2>
+ </legend>
+ <div class="-space-y-px rounded-md bg-white">
+ <template x-for="(item, i) in access" :key="item.id">
+ <hui-radio-group-option :value="item.id" :class="
+ [
+ // Rounded corners
+ i === 0 ? 'rounded-tl-md rounded-tr-md' : '',
+ access.length - 1 === i ? 'rounded-bl-md rounded-br-md' : '',
+ 
+ // Shared
+ 'relative border p-4 flex focus:outline-none',
+ active ? 'bg-indigo-50 border-indigo-200 z-10' : 'border-gray-200' 
+ ]
+ ">
+ <div class="flex w-full items-center justify-between">
+ <div class="ml-3 flex cursor-pointer flex-col">
+ <span :class="[
+ 'block text-sm font-medium leading-5',
+ active ? 'text-indigo-900' : 'text-gray-900',
+ ]" x-text="item.name">
+ </span>
+ <span
+ :class="['block text-sm leading-5', active ? 'text-indigo-700' : 'text-gray-500']"
+ x-text="item.description">
+ </span>
+ </div>
+ <div>
+ <template x-if="checked">
+ <svg xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+ stroke="currentColor" class="h-5 w-5 text-indigo-500">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+ d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+ </svg>
+ </template>
+ </div>
+ </div>
+ </hui-radio-group-option>
+ </template>
+ </div>
+ </fieldset>
+ </hui-radio-group>
+ <a href="/">Link after</a>
+ </div>
+</body>

examples/switch.html → examples/switch/switch.html

@@ -5,13 +5,13 @@
  <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 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'
+ "*": '/components/${component}.html'
  }
  </script>
  <style>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vimesh/headless",
- "version": "0.1.0",
+ "version": "0.2.0",
  "repository": "https://github.com/vimeshjs/vimesh-headless.git",
  "author": "Jacky ZHANG <[email protected]>",
  "license": "MIT",
@@ -10,7 +10,7 @@
  "dependencies": {},
  "devDependencies": {
  "@vimesh/style": "^1.0.0",
- "@vimesh/ui": "^0.9.5",
+ "@vimesh/ui": "^0.9.7",
  "alpinejs": "^3.10.5",
  "http-server": "^14.1.1"
  }