@gameap/ui 1.0.0 → 1.1.0

package/components/GDeletableList.vue

@@ -11,7 +11,7 @@
           class="ml-[2px] text-xs h-full inline-flex items-center px-2 py-1 bg-red-500 hover:bg-red-600 text-white rounded-e cursor-pointer"
           @click="onClickDelete(item.id)"
       >
-        <i class="fa-solid fa-trash"></i>&nbsp;
+        <GIcon name="delete" />&nbsp;
       </div>
     </div>
   </div>
@@ -19,8 +19,10 @@
 </template>
 
 <script setup>
+import GIcon from './GIcon.vue'
+
 const props = defineProps({
-  items: [],
+  items: Array,
   clickCallback: Function,
   deleteCallback: Function,
 });

package/components/GIcon.vue

@@ -0,0 +1,66 @@
+<template>
+  <component
+    v-if="isComponent"
+    :is="resolvedIcon"
+    :class="props.class"
+    :style="sizeStyle"
+  />
+  <i
+    v-else
+    :class="[resolvedIcon, sizeClass, props.class]"
+  />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getIcon, hasIcon } from '../icons/registry.js'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value)
+  },
+  class: {
+    type: String,
+    default: ''
+  }
+})
+
+const resolvedIcon = computed(() => {
+  if (!hasIcon(props.name)) {
+    console.warn(`GIcon: Unknown icon "${props.name}"`)
+    return 'fa-solid fa-circle-question'
+  }
+  return getIcon(props.name)
+})
+
+const isComponent = computed(() => {
+  return typeof resolvedIcon.value === 'object' || typeof resolvedIcon.value === 'function'
+})
+
+const fontAwesomeSizeMap = {
+  sm: 'fa-sm',
+  md: '',
+  lg: 'fa-lg',
+  xl: 'fa-2x'
+}
+
+const componentSizeMap = {
+  sm: '0.875em',
+  md: '1em',
+  lg: '1.25em',
+  xl: '2em'
+}
+
+const sizeClass = computed(() => fontAwesomeSizeMap[props.size] || '')
+
+const sizeStyle = computed(() => ({
+  width: componentSizeMap[props.size],
+  height: componentSizeMap[props.size]
+}))
+</script>

package/components/GMenu.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, provide, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  as: { type: String, default: 'div' }
+})
+
+const isOpen = ref(false)
+const menuRef = ref(null)
+const activeIndex = ref(-1)
+const items = ref([])
+
+const toggle = () => {
+  isOpen.value = !isOpen.value
+  if (!isOpen.value) activeIndex.value = -1
+}
+
+const close = () => {
+  isOpen.value = false
+  activeIndex.value = -1
+}
+
+const registerItem = (id) => {
+  items.value.push(id)
+  return items.value.length - 1
+}
+
+const unregisterItem = (id) => {
+  const idx = items.value.indexOf(id)
+  if (idx > -1) items.value.splice(idx, 1)
+}
+
+const setActiveIndex = (index) => {
+  activeIndex.value = index
+}
+
+const handleClickOutside = (event) => {
+  if (menuRef.value && !menuRef.value.contains(event.target)) {
+    close()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside, true)
+})
+
+provide('menu', {
+  isOpen,
+  toggle,
+  close,
+  activeIndex,
+  items,
+  registerItem,
+  unregisterItem,
+  setActiveIndex
+})
+</script>
+
+<template>
+  <component :is="as" ref="menuRef">
+    <slot />
+  </component>
+</template>

package/components/GMenuButton.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { inject } from 'vue'
+
+const { isOpen, toggle } = inject('menu')
+
+const handleClick = () => {
+  toggle()
+}
+
+const handleKeydown = (event) => {
+  if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {
+    event.preventDefault()
+    toggle()
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-expanded="isOpen"
+    aria-haspopup="true"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <slot />
+  </button>
+</template>

package/components/GMenuItem.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { inject, ref, computed, onMounted, onUnmounted } from 'vue'
+
+const { close, activeIndex, registerItem, unregisterItem, setActiveIndex } = inject('menu')
+
+const itemId = Symbol()
+const index = ref(-1)
+
+onMounted(() => {
+  index.value = registerItem(itemId)
+})
+
+onUnmounted(() => {
+  unregisterItem(itemId)
+})
+
+const active = computed(() => activeIndex.value === index.value)
+
+const handleMouseEnter = () => {
+  setActiveIndex(index.value)
+}
+
+const handleMouseLeave = () => {
+  setActiveIndex(-1)
+}
+</script>
+
+<template>
+  <div
+    role="menuitem"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <slot :active="active" :close="close" />
+  </div>
+</template>

package/components/GMenuItems.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { inject, computed } from 'vue'
+
+const props = defineProps({
+  unmount: { type: Boolean, default: true }
+})
+
+const { isOpen, close } = inject('menu')
+
+const handleKeydown = (event) => {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    close()
+  }
+}
+
+const shouldRender = computed(() => {
+  if (props.unmount) return isOpen.value
+  return true
+})
+
+const shouldShow = computed(() => isOpen.value)
+</script>
+
+<template>
+  <div
+    v-if="shouldRender"
+    v-show="shouldShow"
+    role="menu"
+    tabindex="-1"
+    @keydown="handleKeydown"
+  >
+    <slot />
+  </div>
+</template>

package/components/Loading.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="flex justify-center">
-    <TransitionRoot
-        :show="showTransition"
-        enter="transition-opacity duration-[2000ms]"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="transition-opacity duration-150"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
+    <Transition
+        enter-active-class="transition-opacity duration-[2000ms]"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-150"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
     >
-      <div class="fa-3x">
+      <div v-if="showTransition" class="fa-3x">
         <i class="fa-solid fa-gear fa-spin"></i>
       </div>
-    </TransitionRoot>
+    </Transition>
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue"
-import { TransitionRoot } from '@headlessui/vue'
 
 const showTransition = ref(false)
 
@@ -27,6 +25,4 @@ onMounted(() => {
     showTransition.value = true
   }, 10)
 })
-
-
 </script>

package/index.js

@@ -3,6 +3,25 @@ export { default as GDeletableList } from './components/GDeletableList.vue'
 export { default as GStatusBadge } from './components/GStatusBadge.vue'
 export { default as Loading } from './components/Loading.vue'
 export { default as Progressbar } from './components/Progressbar.vue'
+export { default as GMenu } from './components/GMenu.vue'
+export { default as GMenuButton } from './components/GMenuButton.vue'
+export { default as GMenuItems } from './components/GMenuItems.vue'
+export { default as GMenuItem } from './components/GMenuItem.vue'
+export { default as GIcon } from './components/GIcon.vue'
+
+export { registerIcons, iconRegistry, getIcon, hasIcon } from './icons/registry.js'
+export { defaultIconMap } from './icons/iconMap.js'
+
+import GBreadcrumbs from './components/GBreadcrumbs.vue'
+import GDeletableList from './components/GDeletableList.vue'
+import GStatusBadge from './components/GStatusBadge.vue'
+import Loading from './components/Loading.vue'
+import Progressbar from './components/Progressbar.vue'
+import GMenu from './components/GMenu.vue'
+import GMenuButton from './components/GMenuButton.vue'
+import GMenuItems from './components/GMenuItems.vue'
+import GMenuItem from './components/GMenuItem.vue'
+import GIcon from './components/GIcon.vue'
 
 export function install(app) {
   app.component('GBreadcrumbs', GBreadcrumbs)
@@ -10,6 +29,11 @@ export function install(app) {
   app.component('GStatusBadge', GStatusBadge)
   app.component('Loading', Loading)
   app.component('Progressbar', Progressbar)
+  app.component('GMenu', GMenu)
+  app.component('GMenuButton', GMenuButton)
+  app.component('GMenuItems', GMenuItems)
+  app.component('GMenuItem', GMenuItem)
+  app.component('GIcon', GIcon)
 }
 
 export default { install }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gameap/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -17,15 +17,11 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "vue-router": "^4.0.0",
-    "@headlessui/vue": "^1.7.0"
+    "vue-router": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "vue-router": {
       "optional": true
-    },
-    "@headlessui/vue": {
-      "optional": true
     }
   }
 }