nuance-ui 0.1.45 → 0.1.47
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.json +1 -1
- package/dist/runtime/components/date-time-picker.vue +1 -1
- package/dist/runtime/components/input/date-picker.vue +7 -3
- package/dist/runtime/components/input/email-input.vue +4 -4
- package/dist/runtime/components/input/number-input.vue +5 -5
- package/dist/runtime/components/input/password-input.vue +4 -4
- package/dist/runtime/components/input/text-input.vue +5 -5
- package/dist/runtime/components/input/ui/button-input.d.vue.ts +2 -0
- package/dist/runtime/components/input/ui/button-input.vue +6 -6
- package/dist/runtime/components/input/ui/button-input.vue.d.ts +2 -0
- package/dist/runtime/components/input/ui/input-base.vue +42 -41
- package/dist/runtime/components/table/ui/table-sortable-header.vue +4 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -25,6 +25,7 @@ const {
|
|
|
25
25
|
clearable: { type: Boolean, required: false },
|
|
26
26
|
multiline: { type: Boolean, required: false },
|
|
27
27
|
name: { type: String, required: false },
|
|
28
|
+
classes: { type: Object, required: false },
|
|
28
29
|
error: { type: String, required: false },
|
|
29
30
|
description: { type: String, required: false },
|
|
30
31
|
label: { type: String, required: false },
|
|
@@ -36,7 +37,6 @@ const {
|
|
|
36
37
|
resize: { type: void 0, required: false },
|
|
37
38
|
leftSectionPE: { type: null, required: false },
|
|
38
39
|
rightSectionPE: { type: null, required: false },
|
|
39
|
-
classes: { type: Object, required: false },
|
|
40
40
|
readonly: { type: Boolean, required: false },
|
|
41
41
|
disabled: { type: Boolean, required: false },
|
|
42
42
|
withSeconds: { type: Boolean, required: false }
|
|
@@ -52,6 +52,7 @@ const {
|
|
|
52
52
|
config: { type: Object, required: false },
|
|
53
53
|
multiline: { type: Boolean, required: false },
|
|
54
54
|
name: { type: String, required: false },
|
|
55
|
+
classes: { type: Object, required: false },
|
|
55
56
|
error: { type: String, required: false },
|
|
56
57
|
description: { type: String, required: false },
|
|
57
58
|
label: { type: String, required: false },
|
|
@@ -61,8 +62,7 @@ const {
|
|
|
61
62
|
variant: { type: String, required: false },
|
|
62
63
|
resize: { type: void 0, required: false },
|
|
63
64
|
leftSectionPE: { type: null, required: false },
|
|
64
|
-
rightSectionPE: { type: null, required: false }
|
|
65
|
-
classes: { type: Object, required: false }
|
|
65
|
+
rightSectionPE: { type: null, required: false }
|
|
66
66
|
});
|
|
67
67
|
defineEmits(["open", "close", "select", "prev", "level", "next"]);
|
|
68
68
|
const model = defineModel({ type: null });
|
|
@@ -95,7 +95,11 @@ const visible = computed(() => {
|
|
|
95
95
|
<template>
|
|
96
96
|
<Popover @open='$emit("open")' @close='$emit("close")'>
|
|
97
97
|
<PopoverTarget>
|
|
98
|
-
<ButtonInput
|
|
98
|
+
<ButtonInput
|
|
99
|
+
v-bind='props'
|
|
100
|
+
v-model='model'
|
|
101
|
+
:multiline='mode === "multiple"'
|
|
102
|
+
>
|
|
99
103
|
<template #leftSection>
|
|
100
104
|
<slot name='leftSection'>
|
|
101
105
|
<Icon name='gravity-ui:calendar' />
|
|
@@ -28,17 +28,17 @@ const props = defineProps({
|
|
|
28
28
|
</slot>
|
|
29
29
|
</template>
|
|
30
30
|
|
|
31
|
-
<template #rightSection>
|
|
31
|
+
<template v-if='!!$slots.rightSection' #rightSection>
|
|
32
32
|
<slot name='rightSection' />
|
|
33
33
|
</template>
|
|
34
34
|
|
|
35
|
-
<template v-if='
|
|
35
|
+
<template v-if='!!$slots.label' #label>
|
|
36
36
|
<slot name='label' />
|
|
37
37
|
</template>
|
|
38
|
-
<template v-if='
|
|
38
|
+
<template v-if='!!$slots.error' #error>
|
|
39
39
|
<slot name='error' />
|
|
40
40
|
</template>
|
|
41
|
-
<template v-if='
|
|
41
|
+
<template v-if='!!$slots.description' #description>
|
|
42
42
|
<slot name='description' />
|
|
43
43
|
</template>
|
|
44
44
|
</TextInput>
|
|
@@ -49,7 +49,7 @@ function handleBlur() {
|
|
|
49
49
|
<template>
|
|
50
50
|
<InputWrapper v-bind='rest' :class='$style.root' :right-section-p-e>
|
|
51
51
|
<BaseInput>
|
|
52
|
-
<template v-if='
|
|
52
|
+
<template v-if='!!$slots.leftSection' #leftSection>
|
|
53
53
|
<slot name='leftSection' />
|
|
54
54
|
</template>
|
|
55
55
|
|
|
@@ -68,7 +68,7 @@ function handleBlur() {
|
|
|
68
68
|
>
|
|
69
69
|
</template>
|
|
70
70
|
|
|
71
|
-
<template v-if='
|
|
71
|
+
<template v-if='!!$slots.rightSection || !hideControls' #rightSection>
|
|
72
72
|
<slot name='rightSection'>
|
|
73
73
|
<div :class='$style.controls'>
|
|
74
74
|
<UnstyledButton
|
|
@@ -90,13 +90,13 @@ function handleBlur() {
|
|
|
90
90
|
</template>
|
|
91
91
|
</BaseInput>
|
|
92
92
|
|
|
93
|
-
<template v-if='
|
|
93
|
+
<template v-if='!!$slots.label' #label>
|
|
94
94
|
<slot name='label' />
|
|
95
95
|
</template>
|
|
96
|
-
<template v-if='
|
|
96
|
+
<template v-if='!!$slots.error' #error>
|
|
97
97
|
<slot name='error' />
|
|
98
98
|
</template>
|
|
99
|
-
<template v-if='
|
|
99
|
+
<template v-if='!!$slots.description' #description>
|
|
100
100
|
<slot name='description' />
|
|
101
101
|
</template>
|
|
102
102
|
</InputWrapper>
|
|
@@ -38,17 +38,17 @@ const password = ref(true);
|
|
|
38
38
|
</slot>
|
|
39
39
|
</template>
|
|
40
40
|
|
|
41
|
-
<template v-if='
|
|
41
|
+
<template v-if='!!$slots.leftSection' #leftSection>
|
|
42
42
|
<slot name='leftSection' />
|
|
43
43
|
</template>
|
|
44
44
|
|
|
45
|
-
<template v-if='
|
|
45
|
+
<template v-if='!!$slots.label' #label>
|
|
46
46
|
<slot name='label' />
|
|
47
47
|
</template>
|
|
48
|
-
<template v-if='
|
|
48
|
+
<template v-if='!!$slots.error' #error>
|
|
49
49
|
<slot name='error' />
|
|
50
50
|
</template>
|
|
51
|
-
<template v-if='
|
|
51
|
+
<template v-if='!!$slots.description' #description>
|
|
52
52
|
<slot name='description' />
|
|
53
53
|
</template>
|
|
54
54
|
</TextInput>
|
|
@@ -33,7 +33,7 @@ defineExpose({
|
|
|
33
33
|
<template>
|
|
34
34
|
<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
|
|
35
35
|
<BaseInput>
|
|
36
|
-
<template v-if='
|
|
36
|
+
<template v-if='!!$slots.leftSection' #leftSection>
|
|
37
37
|
<slot name='leftSection' />
|
|
38
38
|
</template>
|
|
39
39
|
|
|
@@ -49,18 +49,18 @@ defineExpose({
|
|
|
49
49
|
>
|
|
50
50
|
</template>
|
|
51
51
|
|
|
52
|
-
<template v-if='
|
|
52
|
+
<template v-if='!!$slots.rightSection' #rightSection>
|
|
53
53
|
<slot name='rightSection' />
|
|
54
54
|
</template>
|
|
55
55
|
</BaseInput>
|
|
56
56
|
|
|
57
|
-
<template v-if='
|
|
57
|
+
<template v-if='!!$slots.label' #label>
|
|
58
58
|
<slot name='label' />
|
|
59
59
|
</template>
|
|
60
|
-
<template v-if='
|
|
60
|
+
<template v-if='!!$slots.error' #error>
|
|
61
61
|
<slot name='error' />
|
|
62
62
|
</template>
|
|
63
|
-
<template v-if='
|
|
63
|
+
<template v-if='!!$slots.description' #description>
|
|
64
64
|
<slot name='description' />
|
|
65
65
|
</template>
|
|
66
66
|
</InputWrapper>
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Classes } from '@nui/types';
|
|
1
2
|
import type { InputBaseProps } from '../types/index.js';
|
|
2
3
|
import type { BaseInputProps } from './input-base.vue.js';
|
|
3
4
|
import type { InputWrapperProps } from './input-wrapper.vue.js';
|
|
@@ -5,6 +6,7 @@ export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, Inp
|
|
|
5
6
|
/** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
|
|
6
7
|
multiline?: boolean;
|
|
7
8
|
name?: string;
|
|
9
|
+
classes?: Classes<'root' | 'section' | 'input'>;
|
|
8
10
|
}
|
|
9
11
|
type __VLS_Props = ButtonInputProps;
|
|
10
12
|
type __VLS_ModelProps = {
|
|
@@ -5,9 +5,10 @@ import UnstyledButton from "../../button/unstyled-button.vue";
|
|
|
5
5
|
import InputBase from "./input-base.vue";
|
|
6
6
|
import InputWrapper from "./input-wrapper.vue";
|
|
7
7
|
defineOptions({ inheritAttrs: false });
|
|
8
|
-
const props = defineProps({
|
|
8
|
+
const { classes, ...props } = defineProps({
|
|
9
9
|
multiline: { type: Boolean, required: false },
|
|
10
10
|
name: { type: String, required: false },
|
|
11
|
+
classes: { type: Object, required: false },
|
|
11
12
|
error: { type: String, required: false },
|
|
12
13
|
description: { type: String, required: false },
|
|
13
14
|
label: { type: String, required: false },
|
|
@@ -19,7 +20,6 @@ const props = defineProps({
|
|
|
19
20
|
resize: { type: void 0, required: false },
|
|
20
21
|
leftSectionPE: { type: null, required: false },
|
|
21
22
|
rightSectionPE: { type: null, required: false },
|
|
22
|
-
classes: { type: Object, required: false },
|
|
23
23
|
readonly: { type: Boolean, required: false },
|
|
24
24
|
disabled: { type: Boolean, required: false }
|
|
25
25
|
});
|
|
@@ -33,8 +33,8 @@ defineExpose({
|
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
35
|
<template>
|
|
36
|
-
<InputWrapper v-bind='props'>
|
|
37
|
-
<InputBase :class='$style.base'>
|
|
36
|
+
<InputWrapper v-bind='props' :class='classes?.root'>
|
|
37
|
+
<InputBase :class='$style.base' :classes='{ section: classes?.section }'>
|
|
38
38
|
<template v-if='!!$slots.leftSection' #leftSection>
|
|
39
39
|
<slot name='leftSection' />
|
|
40
40
|
</template>
|
|
@@ -46,7 +46,7 @@ defineExpose({
|
|
|
46
46
|
v-bind='{ ...$attrs, class: null }'
|
|
47
47
|
:disabled
|
|
48
48
|
:readonly
|
|
49
|
-
:class='[css, $style.button]'
|
|
49
|
+
:class='[css, $style.button, classes?.input]'
|
|
50
50
|
:mod='{ multiline: props.multiline }'
|
|
51
51
|
>
|
|
52
52
|
<slot />
|
|
@@ -86,7 +86,7 @@ defineExpose({
|
|
|
86
86
|
|
|
87
87
|
.button {
|
|
88
88
|
width: 100%;
|
|
89
|
-
min-width: rem(
|
|
89
|
+
min-width: rem(100px);
|
|
90
90
|
|
|
91
91
|
font-weight: 400;
|
|
92
92
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Classes } from '@nui/types';
|
|
1
2
|
import type { InputBaseProps } from '../types/index.js';
|
|
2
3
|
import type { BaseInputProps } from './input-base.vue.js';
|
|
3
4
|
import type { InputWrapperProps } from './input-wrapper.vue.js';
|
|
@@ -5,6 +6,7 @@ export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, Inp
|
|
|
5
6
|
/** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
|
|
6
7
|
multiline?: boolean;
|
|
7
8
|
name?: string;
|
|
9
|
+
classes?: Classes<'root' | 'section' | 'input'>;
|
|
8
10
|
}
|
|
9
11
|
type __VLS_Props = ButtonInputProps;
|
|
10
12
|
type __VLS_ModelProps = {
|
|
@@ -102,6 +102,47 @@ const style = computed(() => ({
|
|
|
102
102
|
--right-section-end: 1px;
|
|
103
103
|
--right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
|
|
104
104
|
|
|
105
|
+
position: relative;
|
|
106
|
+
|
|
107
|
+
&[data-variant='unstyled'] {
|
|
108
|
+
--input-padding: 0;
|
|
109
|
+
--input-padding-y: 0;
|
|
110
|
+
--input-padding-inline-start: 0;
|
|
111
|
+
--input-padding-inline-end: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&[data-pointer] {
|
|
115
|
+
--input-cursor: pointer;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&[data-multiline] {
|
|
119
|
+
--input-padding-y-xs: 4.5px;
|
|
120
|
+
--input-padding-y-sm: 5.5px;
|
|
121
|
+
--input-padding-y-md: 7px;
|
|
122
|
+
--input-padding-y-lg: 9.5px;
|
|
123
|
+
--input-padding-y-xl: 13px;
|
|
124
|
+
|
|
125
|
+
--input-size: auto;
|
|
126
|
+
--input-line-height: var(--line-height);
|
|
127
|
+
--input-padding-y: var(--input-padding-y-sm);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&[data-with-left-section] {
|
|
131
|
+
--input-padding-inline-start: var(--input-left-section-size);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&[data-with-right-section] {
|
|
135
|
+
--input-padding-inline-end: var(--input-right-section-size);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&[data-error] {
|
|
139
|
+
--input-color: var(--color-error);
|
|
140
|
+
--input-placeholder-color: var(--color-error);
|
|
141
|
+
--input-section-color: var(--color-error);
|
|
142
|
+
|
|
143
|
+
--input-bd: var(--color-error);
|
|
144
|
+
}
|
|
145
|
+
|
|
105
146
|
@mixin where-light {
|
|
106
147
|
--input-disabled-bg: var(--color-gray-1);
|
|
107
148
|
--input-disabled-color: var(--color-gray-6);
|
|
@@ -153,47 +194,6 @@ const style = computed(() => ({
|
|
|
153
194
|
--left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
|
|
154
195
|
--right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
|
|
155
196
|
}
|
|
156
|
-
|
|
157
|
-
position: relative;
|
|
158
|
-
|
|
159
|
-
&[data-variant='unstyled'] {
|
|
160
|
-
--input-padding: 0;
|
|
161
|
-
--input-padding-y: 0;
|
|
162
|
-
--input-padding-inline-start: 0;
|
|
163
|
-
--input-padding-inline-end: 0;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
&[data-pointer] {
|
|
167
|
-
--input-cursor: pointer;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
&[data-multiline] {
|
|
171
|
-
--input-padding-y-xs: 4.5px;
|
|
172
|
-
--input-padding-y-sm: 5.5px;
|
|
173
|
-
--input-padding-y-md: 7px;
|
|
174
|
-
--input-padding-y-lg: 9.5px;
|
|
175
|
-
--input-padding-y-xl: 13px;
|
|
176
|
-
|
|
177
|
-
--input-size: auto;
|
|
178
|
-
--input-line-height: var(--line-height);
|
|
179
|
-
--input-padding-y: var(--input-padding-y-sm);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
&[data-with-left-section] {
|
|
183
|
-
--input-padding-inline-start: var(--input-left-section-size);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
&[data-with-right-section] {
|
|
187
|
-
--input-padding-inline-end: var(--input-right-section-size);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
&[data-error] {
|
|
191
|
-
--input-color: var(--color-error);
|
|
192
|
-
--input-placeholder-color: var(--color-error);
|
|
193
|
-
--input-section-color: var(--color-error);
|
|
194
|
-
|
|
195
|
-
--input-bd: var(--color-error);
|
|
196
|
-
}
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
.input {
|
|
@@ -260,6 +260,7 @@ const style = computed(() => ({
|
|
|
260
260
|
|
|
261
261
|
&[type='number'] {
|
|
262
262
|
-moz-appearance: textfield;
|
|
263
|
+
appearance: textfield;
|
|
263
264
|
}
|
|
264
265
|
|
|
265
266
|
&:disabled,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
+
import { FlexRender } from "@tanstack/vue-table";
|
|
2
3
|
import Button from "../../button/button.vue";
|
|
3
4
|
import TableSortIcon from "./table-sort-icon.vue";
|
|
4
5
|
const {
|
|
@@ -33,7 +34,9 @@ const {
|
|
|
33
34
|
<template #leftSection>
|
|
34
35
|
<TableSortIcon :column :icons />
|
|
35
36
|
</template>
|
|
36
|
-
<slot
|
|
37
|
+
<slot>
|
|
38
|
+
<FlexRender :render='column.columnDef.header' />
|
|
39
|
+
</slot>
|
|
37
40
|
<template v-if='!!$slots.rightSection' #rightSection>
|
|
38
41
|
<slot name='rightSection' />
|
|
39
42
|
</template>
|