nexa-ui-kit 0.6.0

package/dist/components/NRadio.js

@@ -0,0 +1,96 @@
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-5c3cc2',
+  __hmrId: 'NRadio_nexa',
+  props: {
+  modelValue: { type: [String, Number], default: '' },
+  value: { type: [String, Number], default: '' },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  name: { type: String, default: '' }
+},
+  emits: ['update:modelValue'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const isChecked = () => props.modelValue === props.value
+    const select = () => {
+      if (props.disabled) return
+      emit('update:modelValue', props.value)
+    }
+    return { isChecked, select, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { isChecked, select, $slots, emit, modelValue, value, label, disabled, name, Fragment: _ntc_Fragment } = ctx
+    return h('label', { class: ["n-radio", { 'is-checked': isChecked(), 'is-disabled': disabled }], "data-v-5c3cc2": "" }, [
+        "\n    ",
+        h('div', { class: "n-radio-circle", onClick: select, "data-v-5c3cc2": "" }, [
+        "\n      ",
+        h('div', { class: "n-radio-dot", "data-v-5c3cc2": "" }),
+        "\n    "
+      ]),
+        "\n    ",
+        (label) ? h('span', { class: "n-radio-label", "data-v-5c3cc2": "" }, [
+        label
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-5c3cc2'
+_sfc_main.__hmrId = 'NRadio_nexa'
+
+export default _sfc_main
+
+const __style = `.n-radio[data-v-5c3cc2]{
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-radio-circle[data-v-5c3cc2]{
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.is-checked .n-radio-circle[data-v-5c3cc2]{
+  border-color: var(--n-color-primary);
+}
+
+.n-radio-dot[data-v-5c3cc2]{
+  width: 10px;
+  height: 10px;
+  border-radius: var(--n-radius-full);
+  background: var(--n-color-primary);
+  transform: scale(0);
+  transition: all var(--n-transition-spring);
+}
+
+.is-checked .n-radio-dot[data-v-5c3cc2]{
+  transform: scale(1);
+}
+
+.n-radio-label[data-v-5c3cc2]{
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  font-weight: var(--n-weight-medium);
+}
+
+.is-disabled[data-v-5c3cc2]{
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-radio[data-v-5c3cc2]:hover:not(.is-disabled) .n-radio-circle{
+  border-color: var(--n-color-primary);
+}`
+injectStyle('data-v-5c3cc2', __style)

package/dist/components/NRadio.nexa

@@ -0,0 +1,81 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  value: { type: [String, Number], default: '' },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  name: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isChecked = () => props.modelValue === props.value
+
+const select = () => {
+  if (props.disabled) return
+  emit('update:modelValue', props.value)
+}
+</script>
+
+<template>
+  <label class="n-radio" :class="{ 'is-checked': isChecked(), 'is-disabled': disabled }">
+    <div class="n-radio-circle" @click="select">
+      <div class="n-radio-dot"></div>
+    </div>
+    <span v-if="label" class="n-radio-label">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.n-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-radio-circle {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.is-checked .n-radio-circle {
+  border-color: var(--n-color-primary);
+}
+
+.n-radio-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--n-radius-full);
+  background: var(--n-color-primary);
+  transform: scale(0);
+  transition: all var(--n-transition-spring);
+}
+
+.is-checked .n-radio-dot {
+  transform: scale(1);
+}
+
+.n-radio-label {
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  font-weight: var(--n-weight-medium);
+}
+
+.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-radio:hover:not(.is-disabled) .n-radio-circle {
+  border-color: var(--n-color-primary);
+}
+</style>

package/dist/components/NSelect.js

@@ -0,0 +1,468 @@
+import { signal, computed, onBeforeUnmount, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-fef169b',
+  __hmrId: 'NSelect_nexa',
+  props: {
+  modelValue: { type: [String, Number], default: '' },
+  options: { type: Array, default: () => [] },
+  placeholder: { type: String, default: 'Select option...' },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  searchable: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  placement: { type: String, default: 'auto' },
+  appendTo: { type: String, default: 'self' }
+},
+  emits: ['update:modelValue', 'clear'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const isOpen = signal(false)
+    const query = signal('')
+    const focusedIndex = signal(-1)
+    const instanceId = `n-sel-${Math.random().toString(16).slice(2)}`
+    const popupStyle = signal({})
+    const resolvedPlacement = signal('bottom')
+    const rootEl = signal(null)
+    let stopTracking = null
+    let outsideHandler = null
+    const filteredOptions = computed(() => {
+      if (!props.searchable || !query.value) return props.options
+      const q = query.value.toLowerCase()
+      if (props.options[0] && 'group' in props.options[0]) {
+        return props.options
+      }
+      return props.options.filter(opt =>
+        String(opt.label).toLowerCase().includes(q)
+      )
+    })
+    const selectedOption = computed(() => {
+      return props.options.find(opt => opt.value === props.modelValue) || null
+    })
+    const close = () => {
+      if (!isOpen.value) return
+      isOpen.value = false
+      focusedIndex.value = -1
+      query.value = ''
+      if (stopTracking) {
+        stopTracking()
+        stopTracking = null
+      }
+      if (outsideHandler) {
+        document.removeEventListener('mousedown', outsideHandler)
+        outsideHandler = null
+      }
+    }
+    const open = (e) => {
+      if (props.disabled) return
+      if (isOpen.value) return
+      isOpen.value = true
+      focusedIndex.value = -1
+      query.value = ''
+      const target = e?.currentTarget || e?.target
+      rootEl.value = target?.closest ? target.closest(`[data-select-root="${instanceId}"]`) : null
+      if (props.appendTo === 'body') {
+        stopTracking = trackFloatingOverlay({
+          isOpen: () => isOpen.value,
+          getAnchor: () => {
+            const root = rootEl.value
+            return root ? root.querySelector('.n-select-trigger') : null
+          },
+          getPopup: () => document.querySelector(`[data-select-popup="${instanceId}"]`),
+          placement: props.placement,
+          align: 'start',
+          matchWidth: true,
+          minWidth: 240,
+          gap: 8,
+          margin: 8,
+          zIndex: 9999,
+          onUpdate: (result) => {
+            popupStyle.value = result.style
+            resolvedPlacement.value = result.placement
+          },
+          isEventInside: (event) => {
+            const t = event.target
+            if (!t || typeof t.closest !== 'function') return false
+            if (t.closest(`[data-select-root="${instanceId}"]`)) return true
+            if (t.closest(`[data-select-popup="${instanceId}"]`)) return true
+            return false
+          },
+          onOutside: () => close(),
+        })
+      } else {
+        if (outsideHandler) document.removeEventListener('mousedown', outsideHandler)
+        outsideHandler = (event) => {
+          const t = event.target
+          if (!t || typeof t.closest !== 'function') return
+          if (t.closest(`[data-select-root="${instanceId}"]`)) return
+          close()
+        }
+        document.addEventListener('mousedown', outsideHandler)
+      }
+      requestAnimationFrame(() => {
+        if (!props.searchable) return
+        const search = props.appendTo === 'body'
+          ? document.querySelector(`[data-select-popup="${instanceId}"] .n-select-search-input`)
+          : rootEl.value?.querySelector?.('.n-select-search-input')
+        if (search && typeof search.focus === 'function') {
+          try { search.focus() } catch {}
+        }
+      })
+    }
+    const toggle = (e) => {
+      if (props.disabled) return
+      if (isOpen.value) close()
+      else open(e)
+    }
+    const select = (option) => {
+      if (option.disabled) return
+      emit('update:modelValue', option.value)
+      close()
+    }
+    const clear = () => {
+      emit('update:modelValue', '')
+      emit('clear')
+      query.value = ''
+    }
+    const handleKeydown = (e) => {
+      if (!isOpen.value) {
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+          e.preventDefault()
+          open(e)
+        }
+        return
+      }
+      const items = getFlatOptions()
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          focusedIndex.value = Math.min(focusedIndex.value + 1, items.length - 1)
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          focusedIndex.value = Math.max(focusedIndex.value - 1, 0)
+          break
+        case 'Enter':
+          e.preventDefault()
+          if (items[focusedIndex.value]) {
+            select(items[focusedIndex.value])
+          }
+          break
+        case 'Escape':
+          e.preventDefault()
+          close()
+          break
+      }
+    }
+    const getFlatOptions = () => {
+      const flat = []
+      for (const opt of filteredOptions.value) {
+        if ('group' in opt) {
+          flat.push(...opt.items)
+        } else {
+          flat.push(opt)
+        }
+      }
+      return flat
+    }
+    onBeforeUnmount(() => {
+      close()
+    })
+    return { isOpen, query, focusedIndex, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, filteredOptions, selectedOption, close, open, toggle, select, clear, handleKeydown, getFlatOptions, onBeforeUnmount, trackFloatingOverlay, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { isOpen, query, focusedIndex, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, filteredOptions, selectedOption, close, open, toggle, select, clear, handleKeydown, getFlatOptions, onBeforeUnmount, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, searchable, clearable, placement, appendTo, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h('div', { class: ["n-select", { 'is-open': isOpen.value, 'is-disabled': disabled }], "data-select-root": instanceId, "data-v-fef169b": "" }, [
+        "\n    ",
+        (label) ? h('label', { class: "n-select-label", "data-v-fef169b": "" }, [
+        label
+      ]) : null,
+        h('div', { class: "n-select-trigger", onClick: toggle, onKeydown: handleKeydown, tabindex: "0", role: "combobox", "aria-expanded": isOpen.value, "data-v-fef169b": "" }, [
+        "\n      ",
+        (selectedOption.value) ? h('span', { class: "n-select-value", "data-v-fef169b": "" }, [
+        "\n        ",
+        selectedOption.value.label,
+        "\n      "
+      ]) : (true) ? h('span', { class: "n-select-placeholder", "data-v-fef169b": "" }, [
+        "\n        ",
+        placeholder,
+        "\n      "
+      ]) : null,
+        "\n      ",
+        h('div', { class: "n-select-trigger-actions", "data-v-fef169b": "" }, [
+        "\n        ",
+        (clearable && modelValue) ? h('button', { class: "n-select-clear", type: "button", onClick: ($event) => { $event.stopPropagation(); (clear)($event) }, tabindex: "-1", "data-v-fef169b": "" }, [
+        "✕"
+      ]) : null,
+        h('span', { class: "n-select-arrow", "data-v-fef169b": "" }, [
+        "▾"
+      ]),
+        "\n      "
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        (isOpen.value && appendTo !== 'body') ? h('div', { class: "n-select-dropdown", "data-v-fef169b": "" }, [
+        "\n      ",
+        (searchable) ? h('div', { class: "n-select-search", "data-v-fef169b": "" }, [
+        "\n        ",
+        h('input', { class: "n-select-search-input", value: query.value, onInput: ($event) => { query.value = $event.target.value }, placeholder: "Search...", onKeydown: ($event) => { $event.stopPropagation(); (handleKeydown)($event) }, "data-v-fef169b": "" }),
+        "\n      "
+      ]) : null,
+        h('div', { class: "n-select-options", "data-v-fef169b": "" }, [
+        "\n        ",
+        filteredOptions.value.map((item, i) =>
+        h('div', { key: i, "data-v-fef169b": "" }, [
+        "\n          ",
+        ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-fef169b": "" }, [
+        item.group
+      ]) : null,
+        'items' in item ? item.items : [item].map((opt, index) =>
+        h('div', { class: ["n-select-option", {
+              'is-selected': opt.value === modelValue,
+              'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
+              'is-disabled': opt.disabled
+            }], key: opt.value, onClick: ($event) => { select(opt) }, "data-v-fef169b": "" }, [
+        "\n            ",
+        opt.label,
+        "\n          "
+      ])
+      ),
+        "\n        "
+      ])
+      ),
+        "\n        ",
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-select-empty", "data-v-fef169b": "" }, [
+        "\n          No options available\n        "
+      ]) : null
+      ]),
+        "\n    "
+      ]) : null,
+        h(_ntc_Teleport, { to: "body", "data-v-fef169b": "" }, [
+        "\n      ",
+        (isOpen.value && appendTo === 'body') ? h('div', { class: ["n-select-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-select-popup": instanceId, style: popupStyle.value, "data-v-fef169b": "" }, [
+        "\n        ",
+        (searchable) ? h('div', { class: "n-select-search", "data-v-fef169b": "" }, [
+        "\n          ",
+        h('input', { class: "n-select-search-input", value: query.value, onInput: ($event) => { query.value = $event.target.value }, placeholder: "Search...", onKeydown: ($event) => { $event.stopPropagation(); (handleKeydown)($event) }, "data-v-fef169b": "" }),
+        "\n        "
+      ]) : null,
+        h('div', { class: "n-select-options", "data-v-fef169b": "" }, [
+        "\n          ",
+        filteredOptions.value.map((item, i) =>
+        h('div', { key: i, "data-v-fef169b": "" }, [
+        "\n            ",
+        ('group' in item) ? h('div', { class: "n-select-group-label", "data-v-fef169b": "" }, [
+        item.group
+      ]) : null,
+        'items' in item ? item.items : [item].map((opt, index) =>
+        h('div', { class: ["n-select-option", {
+                'is-selected': opt.value === modelValue,
+                'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
+                'is-disabled': opt.disabled
+              }], key: opt.value, onClick: ($event) => { select(opt) }, "data-v-fef169b": "" }, [
+        "\n              ",
+        opt.label,
+        "\n            "
+      ])
+      ),
+        "\n          "
+      ])
+      ),
+        "\n          ",
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-select-empty", "data-v-fef169b": "" }, [
+        "\n            No options available\n          "
+      ]) : null
+      ]),
+        "\n      "
+      ]) : null
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-fef169b'
+_sfc_main.__hmrId = 'NSelect_nexa'
+
+export default _sfc_main
+
+const __style = `.n-select[data-v-fef169b]{
+  position: relative;
+  width: 100%;
+  font-family: var(--n-font-sans);
+}
+
+.n-select-label[data-v-fef169b]{
+  display: block;
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  color: var(--n-color-text-secondary);
+  margin-bottom: var(--n-space-2);
+}
+
+.n-select-trigger[data-v-fef169b]{
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  padding: 0.75rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+  color: var(--n-color-text);
+  gap: var(--n-space-2);
+}
+
+.n-select-trigger[data-v-fef169b]:focus-visible{
+  border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+.n-select[data-v-fef169b]:hover .n-select-trigger:not(.is-disabled){
+  border-color: var(--n-color-border-hover);
+}
+
+.n-select.is-open .n-select-trigger[data-v-fef169b]{
+  border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+.n-select-placeholder[data-v-fef169b]{
+  color: var(--n-color-text-muted);
+}
+
+.n-select-trigger-actions[data-v-fef169b]{
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.n-select-clear[data-v-fef169b]{
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-muted);
+  cursor: pointer;
+  padding: 0.15rem;
+  font-size: var(--n-text-xs);
+  border-radius: var(--n-radius-sm);
+  line-height: 1;
+}
+
+.n-select-clear[data-v-fef169b]:hover{
+  color: var(--n-color-text);
+}
+
+.n-select-arrow[data-v-fef169b]{
+  color: var(--n-color-text-muted);
+  transition: transform var(--n-transition-fast);
+  font-size: var(--n-text-xs);
+}
+
+.is-open .n-select-arrow[data-v-fef169b]{
+  transform: rotate(180deg);
+}
+
+.n-select-dropdown[data-v-fef169b]{
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  width: 100%;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  box-shadow: var(--n-shadow-lg);
+  z-index: var(--n-z-dropdown);
+  overflow: hidden;
+  animation: n-dropdown-in 0.2s cubic-bezier(0, 1, 0, 1);
+}
+
+@keyframes n-dropdown-in {
+from[data-v-fef169b]{ opacity: 0; transform: translateY(-8px); }
+to[data-v-fef169b]{ opacity: 1; transform: translateY(0); }
+}
+
+.n-select-dropdown.is-top[data-v-fef169b]{
+  animation: n-dropdown-in-top 0.2s cubic-bezier(0, 1, 0, 1);
+}
+
+@keyframes n-dropdown-in-top {
+from[data-v-fef169b]{ opacity: 0; transform: translateY(8px); }
+to[data-v-fef169b]{ opacity: 1; transform: translateY(0); }
+}
+
+.n-select-search[data-v-fef169b]{
+  padding: var(--n-space-2);
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-select-search-input[data-v-fef169b]{
+  width: 100%;
+  background: var(--n-color-bg);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  padding: var(--n-space-2) var(--n-space-3);
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  outline: none;
+  font-family: inherit;
+}
+
+.n-select-search-input[data-v-fef169b]:focus{
+  border-color: var(--n-color-primary);
+}
+
+.n-select-options[data-v-fef169b]{
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.n-select-group-label[data-v-fef169b]{
+  padding: var(--n-space-2) var(--n-space-3);
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--n-tracking-wide);
+  background: var(--n-color-bg);
+}
+
+.n-select-option[data-v-fef169b]{
+  padding: 0.7rem 1rem;
+  color: var(--n-color-text-secondary);
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+}
+
+.n-select-option[data-v-fef169b]:hover, 
+.n-select-option.is-focused[data-v-fef169b]{
+  background: var(--n-color-glass);
+  color: var(--n-color-text);
+}
+
+.n-select-option.is-selected[data-v-fef169b]{
+  background: var(--n-color-primary-light);
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-select-option.is-disabled[data-v-fef169b]{
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-select-empty[data-v-fef169b]{
+  padding: var(--n-space-4);
+  color: var(--n-color-text-muted);
+  text-align: center;
+  font-size: var(--n-text-sm);
+}
+
+.is-disabled .n-select-trigger[data-v-fef169b]{
+  opacity: 0.5;
+  cursor: not-allowed;
+}`
+injectStyle('data-v-fef169b', __style)