@community-release/nx-ui 0.0.47 → 0.0.49
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.
- package/dist/module.d.mts +5 -1
- package/dist/module.d.ts +5 -1
- package/dist/module.json +1 -1
- package/dist/module.mjs +5 -1
- package/dist/runtime/components/button/index.vue +40 -14
- package/dist/runtime/components/card.vue +2 -2
- package/dist/runtime/components/checkbox.vue +2 -1
- package/dist/runtime/components/input/index.vue +4 -1
- package/dist/runtime/components/radio.vue +2 -15
- package/dist/runtime/components/select.vue +12 -38
- package/dist/runtime/components/styles/components.less +2 -0
- package/dist/runtime/components/tooltip.vue +2 -1
- package/package.json +8 -3
package/dist/module.d.mts
CHANGED
|
@@ -109,7 +109,11 @@ var defaultComponentsStyle = {
|
|
|
109
109
|
"user-position-color": "var(--ui-color-primary)"
|
|
110
110
|
},
|
|
111
111
|
select: {
|
|
112
|
-
"value-font-weight": "var(--ui-font-weight-medium)"
|
|
112
|
+
"value-font-weight": "var(--ui-font-weight-medium)",
|
|
113
|
+
"background-color": "var(--ui-color-surface)"
|
|
114
|
+
},
|
|
115
|
+
input: {
|
|
116
|
+
"background-color": "var(--ui-color-bg)"
|
|
113
117
|
}
|
|
114
118
|
};
|
|
115
119
|
|
package/dist/module.d.ts
CHANGED
|
@@ -109,7 +109,11 @@ var defaultComponentsStyle = {
|
|
|
109
109
|
"user-position-color": "var(--ui-color-primary)"
|
|
110
110
|
},
|
|
111
111
|
select: {
|
|
112
|
-
"value-font-weight": "var(--ui-font-weight-medium)"
|
|
112
|
+
"value-font-weight": "var(--ui-font-weight-medium)",
|
|
113
|
+
"background-color": "var(--ui-color-surface)"
|
|
114
|
+
},
|
|
115
|
+
input: {
|
|
116
|
+
"background-color": "var(--ui-color-bg)"
|
|
113
117
|
}
|
|
114
118
|
};
|
|
115
119
|
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -109,7 +109,11 @@ const defaultComponentsStyle = {
|
|
|
109
109
|
"user-position-color": "var(--ui-color-primary)"
|
|
110
110
|
},
|
|
111
111
|
select: {
|
|
112
|
-
"value-font-weight": "var(--ui-font-weight-medium)"
|
|
112
|
+
"value-font-weight": "var(--ui-font-weight-medium)",
|
|
113
|
+
"background-color": "var(--ui-color-surface)"
|
|
114
|
+
},
|
|
115
|
+
input: {
|
|
116
|
+
"background-color": "var(--ui-color-bg)"
|
|
113
117
|
}
|
|
114
118
|
};
|
|
115
119
|
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<a
|
|
3
|
+
v-if="computedType == 'a'"
|
|
3
4
|
class="component-ui component-ui-button"
|
|
4
|
-
:
|
|
5
|
-
:href="href"
|
|
6
|
-
:to="href"
|
|
5
|
+
:href="href"
|
|
7
6
|
:class="classes"
|
|
8
7
|
:style="styles"
|
|
9
8
|
@click="handleClick"
|
|
@@ -20,15 +19,39 @@
|
|
|
20
19
|
</span>
|
|
21
20
|
|
|
22
21
|
<ui-loading class="loading-indicator" :active="loading"></ui-loading>
|
|
23
|
-
</
|
|
22
|
+
</a>
|
|
23
|
+
<button
|
|
24
|
+
v-else
|
|
25
|
+
class="component-ui component-ui-button"
|
|
26
|
+
:class="classes"
|
|
27
|
+
:style="styles"
|
|
28
|
+
@click="handleClick"
|
|
29
|
+
ref="refCom"
|
|
30
|
+
>
|
|
31
|
+
<div class="button-bg" :style="buttonBgStyle"></div>
|
|
32
|
+
|
|
33
|
+
<ui-impulse-indicator :impulse="impulse" />
|
|
34
|
+
|
|
35
|
+
<span class="button-content">
|
|
36
|
+
<span><slot name="prepend"></slot></span>
|
|
37
|
+
<span class="slot-default"><slot></slot></span>
|
|
38
|
+
<span><slot name="append"></slot></span>
|
|
39
|
+
</span>
|
|
40
|
+
|
|
41
|
+
<ui-loading class="loading-indicator" :active="loading"></ui-loading>
|
|
42
|
+
</button>
|
|
24
43
|
</template>
|
|
25
44
|
|
|
26
45
|
<script setup>
|
|
27
46
|
// Imports
|
|
28
|
-
import { ref, computed } from 'vue';
|
|
47
|
+
import { ref, computed, resolveComponent } from 'vue';
|
|
29
48
|
import UiImpulseIndicator from '../impulse-indicator.vue';
|
|
30
49
|
import UiLoading from '../loading.vue';
|
|
31
50
|
import comProps from '#build/ui.button.mjs';
|
|
51
|
+
import { useRouter } from 'vue-router';
|
|
52
|
+
|
|
53
|
+
// Composables
|
|
54
|
+
const router = useRouter();
|
|
32
55
|
|
|
33
56
|
// Data
|
|
34
57
|
const props = defineProps({
|
|
@@ -52,10 +75,6 @@
|
|
|
52
75
|
type: String,
|
|
53
76
|
default: '',
|
|
54
77
|
},
|
|
55
|
-
type: {
|
|
56
|
-
type: String,
|
|
57
|
-
default: '',
|
|
58
|
-
},
|
|
59
78
|
block: {
|
|
60
79
|
type: Boolean,
|
|
61
80
|
default: false,
|
|
@@ -73,10 +92,8 @@
|
|
|
73
92
|
const refCom = ref(null);
|
|
74
93
|
|
|
75
94
|
const impulse = ref(false);
|
|
76
|
-
|
|
77
|
-
const computedType =
|
|
78
|
-
return props.type !== '' ? props.type : (props.href !== '' ? 'a' : 'button');
|
|
79
|
-
});
|
|
95
|
+
|
|
96
|
+
const computedType = props.href ? 'a' : 'button';
|
|
80
97
|
|
|
81
98
|
const classes = computed(() => {
|
|
82
99
|
let ar = [];
|
|
@@ -138,6 +155,15 @@
|
|
|
138
155
|
width : refCom.value.offsetWidth,
|
|
139
156
|
height : refCom.value.offsetHeight
|
|
140
157
|
};
|
|
158
|
+
|
|
159
|
+
// Handle navigate
|
|
160
|
+
if (computedType == 'a') {
|
|
161
|
+
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
|
|
162
|
+
|
|
163
|
+
e.preventDefault();
|
|
164
|
+
|
|
165
|
+
router.push(props.href);
|
|
166
|
+
}
|
|
141
167
|
}
|
|
142
168
|
</script>
|
|
143
169
|
|
|
@@ -73,8 +73,8 @@ const props = defineProps({
|
|
|
73
73
|
},
|
|
74
74
|
});
|
|
75
75
|
|
|
76
|
-
const cardIs = (props.to || props.href) ?
|
|
77
|
-
const iconTitleIs = props.iconLink ?
|
|
76
|
+
const cardIs = (props.to || props.href) ? 'NuxtLink' : 'div';
|
|
77
|
+
const iconTitleIs = props.iconLink ? 'NuxtLink' : 'b';
|
|
78
78
|
</script>
|
|
79
79
|
|
|
80
80
|
<style lang="less">
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
@com-color-gray-text: var(--ui-color-gray-text);
|
|
100
100
|
@com-color-error: var(--ui-color-error);
|
|
101
101
|
|
|
102
|
+
@com-text-default: var(--ui-text-default);
|
|
102
103
|
@com-text-medium: var(--ui-text-medium);
|
|
103
104
|
@com-text-small: var(--ui-text-small);
|
|
104
105
|
|
|
@@ -119,7 +120,7 @@
|
|
|
119
120
|
|
|
120
121
|
height: @com-input-height;
|
|
121
122
|
line-height: @com-input-height;
|
|
122
|
-
font-size: @com-text-
|
|
123
|
+
font-size: @com-text-default;
|
|
123
124
|
font-weight: 500;
|
|
124
125
|
|
|
125
126
|
color: @com-color-text;
|
|
@@ -122,6 +122,8 @@
|
|
|
122
122
|
</script>
|
|
123
123
|
|
|
124
124
|
<style lang="less">
|
|
125
|
+
@import '../styles/components.less';
|
|
126
|
+
|
|
125
127
|
// Misc
|
|
126
128
|
@com-ani-ease: var(--ui-ani-ease);
|
|
127
129
|
|
|
@@ -141,6 +143,7 @@
|
|
|
141
143
|
// Color
|
|
142
144
|
@com-color-border-bolder: var(--ui-color-border-bolder);
|
|
143
145
|
@com-color-bg: var(--ui-color-bg);
|
|
146
|
+
@com-color-surface: @ui-input-background-color;
|
|
144
147
|
@com-color-header-text: var(--ui-color-header-text);
|
|
145
148
|
@com-color-gray-text: var(--ui-color-gray-text);
|
|
146
149
|
@com-color-primary: var(--ui-color-primary);
|
|
@@ -167,7 +170,7 @@
|
|
|
167
170
|
height: @com-input-height-default;
|
|
168
171
|
border: 1px solid @com-color-border-bolder;
|
|
169
172
|
border-radius: @com-border-radius-default;
|
|
170
|
-
background: @com-color-
|
|
173
|
+
background: @com-color-surface;
|
|
171
174
|
cursor: text;
|
|
172
175
|
|
|
173
176
|
.com-content {
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
|
|
100
100
|
@com-input-height: var(--ui-input-height-default);
|
|
101
101
|
|
|
102
|
+
@com-text-default: var(--ui-text-default);
|
|
102
103
|
@com-text-medium: var(--ui-text-medium);
|
|
103
104
|
@com-text-small: var(--ui-text-small);
|
|
104
105
|
|
|
@@ -109,20 +110,6 @@
|
|
|
109
110
|
position: relative;
|
|
110
111
|
display: inline-block;
|
|
111
112
|
text-align: left;
|
|
112
|
-
|
|
113
|
-
.error-wrap {
|
|
114
|
-
position: absolute;
|
|
115
|
-
top: 100%;
|
|
116
|
-
left: 0;
|
|
117
|
-
padding: 0;
|
|
118
|
-
|
|
119
|
-
font-size: 11px;
|
|
120
|
-
|
|
121
|
-
color: @com-color-error;
|
|
122
|
-
background: transparent;
|
|
123
|
-
|
|
124
|
-
&:before, &:after { display: none; }
|
|
125
|
-
}
|
|
126
113
|
|
|
127
114
|
> label {
|
|
128
115
|
position: relative;
|
|
@@ -134,7 +121,7 @@
|
|
|
134
121
|
|
|
135
122
|
height: @com-input-height;
|
|
136
123
|
line-height: @com-input-height;
|
|
137
|
-
font-size: @com-text-
|
|
124
|
+
font-size: @com-text-default;
|
|
138
125
|
font-weight: 500;
|
|
139
126
|
color: @com-color-text;
|
|
140
127
|
|
|
@@ -99,7 +99,6 @@ const classes = computed(() => {
|
|
|
99
99
|
if (props.error) ar.push('tag-error');
|
|
100
100
|
if (focus.value) ar.push('tag-focus');
|
|
101
101
|
if (props.disabled) ar.push('tag-disabled');
|
|
102
|
-
if (props.label) ar.push('tag-label');
|
|
103
102
|
|
|
104
103
|
return ar;
|
|
105
104
|
});
|
|
@@ -171,7 +170,7 @@ onMounted(() => {
|
|
|
171
170
|
@com-color-gray-text: var(--ui-color-gray-text);
|
|
172
171
|
@com-color-header-text: var(--ui-color-header-text);
|
|
173
172
|
@com-color-primary: var(--ui-color-primary);
|
|
174
|
-
@com-color-surface:
|
|
173
|
+
@com-color-surface: @ui-select-background-color;
|
|
175
174
|
@com-color-red: var(--ui-color-red);
|
|
176
175
|
@com-color-border: var(--ui-color-border-bolder);
|
|
177
176
|
@com-color-error: var(--ui-color-error);
|
|
@@ -208,37 +207,33 @@ onMounted(() => {
|
|
|
208
207
|
-ms-user-select: none;
|
|
209
208
|
user-select: none;
|
|
210
209
|
|
|
210
|
+
display: flex;
|
|
211
|
+
flex-direction: column;
|
|
212
|
+
justify-content: center;
|
|
213
|
+
align-items: flex-start;
|
|
214
|
+
|
|
211
215
|
position: absolute;
|
|
212
216
|
top: 0;
|
|
213
217
|
left: 0;
|
|
214
|
-
width: 100%;
|
|
215
|
-
height: 100%;
|
|
216
|
-
|
|
217
|
-
cursor: pointer;
|
|
218
|
-
|
|
219
218
|
padding-right: 45px;
|
|
220
219
|
padding-left: 10px;
|
|
220
|
+
width: 100%;
|
|
221
221
|
height: 100%;
|
|
222
222
|
|
|
223
|
-
cursor: pointer;
|
|
224
|
-
|
|
225
223
|
border: 1px solid @com-color-border;
|
|
226
224
|
border-radius: @com-border-radius-default;
|
|
227
225
|
|
|
228
|
-
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
|
|
228
|
+
div, strong {
|
|
229
|
+
width: 100%;
|
|
229
230
|
overflow: hidden;
|
|
230
231
|
text-overflow: ellipsis;
|
|
231
232
|
white-space: nowrap;
|
|
232
|
-
|
|
233
|
-
position: absolute;
|
|
234
|
-
left: 10px;
|
|
235
|
-
right: 30px;
|
|
236
233
|
}
|
|
237
234
|
|
|
238
235
|
strong {
|
|
239
|
-
|
|
240
|
-
top: 50%;
|
|
241
|
-
bottom: auto;
|
|
236
|
+
padding: 0.1em 0;
|
|
242
237
|
font-family: @com-font-header;
|
|
243
238
|
font-weight: @com-value-font-weight;
|
|
244
239
|
color: @com-color-header-text;
|
|
@@ -260,25 +255,6 @@ onMounted(() => {
|
|
|
260
255
|
}
|
|
261
256
|
}
|
|
262
257
|
|
|
263
|
-
&.tag-label {
|
|
264
|
-
.value {
|
|
265
|
-
label {
|
|
266
|
-
top: 3px;
|
|
267
|
-
margin: 0;
|
|
268
|
-
padding: 0 0 5px 0;
|
|
269
|
-
font-size: @com-text-small;
|
|
270
|
-
|
|
271
|
-
color: @com-color-gray-text;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
strong {
|
|
275
|
-
transform: none;
|
|
276
|
-
top: 20px;
|
|
277
|
-
bottom: 0;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
|
|
282
258
|
&.tag-disabled {
|
|
283
259
|
opacity: 0.6;
|
|
284
260
|
cursor: not-allowed;
|
|
@@ -293,8 +269,6 @@ onMounted(() => {
|
|
|
293
269
|
border-color: transparent;
|
|
294
270
|
outline: @com-outline;
|
|
295
271
|
}
|
|
296
|
-
|
|
297
|
-
|
|
298
272
|
}
|
|
299
273
|
|
|
300
274
|
&.tag-error {
|
|
@@ -3,3 +3,5 @@
|
|
|
3
3
|
@ui-button-border-radius: var(--ui-input-height-large);
|
|
4
4
|
@ui-map-user-position-color: var(--color-primary);
|
|
5
5
|
@ui-select-value-font-weight: var(--ui-font-weight-medium);
|
|
6
|
+
@ui-select-background-color: var(--ui-color-surface);
|
|
7
|
+
@ui-input-background-color: var(--ui-color-bg);
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
@com-space-small: var(--ui-space-small);
|
|
67
67
|
@com-space-mini: var(--ui-space-mini);
|
|
68
68
|
|
|
69
|
+
@com-text-default: var(--ui-text-default);
|
|
69
70
|
@com-text-small: var(--ui-text-small);
|
|
70
71
|
|
|
71
72
|
@com-color-border-bolder: var(--ui-color-border-bolder);
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
padding: @com-space-mini;
|
|
86
87
|
min-width: 200px;
|
|
87
88
|
line-height: 1.3;
|
|
88
|
-
font-size: @com-text-
|
|
89
|
+
font-size: @com-text-default;
|
|
89
90
|
color: var(--ui-tooltip-text-color);
|
|
90
91
|
background: var(--ui-tooltip-bg);
|
|
91
92
|
border-radius: @com-border-radius-default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@community-release/nx-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.49",
|
|
4
|
+
"packageManager": "pnpm@10.14.0",
|
|
4
5
|
"description": "nx-ui - Nuxt UI library",
|
|
5
6
|
"repository": {
|
|
6
7
|
"type": "git",
|
|
@@ -23,15 +24,15 @@
|
|
|
23
24
|
"@nuxtjs/color-mode": "^3.5.2",
|
|
24
25
|
"@nuxtjs/i18n": "^9.2.0",
|
|
25
26
|
"@pinia/nuxt": "^0.10.1",
|
|
26
|
-
"pinia": "^3.0.1",
|
|
27
27
|
"ol": "^9.1.0",
|
|
28
|
+
"pinia": "^3.0.1",
|
|
28
29
|
"vue": "^3.5.13"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
31
32
|
"@nuxt/devtools": "latest",
|
|
32
33
|
"@nuxt/module-builder": "^0.5.5",
|
|
33
34
|
"@nuxt/schema": "^3.11.2",
|
|
34
|
-
"@nuxt/test-utils": "^3.
|
|
35
|
+
"@nuxt/test-utils": "^3.19.2",
|
|
35
36
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
36
37
|
"@vue/test-utils": "^2.4.6",
|
|
37
38
|
"@vuedoc/md": "^4.0.0-beta8",
|
|
@@ -42,11 +43,15 @@
|
|
|
42
43
|
"less": "^3.9.0",
|
|
43
44
|
"less-loader": "^5.0.0",
|
|
44
45
|
"nuxt": "^3.15.4",
|
|
46
|
+
"playwright-core": "^1.54.1",
|
|
45
47
|
"vite-raw-plugin": "^1.0.2",
|
|
46
48
|
"vitest": "^1.6.0",
|
|
47
49
|
"vue-docgen-cli": "^4.79.0",
|
|
48
50
|
"vue-tsc": "^2.0.24"
|
|
49
51
|
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"vue-router": "^4.5.0"
|
|
54
|
+
},
|
|
50
55
|
"resolutions": {
|
|
51
56
|
"string-width": "4.2.3"
|
|
52
57
|
},
|