nuance-ui 0.2.2 → 0.2.5

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

@@ -47,139 +47,139 @@ 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' #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>
 </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/password-input.vue

@@ -24,32 +24,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.vue

@@ -31,37 +31,37 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
-		<BaseInput>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<template #default='{ id, css }'>
-				<input
-					v-bind='{ ...$attrs, class: css }'
-					:id
-					ref='input'
-					v-model='value'
-					:required
-					:disabled
-					:readonly
-				>
-			</template>
-
-			<template v-if='!!$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</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='props' :class='[$attrs.class, classes?.wrapper]'>
+		<BaseInput>
+			<template v-if='!!$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<template #default='{ id, css }'>
+				<input
+					v-bind='{ ...$attrs, class: css }'
+					:id
+					ref='input'
+					v-model='value'
+					:required
+					:disabled
+					:readonly
+				>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</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>

package/dist/runtime/components/input/ui/button-input.vue

@@ -33,71 +33,71 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :class='classes?.root'>
-		<InputBase :class='$style.base' :classes='{ section: classes?.section }'>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<template #default='{ id, css }'>
-				<UnstyledButton
-					:id
-					ref='button'
-					v-bind='{ ...$attrs, class: null }'
-					:disabled
-					:readonly
-					:class='[css, $style.button, classes?.input]'
-					:mod='{ multiline: props.multiline }'
-				>
-					<slot />
-				</UnstyledButton>
-				<input
-					:id
-					v-model='model'
-					:name
-					type='hidden'
-					:required
-					:disabled
-					:readonly
-				>
-			</template>
-
-			<template v-if='!!$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</InputBase>
-
-		<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='props' :class='classes?.root'>
+		<InputBase :class='$style.base' :classes='{ section: classes?.section }'>
+			<template v-if='!!$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<template #default='{ id, css }'>
+				<UnstyledButton
+					:id
+					ref='button'
+					v-bind='{ ...$attrs, class: null }'
+					:disabled
+					:readonly
+					:class='[css, $style.button, classes?.input]'
+					:mod='{ multiline: props.multiline }'
+				>
+					<slot />
+				</UnstyledButton>
+				<input
+					:id
+					v-model='model'
+					:name
+					type='hidden'
+					:required
+					:disabled
+					:readonly
+				>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</InputBase>
+
+		<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 lang="postcss" module>
-.base {
-	--input-cursor: pointer;
-}
-
-.button {
-	width: 100%;
-	min-width: rem(100px);
-
-	font-weight: 400;
-
-	&:where([data-multiline]) {
-		height: auto;
-		padding-block: calc(var(--input-padding-inline-end) / 2);
-	}
-}
-
-.section {
-	font-size: var(--font-size-lg);
-	color: var(--color-dimmed);
-}
+.base {
+	--input-cursor: pointer;
+}
+
+.button {
+	width: 100%;
+	min-width: rem(100px);
+
+	font-weight: 400;
+
+	&:where([data-multiline]) {
+		height: auto;
+		padding-block: calc(var(--input-padding-inline-end) / 2);
+	}
+}
+
+.section {
+	font-size: var(--font-size-lg);
+	color: var(--color-dimmed);
+}
 </style>