nexa-ui-kit 0.7.11 → 0.8.1

package/src/components/NButton.nexa

@@ -1,274 +1,274 @@
-<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"
-    @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);
-  border-radius: var(--n-radius-md);
-  cursor: pointer;
-  transition: all var(--n-transition-normal);
-  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;
-}
-
-.n-btn:focus-visible {
-  box-shadow: 0 0 0 3px var(--n-color-primary-light);
-}
-
-/* Sizes */
-.n-btn-sm { padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
-.n-btn-md { padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
-.n-btn-lg { padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
-
-/* Block */
-.is-block { width: 100%; }
-
-/* Rounded */
-.is-rounded { border-radius: var(--n-radius-full); }
-
-/* 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) {
-  transform: translateY(0) scale(0.97);
-}
-
-/* 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);
-}
-
-/* Variant: Success */
-.n-btn-success {
-  background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
-  color: white;
-  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
-}
-.n-btn-success:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.4);
-}
-.n-btn-success:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
-}
-
-/* Variant: Warning */
-.n-btn-warning {
-  background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
-  color: white;
-  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.3);
-}
-.n-btn-warning:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(245, 158, 11, 0.4);
-}
-.n-btn-warning:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
-}
-
-/* Variant: Info */
-.n-btn-info {
-  background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
-  color: white;
-  box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
-}
-.n-btn-info:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(6, 182, 212, 0.4);
-}
-.n-btn-info:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
-}
-
-/* Variant: Danger */
-.n-btn-danger {
-  background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
-  color: white;
-  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.3);
-}
-.n-btn-danger:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -3px rgba(220, 38, 38, 0.4);
-}
-.n-btn-danger:active:not(:disabled) {
-  transform: translateY(0) scale(0.97);
-}
-
-/* Variant: Ghost */
-.n-btn-ghost {
-  background: transparent;
-  color: var(--n-color-text-secondary);
-}
-.n-btn-ghost:hover:not(:disabled) {
-  background: var(--n-color-glass);
-  color: var(--n-color-text);
-}
-
-/* Variant: Outline */
-.n-btn-outline {
-  background: transparent;
-  color: var(--n-color-primary);
-  border-color: var(--n-color-primary);
-}
-.n-btn-outline:hover:not(:disabled) {
-  background: var(--n-color-primary-light);
-  border-color: var(--n-color-primary-hover);
-}
-
-/* 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);
-}
-
-/* Disabled */
-.n-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-/* 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: rgba(255, 255, 255, 0.35);
-  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({
+  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"
+    @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);
+  border-radius: var(--n-radius-md);
+  cursor: pointer;
+  transition: all var(--n-transition-normal);
+  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;
+}
+
+.n-btn:focus-visible {
+  box-shadow: 0 0 0 3px var(--n-color-primary-light);
+}
+
+/* Sizes */
+.n-btn-sm { padding: 0.5rem 1.25rem; font-size: var(--n-text-sm); gap: var(--n-space-1); border-radius: var(--n-radius-sm); min-height: 32px; }
+.n-btn-md { padding: 0.65rem 1.75rem; font-size: var(--n-text-base); min-height: 40px; }
+.n-btn-lg { padding: 0.85rem 2.5rem; font-size: var(--n-text-lg); border-radius: var(--n-radius-lg); min-height: 48px; }
+
+/* Block */
+.is-block { width: 100%; }
+
+/* Rounded */
+.is-rounded { border-radius: var(--n-radius-full); }
+
+/* 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) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* 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);
+}
+
+/* Variant: Success */
+.n-btn-success {
+  background: linear-gradient(135deg, var(--n-color-success) 0%, var(--n-color-success-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
+}
+.n-btn-success:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.4);
+}
+.n-btn-success:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Warning */
+.n-btn-warning {
+  background: linear-gradient(135deg, var(--n-color-warning) 0%, var(--n-color-warning-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(245, 158, 11, 0.3);
+}
+.n-btn-warning:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(245, 158, 11, 0.4);
+}
+.n-btn-warning:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Info */
+.n-btn-info {
+  background: linear-gradient(135deg, var(--n-color-info) 0%, var(--n-color-info-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.3);
+}
+.n-btn-info:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(6, 182, 212, 0.4);
+}
+.n-btn-info:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Danger */
+.n-btn-danger {
+  background: linear-gradient(135deg, var(--n-color-danger) 0%, var(--n-color-danger-hover) 100%);
+  color: white;
+  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.3);
+}
+.n-btn-danger:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -3px rgba(220, 38, 38, 0.4);
+}
+.n-btn-danger:active:not(:disabled) {
+  transform: translateY(0) scale(0.97);
+}
+
+/* Variant: Ghost */
+.n-btn-ghost {
+  background: transparent;
+  color: var(--n-color-text-secondary);
+}
+.n-btn-ghost:hover:not(:disabled) {
+  background: var(--n-color-glass);
+  color: var(--n-color-text);
+}
+
+/* Variant: Outline */
+.n-btn-outline {
+  background: transparent;
+  color: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+}
+.n-btn-outline:hover:not(:disabled) {
+  background: var(--n-color-primary-light);
+  border-color: var(--n-color-primary-hover);
+}
+
+/* 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);
+}
+
+/* Disabled */
+.n-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* 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: rgba(255, 255, 255, 0.35);
+  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>