nexa-ui-kit 0.6.0

package/dist/components/NTooltip.nexa

@@ -0,0 +1,166 @@
+<script setup>
+import { signal } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const props = defineProps({
+  text: { type: String, default: '' },
+  position: { type: String, default: 'top' },
+  delay: { type: Number, default: 200 },
+  hideDelay: { type: Number, default: 100 }
+})
+
+const isVisible = signal(false)
+const instanceId = `n-tt-${Math.random().toString(16).slice(2)}`
+const popupStyle = signal({})
+const resolvedPlacement = signal('top')
+const rootEl = signal(null)
+let stopTracking = null
+let showTimer = null
+let hideTimer = null
+
+const startTracking = () => {
+  if (stopTracking) stopTracking()
+  stopTracking = trackFloatingOverlay({
+    isOpen: () => isVisible.value,
+    getAnchor: () => rootEl.value,
+    getPopup: () => document.querySelector(`[data-tooltip-popup="${instanceId}"]`),
+    placement: props.position,
+    align: 'center',
+    matchWidth: false,
+    minWidth: 0,
+    gap: 8,
+    margin: 8,
+    zIndex: 1000,
+    onUpdate: (result) => {
+      popupStyle.value = result.style
+      resolvedPlacement.value = result.placement
+    },
+  })
+}
+
+const stop = () => {
+  if (stopTracking) {
+    stopTracking()
+    stopTracking = null
+  }
+}
+
+const show = (e) => {
+  clearTimeout(hideTimer)
+  const target = e?.currentTarget || e?.target
+  rootEl.value = target?.closest ? target.closest(`[data-tooltip-root="${instanceId}"]`) : null
+  showTimer = setTimeout(() => {
+    isVisible.value = true
+    requestAnimationFrame(() => startTracking())
+  }, props.delay)
+}
+
+const hide = () => {
+  clearTimeout(showTimer)
+  hideTimer = setTimeout(() => {
+    isVisible.value = false
+    stop()
+  }, props.hideDelay)
+}
+</script>
+
+<template>
+  <div
+    class="n-tooltip-wrapper"
+    :data-tooltip-root="instanceId"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+    <Teleport to="body">
+      <div
+        v-if="isVisible.value"
+        class="n-tooltip"
+        :class="`is-${resolvedPlacement.value}`"
+        role="tooltip"
+        :data-tooltip-popup="instanceId"
+        :style="popupStyle.value"
+      >
+        {{ text }}
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-tooltip-wrapper {
+  display: inline-block;
+}
+
+.n-tooltip {
+  background: var(--n-color-bg);
+  color: var(--n-color-text);
+  padding: var(--n-space-2) var(--n-space-3);
+  border-radius: var(--n-radius-sm);
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-medium);
+  white-space: nowrap;
+  z-index: var(--n-z-tooltip);
+  box-shadow: var(--n-shadow-lg);
+  border: 1px solid var(--n-color-border);
+  pointer-events: none;
+  animation: n-tooltip-in 0.2s ease-out;
+}
+
+@keyframes n-tooltip-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.is-top {
+  transform-origin: bottom center;
+}
+
+.is-bottom {
+  transform-origin: top center;
+}
+
+.is-left {
+  transform-origin: center right;
+}
+
+.is-right {
+  transform-origin: center left;
+}
+
+.n-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 5px solid transparent;
+}
+
+.is-top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--n-color-border);
+}
+
+.is-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--n-color-border);
+}
+
+.is-left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--n-color-border);
+}
+
+.is-right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--n-color-border);
+}
+</style>

package/dist/components/NTreeMenu.js

@@ -0,0 +1,151 @@
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-44b3942a',
+  __hmrId: 'NTreeMenu_nexa',
+  props: {
+  items: { type: Array, default: () => [] },
+  selectable: { type: Boolean, default: true },
+  selected: { type: String, default: '' }
+},
+  emits: ['update:selected', 'select'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const expanded = signal({})
+    const toggleExpand = (id) => {
+      const current = { ...expanded.value }
+      current[id] = !current[id]
+      expanded.value = current
+    }
+    const selectItem = (item) => {
+      if (!props.selectable) return
+      emit('update:selected', item.id)
+      emit('select', item)
+    }
+    const hasChildren = (item) => item.children && item.children.length > 0
+    const isExpanded = (id) => expanded.value[id] === true
+    const isSelected = (id) => props.selected === id
+    const flatTree = computed(() => {
+      const result = []
+      function walk(items, depth) {
+        for (const item of items) {
+          result.push({ ...item, _depth: depth })
+          if (hasChildren(item) && isExpanded(item.id)) {
+            walk(item.children, depth + 1)
+          }
+        }
+      }
+      walk(props.items, 0)
+      return result
+    })
+    const toggle = (id, e) => {
+      e.stopPropagation()
+      toggleExpand(id)
+    }
+    return { expanded, toggleExpand, selectItem, hasChildren, isExpanded, isSelected, flatTree, toggle, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { expanded, toggleExpand, selectItem, hasChildren, isExpanded, isSelected, flatTree, toggle, $slots, emit, items, selectable, selected, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-tree-menu", "data-v-44b3942a": "" }, [
+        "\n    ",
+        flatTree.value.map((item, index) =>
+        h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-44b3942a": "" }, [
+        "\n      ",
+        h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-44b3942a": "" }, [
+        "\n        ",
+        (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-44b3942a": "" }, [
+        "▶"
+      ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-44b3942a": "" }) : null,
+        "\n        ",
+        (item.icon) ? h('span', { class: "n-tree-icon", "data-v-44b3942a": "" }, [
+        item.icon
+      ]) : null,
+        h('span', { class: "n-tree-label", "data-v-44b3942a": "" }, [
+        item.label
+      ]),
+        "\n      "
+      ]),
+        "\n    "
+      ])
+      ),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-44b3942a'
+_sfc_main.__hmrId = 'NTreeMenu_nexa'
+
+export default _sfc_main
+
+const __style = `.n-tree-menu[data-v-44b3942a]{
+  font-family: var(--n-font-sans);
+  font-size: var(--n-text-sm);
+  user-select: none;
+}
+
+.n-tree-item[data-v-44b3942a]{
+  --n-tree-depth: 0;
+}
+
+.n-tree-row[data-v-44b3942a]{
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.5rem;
+  padding-left: calc(0.5rem + var(--n-tree-depth, 0) * 1.25rem);
+  border-radius: var(--n-radius-sm);
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+  color: var(--n-color-text);
+}
+
+.n-tree-row[data-v-44b3942a]:hover{
+  background: var(--n-color-surface-hover);
+}
+
+.n-tree-item.is-selected > .n-tree-row[data-v-44b3942a]{
+  background: var(--n-color-primary-light);
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-tree-toggle[data-v-44b3942a]{
+  background: none;
+  border: none;
+  color: var(--n-color-text-muted);
+  cursor: pointer;
+  font-size: 0.6rem;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: transform var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.n-tree-toggle.is-expanded[data-v-44b3942a]{
+  transform: rotate(90deg);
+}
+
+.n-tree-toggle-placeholder[data-v-44b3942a]{
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.n-tree-icon[data-v-44b3942a]{
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.n-tree-label[data-v-44b3942a]{
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`
+injectStyle('data-v-44b3942a', __style)

package/dist/components/NTreeMenu.nexa

@@ -0,0 +1,142 @@
+<script setup>
+import { signal, computed, h } from 'nexa-framework'
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  selectable: { type: Boolean, default: true },
+  selected: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:selected', 'select'])
+
+const expanded = signal({})
+
+const toggleExpand = (id) => {
+  const current = { ...expanded.value }
+  current[id] = !current[id]
+  expanded.value = current
+}
+
+const selectItem = (item) => {
+  if (!props.selectable) return
+  emit('update:selected', item.id)
+  emit('select', item)
+}
+
+const hasChildren = (item) => item.children && item.children.length > 0
+const isExpanded = (id) => expanded.value[id] === true
+const isSelected = (id) => props.selected === id
+
+const flatTree = computed(() => {
+  const result = []
+  function walk(items, depth) {
+    for (const item of items) {
+      result.push({ ...item, _depth: depth })
+      if (hasChildren(item) && isExpanded(item.id)) {
+        walk(item.children, depth + 1)
+      }
+    }
+  }
+  walk(props.items, 0)
+  return result
+})
+
+const toggle = (id, e) => {
+  e.stopPropagation()
+  toggleExpand(id)
+}
+</script>
+
+<template>
+  <div class="n-tree-menu">
+    <div v-for="item in flatTree.value" :key="item.id"
+      class="n-tree-item"
+      :class="{ 'is-selected': isSelected(item.id) }"
+      :style="{ '--n-tree-depth': String(item._depth) }"
+    >
+      <div class="n-tree-row" @click="selectItem(item)">
+        <button v-if="hasChildren(item)"
+          class="n-tree-toggle"
+          :class="{ 'is-expanded': isExpanded(item.id) }"
+          @click="toggle(item.id, $event)"
+        >▶</button>
+        <span v-else class="n-tree-toggle-placeholder"></span>
+        <span v-if="item.icon" class="n-tree-icon">{{ item.icon }}</span>
+        <span class="n-tree-label">{{ item.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-tree-menu {
+  font-family: var(--n-font-sans);
+  font-size: var(--n-text-sm);
+  user-select: none;
+}
+
+.n-tree-item {
+  --n-tree-depth: 0;
+}
+
+.n-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.5rem;
+  padding-left: calc(0.5rem + var(--n-tree-depth, 0) * 1.25rem);
+  border-radius: var(--n-radius-sm);
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+  color: var(--n-color-text);
+}
+
+.n-tree-row:hover {
+  background: var(--n-color-surface-hover);
+}
+
+.n-tree-item.is-selected > .n-tree-row {
+  background: var(--n-color-primary-light);
+  color: var(--n-color-primary);
+  font-weight: var(--n-weight-semibold);
+}
+
+.n-tree-toggle {
+  background: none;
+  border: none;
+  color: var(--n-color-text-muted);
+  cursor: pointer;
+  font-size: 0.6rem;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: transform var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.n-tree-toggle.is-expanded {
+  transform: rotate(90deg);
+}
+
+.n-tree-toggle-placeholder {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.n-tree-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.n-tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+export { default as NButton } from './components/NButton.nexa';
+export { default as NCard } from './components/NCard.nexa';
+export { default as NInput } from './components/NInput.nexa';
+export { default as NBadge } from './components/NBadge.nexa';
+export { default as NModal } from './components/NModal.nexa';
+export { default as NBottomSheet } from './components/NBottomSheet.nexa';
+export { default as NSelect } from './components/NSelect.nexa';
+export { default as NToastContainer } from './components/NToastContainer.nexa';
+export { default as NTooltip } from './components/NTooltip.nexa';
+export { default as NSwitch } from './components/NSwitch.nexa';
+export { default as NCheckbox } from './components/NCheckbox.nexa';
+export { default as NRadio } from './components/NRadio.nexa';
+export { default as NAutocomplete } from './components/NAutocomplete.nexa';
+export { default as NTabs } from './components/NTabs.nexa';
+export { default as NAlert } from './components/NAlert.nexa';
+export { default as NTag } from './components/NTag.nexa';
+export { default as NProgressBar } from './components/NProgressBar.nexa';
+export { default as NSkeleton } from './components/NSkeleton.nexa';
+export { default as NAvatar } from './components/NAvatar.nexa';
+export { default as NDatepicker } from './components/NDatepicker.nexa';
+export { default as NTreeMenu } from './components/NTreeMenu.nexa';
+export { default as NPassword } from './components/NPassword.nexa';
+export { default as NForm } from './components/NForm.nexa';
+export { default as NFormField } from './components/NFormField.nexa';
+export { default as NChips } from './components/NChips.nexa';
+export { default as NInputNumber } from './components/NInputNumber.nexa';
+export { default as NMultiSelect } from './components/NMultiSelect.nexa';
+export { default as NDataTable } from './components/NDataTable.nexa';
+export { default as NPaginator } from './components/NPaginator.nexa';
+export * from './services/ToastService.js';
+export * from './services/FormValidation.js';
+export { installTheme } from './styles/theme.js';

package/dist/index.js

@@ -0,0 +1,34 @@
+import { installTheme } from './styles/theme.js';
+installTheme();
+export { default as NButton } from './components/NButton.js';
+export { default as NCard } from './components/NCard.js';
+export { default as NInput } from './components/NInput.js';
+export { default as NBadge } from './components/NBadge.js';
+export { default as NModal } from './components/NModal.js';
+export { default as NBottomSheet } from './components/NBottomSheet.js';
+export { default as NSelect } from './components/NSelect.js';
+export { default as NToastContainer } from './components/NToastContainer.js';
+export { default as NTooltip } from './components/NTooltip.js';
+export { default as NSwitch } from './components/NSwitch.js';
+export { default as NCheckbox } from './components/NCheckbox.js';
+export { default as NRadio } from './components/NRadio.js';
+export { default as NAutocomplete } from './components/NAutocomplete.js';
+export { default as NTabs } from './components/NTabs.js';
+export { default as NAlert } from './components/NAlert.js';
+export { default as NTag } from './components/NTag.js';
+export { default as NProgressBar } from './components/NProgressBar.js';
+export { default as NSkeleton } from './components/NSkeleton.js';
+export { default as NAvatar } from './components/NAvatar.js';
+export { default as NDatepicker } from './components/NDatepicker.js';
+export { default as NTreeMenu } from './components/NTreeMenu.js';
+export { default as NPassword } from './components/NPassword.js';
+export { default as NForm } from './components/NForm.js';
+export { default as NFormField } from './components/NFormField.js';
+export { default as NChips } from './components/NChips.js';
+export { default as NInputNumber } from './components/NInputNumber.js';
+export { default as NMultiSelect } from './components/NMultiSelect.js';
+export { default as NDataTable } from './components/NDataTable.js';
+export { default as NPaginator } from './components/NPaginator.js';
+export * from './services/ToastService.js';
+export * from './services/FormValidation.js';
+export { installTheme } from './styles/theme.js';

package/dist/services/FloatingOverlay.d.ts

@@ -0,0 +1,27 @@
+export type FloatingPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+export type FloatingAlign = 'start' | 'center' | 'end';
+export type FloatingResult = {
+    style: Record<string, string | number>;
+    placement: Exclude<FloatingPlacement, 'auto'>;
+};
+type ComputeOptions = {
+    placement?: FloatingPlacement;
+    align?: FloatingAlign;
+    gap?: number;
+    margin?: number;
+    matchWidth?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    zIndex?: number;
+};
+export declare const computeFloatingOverlay: (anchorEl: HTMLElement, popupEl: HTMLElement, options?: ComputeOptions) => FloatingResult;
+type TrackOptions = ComputeOptions & {
+    isOpen: () => boolean;
+    getAnchor: () => HTMLElement | null;
+    getPopup: () => HTMLElement | null;
+    onUpdate: (result: FloatingResult) => void;
+    isEventInside?: (event: Event) => boolean;
+    onOutside?: (event: Event) => void;
+};
+export declare const trackFloatingOverlay: (options: TrackOptions) => (() => void);
+export {};

package/dist/services/FloatingOverlay.js

@@ -0,0 +1,98 @@
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const computeFloatingOverlay = (anchorEl, popupEl, options = {}) => {
+    const rect = anchorEl.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const margin = options.margin ?? 8;
+    const gap = options.gap ?? 6;
+    const align = options.align ?? 'start';
+    const maxWidth = options.maxWidth ?? viewportWidth - margin * 2;
+    const popupWidth = popupEl.offsetWidth || popupEl.getBoundingClientRect().width || 0;
+    const popupHeight = popupEl.offsetHeight || popupEl.getBoundingClientRect().height || 0;
+    const desiredWidth = options.matchWidth ? rect.width : popupWidth;
+    const width = clamp(Math.ceil(desiredWidth), options.minWidth ?? 240, Math.max(options.minWidth ?? 240, Math.min(maxWidth, viewportWidth - margin * 2)));
+    let placement = 'bottom';
+    const desiredPlacement = options.placement ?? 'auto';
+    if (desiredPlacement === 'top' || desiredPlacement === 'bottom' || desiredPlacement === 'left' || desiredPlacement === 'right') {
+        placement = desiredPlacement;
+    }
+    else {
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const fitsBottom = spaceBelow >= popupHeight + margin;
+        const fitsTop = spaceAbove >= popupHeight + margin;
+        if (!fitsBottom && fitsTop)
+            placement = 'top';
+        else if (!fitsTop && fitsBottom)
+            placement = 'bottom';
+        else
+            placement = spaceBelow >= spaceAbove ? 'bottom' : 'top';
+    }
+    let left = rect.left;
+    let top = rect.bottom + gap;
+    if (placement === 'top' || placement === 'bottom') {
+        if (align === 'center') {
+            left = rect.left + rect.width / 2 - width / 2;
+        }
+        else if (align === 'end') {
+            left = rect.right - width;
+        }
+        else {
+            left = rect.left;
+        }
+        left = clamp(left, margin, viewportWidth - width - margin);
+        top = placement === 'top' ? rect.top - gap - popupHeight : rect.bottom + gap;
+        top = clamp(top, margin, viewportHeight - popupHeight - margin);
+    }
+    else {
+        left = placement === 'left' ? rect.left - gap - width : rect.right + gap;
+        left = clamp(left, margin, viewportWidth - width - margin);
+        if (align === 'center') {
+            top = rect.top + rect.height / 2 - popupHeight / 2;
+        }
+        else if (align === 'end') {
+            top = rect.bottom - popupHeight;
+        }
+        else {
+            top = rect.top;
+        }
+        top = clamp(top, margin, viewportHeight - popupHeight - margin);
+    }
+    const style = {
+        position: 'fixed',
+        top: `${Math.round(top)}px`,
+        left: `${Math.round(left)}px`,
+        width: `${Math.round(width)}px`,
+        zIndex: options.zIndex ?? 9999,
+    };
+    return { style, placement };
+};
+export const trackFloatingOverlay = (options) => {
+    const update = () => {
+        if (!options.isOpen())
+            return;
+        const anchor = options.getAnchor();
+        const popup = options.getPopup();
+        if (!anchor || !popup)
+            return;
+        options.onUpdate(computeFloatingOverlay(anchor, popup, options));
+    };
+    const onScrollOrResize = () => update();
+    const onPointerDown = (e) => {
+        if (!options.isOpen())
+            return;
+        if (options.isEventInside && options.isEventInside(e))
+            return;
+        options.onOutside?.(e);
+    };
+    update();
+    requestAnimationFrame(update);
+    window.addEventListener('resize', onScrollOrResize);
+    window.addEventListener('scroll', onScrollOrResize, true);
+    document.addEventListener('mousedown', onPointerDown);
+    return () => {
+        window.removeEventListener('resize', onScrollOrResize);
+        window.removeEventListener('scroll', onScrollOrResize, true);
+        document.removeEventListener('mousedown', onPointerDown);
+    };
+};

package/dist/services/FormValidation.d.ts

@@ -0,0 +1,8 @@
+export type FormRule = (value: any, values: Record<string, any>) => string | null | undefined | Promise<string | null | undefined>;
+export declare const required: (message?: string) => FormRule;
+export declare const minLength: (length: number, message?: string) => FormRule;
+export declare const maxLength: (length: number, message?: string) => FormRule;
+export declare const pattern: (re: RegExp, message?: string) => FormRule;
+export declare const email: (message?: string) => FormRule;
+export declare const sameAs: (otherField: string, message?: string) => FormRule;
+export declare const asyncRule: (rule: FormRule, delayMs?: number) => FormRule;