nexa-ui-kit 0.8.4 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/NCard.js +28 -19
  2. package/dist/components/NCard.nexa +10 -1
  3. package/package.json +4 -4
  4. package/src/components/NCard.nexa +10 -1
package/dist/components/NCard.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
2
2
 
3
3
  const _sfc_main = defineComponent({
4
- __scopeId: 'data-v-34850782',
4
+ __scopeId: 'data-v-28bb4c76',
5
5
  __hmrId: 'NCard_nexa',
6
6
  props: {
7
7
  title: { type: String, default: '' },
8
8
  subtitle: { type: String, default: '' },
9
9
  padding: { type: Boolean, default: true },
10
+ compact: { type: Boolean, default: false },
10
11
  hoverable: { type: Boolean, default: false },
11
12
  variant: { type: String, default: 'elevated' },
12
13
  image: { type: String, default: '' }
@@ -18,11 +19,11 @@ const _sfc_main = defineComponent({
18
19
  })
19
20
  // Injected render function
20
21
  _sfc_main.render = function(ctx) {
21
- let { $slots, title, subtitle, padding, hoverable, variant, image, Fragment: _ntc_Fragment } = ctx
22
- return h('div', { class: ['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : ''], "data-v-34850782": "" }, [
22
+ let { $slots, title, subtitle, padding, compact, hoverable, variant, image, Fragment: _ntc_Fragment } = ctx
23
+ return h('div', { class: ['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : '', compact ? 'is-compact' : ''], "data-v-28bb4c76": "" }, [
23
24
  "\n ",
24
- (image) ? h('img', { class: "n-card-image", src: image, "data-v-34850782": "" }) : null,
25
- (title || $slots.header) ? h('div', { class: "n-card-header", "data-v-34850782": "" }, [
25
+ (image) ? h('img', { class: "n-card-image", src: image, "data-v-28bb4c76": "" }) : null,
26
+ (title || $slots.header) ? h('div', { class: "n-card-header", "data-v-28bb4c76": "" }, [
26
27
  "\n ",
27
28
  ctx.$slots.header ? ctx.$slots.header() : ["\n ", h('h3', { class: "n-card-title" }, [
28
29
  title
@@ -31,25 +32,25 @@ _sfc_main.render = function(ctx) {
31
32
  ]), "\n "],
32
33
  "\n "
33
34
  ]) : null,
34
- h('div', { class: ['n-card-body', padding ? 'has-padding' : ''], "data-v-34850782": "" }, [
35
+ h('div', { class: ['n-card-body', padding ? 'has-padding' : ''], "data-v-28bb4c76": "" }, [
35
36
  "\n ",
36
37
  ctx.$slots.default ? ctx.$slots.default() : null,
37
38
  "\n "
38
39
  ]),
39
40
  "\n ",
40
- ($slots.footer) ? h('div', { class: "n-card-footer", "data-v-34850782": "" }, [
41
+ ($slots.footer) ? h('div', { class: "n-card-footer", "data-v-28bb4c76": "" }, [
41
42
  "\n ",
42
43
  ctx.$slots.footer ? ctx.$slots.footer() : null,
43
44
  "\n "
44
45
  ]) : null
45
46
  ])
46
47
  }
47
- _sfc_main.__scopeId = 'data-v-34850782'
48
+ _sfc_main.__scopeId = 'data-v-28bb4c76'
48
49
  _sfc_main.__hmrId = 'NCard_nexa'
49
50
 
50
51
  export default _sfc_main
51
52
 
52
- const __style = `.n-card[data-v-34850782]{
53
+ const __style = `.n-card[data-v-28bb4c76]{
53
54
  background: var(--n-color-surface);
54
55
  border: 1px solid var(--n-color-border);
55
56
  border-radius: var(--n-radius-xl);
@@ -59,42 +60,50 @@ const __style = `.n-card[data-v-34850782]{
59
60
  flex-direction: column;
60
61
  }
61
62
 
62
- .is-elevated[data-v-34850782]{
63
+ .is-elevated[data-v-28bb4c76]{
63
64
  background: var(--n-color-surface-elevated);
64
65
  box-shadow: var(--n-shadow-lg);
65
66
  }
66
67
 
67
- .is-outlined[data-v-34850782]{
68
+ .is-outlined[data-v-28bb4c76]{
68
69
  background: transparent;
69
70
  border-color: var(--n-color-border);
70
71
  box-shadow: none;
71
72
  }
72
73
 
73
- .is-flat[data-v-34850782]{
74
+ .is-flat[data-v-28bb4c76]{
74
75
  background: var(--n-color-surface-alt);
75
76
  border: none;
76
77
  box-shadow: none;
77
78
  }
78
79
 
79
- .n-card.is-hoverable[data-v-34850782]:hover{
80
+ .n-card.is-hoverable[data-v-28bb4c76]:hover{
80
81
  transform: translateY(-4px);
81
82
  border-color: var(--n-color-border-hover);
82
83
  box-shadow: var(--n-shadow-xl);
83
84
  }
84
85
 
85
- .n-card-image[data-v-34850782]{
86
+ .n-card-image[data-v-28bb4c76]{
86
87
  width: 100%;
87
88
  height: 200px;
88
89
  object-fit: cover;
89
90
  display: block;
90
91
  }
91
92
 
92
- .n-card-header[data-v-34850782]{
93
+ .n-card-header[data-v-28bb4c76]{
93
94
  padding: var(--n-space-6);
94
95
  border-bottom: 1px solid var(--n-color-border);
95
96
  }
96
97
 
97
- .n-card-title[data-v-34850782]{
98
+ .is-compact .n-card-header[data-v-28bb4c76]{
99
+ padding: var(--n-space-4);
100
+ }
101
+
102
+ .is-compact .n-card-body.has-padding{
103
+ padding: var(--n-space-4);
104
+ }
105
+
106
+ .n-card-title[data-v-28bb4c76]{
98
107
  margin: 0;
99
108
  font-size: var(--n-text-xl);
100
109
  font-weight: var(--n-weight-bold);
@@ -102,7 +111,7 @@ const __style = `.n-card[data-v-34850782]{
102
111
  letter-spacing: var(--n-tracking-tight);
103
112
  }
104
113
 
105
- .n-card-subtitle[data-v-34850782]{
114
+ .n-card-subtitle[data-v-28bb4c76]{
106
115
  margin: var(--n-space-1) 0 0 0;
107
116
  font-size: var(--n-text-sm);
108
117
  color: var(--n-color-text-secondary);
@@ -112,10 +121,10 @@ const __style = `.n-card[data-v-34850782]{
112
121
  padding: var(--n-space-6);
113
122
  }
114
123
 
115
- .n-card-footer[data-v-34850782]{
124
+ .n-card-footer[data-v-28bb4c76]{
116
125
  padding: var(--n-space-4) var(--n-space-6);
117
126
  background: rgba(0, 0, 0, 0.15);
118
127
  border-top: 1px solid var(--n-color-border);
119
128
  margin-top: auto;
120
129
  }`
121
- injectStyle('data-v-34850782', __style)
130
+ injectStyle('data-v-28bb4c76', __style)
package/dist/components/NCard.nexa CHANGED
@@ -3,6 +3,7 @@ const props = defineProps({
3
3
  title: { type: String, default: '' },
4
4
  subtitle: { type: String, default: '' },
5
5
  padding: { type: Boolean, default: true },
6
+ compact: { type: Boolean, default: false },
6
7
  hoverable: { type: Boolean, default: false },
7
8
  variant: { type: String, default: 'elevated' },
8
9
  image: { type: String, default: '' }
@@ -10,7 +11,7 @@ const props = defineProps({
10
11
  </script>
11
12
 
12
13
  <template>
13
- <div :class="['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : '']">
14
+ <div :class="['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : '', compact ? 'is-compact' : '']">
14
15
  <img v-if="image" :src="image" class="n-card-image" />
15
16
  <div v-if="title || $slots.header" class="n-card-header">
16
17
  <slot name="header">
@@ -73,6 +74,14 @@ const props = defineProps({
73
74
  border-bottom: 1px solid var(--n-color-border);
74
75
  }
75
76
 
77
+ .is-compact .n-card-header {
78
+ padding: var(--n-space-4);
79
+ }
80
+
81
+ .is-compact .n-card-body.has-padding {
82
+ padding: var(--n-space-4);
83
+ }
84
+
76
85
  .n-card-title {
77
86
  margin: 0;
78
87
  font-size: var(--n-text-xl);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.8.4",
3
+ "version": "0.9.0",
4
4
  "description": "Premium component library for Nexa Framework",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -22,12 +22,12 @@
22
22
  "src"
23
23
  ],
24
24
  "dependencies": {
25
- "nexa-framework": "0.8.4",
26
- "nexa-mobile": "0.8.4"
25
+ "nexa-framework": "0.9.0",
26
+ "nexa-mobile": "0.9.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "cpx": "^1.5.0",
30
- "nexa-compiler": "0.8.4"
30
+ "nexa-compiler": "0.9.0"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",
package/src/components/NCard.nexa CHANGED
@@ -3,6 +3,7 @@ const props = defineProps({
3
3
  title: { type: String, default: '' },
4
4
  subtitle: { type: String, default: '' },
5
5
  padding: { type: Boolean, default: true },
6
+ compact: { type: Boolean, default: false },
6
7
  hoverable: { type: Boolean, default: false },
7
8
  variant: { type: String, default: 'elevated' },
8
9
  image: { type: String, default: '' }
@@ -10,7 +11,7 @@ const props = defineProps({
10
11
  </script>
11
12
 
12
13
  <template>
13
- <div :class="['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : '']">
14
+ <div :class="['n-card', `is-${variant}`, hoverable ? 'is-hoverable' : '', compact ? 'is-compact' : '']">
14
15
  <img v-if="image" :src="image" class="n-card-image" />
15
16
  <div v-if="title || $slots.header" class="n-card-header">
16
17
  <slot name="header">
@@ -73,6 +74,14 @@ const props = defineProps({
73
74
  border-bottom: 1px solid var(--n-color-border);
74
75
  }
75
76
 
77
+ .is-compact .n-card-header {
78
+ padding: var(--n-space-4);
79
+ }
80
+
81
+ .is-compact .n-card-body.has-padding {
82
+ padding: var(--n-space-4);
83
+ }
84
+
76
85
  .n-card-title {
77
86
  margin: 0;
78
87
  font-size: var(--n-text-xl);