nexa-ui-kit 0.11.8 → 0.11.10

package/src/components/NDataTable.nexa

@@ -212,12 +212,269 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
         </tbody>
       </table>
     </div>
-    <div v-if="paginator" class="n-dt-paginator-wrap">
-      <NPaginator :first="internalFirst.value" :rows="internalRows.value" :totalRecords="totalRecords.value" :rowsPerPageOptions="rowsPerPageOptions" @page="onPage" />
-    </div>
-  </div>
-</template>
-
+    <div v-if="paginator" class="n-dt-paginator-wrap">
+      <NPaginator :first="internalFirst.value" :rows="internalRows.value" :totalRecords="totalRecords.value" :rowsPerPageOptions="rowsPerPageOptions" @page="onPage" />
+    </div>
+  </div>
+</template>
+
+
 <style scoped>
-.n-dt {
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius-lg);
  background: var(--n-color-surface);
  overflow: hidden;
  font-family: var(--n-font-sans);
  border-color: var(--n-color-border);
  border: 1px solid var(--n-color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--n-color-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--n-color-text-muted);
  width: 260px;
  max-width: 100%;
  background: transparent;
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius-md);
  padding: 0.45rem 0.75rem;
  color: var(--n-color-text);
  font-size: var(--n-text-sm);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  border-color: var(--n-color-primary);
  width: 100%;
  overflow: auto;
  border-radius: inherit;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: var(--n-color-surface);) 0%, var(--n-color-surface) 100%);
  position: relative;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid var(--n-color-border);
  color: var(--n-color-text-secondary);
  font-size: var(--n-text-sm);
  font-weight: var(--n-weight-semibold);
  user-select: none;
  vertical-align: middle;
  text-align: left;
  background: var(--n-color-surface);
  transition: background 0.15s ease;
  cursor: pointer;
  background: var(--n-color-glass);
  text-align: right;
  text-align: center;
  width: 3rem;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  display: block;
  color: var(--n-color-border);
  transition: color 0.15s ease;
  margin: -3px 0;
  color: var(--n-color-primary);
  color: var(--n-color-primary);
  color: var(--n-color-text-muted);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
  background: var(--n-color-primary);
  opacity: 0.4;
  border-bottom: 1px solid var(--n-color-border);
  padding: 0.5rem 0.6rem;
  background: var(--n-color-surface);
  width: 100%;
  max-width: 100%;
  display: block;
  background: var(--n-color-bg);
  border: 1px solid var(--n-color-border);
  border-radius: var(--n-radius-sm);
  padding: 0.3rem 0.45rem;
  color: var(--n-color-text);
  font-size: var(--n-text-xs);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  border-color: var(--n-color-primary);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
  background: var(--n-color-primary-light);
  outline: none;
  background: var(--n-color-primary-light);
  filter: brightness(0.96);
  background: color-mix(in srgb, var(--n-color-glass) 50%, var(--n-color-surface));
  background: color-mix(in srgb, var(--n-color-primary) 6%, var(--n-color-surface));
  background: var(--n-color-primary-light);
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--n-color-border);
  color: var(--n-color-text);
  font-size: var(--n-text-sm);
  vertical-align: middle;
  text-align: left;
  text-align: right;
  text-align: center;
  width: 3rem;
  text-align: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--n-color-border);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
  color: transparent;
  background: var(--n-color-primary);
  border-color: var(--n-color-primary);
  color: white;
  border-color: var(--n-color-primary);
  animation: n-dt-check-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  0% { transform: scale(0); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
  padding: 2rem 1rem;
  text-align: center;
  color: var(--n-color-text-muted);
  font-size: var(--n-text-sm);
  padding: 0.4rem 0.6rem;
  font-size: var(--n-text-xs);
  padding: 0.85rem 1rem;
  font-size: var(--n-text-base);
  border-top: 1px solid var(--n-color-border);
  background: var(--n-color-surface-alt, var(--n-color-surface));
  border-top: none;
  background: transparent;
+.n-dt {
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-lg);
+  background: var(--n-color-surface);
+  overflow: hidden;
+  font-family: var(--n-font-sans);
+}
+.n-dt.is-grid {
+  border-color: var(--n-color-border);
+}
+.n-dt.is-grid .n-dt-th,
+.n-dt.is-grid .n-dt-td {
+  border: 1px solid var(--n-color-border);
+}
+.n-dt-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+}
+.n-dt-global {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--n-color-text-muted);
+}
+.n-dt-global-input {
+  width: 260px;
+  max-width: 100%;
+  background: transparent;
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-md);
+  padding: 0.45rem 0.75rem;
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+}
+.n-dt-global-input:focus {
+  border-color: var(--n-color-primary);
+  box-shadow: var(--n-ring-primary);
+}
+.n-dt-wrapper {
+  width: 100%;
+  overflow: auto;
+  border-radius: inherit;
+}
+.n-dt-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.n-dt-thead {
+  background-color: var(--n-color-surface-alt);
+}
+.n-dt-th {
+  position: relative;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  font-weight: 600;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  background: var(--n-color-surface-alt);
+  transition: background-color var(--n-transition-fast);
+}
+.n-dt-th.is-sortable {
+  cursor: pointer;
+}
+.n-dt-th.is-sortable:hover {
+  background-color: var(--n-color-surface-hover);
+}
+.n-dt-th.is-right {
+  text-align: right;
+}
+.n-dt-th.is-center {
+  text-align: center;
+}
+.n-dt-th.is-selection {
+  width: 3rem;
+  text-align: center;
+}
+.n-dt-th-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.n-dt-th.is-right .n-dt-th-content {
+  justify-content: flex-end;
+}
+.n-dt-th.is-center .n-dt-th-content {
+  justify-content: center;
+}
+.n-dt-th-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: normal;
+}
+.n-dt-sort {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  line-height: 1;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.n-dt-sort-arrow {
+  display: block;
+  color: var(--n-color-text-muted);
+  transition: color var(--n-transition-fast);
+  margin: -3px 0;
+}
+.n-dt-sort-arrow-up.is-on,
+.n-dt-sort-arrow-down.is-on {
+  color: var(--n-color-primary);
+}
+.n-dt-th.is-sortable:hover .n-dt-sort-arrow:not(.is-on) {
+  color: var(--n-color-text);
+}
+.n-dt-resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background-color var(--n-transition-fast);
+}
+.n-dt-resizer:hover {
+  background-color: var(--n-color-primary);
+}
+.n-dt-filter-row .n-dt-th {
+  border-bottom: 1px solid var(--n-color-border);
+  padding: 0.5rem 1rem;
+  background-color: var(--n-color-surface-alt);
+}
+.n-dt-filter {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+  background: var(--n-color-surface);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  padding: 0.375rem 0.5rem;
+  color: var(--n-color-text);
+  font-size: var(--n-text-xs);
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+}
+.n-dt-filter:focus {
+  border-color: var(--n-color-primary);
+  box-shadow: var(--n-ring-primary);
+}
+.n-dt-tbody .n-dt-row {
+  background-color: var(--n-color-surface);
+  transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
+}
+.n-dt-tbody .n-dt-row.is-hover:hover {
+  background-color: var(--n-color-surface-hover);
+}
+.n-dt-tbody .n-dt-row.is-selected {
+  background-color: var(--n-color-primary-light);
+  color: var(--n-color-primary-text);
+}
+.n-dt-tbody .n-dt-row.is-selected .n-dt-td {
+  color: var(--n-color-primary-active);
+}
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even) {
+  background-color: var(--n-color-surface-alt);
+}
+.n-dt-table.is-striped .n-dt-tbody .n-dt-row:nth-child(even).is-hover:hover {
+  background-color: var(--n-color-surface-hover);
+}
+.n-dt-td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  font-size: var(--n-text-sm);
+  vertical-align: middle;
+  text-align: left;
+}
+.n-dt-td.is-right {
+  text-align: right;
+}
+.n-dt-td.is-center {
+  text-align: center;
+}
+.n-dt-td.is-selection {
+  width: 3rem;
+  text-align: center;
+}
+.n-dt-selectbox {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
+  color: transparent;
+}
+.n-dt-selectbox.is-checked {
+  background-color: var(--n-color-primary);
+  border-color: var(--n-color-primary);
+  color: #fff;
+}
+.n-dt-selectbox:hover:not(.is-checked) {
+  border-color: var(--n-color-primary);
+}
+.n-dt-selectbox:focus-visible {
+  outline: none;
+  box-shadow: var(--n-ring-primary);
+}
+.n-dt-selectbox.is-checked svg {
+  animation: n-dt-check-pop 0.2s ease-out;
+}
+@keyframes n-dt-check-pop {
+  0% { transform: scale(0.5); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+.n-dt-empty-row .n-dt-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+}
+.n-dt-sm .n-dt-th,
+.n-dt-sm .n-dt-td {
+  padding: 0.5rem 0.75rem;
+  font-size: var(--n-text-xs);
+}
+.n-dt-lg .n-dt-th,
+.n-dt-lg .n-dt-td {
+  padding: 1rem 1.25rem;
+  font-size: var(--n-text-base);
+}
+.n-dt-paginator-wrap {
+  border-top: 1px solid var(--n-color-border);
+  background: var(--n-color-surface-alt);
+}
+.n-dt-paginator-wrap :deep(.n-paginator) {
+  border-top: none;
+  background: transparent;
+}
 </style>

package/src/components/NInput.nexa

@@ -40,7 +40,7 @@ const handleClear = () => {
 </script>
 
 <template>
-  <div class="n-input-wrapper" :class="{ 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }">
+  <div class="n-input-wrapper" :class="{ 'is-focused': isFocused.value, 'is-error': error, 'is-disabled': disabled }">
     <label v-if="label" class="n-input-label">
       {{ label }}
       <span v-if="required" class="n-input-required">*</span>

package/src/components/NModal.nexa

@@ -118,5 +118,5 @@ onUnmounted(() => {
 </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);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--n-color-overlay);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  position: relative;
  width: 90%;
  background: var(--n-color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--n-color-glass-border);
  border-radius: var(--n-radius-2xl);
  box-shadow: var(--n-shadow-xl), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  outline: none;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: scale(1) translateY(0);
  opacity: 1;
  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;
  margin: 0;
  font-size: var(--n-text-xl);
  font-weight: var(--n-weight-bold);
  color: var(--n-color-text);
  background: transparent;
  border: none;
  color: var(--n-color-text-secondary);
  font-size: 1.75rem;
  cursor: pointer;
  transition: color var(--n-transition-fast); cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--n-radius-lg);
  flex-shrink: 0;
  color: var(--n-color-text);
  background: var(--n-color-glass-hover);
  transform: scale(0.95);
  outline: 2px solid var(--n-color-primary);
  outline-offset: 2px;
  padding: var(--n-space-8);
  color: var(--n-color-text-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: var(--n-space-5) var(--n-space-8);
  background: var(--n-color-glass);
  border-top: 1px solid var(--n-color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--n-space-4);
  flex-shrink: 0;
+.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);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--n-color-overlay);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  position: relative;
  width: 90%;
  background: var(--n-color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--n-color-glass-border);
  border-radius: var(--n-radius-2xl);
  box-shadow: var(--n-shadow-xl), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  outline: none;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: scale(1) translateY(0);
  opacity: 1;
  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;
  margin: 0;
  font-size: var(--n-text-xl);
  font-weight: var(--n-weight-bold);
  color: var(--n-color-text);
  background: transparent;
  border: none;
  color: var(--n-color-text-secondary);
  font-size: 1.75rem;
  cursor: pointer;
  transition: color var(--n-transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--n-radius-lg);
  flex-shrink: 0;
  color: var(--n-color-text);
  background: var(--n-color-glass-hover);
  transform: scale(0.95);
  outline: 2px solid var(--n-color-primary);
  outline-offset: 2px;
  padding: var(--n-space-8);
  color: var(--n-color-text-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: var(--n-space-5) var(--n-space-8);
  background: var(--n-color-glass);
  border-top: 1px solid var(--n-color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--n-space-4);
  flex-shrink: 0;
 </style>

package/src/components/NPaginator.nexa

@@ -99,7 +99,7 @@ const end = computed(() => Math.min((safeFirst.value || 0) + (safeRows.value ||
   border-radius: var(--n-radius-md);
   padding: 0.3rem 0.55rem;
   cursor: pointer;
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/components/NRadio.nexa

@@ -42,7 +42,7 @@ const select = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color var(--n-transition-fast) cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
 }
 .is-checked .n-radio-circle {

package/src/components/NSelect.nexa

@@ -356,33 +356,35 @@ onBeforeUnmount(() => {
   transform-origin: top center;
 }
 @keyframes n-dropdown-in {
-  from { opacity: 0;  scale(0.98); }
-  to { opacity: 1;  scale(1); }
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
 }
 .n-select-dropdown.is-top {
   animation: n-dropdown-in-top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 @keyframes n-dropdown-in-top {
-  from { opacity: 0;  scale(0.98); }
-  to { opacity: 1;  scale(1); }
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
 }
 .n-select-search {
-  padding: var(--n-space-2);
+  padding: 0.5rem;
   border-bottom: 1px solid var(--n-color-border);
+  background: var(--n-color-surface);
 }
 .n-select-search-input {
   width: 100%;
-  background: var(--n-color-bg);
+  background: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
   border-radius: var(--n-radius-sm);
-  padding: var(--n-space-2) var(--n-space-3);
+  padding: 0.4rem 0.6rem;
   color: var(--n-color-text);
   font-size: var(--n-text-sm);
   outline: none;
-  font-family: inherit;
+  transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
 }
 .n-select-search-input:focus {
   border-color: var(--n-color-primary);
+  box-shadow: 0 0 0 1px var(--n-color-primary);
 }
 .n-select-options {
   max-height: 250px;
@@ -398,35 +400,17 @@ onBeforeUnmount(() => {
   background: var(--n-color-bg);
 }
 .n-select-option {
-  padding: 0.7rem 1rem;
-  padding-left: 1rem;
+  padding: 0.6rem 1rem;
   color: var(--n-color-text-secondary);
   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);
-  letter-spacing: 0.01em;
-  position: relative;
-}
-.n-select-option::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-   scaleY(0);
-  width: 3px;
-  height: 50%;
-  background: var(--n-color-primary);
-  border-radius: 0 3px 3px 0;
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.n-select-option:hover::before,
-.n-select-option.is-focused::before {
-   scaleY(1);
+  transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
+  border-radius: var(--n-radius-sm);
+  margin: 0.15rem 0.35rem;
 }
 .n-select-option:hover,
 .n-select-option.is-focused {
-  background: var(--n-color-glass);
+  background: var(--n-color-surface-hover);
   color: var(--n-color-text);
-  padding-left: 1.25rem;
 }
 .n-select-option.is-selected {
   background: var(--n-color-primary-light);