@stacksjs/components 0.2.35 → 0.2.54

package/src/ui/combobox/Combobox.stx

@@ -1,13 +1,96 @@
 <script server>
 export const value = $props.value
-export const onChange = $props.onChange
 export const className = $props.className || ''
 export const as = $props.as || 'div'
 
 const baseClasses = 'relative'
-const comboboxClasses = `${baseClasses} ${className}`.trim()
+export const comboboxClasses = `${baseClasses} ${className}`.trim()
+export const comboboxInstanceId = `stx-cb-${Math.random().toString(36).slice(2, 11)}`
 </script>
 
-<component :is="{{ as }}" class="{{ comboboxClasses }}">
-  <slot :value="value" :onChange="onChange" />
+<script client>
+const emit = defineEmits()
+const comboboxInstanceId = {{ comboboxInstanceId }}
+const initialValue = {{ value === undefined ? 'null' : value }}
+
+const isOpen = state(false)
+const selected = state(initialValue)
+const query = state('')
+let rootEl = null
+let outsideHandler = null
+
+function isSelectedValue(v) {
+  return selected() === v
+}
+
+function selectValue(v) {
+  selected.set(v)
+  isOpen.set(false)
+  syncOptionStates()
+  emit('change', v)
+}
+
+function syncOptionStates() {
+  if (!rootEl) return
+  const options = rootEl.querySelectorAll('[data-stx-combobox-option]')
+  for (const opt of options) {
+    const raw = opt.dataset.optionValue
+    let v
+    try { v = JSON.parse(raw ?? 'null') }
+    catch { v = raw }
+    const sel = isSelectedValue(v)
+    opt.setAttribute('aria-selected', sel ? 'true' : 'false')
+    opt.setAttribute('data-selected', sel ? 'true' : 'false')
+  }
+}
+
+function open() { if (!isOpen()) { isOpen.set(true) } }
+function close() { if (isOpen()) isOpen.set(false) }
+function toggle() { isOpen() ? close() : open() }
+
+function onToggle(event) { event.stopPropagation(); toggle() }
+function onSelect(event) { event.stopPropagation(); selectValue(event.detail) }
+function onQuery(event) {
+  event.stopPropagation()
+  query.set(event.detail)
+  if (!isOpen()) open()
+  emit('query', event.detail)
+}
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-combobox-id="${comboboxInstanceId}"]`)
+  syncOptionStates()
+  outsideHandler = (event) => {
+    if (!isOpen()) return
+    if (rootEl && !rootEl.contains(event.target)) close()
+  }
+  document.addEventListener('click', outsideHandler, true)
+})
+
+onDestroy(() => {
+  if (outsideHandler) document.removeEventListener('click', outsideHandler, true)
+})
+
+const dataState = derived(() => isOpen() ? 'open' : 'closed')
+
+defineExpose({ isOpen, selected, query, toggle, open, close, selectValue })
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ comboboxClasses }}"
+  data-stx-combobox
+  data-combobox-id="{{ comboboxInstanceId }}"
+  :data-state="dataState()"
+  @stx:combobox-toggle="onToggle($event)"
+  @stx:combobox-select="onSelect($event)"
+  @stx:combobox-query="onQuery($event)"
+>
+  <slot />
 </component>
+
+<style>
+[data-stx-combobox][data-state="closed"] [data-stx-combobox-options] {
+  display: none;
+}
+</style>

package/src/ui/combobox/ComboboxButton.stx

@@ -3,10 +3,22 @@ export const className = $props.className || ''
 export const as = $props.as || 'button'
 
 const baseClasses = 'absolute inset-y-0 right-0 flex items-center pr-2'
-const buttonClasses = `${baseClasses} ${className}`.trim()
+export const buttonClasses = `${baseClasses} ${className}`.trim()
 </script>
 
-<component :is="{{ as }}" class="{{ buttonClasses }}" tabindex="-1">
+<script client>
+function onClick(event) {
+  event.currentTarget.dispatchEvent(new CustomEvent('stx:combobox-toggle', { bubbles: true }))
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  data-stx-combobox-button
+  tabindex="-1"
+  @click="onClick($event)"
+>
   <svg class="h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
     <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
   </svg>

package/src/ui/combobox/ComboboxInput.stx

@@ -1,25 +1,32 @@
 <script server>
 export const displayValue = $props.displayValue
-export const onChange = $props.onChange
 export const className = $props.className || ''
 export const placeholder = $props.placeholder || ''
 export const disabled = $props.disabled || false
 
 const baseClasses = 'w-full rounded-lg border-none bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-sm leading-5 text-neutral-900 dark:text-white focus:ring-0 focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+export const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+</script>
+
+<script client>
+const isDisabled = {{ disabled }}
 
-export function handleChange(e) {
-  onChange?.(e.target.value)
+function onInput(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:combobox-query', { bubbles: true, detail: event.target.value }),
+  )
 }
 </script>
 
 <input
   type="text"
   class="{{ inputClasses }}"
+  data-stx-combobox-input
   placeholder="{{ placeholder }}"
   value="{{ displayValue }}"
   @if(disabled)disabled@endif
-  @input="handleChange"
+  @input="onInput($event)"
   autocomplete="off"
 />

package/src/ui/combobox/ComboboxOption.stx

@@ -3,50 +3,47 @@ export const value = $props.value
 export const disabled = $props.disabled || false
 export const className = $props.className || ''
 export const as = $props.as || 'li'
-export const currentValue = $props.currentValue
-export const onChange = $props.onChange
 
-export let active = false
-export const selected = currentValue === value
-
-const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4'
-const stateClasses = active
-  ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
-  : 'text-neutral-900 dark:text-neutral-100'
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
 const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
-const optionClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
+export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+export const valueJson = JSON.stringify(value === undefined ? null : value)
+</script>
 
-export function handleClick() {
-  if (disabled) return
-  onChange?.(value)
-}
+<script client>
+const isDisabled = {{ disabled }}
+const optionValue = {{ value === undefined ? 'null' : value }}
 
-export function handleMouseEnter() {
-  if (!disabled) active = true
-}
-
-export function handleMouseLeave() {
-  active = false
+function onClick(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:combobox-select', { bubbles: true, detail: optionValue }),
+  )
 }
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ optionClasses }}"
+  data-stx-combobox-option
+  data-option-value="{{ valueJson }}"
   role="option"
-  aria-selected="{{ selected ? 'true' : 'false' }}"
+  aria-selected="false"
   @if(disabled)aria-disabled="true"@endif
-  @click="handleClick"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
+  @click="onClick($event)"
 >
-  @if(selected)
-    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400">
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="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" clip-rule="evenodd" />
-      </svg>
-    </span>
-  @endif
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-combobox-check>
+    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="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" clip-rule="evenodd" />
+    </svg>
+  </span>
 
-  <slot :active="active" :selected="selected" :disabled="disabled" />
+  <slot :disabled="disabled" />
 </component>
+
+<style>
+[data-stx-combobox-option][data-selected="false"] [data-stx-combobox-check],
+[data-stx-combobox-option]:not([data-selected]) [data-stx-combobox-check] {
+  display: none;
+}
+</style>

package/src/ui/combobox/ComboboxOptions.stx

@@ -1,12 +1,16 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'ul'
-export const static_ = $props.static || false
 
 const baseClasses = 'absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
-const optionsClasses = `${baseClasses} ${className}`.trim()
+export const optionsClasses = `${baseClasses} ${className}`.trim()
 </script>
 
-<component :is="{{ as }}" class="{{ optionsClasses }}" role="listbox">
+<component
+  :is="{{ as }}"
+  class="{{ optionsClasses }}"
+  data-stx-combobox-options
+  role="listbox"
+>
   <slot />
 </component>

package/src/ui/command-palette/CommandPalette.stx

@@ -1,39 +1,81 @@
 <script server>
 export const open = $props.open || false
-export const onClose = $props.onClose
-export const query = $props.query || ''
-export const onQueryChange = $props.onQueryChange
+export const initialQuery = $props.query || ''
 export const className = $props.className || ''
 
 const baseClasses = 'fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20'
-const paletteClasses = `${baseClasses} ${className}`.trim()
+export const paletteClasses = `${baseClasses} ${className}`.trim()
+export const paletteInstanceId = `stx-cmd-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const paletteInstanceId = {{ paletteInstanceId }}
+const isOpen = state({{ open }})
+const query = state({{ initialQuery }})
+let escHandler = null
+
+function close() {
+  if (!isOpen()) return
+  isOpen.set(false)
+  emit('close')
+}
+
+function show() {
+  if (isOpen()) return
+  isOpen.set(true)
+}
+
+function onQueryInput(event) {
+  query.set(event.target.value)
+  emit('query', event.target.value)
+}
 
-export function handleClose() {
-  onClose?.()
+function onItemSelect(event) {
+  event.stopPropagation()
+  emit('select', event.detail)
+  close()
 }
+
+onMount(() => {
+  escHandler = (event) => {
+    if (event.key === 'Escape' && isOpen()) close()
+  }
+  document.addEventListener('keydown', escHandler)
+})
+
+onDestroy(() => {
+  if (escHandler) document.removeEventListener('keydown', escHandler)
+})
+
+defineExpose({ isOpen, query, show, close })
 </script>
 
-@if(open)
-  <div class="{{ paletteClasses }}">
-    <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="handleClose" />
-
-    <div class="mx-auto max-w-xl transform divide-y divide-neutral-100 dark:divide-neutral-800 overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
-      <div class="relative">
-        <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-        </svg>
-        <input
-          type="text"
-          class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-900 dark:text-white placeholder-neutral-400 focus:ring-0 sm:text-sm"
-          placeholder="Search..."
-          value="{{ query }}"
-          @input="(e) => onQueryChange?.(e.target.value)"
-        />
-      </div>
-
-      <div class="max-h-96 overflow-y-auto py-2">
-        <slot :query="query" />
-      </div>
+<div
+  :show="isOpen()"
+  class="{{ paletteClasses }}"
+  data-stx-command-palette
+  data-palette-id="{{ paletteInstanceId }}"
+  @stx:command-select="onItemSelect($event)"
+>
+  <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="close()"></div>
+
+  <div class="mx-auto max-w-xl transform divide-y divide-neutral-100 dark:divide-neutral-800 overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all relative">
+    <div class="relative">
+      <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+      </svg>
+      <input
+        type="text"
+        class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-900 dark:text-white placeholder-neutral-400 focus:ring-0 sm:text-sm"
+        placeholder="Search..."
+        :value="query()"
+        @input="onQueryInput($event)"
+      />
+    </div>
+
+    <div class="max-h-96 overflow-y-auto py-2">
+      <slot />
     </div>
   </div>
-@endif
+</div>

package/src/ui/command-palette/CommandPaletteItem.stx

@@ -1,32 +1,27 @@
 <script server>
 export const className = $props.className || ''
-export const onClick = $props.onClick
-export let active = false
+export const value = $props.value
 
-const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2'
-const activeClasses = active
-  ? 'bg-blue-600 text-white'
-  : 'text-neutral-900 dark:text-neutral-100'
-const itemClasses = `${baseClasses} ${activeClasses} ${className}`.trim()
-
-export function handleClick() {
-  onClick?.()
-}
+const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2 text-neutral-900 dark:text-neutral-100 hover:bg-blue-600 hover:text-white'
+export const itemClasses = `${baseClasses} ${className}`.trim()
+</script>
 
-export function handleMouseEnter() {
-  active = true
-}
+<script client>
+const emit = defineEmits()
+const itemValue = {{ value === undefined ? 'null' : value }}
 
-export function handleMouseLeave() {
-  active = false
+function onClick(event) {
+  emit('click', event)
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:command-select', { bubbles: true, detail: itemValue }),
+  )
 }
 </script>
 
 <div
   class="{{ itemClasses }}"
-  @click="handleClick"
-  @mouseenter="handleMouseEnter"
-  @mouseleave="handleMouseLeave"
+  data-stx-command-item
+  @click="onClick($event)"
 >
-  <slot :active="active" />
+  <slot />
 </div>

package/src/ui/dialog/Dialog.stx

@@ -1,19 +1,37 @@
 <script server>
 export const open = $props.open || false
-export const onClose = $props.onClose
 export const className = $props.className || ''
-export const as = $props.as || 'div'
 
 const baseClasses = 'relative z-50'
-const dialogClasses = `${baseClasses} ${className}`.trim()
+export const dialogClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const isOpen = state({{ open }})
 
-export function handleClose() {
-  onClose?.(false)
+function close() {
+  isOpen.set(false)
+  emit('close')
 }
+
+function onBackdropKey(event) {
+  if (event.key === 'Escape') close()
+}
+
+defineExpose({
+  open: () => isOpen.set(true),
+  close,
+  isOpen,
+})
 </script>
 
-@if(open)
-  <div class="{{ dialogClasses }}" role="dialog" aria-modal="true">
-    <slot />
-  </div>
-@endif
+<div
+  :show="isOpen()"
+  class="{{ dialogClasses }}"
+  role="dialog"
+  aria-modal="true"
+  @keydown="onBackdropKey($event)"
+>
+  <slot />
+</div>

package/src/ui/drawer/Drawer.stx

@@ -1,11 +1,9 @@
 <script server>
 export const open = $props.open ?? false
-export const onClose = $props.onClose || (() => {})
 export const position = $props.position || 'right'
 export const title = $props.title || ''
 export const className = $props.className || ''
 
-// Position classes
 const positionClasses = {
   right: 'inset-y-0 right-0 pl-10 sm:pl-16',
   left: 'inset-y-0 left-0 pr-10 sm:pr-16',
@@ -13,27 +11,6 @@ const positionClasses = {
   bottom: 'inset-x-0 bottom-0 pt-10',
 }
 
-// Slide animation classes
-const slideClasses = {
-  right: {
-    enter: 'translate-x-full',
-    leave: 'translate-x-0',
-  },
-  left: {
-    enter: '-translate-x-full',
-    leave: 'translate-x-0',
-  },
-  top: {
-    enter: '-translate-y-full',
-    leave: 'translate-y-0',
-  },
-  bottom: {
-    enter: 'translate-y-full',
-    leave: 'translate-y-0',
-  },
-}
-
-// Size classes based on position
 const sizeClasses = {
   right: 'max-w-md w-screen',
   left: 'max-w-md w-screen',
@@ -41,7 +18,6 @@ const sizeClasses = {
   bottom: 'max-h-[90vh] w-full',
 }
 
-// Close button position
 const closeButtonPosition = {
   right: 'left-0 -ml-8 sm:-ml-10',
   left: 'right-0 -mr-8 sm:-mr-10',
@@ -51,33 +27,52 @@ const closeButtonPosition = {
 
 export const containerClasses = `pointer-events-none fixed ${positionClasses[position]} flex max-w-full`.trim()
 export const panelClasses = `pointer-events-auto relative ${sizeClasses[position]} ${className}`.trim()
-export const slideAnimation = slideClasses[position]
 export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position]} flex pt-4 pr-2 sm:pr-4`.trim()
 </script>
 
-@if(open)
-  <!-- Backdrop -->
+<script client>
+const emit = defineEmits()
+const isOpen = state({{ open }})
+
+function close() {
+  isOpen.set(false)
+  emit('close')
+}
+
+function onBackdropClick() {
+  close()
+}
+
+function onPanelKey(event) {
+  if (event.key === 'Escape') close()
+}
+
+defineExpose({
+  open: () => isOpen.set(true),
+  close,
+  isOpen,
+})
+</script>
+
+<div :show="isOpen()">
   <div
     class="fixed inset-0 z-50 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity duration-500"
     style="animation: fadeIn 0.5s ease-in-out"
-    @click="handleBackdropClick()"
+    @click="onBackdropClick()"
   ></div>
 
-  <!-- Drawer Container -->
-  <div class="fixed inset-0 z-50 overflow-hidden">
+  <div class="fixed inset-0 z-50 overflow-hidden" @keydown="onPanelKey($event)">
     <div class="absolute inset-0 overflow-hidden">
       <div class="{{ containerClasses }}">
-        <!-- Drawer Panel -->
         <div
           class="{{ panelClasses }}"
           style="animation: slideIn 0.5s ease-in-out"
         >
-          <!-- Close Button -->
           <div class="{{ closeButtonClasses }}">
             <button
               type="button"
               class="relative rounded-md text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              @click="handleClose()"
+              @click="close()"
             >
               <span class="absolute -inset-2.5"></span>
               <span class="sr-only">Close panel</span>
@@ -87,7 +82,6 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
             </button>
           </div>
 
-          <!-- Drawer Content -->
           <div class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-blue-gray-800 py-6 shadow-xl">
             @if(title)
               <div class="px-4 sm:px-6">
@@ -104,7 +98,7 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
       </div>
     </div>
   </div>
-@endif
+</div>
 
 <style>
 @keyframes fadeIn {
@@ -121,17 +115,3 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
   }
 }
 </style>
-
-<script>
-function handleClose() {
-  if (onClose) {
-    onClose()
-  }
-}
-
-function handleBackdropClick() {
-  if (onClose) {
-    onClose()
-  }
-}
-</script>