nuance-ui 0.2.10 → 0.2.12

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/dist/runtime/types/index.d.ts

@@ -1,6 +1,5 @@
 export type * from './styling';
 export type * from './theme';
-/** Map of component part names to user-provided class names. */
-export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;
 /** Value that may be synchronous or wrapped in a promise. */
 export type MaybePromise<T = unknown> = T | Promise<T>;
+export type AnyString = string & {};

package/dist/runtime/types/styling.d.ts

@@ -1,4 +1,6 @@
 export type CssVariable = `--${string}`;
 export type TransformVars<V> = {
-    [Key in keyof V]: V[Key] extends CssVariable ? Record<V[Key], string | undefined> : never;
+    [Key in keyof V]: V[Key] extends CssVariable ? Record<V[Key], string | number | undefined> : never;
 };
+/** Map of component part names to user-provided class names. */
+export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;

package/dist/runtime/types/theme.d.ts

@@ -1,17 +1,12 @@
+import type { AnyString } from '.';
 /** Standard Nuance size token. */
 export type NuanceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type NuanceBreakpointsValues = Record<NuanceSize | 'base', string>;
-export type NuanceFontSizesValues = Record<NuanceSize, string>;
-export type NuanceRadiusValues = Record<NuanceSize | 'full', string>;
-export type NuanceSpacingValues = Record<NuanceSize, string>;
-export type NuanceShadowsValues = Record<NuanceSize, string>;
-export type NuanceLineHeightValues = Record<NuanceSize, string>;
-export type NuanceBreakpoint = keyof NuanceBreakpointsValues;
-export type NuanceFontSize = keyof NuanceFontSizesValues;
-export type NuanceRadius = keyof NuanceRadiusValues | number;
-export type NuanceSpacing = keyof NuanceSpacingValues | number;
-export type NuanceShadow = keyof NuanceShadowsValues;
-export type NuanceLineHeight = keyof NuanceLineHeightValues;
+export type NuanceBreakpoint = NuanceSize | 'base';
+export type NuanceFontSize = NuanceSize;
+export type NuanceRadius = NuanceSize | 'full' | number;
+export type NuanceSpacing = NuanceSize | number;
+export type NuanceShadow = NuanceSize;
+export type NuanceLineHeight = NuanceSize;
 /** Numeric shade index within a color palette, from lightest (0) to darkest (9). */
 export type NuanceColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type ShadedColor = `dark.${NuanceColorShade}` | `slate.${NuanceColorShade}` | `gray.${NuanceColorShade}` | `red.${NuanceColorShade}` | `pink.${NuanceColorShade}` | `grape.${NuanceColorShade}` | `violet.${NuanceColorShade}` | `indigo.${NuanceColorShade}` | `blue.${NuanceColorShade}` | `cyan.${NuanceColorShade}` | `green.${NuanceColorShade}` | `lime.${NuanceColorShade}` | `yellow.${NuanceColorShade}` | `orange.${NuanceColorShade}` | `teal.${NuanceColorShade}` | `primary.${NuanceColorShade}`;
@@ -23,11 +18,11 @@ export type NuanceTheme = 'light' | 'dark';
 /** Linear gradient definition. */
 export interface NuanceGradient {
     /** Fallback background color rendered behind the gradient. */
-    bg?: NuanceColor | string;
+    bg?: NuanceColor | AnyString;
     /** Start color. */
-    from: NuanceColor | string;
+    from: NuanceColor | AnyString;
     /** End color. */
-    to: NuanceColor | string;
+    to: NuanceColor | AnyString;
     /** Gradient angle in degrees. */
     deg?: number;
 }

package/dist/runtime/utils/style/create-variant-color-resolver.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
 interface VariantColorResolverResult {
     /** Base background CSS value. */
     background: string;
@@ -18,7 +18,7 @@ interface VariantColorResolverResult {
  * default `--color-*` tokens when no explicit shade is provided.
  */
 export declare function createVariantColorResolver({ color, variant, gradient, theme, }: {
-    color: NuanceColor | string | undefined;
+    color: NuanceColor | AnyString | undefined;
     variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline' | 'dot';
     gradient?: NuanceGradient;
     theme: NuanceTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.10",
+	"version": "0.2.12",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
@@ -46,7 +46,7 @@
 		"dev": "npm run dev:prepare && nuxi dev playground",
 		"dev:build": "nuxi build playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-		"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+		"release": "npm publish && git push --follow-tags",
 		"lint": "eslint ./src",
 		"test": "vitest run",
 		"test:watch": "vitest watch",
@@ -77,7 +77,7 @@
 		}
 	},
 	"devDependencies": {
-		"@antfu/eslint-config": "^7.2.0",
+		"@antfu/eslint-config": "^8.2.0",
 		"@nuxt/devtools": "^3.1.1",
 		"@nuxt/eslint": "1.10.0",
 		"@nuxt/eslint-config": "^1.13.0",
@@ -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",
@@ -102,6 +103,14 @@
 		"vitest": "^4.0.18",
 		"vue-tsc": "^3.2.4"
 	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@parcel/watcher",
+			"esbuild",
+			"unrs-resolver",
+			"vue-demi"
+		]
+	},
 	"keywords": [
 		"nuance-ui",
 		"nuxt",

package/dist/runtime/composables/use-style-resolver.d.ts

@@ -1,5 +0,0 @@
-import type { NuanceTheme, TransformVars } from '@nui/types';
-/**
- * Builds a style object from a factory that receives the current theme.
- */
-export declare function useStyleResolver<T extends object>(factory: (theme: NuanceTheme) => TransformVars<T>): TransformVars<T>;

package/dist/runtime/composables/use-style-resolver.js

@@ -1,5 +0,0 @@
-import { useTheme } from "./use-theme.js";
-export function useStyleResolver(factory) {
-  const theme = useTheme();
-  return factory(theme.value);
-}