nuance-ui 0.2.11 → 0.2.14

package/dist/runtime/form/text-field.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { useField } from "vee-validate";
+import TextInput from "../components/input/text-input.vue";
+const {
+  name,
+  rules,
+  validateOn = "blur",
+  initialValue,
+  controlled = true,
+  ...props
+} = defineProps({
+  name: { type: String, required: true },
+  rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
+  validateOn: { type: String, required: false },
+  initialValue: { type: String, required: false },
+  controlled: { type: Boolean, required: false },
+  multiline: { type: Boolean, required: false },
+  withAria: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
+  icon: { type: String, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
+  variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const {
+  value,
+  errorMessage,
+  handleBlur,
+  handleChange
+} = useField(() => name, rules, {
+  validateOnValueUpdate: false,
+  validateOnMount: false,
+  initialValue,
+  controlled
+});
+</script>
+
+<template>
+	<TextInput
+		v-bind='props'
+		:model-value='value'
+		:error='errorMessage'
+		:name
+		@update:model-value='handleChange($event, !!errorMessage)'
+		@blur='handleBlur($event, validateOn === "blur")'
+	>
+		<template v-if='$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+
+		<template v-if='$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<template v-if='$slots.description' #description>
+			<slot name='description' />
+		</template>
+
+		<template v-if='$slots.error' #error>
+			<slot name='error' :error='errorMessage' />
+		</template>
+	</TextInput>
+</template>

package/dist/runtime/form/text-field.vue.d.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TextInputProps } from '../components/input/text-input.vue.js';
+export interface TextFieldProps extends Omit<TextInputProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'blur'` */
+    validateOn?: 'blur' | 'submit' | 'change';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {}, __VLS_24: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_12) => any;
+} & {
+    rightSection?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_21) => any;
+} & {
+    error?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TextFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/textarea-field.d.vue.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TextareaProps } from '../components/textarea.vue.js';
+export interface TextareaFieldProps extends Omit<TextareaProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'blur'` */
+    validateOn?: 'blur' | 'submit' | 'change';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {}, __VLS_24: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_12) => any;
+} & {
+    rightSection?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_21) => any;
+} & {
+    error?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TextareaFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextareaFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/textarea-field.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { useField } from "vee-validate";
+import Textarea from "../components/textarea.vue";
+const {
+  name,
+  rules,
+  validateOn = "blur",
+  initialValue,
+  controlled = true,
+  ...props
+} = defineProps({
+  name: { type: String, required: true },
+  rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
+  validateOn: { type: String, required: false },
+  initialValue: { type: String, required: false },
+  controlled: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  autosize: { type: Boolean, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
+  variant: { type: String, required: false },
+  multiline: { type: Boolean, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const {
+  value,
+  errorMessage,
+  handleBlur,
+  handleChange
+} = useField(() => name, rules, {
+  validateOnValueUpdate: false,
+  validateOnMount: false,
+  initialValue,
+  controlled
+});
+</script>
+
+<template>
+	<Textarea
+		v-bind='props'
+		:model-value='value'
+		:error='errorMessage'
+		:name
+		@update:model-value='handleChange($event, !!errorMessage)'
+		@blur='handleBlur($event, validateOn === "blur")'
+	>
+		<template v-if='$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+
+		<template v-if='$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<template v-if='$slots.description' #description>
+			<slot name='description' />
+		</template>
+
+		<template v-if='$slots.error' #error>
+			<slot name='error' :error='errorMessage' />
+		</template>
+	</Textarea>
+</template>

package/dist/runtime/form/textarea-field.vue.d.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TextareaProps } from '../components/textarea.vue.js';
+export interface TextareaFieldProps extends Omit<TextareaProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'blur'` */
+    validateOn?: 'blur' | 'submit' | 'change';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {}, __VLS_24: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_12) => any;
+} & {
+    rightSection?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_21) => any;
+} & {
+    error?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TextareaFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextareaFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/time-field.d.vue.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TimePickerProps } from '../components/time-picker/time-picker.vue.js';
+export interface TimeFieldProps extends Omit<TimePickerProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'change'` */
+    validateOn?: 'change' | 'submit';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_11) => any;
+} & {
+    rightSection?: (props: typeof __VLS_14) => any;
+} & {
+    label?: (props: typeof __VLS_17) => any;
+} & {
+    description?: (props: typeof __VLS_20) => any;
+} & {
+    error?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/form/time-field.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { useField } from "vee-validate";
+import TimePicker from "../components/time-picker/time-picker.vue";
+const {
+  name,
+  rules,
+  validateOn = "change",
+  initialValue,
+  controlled = true,
+  ...props
+} = defineProps({
+  name: { type: String, required: true },
+  rules: { type: [String, Object, Function, Array], required: false, skipCheck: true },
+  validateOn: { type: String, required: false },
+  initialValue: { type: String, required: false },
+  controlled: { type: Boolean, required: false },
+  clearable: { type: Boolean, required: false },
+  min: { type: String, required: false },
+  max: { type: String, required: false },
+  format: { type: String, required: false },
+  step: { type: [Number, Object], required: false },
+  placeholder: { type: [String, Object], required: false },
+  withSeconds: { type: Boolean, required: false },
+  hoursInputLabel: { type: String, required: false },
+  minutesInputLabel: { type: String, required: false },
+  secondsInputLabel: { type: String, required: false },
+  amPmInputLabel: { type: String, required: false },
+  amPmLabels: { type: Object, required: false },
+  pasteSplit: { type: Function, required: false },
+  classes: { type: Object, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
+  variant: { type: String, required: false },
+  multiline: { type: Boolean, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const {
+  value,
+  errorMessage,
+  handleChange
+} = useField(() => name, rules, {
+  validateOnValueUpdate: false,
+  validateOnMount: false,
+  initialValue,
+  controlled
+});
+</script>
+
+<template>
+	<TimePicker
+		v-bind='props'
+		:model-value='value'
+		:error='errorMessage'
+		@update:model-value='handleChange($event, validateOn === "change" || !!errorMessage)'
+	>
+		<template v-if='$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+
+		<template v-if='$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<template v-if='$slots.description' #description>
+			<slot name='description' />
+		</template>
+
+		<template v-if='$slots.error' #error>
+			<slot name='error' :error='errorMessage' />
+		</template>
+	</TimePicker>
+</template>

package/dist/runtime/form/time-field.vue.d.ts

@@ -0,0 +1,37 @@
+import type { RuleExpression } from 'vee-validate';
+import type { TimePickerProps } from '../components/time-picker/time-picker.vue.js';
+export interface TimeFieldProps extends Omit<TimePickerProps, 'error'> {
+    /** Field name used by vee-validate */
+    name: string;
+    /** Validation rules, applied when `controlled: false` or as field-level override */
+    rules?: RuleExpression<string>;
+    /** When to trigger validation @default `'change'` */
+    validateOn?: 'change' | 'submit';
+    /** Pre-fills the field value */
+    initialValue?: string;
+    /** If `false`, disconnects the field from the parent form context @default `true` */
+    controlled?: boolean;
+}
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {
+    error: string | undefined;
+};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_11) => any;
+} & {
+    rightSection?: (props: typeof __VLS_14) => any;
+} & {
+    label?: (props: typeof __VLS_17) => any;
+} & {
+    description?: (props: typeof __VLS_20) => any;
+} & {
+    error?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.11",
+	"version": "0.2.14",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
@@ -87,6 +87,7 @@
 		"@nuxtjs/color-mode": "^4.0.0",
 		"@nuxtjs/stylelint-module": "^5.2.1",
 		"@types/node": "latest",
+		"@vee-validate/nuxt": "^4.15.1",
 		"changelogen": "^0.6.2",
 		"eslint": "^9.39.2",
 		"nuxt": "^4.4.2",