nexa-ui-kit 0.11.5 → 0.11.8

package/dist/components/NButton.nexa

@@ -1,318 +1,224 @@
-<script setup>
-import { signal, computed } from 'nexa-framework'
-
-const props = defineProps({
-  variant: { type: String, default: 'primary' },
-  size: { type: String, default: 'md' },
-  type: { type: String, default: 'button' },
-  disabled: { type: Boolean, default: false },
-  loading: { type: Boolean, default: false },
-  block: { type: Boolean, default: false },
-  rounded: { type: Boolean, default: false },
-  loadingText: { type: String, default: '' }
-})
-
-const emit = defineEmits(['click'])
-
-const ripple = signal([])
-
-const handleClick = (e) => {
-  if (props.disabled || props.loading) return
-  emit('click', e)
-  const rect = e.currentTarget.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
-  const id = Date.now()
-  ripple.value = [...ripple.value, { id, x, y }]
-  setTimeout(() => {
-    ripple.value = ripple.value.filter(r => r.id !== id)
-  }, 600)
-}
-
-const btnClass = computed(() => {
-  return [
-    'n-btn',
-    `n-btn-${props.variant}`,
-    `n-btn-${props.size}`,
-    props.loading ? 'is-loading' : '',
-    props.block ? 'is-block' : '',
-    props.rounded ? 'is-rounded' : ''
-  ].join(' ')
-})
-</script>
-
-<template>
-  <button
-    :class="btnClass.value"
-    :type="type"
-    :disabled="disabled || loading"
-    :aria-busy="loading ? 'true' : undefined"
-    @click="handleClick"
-  >
-    <span v-if="loading" class="n-btn-loader"></span>
-    <span v-if="loading && loadingText" class="n-btn-loading-text">{{ loadingText }}</span>
-    <span v-if="!loading || (loading && !loadingText)" class="n-btn-content">
-      <slot />
-    </span>
-    <span v-for="r in ripple.value" :key="r.id" class="n-btn-ripple" :style="{ left: r.x + 'px', top: r.y + 'px' }"></span>
-  </button>
-</template>
-
-<style scoped>
-.n-btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--n-space-2);
-  font-family: var(--n-font-sans);
-  font-weight: var(--n-weight-semibold);
-  letter-spacing: 0.01em;
-  border-radius: var(--n-radius-md);
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-  border: 1px solid transparent;
-  outline: none;
-  white-space: nowrap;
-  user-select: none;
-  overflow: hidden;
-  text-decoration: none;
-  line-height: var(--n-leading-normal, 1.5);
-  min-width: fit-content;
-  will-change: transform;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.n-btn:focus-visible {
-  box-shadow: 0 0 0 3px var(--n-color-primary-light), 0 0 0 1px var(--n-color-primary);
-}
-
-/* Sizes */
-.n-btn-sm { padding: 0.5rem 1.5rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 36px; }
-.n-btn-md { padding: 0.75rem 2rem; font-size: var(--n-text-base); min-height: 44px; }
-.n-btn-lg { padding: 1rem 2.75rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 52px; }
-
-/* Block */
-.is-block { width: 100%; }
-
-/* Rounded */
-.is-rounded { border-radius: var(--n-radius-full); }
-
-/* Active/Press */
-.n-btn:active:not(:disabled) {
-  transform: scale(0.97);
-}
-
-/* Variant: Primary */
-.n-btn-primary {
-  background: linear-gradient(135deg, var(--n-color-primary) 0%, var(--n-color-primary-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-primary);
-}
-.n-btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px var(--n-color-primary-glow);
-}
-.n-btn-primary:active:not(:disabled) {
-  box-shadow: var(--n-shadow-glow-primary), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Secondary */
-.n-btn-secondary {
-  background: var(--n-color-surface-alt);
-  color: var(--n-color-text);
-  border-color: var(--n-color-border);
-}
-.n-btn-secondary:hover:not(:disabled) {
-  background: var(--n-color-surface-hover);
-  border-color: var(--n-color-border-hover);
-  transform: translateY(-1px);
-}
-.n-btn-secondary:active:not(:disabled) {
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
-}
-
-/* Variant: Success */
-.n-btn-success {
-  background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-success);
-}
-.n-btn-success:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-success);
-}
-.n-btn-success:active:not(:disabled) {
-  box-shadow: var(--n-shadow-glow-success), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Warning */
-.n-btn-warning {
-  background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-warning);
-}
-.n-btn-warning:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-warning);
-}
-.n-btn-warning:active:not(:disabled) {
-  box-shadow: var(--n-shadow-glow-warning), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Info */
-.n-btn-info {
-  background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-info);
-}
-.n-btn-info:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-info);
-}
-.n-btn-info:active:not(:disabled) {
-  box-shadow: var(--n-shadow-glow-info), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Danger */
-.n-btn-danger {
-  background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
-  color: white;
-  box-shadow: var(--n-shadow-glow-danger);
-}
-.n-btn-danger:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: var(--n-shadow-glow-danger);
-}
-.n-btn-danger:active:not(:disabled) {
-  box-shadow: var(--n-shadow-glow-danger), inset 0 1px 3px rgba(0,0,0,0.15);
-}
-
-/* Variant: Ghost */
-.n-btn-ghost {
-  background: transparent;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  color: var(--n-color-text-secondary);
-  border-color: transparent;
-}
-.n-btn-ghost:hover:not(:disabled) {
-  background: var(--n-color-glass);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  color: var(--n-color-text);
-  border-color: var(--n-color-glass-border);
-}
-.n-btn-ghost:active:not(:disabled) {
-  background: var(--n-color-glass-hover);
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
-}
-
-/* Variant: Outline */
-.n-btn-outline {
-  background: transparent;
-  color: var(--n-color-primary);
-  border: 1.5px solid transparent;
-  background-image: linear-gradient(transparent, transparent), linear-gradient(135deg, var(--n-color-primary), var(--n-color-primary-hover));
-  background-origin: padding-box, border-box;
-  background-clip: padding-box, border-box;
-}
-.n-btn-outline:hover:not(:disabled) {
-  background-image: linear-gradient(var(--n-color-primary-light), var(--n-color-primary-light)), linear-gradient(135deg, var(--n-color-primary-hover), var(--n-color-primary));
-  background-origin: padding-box, border-box;
-  background-clip: padding-box, border-box;
-  color: var(--n-color-primary-hover);
-}
-.n-btn-outline:active:not(:disabled) {
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
-}
-
-/* Variant: Glass */
-.n-btn-glass {
-  background: var(--n-color-glass);
-  backdrop-filter: blur(10px);
-  border-color: var(--n-color-glass-border);
-  color: var(--n-color-text);
-}
-.n-btn-glass:hover:not(:disabled) {
-  background: var(--n-color-glass-hover);
-  border-color: var(--n-color-border-hover);
-}
-.n-btn-glass:active:not(:disabled) {
-  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
-}
-
-/* Disabled */
-.n-btn:disabled {
-  cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
-  pointer-events: none;
-  opacity: 0.55;
-}
-.n-btn:disabled::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: var(--n-color-surface, #fff);
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-/* Loader */
-.n-btn-loader {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--n-radius-full);
-  animation: n-spin 0.7s linear infinite;
-  flex-shrink: 0;
-}
-
-.n-btn-lg .n-btn-loader {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-width: 2.5px;
-}
-
-.n-btn-sm .n-btn-loader {
-  width: 0.85rem;
-  height: 0.85rem;
-}
-
-.n-btn-loading-text {
-  opacity: 0.8;
-  font-weight: var(--n-weight-normal);
-}
-
-.n-btn-content {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--n-space-2);
-}
-
-@keyframes n-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* Ripple */
-.n-btn-ripple {
-  position: absolute;
-  border-radius: var(--n-radius-full);
-  background: var(--n-color-glass);
-  width: 20px;
-  height: 20px;
-  margin-left: -10px;
-  margin-top: -10px;
-  pointer-events: none;
-  animation: n-ripple 0.6s ease-out forwards;
-}
-
-@keyframes n-ripple {
-  from { transform: scale(0); opacity: 1; }
-  to { transform: scale(8); opacity: 0; }
-}
-</style>
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  icon: { type: String, default: '' },
+  iconRight: { type: String, default: '' },
+  block: { type: Boolean, default: false },
+  rounded: { type: Boolean, default: false },
+  outlined: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['click'])
+
+const isPressed = signal(false)
+
+const handleClick = (e) => {
+  if (props.disabled || props.loading) return
+  isPressed.value = true
+  setTimeout(() => { isPressed.value = false }, 150)
+  emit('click', e)
+}
+</script>
+
+<template>
+  <button 
+    class="n-btn"
+    :class="[
+      `n-btn-${variant}`,
+      `n-btn-${size}`,
+      { 'is-block': block, 'is-rounded': rounded, 'is-outlined': outlined, 'is-pressed': isPressed }
+    ]"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="n-btn-spinner"></span>
+    <span v-if="icon && !loading" class="n-btn-icon">{{ icon }}</span>
+    <span v-if="label" class="n-btn-label">{{ label }}</span>
+    <span v-if="iconRight" class="n-btn-icon-right">{{ iconRight }}</span>
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.n-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: inherit;
+  font-weight: 500;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+}
+.n-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.n-btn:focus-visible {
+  outline: none;
+}
+
+/* Sizes */
+.n-btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--n-text-sm);
+  border-radius: var(--n-radius-md);
+  min-height: 32px;
+}
+.n-btn-md {
+  padding: 0.5rem 1rem;
+  font-size: var(--n-text-base);
+  border-radius: var(--n-radius-md);
+  min-height: 40px;
+}
+.n-btn-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: var(--n-text-lg);
+  border-radius: var(--n-radius-lg);
+  min-height: 48px;
+}
+
+/* Block & Rounded */
+.is-block { width: 100%; }
+.is-rounded { border-radius: var(--n-radius-full); }
+
+/* Primary */
+.n-btn-primary {
+  background-color: var(--n-color-primary);
+  color: var(--n-color-primary-text);
+  border-color: var(--n-color-primary);
+}
+.n-btn-primary:hover:not(:disabled) {
+  background-color: var(--n-color-primary-hover);
+  border-color: var(--n-color-primary-hover);
+}
+.n-btn-primary:active:not(:disabled), .is-pressed.n-btn-primary {
+  background-color: var(--n-color-primary-active);
+  border-color: var(--n-color-primary-active);
+}
+.n-btn-primary:focus-visible {
+  box-shadow: var(--n-ring-primary);
+}
+
+/* Secondary */
+.n-btn-secondary {
+  background-color: var(--n-color-surface-alt);
+  color: var(--n-color-text);
+  border-color: var(--n-color-border);
+}
+.n-btn-secondary:hover:not(:disabled) {
+  background-color: var(--n-color-surface-hover);
+  border-color: var(--n-color-border-hover);
+}
+.n-btn-secondary:active:not(:disabled), .is-pressed.n-btn-secondary {
+  background-color: var(--n-color-border);
+}
+.n-btn-secondary:focus-visible {
+  box-shadow: var(--n-ring-surface);
+}
+
+/* Success */
+.n-btn-success {
+  background-color: var(--n-color-success);
+  color: #fff;
+  border-color: var(--n-color-success);
+}
+.n-btn-success:hover:not(:disabled) {
+  background-color: var(--n-color-success-hover);
+  border-color: var(--n-color-success-hover);
+}
+.n-btn-success:active:not(:disabled), .is-pressed.n-btn-success {
+  background-color: var(--n-color-success-active);
+}
+.n-btn-success:focus-visible { box-shadow: var(--n-ring-success); }
+
+/* Danger */
+.n-btn-danger {
+  background-color: var(--n-color-danger);
+  color: #fff;
+  border-color: var(--n-color-danger);
+}
+.n-btn-danger:hover:not(:disabled) {
+  background-color: var(--n-color-danger-hover);
+  border-color: var(--n-color-danger-hover);
+}
+.n-btn-danger:active:not(:disabled), .is-pressed.n-btn-danger {
+  background-color: var(--n-color-danger-active);
+}
+.n-btn-danger:focus-visible { box-shadow: var(--n-ring-danger); }
+
+/* Warning */
+.n-btn-warning {
+  background-color: var(--n-color-warning);
+  color: #fff;
+  border-color: var(--n-color-warning);
+}
+.n-btn-warning:hover:not(:disabled) {
+  background-color: var(--n-color-warning-hover);
+  border-color: var(--n-color-warning-hover);
+}
+.n-btn-warning:active:not(:disabled), .is-pressed.n-btn-warning {
+  background-color: var(--n-color-warning-active);
+}
+.n-btn-warning:focus-visible { box-shadow: var(--n-ring-warning); }
+
+/* Info */
+.n-btn-info {
+  background-color: var(--n-color-info);
+  color: #fff;
+  border-color: var(--n-color-info);
+}
+.n-btn-info:hover:not(:disabled) {
+  background-color: var(--n-color-info-hover);
+  border-color: var(--n-color-info-hover);
+}
+.n-btn-info:active:not(:disabled), .is-pressed.n-btn-info {
+  background-color: var(--n-color-info-active);
+}
+.n-btn-info:focus-visible { box-shadow: var(--n-ring-info); }
+
+/* Outlined variants */
+.is-outlined {
+  background-color: transparent !important;
+}
+.is-outlined.n-btn-primary { color: var(--n-color-primary); }
+.is-outlined.n-btn-primary:hover:not(:disabled) { background-color: var(--n-color-primary-light) !important; }
+
+.is-outlined.n-btn-success { color: var(--n-color-success); border-color: var(--n-color-success); }
+.is-outlined.n-btn-success:hover:not(:disabled) { background-color: rgba(34, 197, 94, 0.1) !important; }
+
+.is-outlined.n-btn-danger { color: var(--n-color-danger); border-color: var(--n-color-danger); }
+.is-outlined.n-btn-danger:hover:not(:disabled) { background-color: rgba(239, 68, 68, 0.1) !important; }
+
+/* Spinner */
+.n-btn-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: n-spin 0.6s linear infinite;
+}
+@keyframes n-spin {
+  to { transform: rotate(360deg); }
+}
+
+.n-btn-icon, .n-btn-icon-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.n-btn-label {
+  line-height: 1;
+}
+</style>