nexa-ui-kit 0.6.0

package/dist/components/NInputNumber.nexa

@@ -0,0 +1,199 @@
+<script setup>
+import { signal, computed, inject, effect, batch } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: null },
+  max: { type: Number, default: null },
+  step: { type: Number, default: 1 },
+  bindField: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const field = inject('nexa-ui:form-field', undefined)
+
+const effectiveValue = computed(() => {
+  if (props.bindField && field?.value) {
+    const v = field.value.value
+    return typeof v === 'number' ? v : Number(v)
+  }
+  return props.modelValue
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.disabled) return true
+  if (props.bindField && field?.disabled) return !!field.disabled.value
+  return false
+})
+
+const text = signal(String(effectiveValue.value ?? ''))
+
+effect(() => {
+  const next = effectiveValue.value
+  const nextText = next === null || next === undefined ? '' : String(next)
+  if (text.value === nextText) return
+  text.value = nextText
+})
+
+const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
+
+const sanitize = (raw) => {
+  const input = String(raw ?? '')
+  if (!input) return ''
+  const allowMinus = typeof props.min === 'number' ? props.min < 0 : true
+  let out = ''
+  let hasDot = false
+  let hasMinus = false
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i] === ',' ? '.' : input[i]
+    const isDigit = ch >= '0' && ch <= '9'
+    if (isDigit) {
+      out += ch
+      continue
+    }
+    if (ch === '.' && !hasDot) {
+      hasDot = true
+      out += ch
+      continue
+    }
+    if (ch === '-' && allowMinus && !hasMinus && out.length === 0) {
+      hasMinus = true
+      out += ch
+    }
+  }
+  return out
+}
+
+const clamp = (n) => {
+  if (n == null || Number.isNaN(n)) return null
+  let out = n
+  if (typeof props.min === 'number' && !Number.isNaN(props.min)) out = Math.max(out, props.min)
+  if (typeof props.max === 'number' && !Number.isNaN(props.max)) out = Math.min(out, props.max)
+  return out
+}
+
+const parse = (raw) => {
+  const s = sanitize(raw).trim()
+  if (!s) return null
+  const n = Number(s)
+  if (Number.isNaN(n)) return null
+  return n
+}
+
+const setValue = (next) => {
+  if (!canEdit.value) return
+  const clamped = clamp(next)
+  if (clamped == null) return
+  batch(() => {
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+    text.value = String(clamped)
+  })
+}
+
+const inc = () => {
+  if (!canEdit.value) return
+  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
+  setValue(base + (props.step || 1))
+}
+
+const dec = () => {
+  if (!canEdit.value) return
+  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
+  setValue(base - (props.step || 1))
+}
+
+const onInput = (e) => {
+  if (!canEdit.value) return
+  const nextRaw = e.target.value
+  const nextText = sanitize(nextRaw)
+  if (e?.target && e.target.value !== nextText) {
+    e.target.value = nextText
+  }
+  batch(() => {
+    text.value = nextText
+    const n = parse(nextText)
+    const clamped = clamp(n)
+    if (clamped == null) return
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+  })
+}
+
+const onBeforeInput = (e) => {
+  if (!canEdit.value) return
+  const inputType = e?.inputType
+  if (typeof inputType === 'string' && inputType.includes('Composition')) return
+  if (typeof inputType === 'string' && !inputType.startsWith('insert')) return
+  const data = e?.data
+  if (typeof data !== 'string' || !data) return
+  for (let i = 0; i < data.length; i++) {
+    const ch = data[i] === ',' ? '.' : data[i]
+    const isDigit = ch >= '0' && ch <= '9'
+    if (isDigit || ch === '.' || ch === '-') continue
+    e.preventDefault()
+    return
+  }
+}
+
+const onPaste = (e) => {
+  if (!canEdit.value) return
+  const pasted = e?.clipboardData?.getData?.('text')
+  if (typeof pasted !== 'string') return
+  e.preventDefault()
+  const nextText = sanitize(pasted)
+  const target = e?.target
+  if (!target) return
+  target.value = nextText
+  onInput({ target })
+}
+
+const onKeydown = (e) => {
+  if (!canEdit.value) return
+  if (e.ctrlKey || e.metaKey || e.altKey) return
+  const key = e.key
+  if (typeof key !== 'string' || key.length !== 1) return
+  const ch = key === ',' ? '.' : key
+  const isDigit = ch >= '0' && ch <= '9'
+  if (isDigit || ch === '.' || ch === '-') return
+  e.preventDefault()
+}
+
+const onBlur = () => {
+  emit('blur')
+  if (props.bindField && field?.onBlur) field.onBlur()
+  const n = parse(text.value)
+  const clamped = clamp(n)
+  if (clamped == null) {
+    text.value = String(effectiveValue.value ?? '')
+    return
+  }
+  batch(() => {
+    text.value = String(clamped)
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+  })
+}
+
+const onFocus = () => emit('focus')
+</script>
+
+<template>
+  <div class="n-inum">
+    <label v-if="label" class="n-inum-label">{{ label }}</label>
+    <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
+      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
+      <input class="n-inum-input" type="text" :value="text.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
+      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-inum{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-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-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}
+</style>

package/dist/components/NModal.js

@@ -0,0 +1,221 @@
+import { signal, effect, onMounted, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-42ba3820',
+  __hmrId: 'NModal_nexa',
+  props: {
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  closable: { type: Boolean, default: true }
+},
+  emits: ['close'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const isVisible = signal(false)
+    let modalEl = null
+    let previousFocus = null
+    const bodyOverflow = signal('')
+    const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
+    effect(() => {
+      if (props.show) {
+        previousFocus = document.activeElement
+        isVisible.value = true
+        bodyOverflow.value = document.body.style.overflow
+        document.body.style.overflow = 'hidden'
+        requestAnimationFrame(() => {
+          if (modalEl) modalEl.focus()
+        })
+      } else {
+        setTimeout(() => {
+          isVisible.value = false
+          document.body.style.overflow = bodyOverflow.value
+          if (previousFocus && previousFocus.focus) {
+            try { previousFocus.focus() } catch {}
+          }
+        }, 250)
+      }
+    })
+    const close = () => {
+      if (!props.closable) return
+      emit('close')
+    }
+    const handleEsc = (e) => {
+      if (e.key === 'Escape' && props.show) close()
+    }
+    const handleOverlayClick = (e) => {
+      if (e.target === e.currentTarget) close()
+    }
+    const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    const handleKeydown = (e) => {
+      if (e.key !== 'Tab' || !modalEl) return
+      const focusable = modalEl.querySelectorAll(focusableSelector)
+      if (focusable.length === 0) {
+        e.preventDefault()
+        return
+      }
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault()
+        first.focus()
+      }
+    }
+    onMounted(() => {
+      window.addEventListener('keydown', handleEsc)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('keydown', handleEsc)
+      document.body.style.overflow = ''
+    })
+    return { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h(_ntc_Teleport, { to: "body", "data-v-42ba3820": "" }, [
+        "\n    ",
+        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-42ba3820": "" }, [
+        "\n      ",
+        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-42ba3820": "" }),
+        "\n      ",
+        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: "modalEl", style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-42ba3820": "" }, [
+        "\n        ",
+        (title) ? h('div', { class: "n-modal-header", "data-v-42ba3820": "" }, [
+        "\n          ",
+        ctx.$slots.header ? ctx.$slots.header() : null,
+        "\n          ",
+        (closable) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-42ba3820": "" }, [
+        "×"
+      ]) : null
+      ]) : null,
+        h('div', { class: "n-modal-content", "data-v-42ba3820": "" }, [
+        "\n          ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n        "
+      ]),
+        "\n        ",
+        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-42ba3820": "" }, [
+        "\n          ",
+        ctx.$slots.footer ? ctx.$slots.footer() : null,
+        "\n        "
+      ]) : null
+      ]),
+        "\n    "
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-42ba3820'
+_sfc_main.__hmrId = 'NModal_nexa'
+
+export default _sfc_main
+
+const __style = `.n-modal-root[data-v-42ba3820]{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--n-z-modal);
+}
+
+.n-modal-overlay[data-v-42ba3820]{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--n-color-overlay);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.n-modal-overlay.is-active[data-v-42ba3820]{
+  opacity: 1;
+}
+
+.n-modal-container[data-v-42ba3820]{
+  position: relative;
+  width: 90%;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-2xl);
+  box-shadow: var(--n-shadow-xl);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+  outline: none;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.n-modal-container.is-active[data-v-42ba3820]{
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.n-modal-header[data-v-42ba3820]{
+  padding: var(--n-space-6) var(--n-space-8);
+  border-bottom: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.n-modal-header h3[data-v-42ba3820]{
+  margin: 0;
+  font-size: var(--n-text-xl);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+}
+
+.n-modal-close[data-v-42ba3820]{
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-secondary);
+  font-size: 1.75rem;
+  cursor: pointer;
+  transition: color var(--n-transition-fast);
+  padding: 0;
+  line-height: 1;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--n-radius-sm);
+}
+
+.n-modal-close[data-v-42ba3820]:hover{
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-modal-content[data-v-42ba3820]{
+  padding: var(--n-space-8);
+  color: var(--n-color-text-secondary);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.n-modal-footer[data-v-42ba3820]{
+  padding: var(--n-space-5) var(--n-space-8);
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--n-space-4);
+  flex-shrink: 0;
+}`
+injectStyle('data-v-42ba3820', __style)

package/dist/components/NModal.nexa

@@ -0,0 +1,221 @@
+<script setup>
+import { signal, effect, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  size: { type: String, default: 'md' },
+  closable: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['close'])
+
+const isVisible = signal(false)
+let modalEl = null
+let previousFocus = null
+const bodyOverflow = signal('')
+
+const sizeMap = { sm: '400px', md: '500px', lg: '640px', xl: '800px', full: '96%' }
+
+effect(() => {
+  if (props.show) {
+    previousFocus = document.activeElement
+    isVisible.value = true
+    bodyOverflow.value = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    requestAnimationFrame(() => {
+      if (modalEl) modalEl.focus()
+    })
+  } else {
+    setTimeout(() => {
+      isVisible.value = false
+      document.body.style.overflow = bodyOverflow.value
+      if (previousFocus && previousFocus.focus) {
+        try { previousFocus.focus() } catch {}
+      }
+    }, 250)
+  }
+})
+
+const close = () => {
+  if (!props.closable) return
+  emit('close')
+}
+
+const handleEsc = (e) => {
+  if (e.key === 'Escape' && props.show) close()
+}
+
+const handleOverlayClick = (e) => {
+  if (e.target === e.currentTarget) close()
+}
+
+const focusableSelector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const handleKeydown = (e) => {
+  if (e.key !== 'Tab' || !modalEl) return
+  const focusable = modalEl.querySelectorAll(focusableSelector)
+  if (focusable.length === 0) {
+    e.preventDefault()
+    return
+  }
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleEsc)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleEsc)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="isVisible.value" class="n-modal-root">
+      <div
+        class="n-modal-overlay"
+        :class="{ 'is-active': show }"
+        @click="handleOverlayClick"
+      ></div>
+      <div
+        ref="modalEl"
+        class="n-modal-container"
+        :class="{ 'is-active': show }"
+        :style="{ maxWidth: sizeMap[size] || size }"
+        tabindex="-1"
+        @keydown="handleKeydown"
+      >
+        <div v-if="title" class="n-modal-header">
+          <slot name="header">
+            <h3>{{ title }}</h3>
+          </slot>
+          <button v-if="closable" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+        </div>
+        <div class="n-modal-content">
+          <slot />
+        </div>
+        <div v-if="$slots.footer" class="n-modal-footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-modal-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--n-z-modal);
+}
+
+.n-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--n-color-overlay);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.n-modal-overlay.is-active {
+  opacity: 1;
+}
+
+.n-modal-container {
+  position: relative;
+  width: 90%;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-2xl);
+  box-shadow: var(--n-shadow-xl);
+  transform: scale(0.9) translateY(20px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  overflow: hidden;
+  outline: none;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.n-modal-container.is-active {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.n-modal-header {
+  padding: var(--n-space-6) var(--n-space-8);
+  border-bottom: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.n-modal-header h3 {
+  margin: 0;
+  font-size: var(--n-text-xl);
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-text);
+}
+
+.n-modal-close {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-secondary);
+  font-size: 1.75rem;
+  cursor: pointer;
+  transition: color var(--n-transition-fast);
+  padding: 0;
+  line-height: 1;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--n-radius-sm);
+}
+
+.n-modal-close:hover {
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-modal-content {
+  padding: var(--n-space-8);
+  color: var(--n-color-text-secondary);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.n-modal-footer {
+  padding: var(--n-space-5) var(--n-space-8);
+  background: rgba(0, 0, 0, 0.15);
+  border-top: 1px solid var(--n-color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--n-space-4);
+  flex-shrink: 0;
+}
+</style>