Add dialog component and examples

vimeshjs · Jan 7, 2023 · e3ef1ec · e3ef1ec
1 parent b14b75e
commit e3ef1ec
Show file tree

Hide file tree

Showing 7 changed files with 406 additions and 15 deletions.
diff --git a/components/dialog.html b/components/dialog.html
@@ -0,0 +1,62 @@
+<template x-component:hui="dialog" x-modelable="_isOpen" x-show="_isOpen" x-trap.inert.noscroll="_isOpen"
+ @keydown.escape="$api.close()" x-data="{
+ _isOpen: false
+}">
+ <slot></slot>
+ <script>
+ const _ = $vui._
+ return {
+ open() {
+ this._isOpen = true
+ },
+ get isOpen() { return this._isOpen },
+ close() {
+ if (this.$prop('open'))
+ this.$dispatch('close', false)
+ else
+ this._isOpen = false
+ },
+ toggle() {
+ if (this.isOpen)
+ this.close()
+ else
+ this.open()
+ },
+ onMounted() {
+ if (this.$prop('open') !== undefined) {
+ $vui.effect(() => {
+ this._isOpen = this.$prop('open')
+ })
+ }
+ }
+ }
+ </script>
+</template>
+<template x-component:hui="dialog-overlay" x-show="$api && $api.context.isOpen"
+ @click.prevent.stop="$api.context.close()">
+ <slot></slot>
+ <script>
+ return {
+ get context() { return this.$of(':dialog') },
+ }
+ </script>
+</template>
+<template x-component:hui="dialog-panel" @click.outside="$api.context.close()" x-show="$api && $api.context.isOpen">
+ <slot></slot>
+ <script>
+ return {
+ get context() { return this.$of(':dialog') },
+ }
+ </script>
+</template>
+<template x-component:hui="dialog-title">
+ <slot></slot>
+ <script>
+ return {
+ get context() { return this.$of(':dialog') },
+ }
+ </script>
+</template>
+<template x-component:hui="dialog-description">
+ <slot></slot>
+</template>
diff --git a/components/popover.html b/components/popover.html
@@ -1,7 +1,6 @@
 <template x-component:hui="popover">
  <slot></slot>
  <script>
- const _ = $vui._
  return {
  _isOpen: false,
  open() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vimesh/headless",
- "version": "0.5.0",
+ "version": "0.6.0",
  "repository": "https://github.com/vimeshjs/vimesh-headless.git",
  "author": "Jacky ZHANG <[email protected]>",
  "license": "MIT",
@@ -9,8 +9,8 @@
  },
  "dependencies": {},
  "devDependencies": {
- "@vimesh/style": "^1.0.4",
- "@vimesh/ui": "^0.12.3",
+ "@vimesh/style": "^1.0.5",
+ "@vimesh/ui": "^0.12.4",
  "alpinejs": "^3.10.5",
  "http-server": "^14.1.1",
  "universal-router": "^9.1.0"

diff --git a/playground/dev.html b/playground/dev.html
@@ -27,6 +27,8 @@
  { name: 'Menu with Transition and Popper', path: '/menu/with-transition-and-popper', page: 'menu/with-transition-and-popper' },
 
  { name: 'Popover', path: '/popover/basic', page: 'popover/basic' },
+ { name: 'Dialog', path: '/dialog/basic', page: 'dialog/basic' },
+ { name: 'Dialog with Slide Over', path: '/dialog/slide-over', page: 'dialog/slide-over' },
 
  { name: 'Switch', path: '/switch/basic', page: 'switch/basic' },
  { name: 'Tabs', path: '/tabs/basic', page: 'tabs/basic' },
@@ -46,7 +48,7 @@
  </style>
 </head>
 
-<body x-cloak x-import="app:header,footer,side-menu,code-viewer,key-caster"
+<body x-cloak x-import="app:header,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">

diff --git a/playground/index.html b/playground/index.html
@@ -19,16 +19,23 @@
  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', 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: 'Menu with Transition', path: '/menu/with-transition', page: 'menu/with-transition' },
+ { name: 'Menu with Transition and Popper', path: '/menu/with-transition-and-popper', page: 'menu/with-transition-and-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' },
- { name: 'Listbox Basic', path: '/listbox/basic', page: 'listbox/basic' },
- { name: 'Listbox Multi', path: '/listbox/multi', page: 'listbox/multi' },
- { name: 'Radio Group Basic', path: '/radio-group/basic', page: 'radio-group/basic' },
+ { name: 'Popover', path: '/popover/basic', page: 'popover/basic' },
+ { name: 'Dialog', path: '/dialog/basic', page: 'dialog/basic' },
+ { name: 'Dialog with Slide Over', path: '/dialog/slide-over', page: 'dialog/slide-over' },
+
+ { name: 'Switch', path: '/switch/basic', page: 'switch/basic' },
+ { 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 Select', path: '/listbox/multi-select', page: 'listbox/multi-select' },
+ { name: 'Listbox Multi Elements', path: '/listbox/multi-elements', page: 'listbox/multi-elements' },
+ { name: 'Radio Group', path: '/radio-group/basic', page: 'radio-group/basic' },
  { name: 'Something Wrong!', path: '(.*)', page: 'home', hidden: true }
  ]
  }
@@ -40,17 +47,18 @@
  </style>
 </head>
 
-<body x-cloak x-import="app:header,footer,side-menu,code-viewer"
+<body x-cloak x-import="app:header,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">
- <app-side-menu class="w-64 flex-none" x-show="!isHome"></app-side-menu>
+ <app-side-menu class="w-74 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 x-show="!isHome" class="flex-none h-64 overflow-y-auto bg-gray-700 rounded-md"
+ <app-code-viewer x-show="!isHome" class="flex-none h-64 overflow-y-auto bg-gray-700 m-1 rounded-md"
  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>