nexa-ui-kit 0.6.0

package/dist/components/NToastContainer.js

@@ -0,0 +1,242 @@
+import { useToast } from '../services/ToastService.js'
+import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-8ac4158',
+  __hmrId: 'NToastContainer_nexa',
+  props: {
+  position: { type: String, default: 'top-right' }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const { toasts, remove } = useToast()
+    const positionClass = `is-${props.position.replace('-', '-')}`
+    return { toasts, remove, positionClass, useToast, $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { toasts, remove, positionClass, useToast, $slots, position, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h(_ntc_Teleport, { to: "body", "data-v-8ac4158": "" }, [
+        "\n    ",
+        h('div', { class: ["n-toast-container", positionClass], "data-v-8ac4158": "" }, [
+        "\n      ",
+        toasts.value.map((toast, index) =>
+        h('div', { class: ["n-toast", `is-${toast.type}`], key: toast.id, onClick: ($event) => { remove(toast.id) }, "data-v-8ac4158": "" }, [
+        "\n        ",
+        h('div', { class: "n-toast-body", "data-v-8ac4158": "" }, [
+        "\n          ",
+        h('span', { class: "n-toast-icon", "data-v-8ac4158": "" }, [
+        "\n            ",
+        toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚡' : 'ℹ',
+        "\n          "
+      ]),
+        "\n          ",
+        h('span', { class: "n-toast-message", "data-v-8ac4158": "" }, [
+        toast.message
+      ]),
+        "\n          ",
+        h('button', { class: "n-toast-dismiss", onClick: ($event) => { $event.stopPropagation(); (($event) => { remove(toast.id) })($event) }, "aria-label": "Dismiss", "data-v-8ac4158": "" }, [
+        "×"
+      ]),
+        "\n        "
+      ]),
+        "\n        ",
+        (toast.duration > 0) ? h('div', { class: "n-toast-progress", style: { animationDuration: toast.duration + 'ms' }, "data-v-8ac4158": "" }) : null
+      ])
+      ),
+        "\n    "
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-8ac4158'
+_sfc_main.__hmrId = 'NToastContainer_nexa'
+
+export default _sfc_main
+
+const __style = `.n-toast-container[data-v-8ac4158]{
+  position: fixed;
+  z-index: var(--n-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-3);
+  pointer-events: none;
+  padding: var(--n-space-4);
+}
+
+.is-top-right[data-v-8ac4158]{
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.is-top-left[data-v-8ac4158]{
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.is-bottom-right[data-v-8ac4158]{
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.is-bottom-left[data-v-8ac4158]{
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.is-top-center[data-v-8ac4158]{
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.n-toast[data-v-8ac4158]{
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 420px;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  overflow: hidden;
+  box-shadow: var(--n-shadow-lg);
+  cursor: pointer;
+  animation: n-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--n-transition-fast);
+}
+
+.n-toast[data-v-8ac4158]:hover{
+  transform: scale(1.02);
+  background: var(--n-color-surface-alt);
+}
+
+@keyframes n-toast-in {
+from[data-v-8ac4158]{
+    opacity: 0;
+    transform: translateX(30px) scale(0.95);
+  }
+to[data-v-8ac4158]{
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+.is-top-left .n-toast[data-v-8ac4158]{
+  animation-name: n-toast-in-left;
+}
+
+@keyframes n-toast-in-left {
+from[data-v-8ac4158]{
+    opacity: 0;
+    transform: translateX(-30px) scale(0.95);
+  }
+to[data-v-8ac4158]{
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+.is-bottom-right .n-toast[data-v-8ac4158], 
+.is-bottom-left .n-toast[data-v-8ac4158]{
+  animation-name: n-toast-in-up;
+}
+
+@keyframes n-toast-in-up {
+from[data-v-8ac4158]{
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+to[data-v-8ac4158]{
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.n-toast-body{
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  padding: var(--n-space-4) var(--n-space-5);
+}
+
+.n-toast-icon[data-v-8ac4158]{
+  width: 28px;
+  height: 28px;
+  border-radius: var(--n-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-extrabold);
+  flex-shrink: 0;
+}
+
+.is-success .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-success); color: white; }
+.is-error .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-danger); color: white; }
+.is-info .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-primary); color: white; }
+.is-warning .n-toast-icon[data-v-8ac4158]{ background: var(--n-color-warning); color: white; }
+
+.n-toast-message[data-v-8ac4158]{
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  flex: 1;
+  line-height: var(--n-leading-normal);
+}
+
+.n-toast-dismiss[data-v-8ac4158]{
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-lg);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.n-toast[data-v-8ac4158]:hover .n-toast-dismiss{
+  opacity: 1;
+}
+
+.n-toast-dismiss[data-v-8ac4158]:hover{
+  color: var(--n-color-text);
+}
+
+.n-toast-progress[data-v-8ac4158]{
+  height: 3px;
+  background: var(--n-color-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.n-toast-progress[data-v-8ac4158]::after{
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: currentColor;
+  animation: n-toast-shrink linear forwards;
+}
+
+.is-success .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-success); }
+.is-error .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-danger); }
+.is-info .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-primary); }
+.is-warning .n-toast-progress[data-v-8ac4158]::after{ background: var(--n-color-warning); }
+
+@keyframes n-toast-shrink {
+from[data-v-8ac4158]{ transform: scaleX(1); }
+to[data-v-8ac4158]{ transform: scaleX(0); }
+}`
+injectStyle('data-v-8ac4158', __style)

package/dist/components/NToastContainer.nexa

@@ -0,0 +1,221 @@
+<script setup>
+import { useToast } from '../services/ToastService.js'
+
+const props = defineProps({
+  position: { type: String, default: 'top-right' }
+})
+
+const { toasts, remove } = useToast()
+
+const positionClass = `is-${props.position.replace('-', '-')}`
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="n-toast-container" :class="positionClass">
+      <div
+        v-for="toast in toasts.value"
+        :key="toast.id"
+        class="n-toast"
+        :class="`is-${toast.type}`"
+        @click="remove(toast.id)"
+      >
+        <div class="n-toast-body">
+          <span class="n-toast-icon">
+            {{ toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚡' : 'ℹ' }}
+          </span>
+          <span class="n-toast-message">{{ toast.message }}</span>
+          <button class="n-toast-dismiss" @click.stop="remove(toast.id)" aria-label="Dismiss">&times;</button>
+        </div>
+        <div v-if="toast.duration > 0" class="n-toast-progress" :style="{ animationDuration: toast.duration + 'ms' }"></div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.n-toast-container {
+  position: fixed;
+  z-index: var(--n-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-3);
+  pointer-events: none;
+  padding: var(--n-space-4);
+}
+
+.is-top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.is-top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.is-bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.is-bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.is-top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.n-toast {
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 420px;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  overflow: hidden;
+  box-shadow: var(--n-shadow-lg);
+  cursor: pointer;
+  animation: n-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all var(--n-transition-fast);
+}
+
+.n-toast:hover {
+  transform: scale(1.02);
+  background: var(--n-color-surface-alt);
+}
+
+@keyframes n-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+.is-top-left .n-toast {
+  animation-name: n-toast-in-left;
+}
+
+@keyframes n-toast-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+.is-bottom-right .n-toast,
+.is-bottom-left .n-toast {
+  animation-name: n-toast-in-up;
+}
+
+@keyframes n-toast-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.n-toast-body {
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  padding: var(--n-space-4) var(--n-space-5);
+}
+
+.n-toast-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--n-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-extrabold);
+  flex-shrink: 0;
+}
+
+.is-success .n-toast-icon { background: var(--n-color-success); color: white; }
+.is-error .n-toast-icon { background: var(--n-color-danger); color: white; }
+.is-info .n-toast-icon { background: var(--n-color-primary); color: white; }
+.is-warning .n-toast-icon { background: var(--n-color-warning); color: white; }
+
+.n-toast-message {
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-medium);
+  flex: 1;
+  line-height: var(--n-leading-normal);
+}
+
+.n-toast-dismiss {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-lg);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.n-toast:hover .n-toast-dismiss {
+  opacity: 1;
+}
+
+.n-toast-dismiss:hover {
+  color: var(--n-color-text);
+}
+
+.n-toast-progress {
+  height: 3px;
+  background: var(--n-color-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.n-toast-progress::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: currentColor;
+  animation: n-toast-shrink linear forwards;
+}
+
+.is-success .n-toast-progress::after { background: var(--n-color-success); }
+.is-error .n-toast-progress::after { background: var(--n-color-danger); }
+.is-info .n-toast-progress::after { background: var(--n-color-primary); }
+.is-warning .n-toast-progress::after { background: var(--n-color-warning); }
+
+@keyframes n-toast-shrink {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+</style>

package/dist/components/NTooltip.js

@@ -0,0 +1,163 @@
+import { signal, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-522b965d',
+  __hmrId: 'NTooltip_nexa',
+  props: {
+  text: { type: String, default: '' },
+  position: { type: String, default: 'top' },
+  delay: { type: Number, default: 200 },
+  hideDelay: { type: Number, default: 100 }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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)
+    }
+    return { isVisible, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, showTimer, hideTimer, startTracking, stop, show, hide, trackFloatingOverlay, $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { isVisible, instanceId, popupStyle, resolvedPlacement, rootEl, stopTracking, showTimer, hideTimer, startTracking, stop, show, hide, trackFloatingOverlay, $slots, text, position, delay, hideDelay, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h('div', { class: "n-tooltip-wrapper", "data-tooltip-root": instanceId, onMouseenter: show, onMouseleave: hide, onFocusin: show, onFocusout: hide, "data-v-522b965d": "" }, [
+        "\n    ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n    ",
+        h(_ntc_Teleport, { to: "body", "data-v-522b965d": "" }, [
+        "\n      ",
+        (isVisible.value) ? h('div', { class: ["n-tooltip", `is-${resolvedPlacement.value}`], role: "tooltip", "data-tooltip-popup": instanceId, style: popupStyle.value, "data-v-522b965d": "" }, [
+        "\n        ",
+        text,
+        "\n      "
+      ]) : null
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-522b965d'
+_sfc_main.__hmrId = 'NTooltip_nexa'
+
+export default _sfc_main
+
+const __style = `.n-tooltip-wrapper[data-v-522b965d]{
+  display: inline-block;
+}
+
+.n-tooltip[data-v-522b965d]{
+  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[data-v-522b965d]{ opacity: 0; transform: scale(0.95); }
+to[data-v-522b965d]{ opacity: 1; transform: scale(1); }
+}
+
+.is-top[data-v-522b965d]{
+  transform-origin: bottom center;
+}
+
+.is-bottom[data-v-522b965d]{
+  transform-origin: top center;
+}
+
+.is-left[data-v-522b965d]{
+  transform-origin: center right;
+}
+
+.is-right[data-v-522b965d]{
+  transform-origin: center left;
+}
+
+.n-tooltip[data-v-522b965d]::after{
+  content: '';
+  position: absolute;
+  border: 5px solid transparent;
+}
+
+.is-top[data-v-522b965d]::after{
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--n-color-border);
+}
+
+.is-bottom[data-v-522b965d]::after{
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--n-color-border);
+}
+
+.is-left[data-v-522b965d]::after{
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--n-color-border);
+}
+
+.is-right[data-v-522b965d]::after{
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--n-color-border);
+}`
+injectStyle('data-v-522b965d', __style)