nexa-ui-kit 0.6.0

package/src/components/NSelect.nexa

@@ -0,0 +1,452 @@
+<script setup>
+import { signal, computed, onBeforeUnmount } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const props = defineProps({
+  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' }
+})
+
+const emit = defineEmits(['update:modelValue', 'clear'])
+
+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()
+})
+</script>
+
+<template>
+  <div class="n-select" :class="{ 'is-open': isOpen.value, 'is-disabled': disabled }" :data-select-root="instanceId">
+    <label v-if="label" class="n-select-label">{{ label }}</label>
+    <div
+      class="n-select-trigger"
+      @click="toggle"
+      @keydown="handleKeydown"
+      tabindex="0"
+      role="combobox"
+      :aria-expanded="isOpen.value"
+    >
+      <span v-if="selectedOption.value" class="n-select-value">
+        {{ selectedOption.value.label }}
+      </span>
+      <span v-else class="n-select-placeholder">
+        {{ placeholder }}
+      </span>
+      <div class="n-select-trigger-actions">
+        <button v-if="clearable && modelValue" type="button" class="n-select-clear" @click.stop="clear" tabindex="-1">✕</button>
+        <span class="n-select-arrow">▾</span>
+      </div>
+    </div>
+    <div v-if="isOpen.value && appendTo !== 'body'" class="n-select-dropdown">
+      <div v-if="searchable" class="n-select-search">
+        <input
+          v-model="query"
+          placeholder="Search..."
+          class="n-select-search-input"
+          @keydown.stop="handleKeydown"
+        />
+      </div>
+      <div class="n-select-options">
+        <div v-for="(item, i) in filteredOptions.value" :key="i">
+          <div v-if="'group' in item" class="n-select-group-label">{{ item.group }}</div>
+          <div
+            v-for="opt in 'items' in item ? item.items : [item]"
+            :key="opt.value"
+            class="n-select-option"
+            :class="{
+              'is-selected': opt.value === modelValue,
+              'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
+              'is-disabled': opt.disabled
+            }"
+            @click="select(opt)"
+          >
+            {{ opt.label }}
+          </div>
+        </div>
+        <div v-if="filteredOptions.value.length === 0" class="n-select-empty">
+          No options available
+        </div>
+      </div>
+    </div>
+    <Teleport to="body">
+      <div v-if="isOpen.value && appendTo === 'body'" class="n-select-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-select-popup="instanceId" :style="popupStyle.value">
+        <div v-if="searchable" class="n-select-search">
+          <input
+            v-model="query"
+            placeholder="Search..."
+            class="n-select-search-input"
+            @keydown.stop="handleKeydown"
+          />
+        </div>
+        <div class="n-select-options">
+          <div v-for="(item, i) in filteredOptions.value" :key="i">
+            <div v-if="'group' in item" class="n-select-group-label">{{ item.group }}</div>
+            <div
+              v-for="opt in 'items' in item ? item.items : [item]"
+              :key="opt.value"
+              class="n-select-option"
+              :class="{
+                'is-selected': opt.value === modelValue,
+                'is-focused': getFlatOptions().indexOf(opt) === focusedIndex.value,
+                'is-disabled': opt.disabled
+              }"
+              @click="select(opt)"
+            >
+              {{ opt.label }}
+            </div>
+          </div>
+          <div v-if="filteredOptions.value.length === 0" class="n-select-empty">
+            No options available
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-select {
+  position: relative;
+  width: 100%;
+  font-family: var(--n-font-sans);
+}
+
+.n-select-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-select-trigger {
+  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:focus-visible {
+  border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+.n-select:hover .n-select-trigger:not(.is-disabled) {
+  border-color: var(--n-color-border-hover);
+}
+
+.n-select.is-open .n-select-trigger {
+  border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+.n-select-placeholder {
+  color: var(--n-color-text-muted);
+}
+
+.n-select-trigger-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.n-select-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-select-clear:hover {
+  color: var(--n-color-text);
+}
+
+.n-select-arrow {
+  color: var(--n-color-text-muted);
+  transition: transform var(--n-transition-fast);
+  font-size: var(--n-text-xs);
+}
+
+.is-open .n-select-arrow {
+  transform: rotate(180deg);
+}
+
+.n-select-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-dropdown-in 0.2s cubic-bezier(0, 1, 0, 1);
+}
+
+@keyframes n-dropdown-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.n-select-dropdown.is-top {
+  animation: n-dropdown-in-top 0.2s cubic-bezier(0, 1, 0, 1);
+}
+
+@keyframes n-dropdown-in-top {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.n-select-search {
+  padding: var(--n-space-2);
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-select-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-select-search-input:focus {
+  border-color: var(--n-color-primary);
+}
+
+.n-select-options {
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.n-select-group-label {
+  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 {
+  padding: 0.7rem 1rem;
+  color: var(--n-color-text-secondary);
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+}
+
+.n-select-option:hover,
+.n-select-option.is-focused {
+  background: var(--n-color-glass);
+  color: var(--n-color-text);
+}
+
+.n-select-option.is-selected {
+  background: var(--n-color-primary-light);
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-select-option.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-select-empty {
+  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 {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/src/components/NSkeleton.nexa

@@ -0,0 +1,74 @@
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: 'text' }, // text, circle, card
+  lines: { type: Number, default: 3 },
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '' }
+})
+</script>
+
+<template>
+  <div class="n-skeleton" :class="`is-${variant}`" :style="{ width, height }">
+    <div v-if="variant === 'text'" class="n-skeleton-lines">
+      <div v-for="i in lines" :key="i" class="n-skeleton-line" :style="{ width: i === lines ? '60%' : '100%' }"></div>
+    </div>
+    <div v-if="variant === 'circle'" class="n-skeleton-circle"></div>
+    <div v-if="variant === 'card'" class="n-skeleton-card">
+      <div class="n-skeleton-card-image"></div>
+      <div class="n-skeleton-card-body">
+        <div class="n-skeleton-line" style="width: 70%"></div>
+        <div class="n-skeleton-line" style="width: 40%"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-2);
+}
+
+.n-skeleton-line {
+  height: 14px;
+  border-radius: var(--n-radius-sm);
+  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-size: 200% 100%;
+  animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.is-circle .n-skeleton-circle {
+  width: 60px;
+  height: 60px;
+  border-radius: var(--n-radius-full);
+  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-size: 200% 100%;
+  animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.is-card .n-skeleton-card {
+  border-radius: var(--n-radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--n-color-border);
+}
+
+.is-card .n-skeleton-card-image {
+  height: 140px;
+  background: linear-gradient(90deg, var(--n-color-surface-alt) 25%, var(--n-color-surface-hover) 50%, var(--n-color-surface-alt) 75%);
+  background-size: 200% 100%;
+  animation: n-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.is-card .n-skeleton-card-body {
+  padding: var(--n-space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-3);
+}
+
+@keyframes n-skeleton-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+</style>

package/src/components/NSwitch.nexa

@@ -0,0 +1,76 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  label: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const toggle = () => {
+  if (props.disabled) return
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<template>
+  <label class="n-switch" :class="{ 'is-checked': modelValue, 'is-disabled': disabled }">
+    <div class="n-switch-track" @click="toggle">
+      <div class="n-switch-thumb"></div>
+    </div>
+    <span v-if="label" class="n-switch-label">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.n-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-switch-track {
+  width: 44px;
+  height: 24px;
+  background: var(--n-color-surface-hover);
+  border-radius: var(--n-radius-full);
+  position: relative;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.is-checked .n-switch-track {
+  background: var(--n-color-primary);
+}
+
+.n-switch-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--n-color-text);
+  border-radius: var(--n-radius-full);
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  transition: transform var(--n-transition-spring), background var(--n-transition-normal);
+  box-shadow: var(--n-shadow-sm);
+  will-change: transform;
+}
+
+.is-checked .n-switch-thumb {
+  transform: translateX(20px);
+  background: white;
+}
+
+.n-switch-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;
+}
+</style>

package/src/components/NTabs.nexa

@@ -0,0 +1,113 @@
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  tabs: { type: Array, default: () => [] },
+  modelValue: { type: [String, Number], default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const activeKey = computed(() => props.modelValue || props.tabs[0]?.key)
+
+const select = (key) => {
+  emit('update:modelValue', key)
+}
+
+const activeIndex = computed(() =>
+  props.tabs.findIndex(t => t.key === activeKey.value)
+)
+</script>
+
+<template>
+  <div class="n-tabs">
+    <div class="n-tabs-header">
+      <div
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="n-tab"
+        :class="{ 'is-active': tab.key === activeKey.value, 'is-disabled': tab.disabled }"
+        @click="select(tab.key)"
+      >
+        <span v-if="tab.icon" class="n-tab-icon">{{ tab.icon }}</span>
+        <span class="n-tab-label">{{ tab.label }}</span>
+        <span v-if="tab.badge" class="n-tab-badge">{{ tab.badge }}</span>
+      </div>
+      <div class="n-tabs-indicator" :style="{ left: `calc(${activeIndex.value * 100}% / ${tabs.length})`, width: `calc(100% / ${tabs.length})` }"></div>
+    </div>
+    <div class="n-tabs-content">
+      <slot :name="'tab-' + activeKey.value">
+        <slot />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-6);
+  width: 100%;
+}
+
+.n-tabs-header {
+  display: flex;
+  position: relative;
+  border-bottom: 1px solid var(--n-color-border);
+}
+
+.n-tab {
+  flex: 1;
+  padding: var(--n-space-3) var(--n-space-5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--n-space-2);
+  cursor: pointer;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  transition: all var(--n-transition-fast);
+  position: relative;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.n-tab:hover {
+  color: var(--n-color-text-secondary);
+}
+
+.n-tab.is-active {
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-tab.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-tab-icon {
+  font-size: var(--n-text-base);
+}
+
+.n-tab-badge {
+  background: var(--n-color-primary);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: var(--n-weight-bold);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--n-radius-full);
+  line-height: 1.2;
+}
+
+.n-tabs-indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--n-color-primary);
+  transition: all var(--n-transition-normal);
+  border-radius: var(--n-radius-full) var(--n-radius-full) 0 0;
+}
+</style>