nexa-ui-kit 0.6.2 → 0.6.4

package/dist/components/NModal.js

@@ -1,13 +1,14 @@
 import { signal, effect, onMounted, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-42ba3820',
+  __scopeId: 'data-v-39fa634f',
   __hmrId: 'NModal_nexa',
   props: {
   show: { type: Boolean, default: false },
   title: { type: String, default: '' },
   size: { type: String, default: 'md' },
-  closable: { type: Boolean, default: true }
+  closable: { type: Boolean, default: true },
+  closeLeft: { type: Boolean, default: false }
 },
   emits: ['close'],
   setup(props, setupContext) {
@@ -76,30 +77,33 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-42ba3820": "" }, [
+  const { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, closeLeft, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h(_ntc_Teleport, { to: "body", "data-v-39fa634f": "" }, [
         "\n    ",
-        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-42ba3820": "" }, [
+        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-39fa634f": "" }, [
         "\n      ",
-        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-42ba3820": "" }),
+        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-39fa634f": "" }),
         "\n      ",
-        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: "modalEl", style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-42ba3820": "" }, [
+        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: "modalEl", style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-39fa634f": "" }, [
         "\n        ",
-        (title) ? h('div', { class: "n-modal-header", "data-v-42ba3820": "" }, [
+        (title || $slots.header) ? h('div', { class: ["n-modal-header", { 'close-left': closeLeft }], "data-v-39fa634f": "" }, [
         "\n          ",
+        (closable && closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-39fa634f": "" }, [
+        "×"
+      ]) : null,
         ctx.$slots.header ? ctx.$slots.header() : null,
         "\n          ",
-        (closable) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-42ba3820": "" }, [
+        (closable && !closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-39fa634f": "" }, [
         "×"
       ]) : null
       ]) : null,
-        h('div', { class: "n-modal-content", "data-v-42ba3820": "" }, [
+        h('div', { class: "n-modal-content", "data-v-39fa634f": "" }, [
         "\n          ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n        "
       ]),
         "\n        ",
-        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-42ba3820": "" }, [
+        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-39fa634f": "" }, [
         "\n          ",
         ctx.$slots.footer ? ctx.$slots.footer() : null,
         "\n        "
@@ -109,12 +113,12 @@ _sfc_main.render = function(ctx) {
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-42ba3820'
+_sfc_main.__scopeId = 'data-v-39fa634f'
 _sfc_main.__hmrId = 'NModal_nexa'
 
 export default _sfc_main
 
-const __style = `.n-modal-root[data-v-42ba3820]{
+const __style = `.n-modal-root[data-v-39fa634f]{
   position: fixed;
   top: 0;
   left: 0;
@@ -126,7 +130,7 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   z-index: var(--n-z-modal);
 }
 
-.n-modal-overlay[data-v-42ba3820]{
+.n-modal-overlay[data-v-39fa634f]{
   position: absolute;
   top: 0;
   left: 0;
@@ -138,11 +142,11 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   transition: opacity 0.25s ease;
 }
 
-.n-modal-overlay.is-active[data-v-42ba3820]{
+.n-modal-overlay.is-active[data-v-39fa634f]{
   opacity: 1;
 }
 
-.n-modal-container[data-v-42ba3820]{
+.n-modal-container[data-v-39fa634f]{
   position: relative;
   width: 90%;
   background: var(--n-color-surface);
@@ -159,12 +163,12 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   flex-direction: column;
 }
 
-.n-modal-container.is-active[data-v-42ba3820]{
+.n-modal-container.is-active[data-v-39fa634f]{
   transform: scale(1) translateY(0);
   opacity: 1;
 }
 
-.n-modal-header[data-v-42ba3820]{
+.n-modal-header[data-v-39fa634f]{
   padding: var(--n-space-6) var(--n-space-8);
   border-bottom: 1px solid var(--n-color-border);
   display: flex;
@@ -173,14 +177,14 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   flex-shrink: 0;
 }
 
-.n-modal-header h3[data-v-42ba3820]{
+.n-modal-header h3[data-v-39fa634f]{
   margin: 0;
   font-size: var(--n-text-xl);
   font-weight: var(--n-weight-bold);
   color: var(--n-color-text);
 }
 
-.n-modal-close[data-v-42ba3820]{
+.n-modal-close[data-v-39fa634f]{
   background: transparent;
   border: none;
   color: var(--n-color-text-secondary);
@@ -197,19 +201,19 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   border-radius: var(--n-radius-sm);
 }
 
-.n-modal-close[data-v-42ba3820]:hover{
+.n-modal-close[data-v-39fa634f]:hover{
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
 
-.n-modal-content[data-v-42ba3820]{
+.n-modal-content[data-v-39fa634f]{
   padding: var(--n-space-8);
   color: var(--n-color-text-secondary);
   overflow-y: auto;
   flex: 1;
 }
 
-.n-modal-footer[data-v-42ba3820]{
+.n-modal-footer[data-v-39fa634f]{
   padding: var(--n-space-5) var(--n-space-8);
   background: rgba(0, 0, 0, 0.15);
   border-top: 1px solid var(--n-color-border);
@@ -218,4 +222,4 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   gap: var(--n-space-4);
   flex-shrink: 0;
 }`
-injectStyle('data-v-42ba3820', __style)
+injectStyle('data-v-39fa634f', __style)

package/dist/components/NModal.nexa

@@ -5,7 +5,8 @@ const props = defineProps({
   show: { type: Boolean, default: false },
   title: { type: String, default: '' },
   size: { type: String, default: 'md' },
-  closable: { type: Boolean, default: true }
+  closable: { type: Boolean, default: true },
+  closeLeft: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['close'])
@@ -96,11 +97,12 @@ onUnmounted(() => {
         tabindex="-1"
         @keydown="handleKeydown"
       >
-        <div v-if="title" class="n-modal-header">
+        <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
+          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
-          <button v-if="closable" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
         </div>
         <div class="n-modal-content">
           <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,12 +18,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.6.2",
-    "nexa-mobile": "0.6.2"
+    "nexa-framework": "0.6.4",
+    "nexa-mobile": "0.6.4"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.6.2"
+    "nexa-compiler": "0.6.4"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist",

package/src/components/NModal.nexa

@@ -5,7 +5,8 @@ const props = defineProps({
   show: { type: Boolean, default: false },
   title: { type: String, default: '' },
   size: { type: String, default: 'md' },
-  closable: { type: Boolean, default: true }
+  closable: { type: Boolean, default: true },
+  closeLeft: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['close'])
@@ -96,11 +97,12 @@ onUnmounted(() => {
         tabindex="-1"
         @keydown="handleKeydown"
       >
-        <div v-if="title" class="n-modal-header">
+        <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
+          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
-          <button v-if="closable" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
         </div>
         <div class="n-modal-content">
           <slot />