nuance-ui 0.2.12 → 0.2.15
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/app-shell/app-shell.d.vue.ts +8 -0
- package/dist/runtime/components/app-shell/app-shell.vue +9 -5
- package/dist/runtime/components/app-shell/app-shell.vue.d.ts +8 -0
- package/dist/runtime/components/checkbox/checkbox.vue +1 -1
- package/dist/runtime/form/checkbox-field.d.vue.ts +38 -0
- package/dist/runtime/form/checkbox-field.vue +68 -0
- package/dist/runtime/form/checkbox-field.vue.d.ts +38 -0
- package/dist/runtime/form/checkbox-group-field.d.vue.ts +35 -0
- package/dist/runtime/form/checkbox-group-field.vue +62 -0
- package/dist/runtime/form/checkbox-group-field.vue.d.ts +35 -0
- package/dist/runtime/form/switch-field.d.vue.ts +33 -0
- package/dist/runtime/form/switch-field.vue +66 -0
- package/dist/runtime/form/switch-field.vue.d.ts +33 -0
- package/dist/runtime/form/switch-group-field.d.vue.ts +35 -0
- package/dist/runtime/form/switch-group-field.vue +62 -0
- package/dist/runtime/form/switch-group-field.vue.d.ts +35 -0
- package/package.json +3 -11
package/dist/module.json
CHANGED
|
@@ -14,6 +14,14 @@ export interface AppShellProps extends BoxProps {
|
|
|
14
14
|
withBorder?: boolean;
|
|
15
15
|
/** Locale configuration for date-aware features */
|
|
16
16
|
dateConfig?: Partial<DateConfig>;
|
|
17
|
+
/** Hides aside on mount */
|
|
18
|
+
hideAside?: boolean;
|
|
19
|
+
/** Hides navbar on mount */
|
|
20
|
+
hideNavbar?: boolean;
|
|
21
|
+
/** Hides header on mount */
|
|
22
|
+
hideHeader?: boolean;
|
|
23
|
+
/** Hides footer on mount */
|
|
24
|
+
hideFooter?: boolean;
|
|
17
25
|
}
|
|
18
26
|
type __VLS_Props = AppShellProps;
|
|
19
27
|
type __VLS_ModelProps = {
|
|
@@ -12,13 +12,17 @@ const {
|
|
|
12
12
|
layout: { type: String, required: false },
|
|
13
13
|
withBorder: { type: Boolean, required: false },
|
|
14
14
|
dateConfig: { type: Object, required: false },
|
|
15
|
+
hideAside: { type: Boolean, required: false },
|
|
16
|
+
hideNavbar: { type: Boolean, required: false },
|
|
17
|
+
hideHeader: { type: Boolean, required: false },
|
|
18
|
+
hideFooter: { type: Boolean, required: false },
|
|
15
19
|
is: { type: null, required: false },
|
|
16
20
|
mod: { type: [Object, Array, null], required: false }
|
|
17
21
|
});
|
|
18
|
-
const aside = defineModel("aside", { type: Boolean, ...{ default:
|
|
19
|
-
const header = defineModel("header", { type: Boolean, ...{ default:
|
|
20
|
-
const navbar = defineModel("navbar", { type: Boolean, ...{ default:
|
|
21
|
-
const footer = defineModel("footer", { type: Boolean, ...{ default:
|
|
22
|
+
const aside = defineModel("aside", { type: Boolean, ...{ default: (props) => !!props.hideAside } });
|
|
23
|
+
const header = defineModel("header", { type: Boolean, ...{ default: (props) => !!props.hideHeader } });
|
|
24
|
+
const navbar = defineModel("navbar", { type: Boolean, ...{ default: (props) => !!props.hideNavbar } });
|
|
25
|
+
const footer = defineModel("footer", { type: Boolean, ...{ default: (props) => !!props.hideFooter } });
|
|
22
26
|
useProvideAppShell({ aside, footer, header, navbar });
|
|
23
27
|
useProvideDatesConfig(dateConfig);
|
|
24
28
|
const style = useVarsResolver(() => ({
|
|
@@ -38,7 +42,7 @@ const style = useVarsResolver(() => ({
|
|
|
38
42
|
<template>
|
|
39
43
|
<Box
|
|
40
44
|
:is
|
|
41
|
-
:style
|
|
45
|
+
:style='style.root'
|
|
42
46
|
:class='$style.root'
|
|
43
47
|
:mod='[mod, { layout, "with-border": withBorder }]'
|
|
44
48
|
>
|
|
@@ -14,6 +14,14 @@ export interface AppShellProps extends BoxProps {
|
|
|
14
14
|
withBorder?: boolean;
|
|
15
15
|
/** Locale configuration for date-aware features */
|
|
16
16
|
dateConfig?: Partial<DateConfig>;
|
|
17
|
+
/** Hides aside on mount */
|
|
18
|
+
hideAside?: boolean;
|
|
19
|
+
/** Hides navbar on mount */
|
|
20
|
+
hideNavbar?: boolean;
|
|
21
|
+
/** Hides header on mount */
|
|
22
|
+
hideHeader?: boolean;
|
|
23
|
+
/** Hides footer on mount */
|
|
24
|
+
hideFooter?: boolean;
|
|
17
25
|
}
|
|
18
26
|
type __VLS_Props = AppShellProps;
|
|
19
27
|
type __VLS_ModelProps = {
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { CheckboxProps } from '../components/checkbox/checkbox.vue.js';
|
|
3
|
+
export interface CheckboxFieldProps extends Omit<CheckboxProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<boolean>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value @default `false` */
|
|
11
|
+
initialValue?: boolean;
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_11: {
|
|
16
|
+
class: string;
|
|
17
|
+
indeterminate: boolean;
|
|
18
|
+
}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {
|
|
19
|
+
error: string | undefined;
|
|
20
|
+
};
|
|
21
|
+
type __VLS_Slots = {} & {
|
|
22
|
+
icon?: (props: typeof __VLS_11) => any;
|
|
23
|
+
} & {
|
|
24
|
+
label?: (props: typeof __VLS_14) => any;
|
|
25
|
+
} & {
|
|
26
|
+
description?: (props: typeof __VLS_17) => any;
|
|
27
|
+
} & {
|
|
28
|
+
error?: (props: typeof __VLS_20) => any;
|
|
29
|
+
};
|
|
30
|
+
declare const __VLS_base: import("vue").DefineComponent<CheckboxFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
32
|
+
declare const _default: typeof __VLS_export;
|
|
33
|
+
export default _default;
|
|
34
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
35
|
+
new (): {
|
|
36
|
+
$slots: S;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useField } from "vee-validate";
|
|
3
|
+
import Checkbox from "../components/checkbox/checkbox.vue";
|
|
4
|
+
const {
|
|
5
|
+
name,
|
|
6
|
+
rules,
|
|
7
|
+
validateOn = "change",
|
|
8
|
+
initialValue = false,
|
|
9
|
+
controlled = true,
|
|
10
|
+
...props
|
|
11
|
+
} = defineProps({
|
|
12
|
+
name: { type: String, required: true },
|
|
13
|
+
rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
|
|
14
|
+
validateOn: { type: String, required: false },
|
|
15
|
+
initialValue: { type: Boolean, required: false },
|
|
16
|
+
controlled: { type: Boolean, required: false },
|
|
17
|
+
id: { type: String, required: false },
|
|
18
|
+
color: { type: null, required: false },
|
|
19
|
+
iconColor: { type: null, required: false },
|
|
20
|
+
radius: { type: [String, Number, Object], required: false },
|
|
21
|
+
size: { type: String, required: false },
|
|
22
|
+
value: { type: String, required: false },
|
|
23
|
+
variant: { type: String, required: false },
|
|
24
|
+
label: { type: String, required: false },
|
|
25
|
+
description: { type: String, required: false },
|
|
26
|
+
disabled: { type: Boolean, required: false, skipCheck: true },
|
|
27
|
+
labelPosition: { type: String, required: false },
|
|
28
|
+
bodyElement: { type: null, required: false },
|
|
29
|
+
labelElement: { type: null, required: false },
|
|
30
|
+
is: { type: null, required: false },
|
|
31
|
+
mod: { type: [Object, Array, null], required: false }
|
|
32
|
+
});
|
|
33
|
+
const {
|
|
34
|
+
value,
|
|
35
|
+
errorMessage,
|
|
36
|
+
handleChange
|
|
37
|
+
} = useField(() => name, rules, {
|
|
38
|
+
validateOnValueUpdate: false,
|
|
39
|
+
validateOnMount: false,
|
|
40
|
+
initialValue,
|
|
41
|
+
controlled
|
|
42
|
+
});
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<template>
|
|
46
|
+
<Checkbox
|
|
47
|
+
v-bind='props'
|
|
48
|
+
:model-value='value'
|
|
49
|
+
:error='errorMessage'
|
|
50
|
+
@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
|
|
51
|
+
>
|
|
52
|
+
<template v-if='$slots.icon' #icon='slotProps'>
|
|
53
|
+
<slot name='icon' v-bind='slotProps' />
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<template v-if='$slots.label' #label>
|
|
57
|
+
<slot name='label' />
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<template v-if='$slots.description' #description>
|
|
61
|
+
<slot name='description' />
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<template v-if='$slots.error' #error>
|
|
65
|
+
<slot name='error' :error='errorMessage' />
|
|
66
|
+
</template>
|
|
67
|
+
</Checkbox>
|
|
68
|
+
</template>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { CheckboxProps } from '../components/checkbox/checkbox.vue.js';
|
|
3
|
+
export interface CheckboxFieldProps extends Omit<CheckboxProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<boolean>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value @default `false` */
|
|
11
|
+
initialValue?: boolean;
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_11: {
|
|
16
|
+
class: string;
|
|
17
|
+
indeterminate: boolean;
|
|
18
|
+
}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {
|
|
19
|
+
error: string | undefined;
|
|
20
|
+
};
|
|
21
|
+
type __VLS_Slots = {} & {
|
|
22
|
+
icon?: (props: typeof __VLS_11) => any;
|
|
23
|
+
} & {
|
|
24
|
+
label?: (props: typeof __VLS_14) => any;
|
|
25
|
+
} & {
|
|
26
|
+
description?: (props: typeof __VLS_17) => any;
|
|
27
|
+
} & {
|
|
28
|
+
error?: (props: typeof __VLS_20) => any;
|
|
29
|
+
};
|
|
30
|
+
declare const __VLS_base: import("vue").DefineComponent<CheckboxFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
32
|
+
declare const _default: typeof __VLS_export;
|
|
33
|
+
export default _default;
|
|
34
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
35
|
+
new (): {
|
|
36
|
+
$slots: S;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { CheckboxGroupProps } from '../components/checkbox/checkbox-group.vue.js';
|
|
3
|
+
export interface CheckboxGroupFieldProps extends Omit<CheckboxGroupProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<string[]>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value */
|
|
11
|
+
initialValue?: string[];
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {
|
|
16
|
+
error: string | undefined;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
default?: (props: typeof __VLS_10) => any;
|
|
20
|
+
} & {
|
|
21
|
+
label?: (props: typeof __VLS_13) => any;
|
|
22
|
+
} & {
|
|
23
|
+
description?: (props: typeof __VLS_16) => any;
|
|
24
|
+
} & {
|
|
25
|
+
error?: (props: typeof __VLS_19) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxGroupFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useField } from "vee-validate";
|
|
3
|
+
import CheckboxGroup from "../components/checkbox/checkbox-group.vue";
|
|
4
|
+
const {
|
|
5
|
+
name,
|
|
6
|
+
rules,
|
|
7
|
+
validateOn = "change",
|
|
8
|
+
initialValue,
|
|
9
|
+
controlled = true,
|
|
10
|
+
...props
|
|
11
|
+
} = defineProps({
|
|
12
|
+
name: { type: String, required: true },
|
|
13
|
+
rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
|
|
14
|
+
validateOn: { type: String, required: false },
|
|
15
|
+
initialValue: { type: Array, required: false },
|
|
16
|
+
controlled: { type: Boolean, required: false },
|
|
17
|
+
size: { type: String, required: false },
|
|
18
|
+
readOnly: { type: Boolean, required: false },
|
|
19
|
+
disabled: { type: Boolean, required: false },
|
|
20
|
+
maxSelectedValues: { type: Number, required: false },
|
|
21
|
+
description: { type: String, required: false },
|
|
22
|
+
label: { type: String, required: false },
|
|
23
|
+
required: { type: Boolean, required: false },
|
|
24
|
+
radius: { type: [String, Number, Object], required: false },
|
|
25
|
+
variant: { type: String, required: false },
|
|
26
|
+
leftSectionPE: { type: void 0, required: false },
|
|
27
|
+
rightSectionPE: { type: void 0, required: false }
|
|
28
|
+
});
|
|
29
|
+
const {
|
|
30
|
+
value,
|
|
31
|
+
errorMessage,
|
|
32
|
+
handleChange
|
|
33
|
+
} = useField(() => name, rules, {
|
|
34
|
+
validateOnValueUpdate: false,
|
|
35
|
+
validateOnMount: false,
|
|
36
|
+
initialValue,
|
|
37
|
+
controlled
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<CheckboxGroup
|
|
43
|
+
v-bind='props'
|
|
44
|
+
:model-value='value ?? []'
|
|
45
|
+
:error='errorMessage'
|
|
46
|
+
@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
|
|
47
|
+
>
|
|
48
|
+
<slot />
|
|
49
|
+
|
|
50
|
+
<template v-if='$slots.label' #label>
|
|
51
|
+
<slot name='label' />
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<template v-if='$slots.description' #description>
|
|
55
|
+
<slot name='description' />
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<template v-if='$slots.error' #error>
|
|
59
|
+
<slot name='error' :error='errorMessage' />
|
|
60
|
+
</template>
|
|
61
|
+
</CheckboxGroup>
|
|
62
|
+
</template>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { CheckboxGroupProps } from '../components/checkbox/checkbox-group.vue.js';
|
|
3
|
+
export interface CheckboxGroupFieldProps extends Omit<CheckboxGroupProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<string[]>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value */
|
|
11
|
+
initialValue?: string[];
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {
|
|
16
|
+
error: string | undefined;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
default?: (props: typeof __VLS_10) => any;
|
|
20
|
+
} & {
|
|
21
|
+
label?: (props: typeof __VLS_13) => any;
|
|
22
|
+
} & {
|
|
23
|
+
description?: (props: typeof __VLS_16) => any;
|
|
24
|
+
} & {
|
|
25
|
+
error?: (props: typeof __VLS_19) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckboxGroupFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { SwitchProps } from '../components/switch/switch.vue.js';
|
|
3
|
+
export interface SwitchFieldProps extends Omit<SwitchProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<boolean>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value @default `false` */
|
|
11
|
+
initialValue?: boolean;
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {
|
|
16
|
+
error: string | undefined;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
label?: (props: typeof __VLS_11) => any;
|
|
20
|
+
} & {
|
|
21
|
+
description?: (props: typeof __VLS_14) => any;
|
|
22
|
+
} & {
|
|
23
|
+
error?: (props: typeof __VLS_17) => any;
|
|
24
|
+
};
|
|
25
|
+
declare const __VLS_base: import("vue").DefineComponent<SwitchFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useField } from "vee-validate";
|
|
3
|
+
import Switch from "../components/switch/switch.vue";
|
|
4
|
+
const {
|
|
5
|
+
name,
|
|
6
|
+
rules,
|
|
7
|
+
validateOn = "change",
|
|
8
|
+
initialValue = false,
|
|
9
|
+
controlled = true,
|
|
10
|
+
...props
|
|
11
|
+
} = defineProps({
|
|
12
|
+
name: { type: String, required: true },
|
|
13
|
+
rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
|
|
14
|
+
validateOn: { type: String, required: false },
|
|
15
|
+
initialValue: { type: Boolean, required: false },
|
|
16
|
+
controlled: { type: Boolean, required: false },
|
|
17
|
+
id: { type: String, required: false },
|
|
18
|
+
value: { type: String, required: false },
|
|
19
|
+
offLabel: { type: String, required: false },
|
|
20
|
+
onLabel: { type: String, required: false },
|
|
21
|
+
color: { type: null, required: false },
|
|
22
|
+
size: { type: String, required: false },
|
|
23
|
+
radius: { type: [String, Number], required: false },
|
|
24
|
+
icon: { type: String, required: false },
|
|
25
|
+
withIndicator: { type: Boolean, required: false },
|
|
26
|
+
label: { type: String, required: false },
|
|
27
|
+
description: { type: String, required: false },
|
|
28
|
+
disabled: { type: Boolean, required: false, skipCheck: true },
|
|
29
|
+
labelPosition: { type: String, required: false },
|
|
30
|
+
bodyElement: { type: null, required: false },
|
|
31
|
+
labelElement: { type: null, required: false },
|
|
32
|
+
is: { type: null, required: false },
|
|
33
|
+
mod: { type: [Object, Array, null], required: false }
|
|
34
|
+
});
|
|
35
|
+
const {
|
|
36
|
+
value,
|
|
37
|
+
errorMessage,
|
|
38
|
+
handleChange
|
|
39
|
+
} = useField(() => name, rules, {
|
|
40
|
+
validateOnValueUpdate: false,
|
|
41
|
+
validateOnMount: false,
|
|
42
|
+
initialValue,
|
|
43
|
+
controlled
|
|
44
|
+
});
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<template>
|
|
48
|
+
<Switch
|
|
49
|
+
v-bind='props'
|
|
50
|
+
:model-value='value'
|
|
51
|
+
:error='errorMessage'
|
|
52
|
+
@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
|
|
53
|
+
>
|
|
54
|
+
<template v-if='$slots.label' #label>
|
|
55
|
+
<slot name='label' />
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<template v-if='$slots.description' #description>
|
|
59
|
+
<slot name='description' />
|
|
60
|
+
</template>
|
|
61
|
+
|
|
62
|
+
<template v-if='$slots.error' #error>
|
|
63
|
+
<slot name='error' :error='errorMessage' />
|
|
64
|
+
</template>
|
|
65
|
+
</Switch>
|
|
66
|
+
</template>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { SwitchProps } from '../components/switch/switch.vue.js';
|
|
3
|
+
export interface SwitchFieldProps extends Omit<SwitchProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<boolean>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value @default `false` */
|
|
11
|
+
initialValue?: boolean;
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {
|
|
16
|
+
error: string | undefined;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
label?: (props: typeof __VLS_11) => any;
|
|
20
|
+
} & {
|
|
21
|
+
description?: (props: typeof __VLS_14) => any;
|
|
22
|
+
} & {
|
|
23
|
+
error?: (props: typeof __VLS_17) => any;
|
|
24
|
+
};
|
|
25
|
+
declare const __VLS_base: import("vue").DefineComponent<SwitchFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { SwitchGroupProps } from '../components/switch/switch-group.vue.js';
|
|
3
|
+
export interface SwitchGroupFieldProps extends Omit<SwitchGroupProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<string[]>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value */
|
|
11
|
+
initialValue?: string[];
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {
|
|
16
|
+
error: string | undefined;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
default?: (props: typeof __VLS_10) => any;
|
|
20
|
+
} & {
|
|
21
|
+
label?: (props: typeof __VLS_13) => any;
|
|
22
|
+
} & {
|
|
23
|
+
description?: (props: typeof __VLS_16) => any;
|
|
24
|
+
} & {
|
|
25
|
+
error?: (props: typeof __VLS_19) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<SwitchGroupFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchGroupFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useField } from "vee-validate";
|
|
3
|
+
import SwitchGroup from "../components/switch/switch-group.vue";
|
|
4
|
+
const {
|
|
5
|
+
name,
|
|
6
|
+
rules,
|
|
7
|
+
validateOn = "change",
|
|
8
|
+
initialValue,
|
|
9
|
+
controlled = true,
|
|
10
|
+
...props
|
|
11
|
+
} = defineProps({
|
|
12
|
+
name: { type: String, required: true },
|
|
13
|
+
rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
|
|
14
|
+
validateOn: { type: String, required: false },
|
|
15
|
+
initialValue: { type: Array, required: false },
|
|
16
|
+
controlled: { type: Boolean, required: false },
|
|
17
|
+
size: { type: String, required: false },
|
|
18
|
+
readOnly: { type: Boolean, required: false },
|
|
19
|
+
disabled: { type: Boolean, required: false },
|
|
20
|
+
maxSelectedValues: { type: Number, required: false },
|
|
21
|
+
description: { type: String, required: false },
|
|
22
|
+
label: { type: String, required: false },
|
|
23
|
+
required: { type: Boolean, required: false },
|
|
24
|
+
radius: { type: [String, Number, Object], required: false },
|
|
25
|
+
variant: { type: String, required: false },
|
|
26
|
+
leftSectionPE: { type: void 0, required: false },
|
|
27
|
+
rightSectionPE: { type: void 0, required: false }
|
|
28
|
+
});
|
|
29
|
+
const {
|
|
30
|
+
value,
|
|
31
|
+
errorMessage,
|
|
32
|
+
handleChange
|
|
33
|
+
} = useField(() => name, rules, {
|
|
34
|
+
validateOnValueUpdate: false,
|
|
35
|
+
validateOnMount: false,
|
|
36
|
+
initialValue,
|
|
37
|
+
controlled
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<SwitchGroup
|
|
43
|
+
v-bind='props'
|
|
44
|
+
:model-value='value ?? []'
|
|
45
|
+
:error='errorMessage'
|
|
46
|
+
@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
|
|
47
|
+
>
|
|
48
|
+
<slot />
|
|
49
|
+
|
|
50
|
+
<template v-if='$slots.label' #label>
|
|
51
|
+
<slot name='label' />
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<template v-if='$slots.description' #description>
|
|
55
|
+
<slot name='description' />
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<template v-if='$slots.error' #error>
|
|
59
|
+
<slot name='error' :error='errorMessage' />
|
|
60
|
+
</template>
|
|
61
|
+
</SwitchGroup>
|
|
62
|
+
</template>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { RuleExpression } from 'vee-validate';
|
|
2
|
+
import type { SwitchGroupProps } from '../components/switch/switch-group.vue.js';
|
|
3
|
+
export interface SwitchGroupFieldProps extends Omit<SwitchGroupProps, 'error'> {
|
|
4
|
+
/** Field name used by vee-validate */
|
|
5
|
+
name: string;
|
|
6
|
+
/** Validation rules, applied when `controlled: false` or as field-level override */
|
|
7
|
+
rules?: RuleExpression<string[]>;
|
|
8
|
+
/** When to trigger validation @default `'change'` */
|
|
9
|
+
validateOn?: 'change' | 'submit';
|
|
10
|
+
/** Pre-fills the field value */
|
|
11
|
+
initialValue?: string[];
|
|
12
|
+
/** If `false`, disconnects the field from the parent form context @default `true` */
|
|
13
|
+
controlled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare var __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_19: {
|
|
16
|
+
error: string | undefined;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_Slots = {} & {
|
|
19
|
+
default?: (props: typeof __VLS_10) => any;
|
|
20
|
+
} & {
|
|
21
|
+
label?: (props: typeof __VLS_13) => any;
|
|
22
|
+
} & {
|
|
23
|
+
description?: (props: typeof __VLS_16) => any;
|
|
24
|
+
} & {
|
|
25
|
+
error?: (props: typeof __VLS_19) => any;
|
|
26
|
+
};
|
|
27
|
+
declare const __VLS_base: import("vue").DefineComponent<SwitchGroupFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SwitchGroupFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
29
|
+
declare const _default: typeof __VLS_export;
|
|
30
|
+
export default _default;
|
|
31
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
32
|
+
new (): {
|
|
33
|
+
$slots: S;
|
|
34
|
+
};
|
|
35
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuance-ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.15",
|
|
4
4
|
"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"dev": "npm run dev:prepare && nuxi dev playground",
|
|
47
47
|
"dev:build": "nuxi build playground",
|
|
48
48
|
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
|
|
49
|
-
"release": "npm
|
|
49
|
+
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && git push --follow-tags",
|
|
50
50
|
"lint": "eslint ./src",
|
|
51
51
|
"test": "vitest run",
|
|
52
52
|
"test:watch": "vitest watch",
|
|
@@ -103,14 +103,6 @@
|
|
|
103
103
|
"vitest": "^4.0.18",
|
|
104
104
|
"vue-tsc": "^3.2.4"
|
|
105
105
|
},
|
|
106
|
-
"pnpm": {
|
|
107
|
-
"onlyBuiltDependencies": [
|
|
108
|
-
"@parcel/watcher",
|
|
109
|
-
"esbuild",
|
|
110
|
-
"unrs-resolver",
|
|
111
|
-
"vue-demi"
|
|
112
|
-
]
|
|
113
|
-
},
|
|
114
106
|
"keywords": [
|
|
115
107
|
"nuance-ui",
|
|
116
108
|
"nuxt",
|
|
@@ -123,4 +115,4 @@
|
|
|
123
115
|
"vue-components",
|
|
124
116
|
"ui"
|
|
125
117
|
]
|
|
126
|
-
}
|
|
118
|
+
}
|