Add menu + popper + x-teleport

vimeshjs · Dec 28, 2022 · d19373a · d19373a
1 parent 6575b92
commit d19373a
Show file tree

Hide file tree

Showing 5 changed files with 206 additions and 14 deletions.
diff --git a/components/menu.html b/components/menu.html
@@ -10,7 +10,8 @@
  _isOpen: false,
  open() {
  this._isOpen = true
- $vui.focus(this.$findOne('menu-items'))
+ let elMenuItems = this.$findOne('menu-items')
+ $vui.focus(elMenuItems)
  },
  close() { this._isOpen = false },
  get isOpen() { return this._isOpen },
@@ -121,8 +122,12 @@
  <slot></slot>
  <script>
  return {
- get context() { return this.$of('menu') },
- get isOpen() { return this.context.isOpen },
+ get context() {
+ return this.$of('menu')
+ },
+ get isOpen() {
+ return this.context.isOpen
+ },
  onSelectActive() {
  this.context.selectActive()
  this.context.close()

diff --git a/examples/dev.html b/examples/dev.html
@@ -11,16 +11,19 @@
  const DEBUG = true
  $vui.config.debug = DEBUG
  $vui.config.importMap = {
- "hui": '../components/${component}.html' + (DEBUG ? '?t=' + new Date().valueOf() : ''),
- "app": './components/${path}${component}.html' + (DEBUG ? '?t=' + new Date().valueOf() : ''),
- "page": './pages/${path}${component}.html' + (DEBUG ? '?t=' + new Date().valueOf() : ''),
+ "hui": '../components/${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
+ "app": './components/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
+ "page": './pages/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),
  }
  let root = {
  $route: {},
  get isHome() { return this.$route.page === 'home' },
  routes: [
  { name: 'Home', path: '/index', page: 'home' },
  { name: 'Menu Basic', path: '/menu/basic', page: 'menu/basic' },
+ { name: 'Menu Multiple Elements', path: '/menu/multiple-elements', page: 'menu/multiple-elements' },
+ { name: 'Menu with Popper', path: '/menu/with-popper', page: 'menu/with-popper' },
+
  { name: 'Switch Basic', path: '/switch/basic', page: 'switch/basic' },
  { name: 'Tabs Basic', path: '/tabs/basic', page: 'tabs/basic' },
  { name: 'Combobox Basic', path: '/combobox/basic', page: 'combobox/basic' },

diff --git a/examples/index.html b/examples/index.html
@@ -7,15 +7,19 @@
  <script src="https://unpkg.com/universal-router/universal-router.min.js"></script> 
 
  <script>
+ const DEBUG = false
+ $vui.config.debug = DEBUG
  $vui.config.importMap = {
- "*": '../components/${component}.html',
- "app": './components/${path}${component}.html',
- "page": './pages/${path}${component}.html'
+ "hui": '../components/${component}.html' + (DEBUG ? '?t=' + new Date().valueOf() : ''),
+ "app": './components/${path}${component}.html' + (DEBUG ? '?t=' + new Date().valueOf() : ''),
+ "page": './pages/${path}${component}.html' + (DEBUG ? '?t=' + new Date().valueOf() : ''),
  }
  let root = {
  $route: {},
+ get isHome() { return this.$route.page === 'home' },
  routes: [
  { name: 'Home', path: '/index', page: 'home' },
+ { name: 'Menu Basic', path: '/menu/basic', page: 'menu/basic' },
  { name: 'Switch Basic', path: '/switch/basic', page: 'switch/basic' },
  { name: 'Tabs Basic', path: '/tabs/basic', page: 'tabs/basic' },
  { name: 'Combobox Basic', path: '/combobox/basic', page: 'combobox/basic' },
@@ -35,12 +39,13 @@
 
 <body x-cloak x-import="app:header,footer,side-menu,code-viewer"
  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 bg-gray-700 flex"></app-header>
+ <app-header class="flex-none h-16 px-1 py-3 flex"></app-header>
  <div class="flex-1 flex">
- <app-side-menu class="w-64 flex-none"></app-side-menu>
+ <app-side-menu class="w-64 flex-none" x-show="!isHome"></app-side-menu>
  <div class="flex-1 h-full flex flex-col overflow-hidden">
  <app-router-view class="flex-1"></app-router-view>
- <app-code-viewer class="flex-none h-64 overflow-y-auto bg-gray-700 rounded-md" language="html" :code="$route.code"></app-code-viewer>
+ <app-code-viewer x-show="!isHome" class="flex-none h-64 overflow-y-auto bg-gray-700 rounded-md"
+ language="html" :code="$route.code"></app-code-viewer>
  </div>
  </div>
  <template x-component:app="router-view" x-shtml="$api && $api.pageContent || ''"
@@ -60,7 +65,7 @@
  this.pageToImport = `page:${page}`
  $vui.import(this.pageToImport).then(() => {
  $vui._.each($vui.imports, meta => {
- if (meta.fullname === this.pageToImport ){
+ if (meta.fullname === this.pageToImport) {
  this.$route.code = meta.html
  }
  })
@@ -72,7 +77,7 @@
  this.router = new UniversalRouter(this.routes, {
  context: { self: this },
  resolveRoute(context, params) {
- context.self.$route = { params, path: context.pathname }
+ context.self.$route = { params, ...context.route }
  if (typeof context.route.action === 'function') {
  return context.route.action(context, params)
  }

diff --git a/examples/pages/menu/multiple-elements.html b/examples/pages/menu/multiple-elements.html
@@ -0,0 +1,111 @@
+<template x-component:page="menu-multiple-elements" x-import="hui:menu">
+ <div class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
+ <div class="relative inline-block text-left">
+ <hui-menu>
+ <span class="rounded-md shadow-sm">
+ <hui-menu-button
+ 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">
+ <path fillRule="evenodd"
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+ clipRule="evenodd" />
+ </svg>
+ </hui-menu-button>
+ </span>
+
+ <hui-menu-items
+ 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>
+ <p class="truncate text-sm font-medium leading-5 text-gray-900">[email protected]</p>
+ </div>
+
+ <div class="py-1">
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
+ settings</a></hui-menu-item>
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
+ <hui-menu-item disabled><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
+ (soon)</a></hui-menu-item>
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
+ </div>
+ <div class="py-1">
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
+ </div>
+ </hui-menu-items>
+ </hui-menu>
+ </div>
+
+ <div>
+ <div class="relative rounded-md shadow-sm">
+ <input class="form-input block w-full sm:text-sm sm:leading-5" placeholder="[email protected]" />
+ </div>
+ </div>
+
+ <div class="relative inline-block text-left">
+ <hui-menu>
+ <span class="rounded-md shadow-sm">
+ <hui-menu-button
+ 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">
+ <path fillRule="evenodd"
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+ clipRule="evenodd" />
+ </svg>
+ </hui-menu-button>
+ </span>
+
+ <hui-menu-items
+ 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>
+ <p class="truncate text-sm font-medium leading-5 text-gray-900">[email protected]</p>
+ </div>
+
+ <div class="py-1">
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
+ settings</a></hui-menu-item>
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
+ <hui-menu-item disabled><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
+ (soon)</a></hui-menu-item>
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
+ </div>
+ <div class="py-1">
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
+ </div>
+ </hui-menu-items>
+ </hui-menu>
+ </div>
+ </div>
+</template>
diff --git a/examples/pages/menu/with-popper.html b/examples/pages/menu/with-popper.html
@@ -0,0 +1,68 @@
+<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] } }],
+ })
+ }
+}">
+ <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()"
+ 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">
+ <path fillRule="evenodd"
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+ clipRule="evenodd" />
+ </svg>
+ </hui-menu-button>
+ </span>
+
+ <template x-teleport="body">
+ <hui-menu-items x-init="container=$el;initPopper()"
+ 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>
+ <p class="truncate text-sm font-medium leading-5 text-gray-900">[email protected]</p>
+ </div>
+
+ <div class="py-1">
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#account-settings">Account
+ settings</a></hui-menu-item>
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#support">Support</a></hui-menu-item>
+ <hui-menu-item disabled><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#new-feature">New feature
+ (soon)</a></hui-menu-item>
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#license">License</a></hui-menu-item>
+ </div>
+ <div class="py-1">
+ <hui-menu-item><a :class="
+ ['block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50']" href="#sign-out">Sign out</a></hui-menu-item>
+ </div>
+ </hui-menu-items>
+ </template>
+ </hui-menu>
+ </div>
+ </div>
+</template>