nexa-ui-kit 0.6.0

package/dist/components/NMultiSelect.js

@@ -0,0 +1,156 @@
+import { signal, computed, inject, onBeforeUnmount, effect, batch, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-12b3b8c4',
+  __hmrId: 'NMultiSelect_nexa',
+  props: { modelValue: { type: Array, default: () => [] }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, bindField: { type: Boolean, default: false }, searchable: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, placement: { type: String, default: 'auto' }, appendTo: { type: String, default: 'self' }, maxChips: { type: Number, default: 3 } },
+  emits: ['update:modelValue', 'clear'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const field = inject('nexa-ui:form-field', undefined)
+    const instanceId = `n-ms-${Math.random().toString(16).slice(2)}`
+    const isOpen = signal(false)
+    const query = signal('')
+    const queryDraft = signal('')
+    const focusedIndex = signal(-1)
+    const popupStyle = signal({})
+    const resolvedPlacement = signal('bottom')
+    const rootEl = signal(null)
+    let stopTracking = null
+    let outsideHandler = null
+    const normalizeOption = (opt) => { if (opt == null) return { label: '', value: null, disabled: false }; if (typeof opt === 'string' || typeof opt === 'number') return { label: String(opt), value: opt, disabled: false }; if (typeof opt === 'object') { const label = 'label' in opt ? String(opt.label) : String(opt.value ?? ''); const value = 'value' in opt ? opt.value : label; return { label, value, disabled: !!opt.disabled } } return { label: String(opt), value: opt, disabled: false } }
+    const normalizedOptions = computed(() => props.options.map(normalizeOption))
+    const effectiveModelValue = computed(() => {
+      if (props.bindField && field?.value) {
+        const v = field.value.value
+        return Array.isArray(v) ? v : []
+      }
+      return props.modelValue
+    })
+    const effectiveDisabled = computed(() => {
+      if (props.disabled) return true
+      if (props.bindField && field?.disabled) return !!field.disabled.value
+      return false
+    })
+    const selectedSet = computed(() => new Set(Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []))
+    const filteredOptions = computed(() => { const q = props.searchable ? query.value.trim().toLowerCase() : ''; if (!q) return normalizedOptions.value; return normalizedOptions.value.filter(o => o.label.toLowerCase().includes(q)) })
+    const selectedLabels = computed(() => { const set = selectedSet.value; const out = []; for (const opt of normalizedOptions.value) { if (set.has(opt.value)) out.push({ label: opt.label, value: opt.value }) } return out })
+    const close = () => { if (!isOpen.value) return; isOpen.value = false; focusedIndex.value = -1; query.value = ''; queryDraft.value = ''; if (stopTracking) { stopTracking(); stopTracking = null } if (outsideHandler) { document.removeEventListener('mousedown', outsideHandler); outsideHandler = null } if (props.bindField && field?.onBlur) field.onBlur() }
+    const open = (e) => { if (effectiveDisabled.value || isOpen.value) return; isOpen.value = true; focusedIndex.value = filteredOptions.value.length > 0 ? 0 : -1; const t = e?.currentTarget || e?.target; rootEl.value = t?.closest ? t.closest(`[data-ms-root="${instanceId}"]`) : null; if (props.appendTo === 'body') { stopTracking = trackFloatingOverlay({ isOpen: () => isOpen.value, getAnchor: () => { const root = rootEl.value; return root ? root.querySelector('.n-ms-trigger') : null }, getPopup: () => document.querySelector(`[data-ms-popup="${instanceId}"]`), placement: props.placement, align: 'start', matchWidth: true, minWidth: 240, gap: 8, margin: 8, zIndex: 9999, onUpdate: (r) => { popupStyle.value = r.style; resolvedPlacement.value = r.placement }, isEventInside: (ev) => { const el = ev.target; if (!el || typeof el.closest !== 'function') return false; return !!(el.closest(`[data-ms-root="${instanceId}"]`) || el.closest(`[data-ms-popup="${instanceId}"]`)) }, onOutside: () => close() }) } else { if (outsideHandler) document.removeEventListener('mousedown', outsideHandler); outsideHandler = (event) => { const el = event.target; if (!el || typeof el.closest !== 'function') return; if (el.closest(`[data-ms-root="${instanceId}"]`)) return; close() }; document.addEventListener('mousedown', outsideHandler) } requestAnimationFrame(() => { if (!props.searchable) return; const search = props.appendTo === 'body' ? document.querySelector(`[data-ms-popup="${instanceId}"] .n-ms-search-input`) : rootEl.value?.querySelector?.('.n-ms-search-input'); if (search && typeof search.focus === 'function') { try { search.focus() } catch {} } }) }
+    const toggleOpen = (e) => { if (effectiveDisabled.value) return; if (isOpen.value) close(); else open(e) }
+    const setModel = (next) => { if (props.bindField && field?.setValue) field.setValue(next); else emit('update:modelValue', next) }
+    const toggleValue = (value) => { if (effectiveDisabled.value) return; const cur = Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []; const next = cur.includes(value) ? cur.filter(v => v !== value) : [...cur, value]; setModel(next) }
+    const clear = () => { if (effectiveDisabled.value) return; setModel([]); emit('clear'); query.value = ''; queryDraft.value = '' }
+    const removeChip = (value, e) => { e?.stopPropagation?.(); const cur = Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []; setModel(cur.filter(v => v !== value)) }
+    const onKeydown = (e) => { if (!isOpen.value) { if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') { e.preventDefault(); open(e) } return } const items = filteredOptions.value; if (e.key === 'ArrowDown') { e.preventDefault(); focusedIndex.value = Math.min(focusedIndex.value + 1, items.length - 1); return } if (e.key === 'ArrowUp') { e.preventDefault(); focusedIndex.value = Math.max(focusedIndex.value - 1, 0); return } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const opt = items[focusedIndex.value]; if (!opt || opt.disabled) return; toggleValue(opt.value); return } if (e.key === 'Escape') { e.preventDefault(); close() } }
+    effect(() => {
+      if (!isOpen.value) return
+      if (!props.searchable) return
+      if (queryDraft.value === query.value) return
+      queryDraft.value = query.value
+    })
+    const onSearchInput = (e) => {
+      const next = e?.target?.value ?? ''
+      batch(() => {
+        queryDraft.value = next
+        query.value = next
+        focusedIndex.value = filteredOptions.value.length > 0 ? 0 : -1
+      })
+    }
+    onBeforeUnmount(() => close())
+    return { field, instanceId, isOpen, query, queryDraft, focusedIndex, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, normalizeOption, normalizedOptions, effectiveModelValue, effectiveDisabled, selectedSet, filteredOptions, selectedLabels, close, open, toggleOpen, setModel, toggleValue, clear, removeChip, onKeydown, onSearchInput, inject, onBeforeUnmount, batch, trackFloatingOverlay, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { field, instanceId, isOpen, query, queryDraft, focusedIndex, popupStyle, resolvedPlacement, rootEl, stopTracking, outsideHandler, normalizeOption, normalizedOptions, effectiveModelValue, effectiveDisabled, selectedSet, filteredOptions, selectedLabels, close, open, toggleOpen, setModel, toggleValue, clear, removeChip, onKeydown, onSearchInput, inject, onBeforeUnmount, batch, trackFloatingOverlay, $slots, emit, modelValue, options, placeholder, label, disabled, bindField, searchable, clearable, placement, appendTo, maxChips, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h('div', { class: ["n-ms", { 'is-open': isOpen.value, 'is-disabled': effectiveDisabled.value }], "data-ms-root": instanceId, "data-v-12b3b8c4": "" }, [
+        "\n    ",
+        (label) ? h('label', { class: "n-ms-label", "data-v-12b3b8c4": "" }, [
+        label
+      ]) : null,
+        h('div', { class: "n-ms-trigger", role: "combobox", tabindex: "0", "aria-expanded": isOpen.value, onClick: toggleOpen, onKeydown: onKeydown, "data-v-12b3b8c4": "" }, [
+        "\n      ",
+        (selectedLabels.value.length > 0) ? h('div', { class: "n-ms-chips", "data-v-12b3b8c4": "" }, [
+        selectedLabels.value.slice(0, maxChips).map((c, index) =>
+        h('div', { class: "n-ms-chip", key: String(c.value), "data-v-12b3b8c4": "" }, [
+        h('span', { class: "n-ms-chip-label", "data-v-12b3b8c4": "" }, [
+        c.label
+      ]),
+        h('button', { class: "n-ms-chip-remove", type: "button", "aria-label": "Remove", tabindex: "-1", disabled: effectiveDisabled.value, onClick: ($event) => { removeChip(c.value, $event) }, "data-v-12b3b8c4": "" }, [
+        "✕"
+      ])
+      ])
+      ),
+        (selectedLabels.value.length > maxChips) ? h('span', { class: "n-ms-more", "data-v-12b3b8c4": "" }, [
+        "+",
+        selectedLabels.value.length - maxChips
+      ]) : null
+      ]) : (true) ? h('span', { class: "n-ms-placeholder", "data-v-12b3b8c4": "" }, [
+        placeholder
+      ]) : null,
+        "\n      ",
+        h('div', { class: "n-ms-actions", "data-v-12b3b8c4": "" }, [
+        (clearable && selectedLabels.value.length > 0) ? h('button', { class: "n-ms-clear", type: "button", tabindex: "-1", onClick: ($event) => { $event.stopPropagation(); (clear)($event) }, "data-v-12b3b8c4": "" }, [
+        "✕"
+      ]) : null,
+        h('span', { class: "n-ms-arrow", "data-v-12b3b8c4": "" }, [
+        "▾"
+      ])
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        (isOpen.value && appendTo !== 'body') ? h('div', { class: "n-ms-dropdown", "data-v-12b3b8c4": "" }, [
+        (searchable) ? h('div', { class: "n-ms-search", "data-v-12b3b8c4": "" }, [
+        h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-12b3b8c4": "" })
+      ]) : null,
+        h('div', { class: "n-ms-options", "data-v-12b3b8c4": "" }, [
+        filteredOptions.value.map((opt, i) =>
+        h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-12b3b8c4": "" }, [
+        h('span', { class: "n-ms-check", "data-v-12b3b8c4": "" }, [
+        selectedSet.value.has(opt.value) ? '✓' : ''
+      ]),
+        h('span', { class: "n-ms-option-label", "data-v-12b3b8c4": "" }, [
+        opt.label
+      ])
+      ])
+      ),
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-ms-empty", "data-v-12b3b8c4": "" }, [
+        "No options"
+      ]) : null
+      ])
+      ]) : null,
+        h(_ntc_Teleport, { to: "body", "data-v-12b3b8c4": "" }, [
+        (isOpen.value && appendTo === 'body') ? h('div', { class: ["n-ms-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-ms-popup": instanceId, style: popupStyle.value, "data-v-12b3b8c4": "" }, [
+        (searchable) ? h('div', { class: "n-ms-search", "data-v-12b3b8c4": "" }, [
+        h('input', { class: "n-ms-search-input", value: queryDraft.value, placeholder: "Search...", onInput: onSearchInput, onKeydown: ($event) => { $event.stopPropagation(); (onKeydown)($event) }, "data-v-12b3b8c4": "" })
+      ]) : null,
+        h('div', { class: "n-ms-options", "data-v-12b3b8c4": "" }, [
+        filteredOptions.value.map((opt, i) =>
+        h('button', { class: ["n-ms-option", { 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }], key: String(opt.value) + ':' + i, type: "button", "data-ms-opt": String(opt.value), disabled: opt.disabled, onMouseenter: ($event) => { focusedIndex.value = i }, onClick: ($event) => { toggleValue(opt.value) }, "data-v-12b3b8c4": "" }, [
+        h('span', { class: "n-ms-check", "data-v-12b3b8c4": "" }, [
+        selectedSet.value.has(opt.value) ? '✓' : ''
+      ]),
+        h('span', { class: "n-ms-option-label", "data-v-12b3b8c4": "" }, [
+        opt.label
+      ])
+      ])
+      ),
+        (filteredOptions.value.length === 0) ? h('div', { class: "n-ms-empty", "data-v-12b3b8c4": "" }, [
+        "No options"
+      ]) : null
+      ])
+      ]) : null
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-12b3b8c4'
+_sfc_main.__hmrId = 'NMultiSelect_nexa'
+
+export default _sfc_main
+
+const __style = `.n-ms[data-v-12b3b8c4]{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-label{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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;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);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{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-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{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-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{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-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}`
+injectStyle('data-v-12b3b8c4', __style)

package/dist/components/NMultiSelect.nexa

@@ -0,0 +1,77 @@
+<script setup>
+import { signal, computed, inject, onBeforeUnmount, effect, batch } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+const props = defineProps({ modelValue: { type: Array, default: () => [] }, options: { type: Array, default: () => [] }, placeholder: { type: String, default: 'Select...' }, label: { type: String, default: '' }, disabled: { type: Boolean, default: false }, bindField: { type: Boolean, default: false }, searchable: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, placement: { type: String, default: 'auto' }, appendTo: { type: String, default: 'self' }, maxChips: { type: Number, default: 3 } })
+const emit = defineEmits(['update:modelValue', 'clear'])
+const field = inject('nexa-ui:form-field', undefined)
+const instanceId = `n-ms-${Math.random().toString(16).slice(2)}`
+const isOpen = signal(false)
+const query = signal('')
+const queryDraft = signal('')
+const focusedIndex = signal(-1)
+const popupStyle = signal({})
+const resolvedPlacement = signal('bottom')
+const rootEl = signal(null)
+let stopTracking = null
+let outsideHandler = null
+const normalizeOption = (opt) => { if (opt == null) return { label: '', value: null, disabled: false }; if (typeof opt === 'string' || typeof opt === 'number') return { label: String(opt), value: opt, disabled: false }; if (typeof opt === 'object') { const label = 'label' in opt ? String(opt.label) : String(opt.value ?? ''); const value = 'value' in opt ? opt.value : label; return { label, value, disabled: !!opt.disabled } } return { label: String(opt), value: opt, disabled: false } }
+const normalizedOptions = computed(() => props.options.map(normalizeOption))
+const effectiveModelValue = computed(() => {
+  if (props.bindField && field?.value) {
+    const v = field.value.value
+    return Array.isArray(v) ? v : []
+  }
+  return props.modelValue
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.disabled) return true
+  if (props.bindField && field?.disabled) return !!field.disabled.value
+  return false
+})
+
+const selectedSet = computed(() => new Set(Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []))
+const filteredOptions = computed(() => { const q = props.searchable ? query.value.trim().toLowerCase() : ''; if (!q) return normalizedOptions.value; return normalizedOptions.value.filter(o => o.label.toLowerCase().includes(q)) })
+const selectedLabels = computed(() => { const set = selectedSet.value; const out = []; for (const opt of normalizedOptions.value) { if (set.has(opt.value)) out.push({ label: opt.label, value: opt.value }) } return out })
+const close = () => { if (!isOpen.value) return; isOpen.value = false; focusedIndex.value = -1; query.value = ''; queryDraft.value = ''; if (stopTracking) { stopTracking(); stopTracking = null } if (outsideHandler) { document.removeEventListener('mousedown', outsideHandler); outsideHandler = null } if (props.bindField && field?.onBlur) field.onBlur() }
+const open = (e) => { if (effectiveDisabled.value || isOpen.value) return; isOpen.value = true; focusedIndex.value = filteredOptions.value.length > 0 ? 0 : -1; const t = e?.currentTarget || e?.target; rootEl.value = t?.closest ? t.closest(`[data-ms-root="${instanceId}"]`) : null; if (props.appendTo === 'body') { stopTracking = trackFloatingOverlay({ isOpen: () => isOpen.value, getAnchor: () => { const root = rootEl.value; return root ? root.querySelector('.n-ms-trigger') : null }, getPopup: () => document.querySelector(`[data-ms-popup="${instanceId}"]`), placement: props.placement, align: 'start', matchWidth: true, minWidth: 240, gap: 8, margin: 8, zIndex: 9999, onUpdate: (r) => { popupStyle.value = r.style; resolvedPlacement.value = r.placement }, isEventInside: (ev) => { const el = ev.target; if (!el || typeof el.closest !== 'function') return false; return !!(el.closest(`[data-ms-root="${instanceId}"]`) || el.closest(`[data-ms-popup="${instanceId}"]`)) }, onOutside: () => close() }) } else { if (outsideHandler) document.removeEventListener('mousedown', outsideHandler); outsideHandler = (event) => { const el = event.target; if (!el || typeof el.closest !== 'function') return; if (el.closest(`[data-ms-root="${instanceId}"]`)) return; close() }; document.addEventListener('mousedown', outsideHandler) } requestAnimationFrame(() => { if (!props.searchable) return; const search = props.appendTo === 'body' ? document.querySelector(`[data-ms-popup="${instanceId}"] .n-ms-search-input`) : rootEl.value?.querySelector?.('.n-ms-search-input'); if (search && typeof search.focus === 'function') { try { search.focus() } catch {} } }) }
+const toggleOpen = (e) => { if (effectiveDisabled.value) return; if (isOpen.value) close(); else open(e) }
+const setModel = (next) => { if (props.bindField && field?.setValue) field.setValue(next); else emit('update:modelValue', next) }
+const toggleValue = (value) => { if (effectiveDisabled.value) return; const cur = Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []; const next = cur.includes(value) ? cur.filter(v => v !== value) : [...cur, value]; setModel(next) }
+const clear = () => { if (effectiveDisabled.value) return; setModel([]); emit('clear'); query.value = ''; queryDraft.value = '' }
+const removeChip = (value, e) => { e?.stopPropagation?.(); const cur = Array.isArray(effectiveModelValue.value) ? effectiveModelValue.value : []; setModel(cur.filter(v => v !== value)) }
+const onKeydown = (e) => { if (!isOpen.value) { if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') { e.preventDefault(); open(e) } return } const items = filteredOptions.value; if (e.key === 'ArrowDown') { e.preventDefault(); focusedIndex.value = Math.min(focusedIndex.value + 1, items.length - 1); return } if (e.key === 'ArrowUp') { e.preventDefault(); focusedIndex.value = Math.max(focusedIndex.value - 1, 0); return } if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const opt = items[focusedIndex.value]; if (!opt || opt.disabled) return; toggleValue(opt.value); return } if (e.key === 'Escape') { e.preventDefault(); close() } }
+effect(() => {
+  if (!isOpen.value) return
+  if (!props.searchable) return
+  if (queryDraft.value === query.value) return
+  queryDraft.value = query.value
+})
+
+const onSearchInput = (e) => {
+  const next = e?.target?.value ?? ''
+  batch(() => {
+    queryDraft.value = next
+    query.value = next
+    focusedIndex.value = filteredOptions.value.length > 0 ? 0 : -1
+  })
+}
+onBeforeUnmount(() => close())
+</script>
+
+<template>
+  <div class="n-ms" :class="{ 'is-open': isOpen.value, 'is-disabled': effectiveDisabled.value }" :data-ms-root="instanceId">
+    <label v-if="label" class="n-ms-label">{{ label }}</label>
+    <div class="n-ms-trigger" role="combobox" tabindex="0" :aria-expanded="isOpen.value" @click="toggleOpen" @keydown="onKeydown">
+      <div v-if="selectedLabels.value.length > 0" class="n-ms-chips"><div v-for="c in selectedLabels.value.slice(0, maxChips)" :key="String(c.value)" class="n-ms-chip"><span class="n-ms-chip-label">{{ c.label }}</span><button type="button" class="n-ms-chip-remove" aria-label="Remove" tabindex="-1" :disabled="effectiveDisabled.value" @click="removeChip(c.value, $event)">✕</button></div><span v-if="selectedLabels.value.length > maxChips" class="n-ms-more">+{{ selectedLabels.value.length - maxChips }}</span></div>
+      <span v-else class="n-ms-placeholder">{{ placeholder }}</span>
+      <div class="n-ms-actions"><button v-if="clearable && selectedLabels.value.length > 0" type="button" class="n-ms-clear" tabindex="-1" @click.stop="clear">✕</button><span class="n-ms-arrow">▾</span></div>
+    </div>
+    <div v-if="isOpen.value && appendTo !== 'body'" class="n-ms-dropdown"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div>
+    <Teleport to="body"><div v-if="isOpen.value && appendTo === 'body'" class="n-ms-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-ms-popup="instanceId" :style="popupStyle.value"><div v-if="searchable" class="n-ms-search"><input class="n-ms-search-input" :value="queryDraft.value" placeholder="Search..." @input="onSearchInput" @keydown.stop="onKeydown" /></div><div class="n-ms-options"><button v-for="(opt, i) in filteredOptions.value" :key="String(opt.value) + ':' + i" type="button" class="n-ms-option" :data-ms-opt="String(opt.value)" :class="{ 'is-selected': selectedSet.value.has(opt.value), 'is-focused': i === focusedIndex.value, 'is-disabled': opt.disabled }" :disabled="opt.disabled" @mouseenter="focusedIndex.value = i" @click="toggleValue(opt.value)"><span class="n-ms-check">{{ selectedSet.value.has(opt.value) ? '✓' : '' }}</span><span class="n-ms-option-label">{{ opt.label }}</span></button><div v-if="filteredOptions.value.length === 0" class="n-ms-empty">No options</div></div></div></Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-ms{position:relative;width:100%;font-family:var(--n-font-sans)}.n-ms-label{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-ms-trigger{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.5rem 0.75rem;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);min-height:44px}.n-ms-trigger:focus-visible{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms.is-open .n-ms-trigger{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ms-placeholder{color:var(--n-color-text-muted)}.n-ms-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.n-ms-clear{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-ms-clear:hover{color:var(--n-color-text)}.n-ms-arrow{color:var(--n-color-text-muted);transition:transform var(--n-transition-fast);font-size:var(--n-text-xs)}.is-open .n-ms-arrow{transform:rotate(180deg)}.n-ms-chips{display:flex;flex-wrap:wrap;gap:var(--n-space-2);align-items:center;min-width:0}.n-ms-chip{display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.45rem;border-radius:999px;background:var(--n-color-glass);border:1px solid var(--n-color-border);font-size:var(--n-text-xs);line-height:1;max-width:12rem}.n-ms-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10rem}.n-ms-chip-remove{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center}.n-ms-chip-remove:hover:not(:disabled){color:var(--n-color-text)}.n-ms-chip-remove:disabled{opacity:0.5;cursor:not-allowed}.n-ms-more{font-size:var(--n-text-xs);color:var(--n-color-text-muted)}.n-ms-dropdown{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-ms-in .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.n-ms-dropdown.is-top{animation:n-ms-in-top .2s cubic-bezier(0,1,0,1)}@keyframes n-ms-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ms-search{padding:var(--n-space-2);border-bottom:1px solid var(--n-color-border)}.n-ms-search-input{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-ms-search-input:focus{border-color:var(--n-color-primary)}.n-ms-options{max-height:260px;overflow-y:auto}.n-ms-option{width:100%;display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1rem;background:transparent;border:none;color:var(--n-color-text-secondary);cursor:pointer;transition:all var(--n-transition-fast);text-align:left}.n-ms-option:hover:not(:disabled),.n-ms-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ms-option.is-selected{background:var(--n-color-primary-light);color:var(--n-color-primary);font-weight:var(--n-weight-semibold)}.n-ms-option:disabled,.n-ms-option.is-disabled{opacity:0.4;cursor:not-allowed}.n-ms-check{width:1.25rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--n-text-xs)}.n-ms-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}.is-disabled .n-ms-trigger{opacity:0.5;cursor:not-allowed}
+</style>

package/dist/components/NPaginator.js

@@ -0,0 +1,117 @@
+import { computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-372b30ac',
+  __hmrId: 'NPaginator_nexa',
+  props: {
+  first: { type: Number, default: 0 },
+  rows: { type: Number, default: 10 },
+  totalRecords: { type: Number, default: 0 },
+  rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] },
+},
+  emits: ['update:first', 'update:rows', 'updateFirst', 'updateRows', 'page'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const safeFirst = computed(() => Number.isFinite(props.first) ? props.first : 0)
+    const safeRows = computed(() => {
+      const r = Number.isFinite(props.rows) ? props.rows : 10
+      return r > 0 ? r : 10
+    })
+    const page = computed(() => Math.floor((safeFirst.value || 0) / (safeRows.value || 1)))
+    const pageCount = computed(() => {
+      const rows = safeRows.value || 1
+      return Math.max(1, Math.ceil((props.totalRecords || 0) / rows))
+    })
+    const canPrev = computed(() => page.value > 0)
+    const canNext = computed(() => page.value < pageCount.value - 1)
+    const goToPage = (p) => {
+      const clamped = Math.min(Math.max(p, 0), pageCount.value - 1)
+      const nextFirst = clamped * (safeRows.value || 1)
+      emit('update:first', nextFirst)
+      emit('updateFirst', nextFirst)
+      emit('page', { page: clamped, first: nextFirst, rows: safeRows.value })
+    }
+    const prev = () => { if (!canPrev.value) return; goToPage(page.value - 1) }
+    const next = () => { if (!canNext.value) return; goToPage(page.value + 1) }
+    const firstPage = () => goToPage(0)
+    const lastPage = () => goToPage(pageCount.value - 1)
+    const changeRows = (e) => {
+      const nextRows = Number(e.target.value)
+      if (!Number.isFinite(nextRows) || nextRows <= 0) return
+      emit('update:rows', nextRows)
+      emit('update:first', 0)
+      emit('updateRows', nextRows)
+      emit('updateFirst', 0)
+      emit('page', { page: 0, first: 0, rows: nextRows })
+    }
+    const start = computed(() => Math.min((safeFirst.value || 0) + 1, props.totalRecords || 0))
+    const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value || 0), props.totalRecords || 0))
+    return { safeFirst, safeRows, page, pageCount, canPrev, canNext, goToPage, prev, next, firstPage, lastPage, changeRows, start, end, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { safeFirst, safeRows, page, pageCount, canPrev, canNext, goToPage, prev, next, firstPage, lastPage, changeRows, start, end, $slots, emit, first, rows, totalRecords, rowsPerPageOptions, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-paginator", "data-v-372b30ac": "" }, [
+        "\n    ",
+        h('div', { class: "n-paginator-left", "data-v-372b30ac": "" }, [
+        "\n      ",
+        h('span', { class: "n-paginator-report", "data-v-372b30ac": "" }, [
+        start.value,
+        "-",
+        end.value,
+        " of ",
+        totalRecords
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        h('div', { class: "n-paginator-center", "data-v-372b30ac": "" }, [
+        "\n      ",
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canPrev.value, onClick: firstPage, "data-v-372b30ac": "" }, [
+        "«"
+      ]),
+        "\n      ",
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canPrev.value, onClick: prev, "data-v-372b30ac": "" }, [
+        "‹"
+      ]),
+        "\n      ",
+        h('span', { class: "n-pg-page", "data-v-372b30ac": "" }, [
+        page.value + 1,
+        " / ",
+        pageCount.value
+      ]),
+        "\n      ",
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canNext.value, onClick: next, "data-v-372b30ac": "" }, [
+        "›"
+      ]),
+        "\n      ",
+        h('button', { class: "n-pg-btn", type: "button", disabled: !canNext.value, onClick: lastPage, "data-v-372b30ac": "" }, [
+        "»"
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        h('div', { class: "n-paginator-right", "data-v-372b30ac": "" }, [
+        "\n      ",
+        h('select', { class: "n-pg-select", value: rows, onChange: changeRows, "data-v-372b30ac": "" }, [
+        "\n        ",
+        rowsPerPageOptions.map((n, index) =>
+        h('option', { key: n, value: n, "data-v-372b30ac": "" }, [
+        n
+      ])
+      ),
+        "\n      "
+      ]),
+        "\n    "
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-372b30ac'
+_sfc_main.__hmrId = 'NPaginator_nexa'
+
+export default _sfc_main
+
+const __style = `.n-paginator[data-v-372b30ac]{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}`
+injectStyle('data-v-372b30ac', __style)

package/dist/components/NPaginator.nexa

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  first: { type: Number, default: 0 },
+  rows: { type: Number, default: 10 },
+  totalRecords: { type: Number, default: 0 },
+  rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] },
+})
+
+const emit = defineEmits(['update:first', 'update:rows', 'updateFirst', 'updateRows', 'page'])
+
+const safeFirst = computed(() => Number.isFinite(props.first) ? props.first : 0)
+const safeRows = computed(() => {
+  const r = Number.isFinite(props.rows) ? props.rows : 10
+  return r > 0 ? r : 10
+})
+
+const page = computed(() => Math.floor((safeFirst.value || 0) / (safeRows.value || 1)))
+const pageCount = computed(() => {
+  const rows = safeRows.value || 1
+  return Math.max(1, Math.ceil((props.totalRecords || 0) / rows))
+})
+
+const canPrev = computed(() => page.value > 0)
+const canNext = computed(() => page.value < pageCount.value - 1)
+
+const goToPage = (p) => {
+  const clamped = Math.min(Math.max(p, 0), pageCount.value - 1)
+  const nextFirst = clamped * (safeRows.value || 1)
+  emit('update:first', nextFirst)
+  emit('updateFirst', nextFirst)
+  emit('page', { page: clamped, first: nextFirst, rows: safeRows.value })
+}
+
+const prev = () => { if (!canPrev.value) return; goToPage(page.value - 1) }
+const next = () => { if (!canNext.value) return; goToPage(page.value + 1) }
+const firstPage = () => goToPage(0)
+const lastPage = () => goToPage(pageCount.value - 1)
+
+const changeRows = (e) => {
+  const nextRows = Number(e.target.value)
+  if (!Number.isFinite(nextRows) || nextRows <= 0) return
+  emit('update:rows', nextRows)
+  emit('update:first', 0)
+  emit('updateRows', nextRows)
+  emit('updateFirst', 0)
+  emit('page', { page: 0, first: 0, rows: nextRows })
+}
+
+const start = computed(() => Math.min((safeFirst.value || 0) + 1, props.totalRecords || 0))
+const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value || 0), props.totalRecords || 0))
+</script>
+
+<template>
+  <div class="n-paginator">
+    <div class="n-paginator-left">
+      <span class="n-paginator-report">{{ start.value }}-{{ end.value }} of {{ totalRecords }}</span>
+    </div>
+    <div class="n-paginator-center">
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="firstPage">«</button>
+      <button type="button" class="n-pg-btn" :disabled="!canPrev.value" @click="prev">‹</button>
+      <span class="n-pg-page">{{ page.value + 1 }} / {{ pageCount.value }}</span>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="next">›</button>
+      <button type="button" class="n-pg-btn" :disabled="!canNext.value" @click="lastPage">»</button>
+    </div>
+    <div class="n-paginator-right">
+      <select class="n-pg-select" :value="rows" @change="changeRows">
+        <option v-for="n in rowsPerPageOptions" :key="n" :value="n">{{ n }}</option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-paginator{display:flex;align-items:center;justify-content:space-between;gap:var(--n-space-3);padding:var(--n-space-3) var(--n-space-4);border-top:1px solid var(--n-color-border);background:var(--n-color-surface);font-family:var(--n-font-sans)}.n-paginator-report{color:var(--n-color-text-muted);font-size:var(--n-text-xs)}.n-paginator-center{display:flex;align-items:center;gap:0.35rem}.n-pg-btn{background:transparent;border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;cursor:pointer;transition:all var(--n-transition-fast)}.n-pg-btn:hover:not(:disabled){background:var(--n-color-glass)}.n-pg-btn:disabled{opacity:0.5;cursor:not-allowed}.n-pg-page{min-width:5rem;text-align:center;color:var(--n-color-text-secondary);font-size:var(--n-text-xs)}.n-pg-select{background:var(--n-color-bg);border:1px solid var(--n-color-border);color:var(--n-color-text);border-radius:var(--n-radius-sm);padding:0.25rem 0.5rem;font-size:var(--n-text-xs);outline:none}
+</style>