nuance-ui 0.2.7 → 0.2.9

package/dist/runtime/components/input/email-input.vue

@@ -1,9 +1,10 @@
 <script setup>
 import TextInput from "./text-input.vue";
-const props = defineProps({
+const { icon = "gravity-ui:at", ...rest } = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -21,25 +22,23 @@ const props = defineProps({
 </script>
 
 <template>
-	<TextInput type='email' v-bind='props'>
-		<template #leftSection>
-			<slot name='leftSection'>
-				<Icon name='gravity-ui:at' />
-			</slot>
-		</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.error' #error>
-			<slot name='error' />
-		</template>
-		<template v-if='!!$slots.description' #description>
-			<slot name='description' />
-		</template>
-	</TextInput>
+	<TextInput type='email' :icon v-bind='rest'>
+		<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.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</TextInput>
 </template>

package/dist/runtime/components/input/email-input.vue.d.ts

@@ -1,15 +1,15 @@
 import type { TextInputProps } from './index.js';
-declare var __VLS_9: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_26: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_9) => any;
 } & {
-    rightSection?: (props: typeof __VLS_17) => any;
+    rightSection?: (props: typeof __VLS_12) => any;
 } & {
-    label?: (props: typeof __VLS_20) => any;
+    label?: (props: typeof __VLS_15) => any;
 } & {
-    error?: (props: typeof __VLS_23) => any;
+    error?: (props: typeof __VLS_18) => any;
 } & {
-    description?: (props: typeof __VLS_26) => any;
+    description?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TextInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/lib/input-wrapper.context.d.ts

@@ -4,15 +4,21 @@ import type { InputVariant } from '../types.js';
 export interface WrapperContext {
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string | null;
+    /** Marks the field as required */
     required?: boolean;
+    /** Border radius */
     radius?: NuanceSize | string;
+    /** Component size */
     size?: NuanceSize | string;
+    /** Visual variant */
     variant?: InputVariant;
+    /** Enables multiline (textarea) mode */
     multiline?: boolean;
+    /** CSS resize behavior for multiline inputs */
     resize?: CSSProperties['resize'];
-    /** section pointer-events */
+    /** `pointer-events` value for the left section */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
-    /** section pointer-events */
+    /** `pointer-events` value for the right section */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
 }
 export declare const useProvideInputWrapper: (init: any) => any;

package/dist/runtime/components/input/number-input.d.vue.ts

@@ -9,23 +9,25 @@ export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps
     step?: number;
     /** Determines whether the up/down controls should be hidden, `false` by default */
     hideControls?: boolean;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_53: {}, __VLS_56: {}, __VLS_59: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_48) => any;
+    label?: (props: typeof __VLS_53) => any;
 } & {
-    error?: (props: typeof __VLS_51) => any;
+    error?: (props: typeof __VLS_56) => any;
 } & {
-    description?: (props: typeof __VLS_54) => any;
+    description?: (props: typeof __VLS_59) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;

package/dist/runtime/components/input/number-input.vue

@@ -9,6 +9,7 @@ const {
   max = Number.MAX_SAFE_INTEGER,
   step = 1,
   hideControls,
+  icon,
   rightSectionPE = "all",
   ...rest
 } = defineProps({
@@ -16,6 +17,7 @@ const {
   max: { type: Number, required: false },
   step: { type: Number, required: false },
   hideControls: { type: Boolean, required: false },
+  icon: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: String, required: false },
@@ -47,139 +49,141 @@ function handleBlur() {
 </script>
 
 <template>
-	<InputWrapper v-bind='rest' :class='$style.root' :right-section-p-e>
-		<BaseInput>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<template #default='{ id, css }'>
-				<input
-					:id
-					v-model='value'
-					:class='css'
-					:min
-					:max
-					:step
-					type='number'
-					@focus='focused = true'
-					@blur='handleBlur()'
-					@wheel.prevent='handleWheel'
-				>
-			</template>
-
-			<template v-if='!!$slots.rightSection || !hideControls' #rightSection>
-				<slot name='rightSection'>
-					<div :class='$style.controls'>
-						<UnstyledButton
-							:class='$style.control'
-							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
-							@click='value = clamp(value + step, min, max)'
-						>
-							<Icon name='gravity-ui:chevron-up' />
-						</UnstyledButton>
-						<UnstyledButton
-							:class='$style.control'
-							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
-							@click='value = clamp(value - step, min, max)'
-						>
-							<Icon name='gravity-ui:chevron-down' />
-						</UnstyledButton>
-					</div>
-				</slot>
-			</template>
-		</BaseInput>
-
-		<template v-if='!!$slots.label' #label>
-			<slot name='label' />
-		</template>
-		<template v-if='!!$slots.error' #error>
-			<slot name='error' />
-		</template>
-		<template v-if='!!$slots.description' #description>
-			<slot name='description' />
-		</template>
-	</InputWrapper>
+	<InputWrapper v-bind='rest' :class='$style.root' :right-section-p-e>
+		<BaseInput>
+			<template v-if='!!$slots.leftSection || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</template>
+
+			<template #default='{ id, css }'>
+				<input
+					:id
+					v-model='value'
+					:class='css'
+					:min
+					:max
+					:step
+					type='number'
+					@focus='focused = true'
+					@blur='handleBlur()'
+					@wheel.prevent='handleWheel'
+				>
+			</template>
+
+			<template v-if='!!$slots.rightSection || !hideControls' #rightSection>
+				<slot name='rightSection'>
+					<div :class='$style.controls'>
+						<UnstyledButton
+							:class='$style.control'
+							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
+							@click='value = clamp(value + step, min, max)'
+						>
+							<Icon name='gravity-ui:chevron-up' />
+						</UnstyledButton>
+						<UnstyledButton
+							:class='$style.control'
+							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
+							@click='value = clamp(value - step, min, max)'
+						>
+							<Icon name='gravity-ui:chevron-down' />
+						</UnstyledButton>
+					</div>
+				</slot>
+			</template>
+		</BaseInput>
+
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</InputWrapper>
 </template>
 
 <style module lang="postcss">
-.root {
-	--ni-right-section-width-xs: rem(17px);
-	--ni-right-section-width-sm: rem(24px);
-	--ni-right-section-width-md: rem(27px);
-	--ni-right-section-width-lg: rem(31px);
-	--ni-right-section-width-xl: rem(34px);
-}
-
-.controls {
-	--ni-chevron-size-xs: rem(10px);
-	--ni-chevron-size-sm: rem(14px);
-	--ni-chevron-size-md: rem(16px);
-	--ni-chevron-size-lg: rem(18px);
-	--ni-chevron-size-xl: rem(20px);
-	--ni-chevron-size: var(--ni-chevron-size-sm);
-
-	display: flex;
-	flex-direction: column;
-
-	width: 100%;
-	max-width: calc(var(--ni-chevron-size) * 1.7);
-	height: calc(var(--input-height) - rem(2px));
-	margin-inline-start: auto;
-}
-
-.control {
-	--control-border: 1px solid var(--input-bd);
-	--control-radius: calc(var(--input-radius) - rem(1px));
-
-	cursor: pointer;
-
-	display: flex;
-
-	flex: 0 0 50%;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: calc(var(--input-height) / 2 - rem(1px));
-	padding: 0;
-	border-inline-start: var(--control-border);
-
-	color: var(--color-text);
-
-	background-color: transparent;
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		opacity: 0.6;
-		background-color: transparent;
-	}
-
-	.root[data-error] :where(&) {
-		color: var(--color-error);
-	}
-
-	&:where(:first-of-type) {
-		border-radius: 0;
-		border-start-end-radius: var(--control-radius);
-	}
-
-	&:last-of-type {
-		border-radius: 0;
-		border-end-end-radius: var(--control-radius);
-	}
-
-	@mixin hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-4);
-		}
-	}
-}
+.root {
+	--ni-right-section-width-xs: rem(17px);
+	--ni-right-section-width-sm: rem(24px);
+	--ni-right-section-width-md: rem(27px);
+	--ni-right-section-width-lg: rem(31px);
+	--ni-right-section-width-xl: rem(34px);
+}
+
+.controls {
+	--ni-chevron-size-xs: rem(10px);
+	--ni-chevron-size-sm: rem(14px);
+	--ni-chevron-size-md: rem(16px);
+	--ni-chevron-size-lg: rem(18px);
+	--ni-chevron-size-xl: rem(20px);
+	--ni-chevron-size: var(--ni-chevron-size-sm);
+
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+	max-width: calc(var(--ni-chevron-size) * 1.7);
+	height: calc(var(--input-height) - rem(2px));
+	margin-inline-start: auto;
+}
+
+.control {
+	--control-border: 1px solid var(--input-bd);
+	--control-radius: calc(var(--input-radius) - rem(1px));
+
+	cursor: pointer;
+
+	display: flex;
+
+	flex: 0 0 50%;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: calc(var(--input-height) / 2 - rem(1px));
+	padding: 0;
+	border-inline-start: var(--control-border);
+
+	color: var(--color-text);
+
+	background-color: transparent;
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+
+		color: var(--color-disabled-text);
+
+		opacity: 0.6;
+		background-color: transparent;
+	}
+
+	.root[data-error] :where(&) {
+		color: var(--color-error);
+	}
+
+	&:where(:first-of-type) {
+		border-radius: 0;
+		border-start-end-radius: var(--control-radius);
+	}
+
+	&:last-of-type {
+		border-radius: 0;
+		border-end-end-radius: var(--control-radius);
+	}
+
+	@mixin hover {
+		@mixin where-light {
+			background-color: var(--color-gray-0);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-4);
+		}
+	}
+}
 </style>

package/dist/runtime/components/input/number-input.vue.d.ts

@@ -9,23 +9,25 @@ export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps
     step?: number;
     /** Determines whether the up/down controls should be hidden, `false` by default */
     hideControls?: boolean;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_53: {}, __VLS_56: {}, __VLS_59: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_48) => any;
+    label?: (props: typeof __VLS_53) => any;
 } & {
-    error?: (props: typeof __VLS_51) => any;
+    error?: (props: typeof __VLS_56) => any;
 } & {
-    description?: (props: typeof __VLS_54) => any;
+    description?: (props: typeof __VLS_59) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;

package/dist/runtime/components/input/password-input.vue

@@ -6,6 +6,7 @@ const props = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -24,32 +25,32 @@ const password = ref(true);
 </script>
 
 <template>
-	<TextInput
-		v-bind='props'
-		:type='password ? "password" : "text"'
-		right-section-p-e='all'
-	>
-		<template #rightSection>
-			<slot name='rightSection'>
-				<ActionIcon variant='subtle' @click='password = !password'>
-					<Icon v-if='password' name='gravity-ui:eye' />
-					<Icon v-else name='gravity-ui:eye-slash' />
-				</ActionIcon>
-			</slot>
-		</template>
-
-		<template v-if='!!$slots.leftSection' #leftSection>
-			<slot name='leftSection' />
-		</template>
-
-		<template v-if='!!$slots.label' #label>
-			<slot name='label' />
-		</template>
-		<template v-if='!!$slots.error' #error>
-			<slot name='error' />
-		</template>
-		<template v-if='!!$slots.description' #description>
-			<slot name='description' />
-		</template>
-	</TextInput>
+	<TextInput
+		v-bind='props'
+		:type='password ? "password" : "text"'
+		right-section-p-e='all'
+	>
+		<template #rightSection>
+			<slot name='rightSection'>
+				<ActionIcon variant='subtle' @click='password = !password'>
+					<Icon v-if='password' name='gravity-ui:eye' />
+					<Icon v-else name='gravity-ui:eye-slash' />
+				</ActionIcon>
+			</slot>
+		</template>
+
+		<template v-if='!!$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</template>
+
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</TextInput>
 </template>

package/dist/runtime/components/input/text-input.d.vue.ts

@@ -8,23 +8,25 @@ export interface TextInputProps extends InputWrapperProps, InputBaseProps {
     withAria?: boolean;
     /** Styles API */
     classes?: Classes<'wrapper' | 'input'>;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = TextInputProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_22) => any;
+    label?: (props: typeof __VLS_27) => any;
 } & {
-    error?: (props: typeof __VLS_25) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_28) => any;
+    description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     readonly $el: HTMLElement | null | undefined;

package/dist/runtime/components/input/text-input.vue

@@ -3,10 +3,11 @@ import { unrefElement } from "@vueuse/core";
 import { useTemplateRef } from "vue";
 import BaseInput from "./ui/input-base.vue";
 import InputWrapper from "./ui/input-wrapper.vue";
-const { classes, ...props } = defineProps({
+const { classes, icon, ...props } = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -33,8 +34,10 @@ defineExpose({
 <template>
 	<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
 		<BaseInput>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
+			<template v-if='!!$slots.leftSection || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
 			</template>
 
 			<template #default='{ id, css }'>

package/dist/runtime/components/input/text-input.vue.d.ts

@@ -8,23 +8,25 @@ export interface TextInputProps extends InputWrapperProps, InputBaseProps {
     withAria?: boolean;
     /** Styles API */
     classes?: Classes<'wrapper' | 'input'>;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = TextInputProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_22) => any;
+    label?: (props: typeof __VLS_27) => any;
 } & {
-    error?: (props: typeof __VLS_25) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_28) => any;
+    description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     readonly $el: HTMLElement | null | undefined;

package/dist/runtime/components/input/ui/input-inline.d.vue.ts

@@ -3,17 +3,21 @@ import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
     /** Input id */
     id: string;
+    /** Label text */
     label?: string;
+    /** Helper text displayed below the label */
     description?: string;
+    /** Error message displayed below the label */
     error?: string;
-    /** Disabled input prop */
+    /** Disables the component */
     disabled?: boolean | undefined;
     /** Component size */
     size?: NuanceSize | string;
+    /** Position of the label relative to the input control */
     labelPosition?: 'left' | 'right';
-    /** Body html element */
+    /** HTML element used for the body wrapper */
     bodyElement?: keyof HTMLElementTagNameMap;
-    /** Label html element */
+    /** HTML element used for the label */
     labelElement?: keyof HTMLElementTagNameMap;
 }
 declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: {};