nuance-ui 0.2.8 → 0.2.10

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

@@ -49,141 +49,141 @@ function handleBlur() {
 </script>
 
 <template>
-	<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>
+	<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/password-input.vue

@@ -25,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.vue

@@ -32,39 +32,39 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
-		<BaseInput>
-			<template v-if='!!$slots.leftSection || icon' #leftSection>
-				<slot name='leftSection'>
-					<Icon v-if='icon' :name='icon' />
-				</slot>
-			</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 || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</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/input-inline.vue

@@ -33,112 +33,112 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
-		<Box :is='bodyElement' :for='bodyElement === "label" ? id : void 0' :class='$style.body'>
-			<slot />
-
-			<div :class='$style.wrapper'>
-				<Box :is='labelElement' v-if='label || $slots.label' :class='$style.label' :for='labelElement === "label" ? id : void 0' :mod='{ disabled }'>
-					<slot name='label'>
-						{{ label }}
-					</slot>
-				</Box>
-
-				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
-					<slot name='error'>
-						{{ error }}
-					</slot>
-				</Box>
-
-				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
-					<slot name='description'>
-						{{ description }}
-					</slot>
-				</Box>
-			</div>
-		</Box>
-	</Box>
+	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
+		<Box :is='bodyElement' :for='bodyElement === "label" ? id : void 0' :class='$style.body'>
+			<slot />
+
+			<div :class='$style.wrapper'>
+				<Box :is='labelElement' v-if='label || $slots.label' :class='$style.label' :for='labelElement === "label" ? id : void 0' :mod='{ disabled }'>
+					<slot name='label'>
+						{{ label }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
+					<slot name='error'>
+						{{ error }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</div>
+		</Box>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--label-lh-xs: rem(16px);
-	--label-lh-sm: rem(20px);
-	--label-lh-md: rem(24px);
-	--label-lh-lg: rem(30px);
-	--label-lh-xl: rem(36px);
-	--label-lh: var(--label-lh-sm);
-
-	--label-fz: var(--font-size-sm);
-
-	&[data-label-position='left'] {
-		--label-order: 0;
-	}
-
-	&[data-label-position='right'] {
-		--label-order: 1;
-	}
-}
-
-.body {
-	display: flex;
-	gap: var(--spacing-sm);
-}
-
-.wrapper {
-	--label-cursor: default;
-
-	cursor: var(--label-cursor);
-
-	display: inline-flex;
-	flex-direction: column;
-	gap: .25rem;
-	order: var(--label-order);
-
-	font-size: var(--label-fz);
-	line-height: var(--label-lh);
-
-	-webkit-tap-highlight-color: transparent;
-
-	fieldset:disabled &,
-	&[data-disabled] {
-		--label-cursor: not-allowed;
-	}
-
-	&:empty {
-		display: none;
-	}
-}
-
-.label {
-	cursor: var(--label-cursor);
-
-	color: inherit;
-
-	fieldset:disabled &,
-	&:where([data-disabled]) {
-		color: var(--color-gray-5);
-	}
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
+.root {
+	--label-lh-xs: rem(16px);
+	--label-lh-sm: rem(20px);
+	--label-lh-md: rem(24px);
+	--label-lh-lg: rem(30px);
+	--label-lh-xl: rem(36px);
+	--label-lh: var(--label-lh-sm);
+
+	--label-fz: var(--font-size-sm);
+
+	&[data-label-position='left'] {
+		--label-order: 0;
+	}
+
+	&[data-label-position='right'] {
+		--label-order: 1;
+	}
+}
+
+.body {
+	display: flex;
+	gap: var(--spacing-sm);
+}
+
+.wrapper {
+	--label-cursor: default;
+
+	cursor: var(--label-cursor);
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: .25rem;
+	order: var(--label-order);
+
+	font-size: var(--label-fz);
+	line-height: var(--label-lh);
+
+	-webkit-tap-highlight-color: transparent;
+
+	fieldset:disabled &,
+	&[data-disabled] {
+		--label-cursor: not-allowed;
+	}
+
+	&:empty {
+		display: none;
+	}
+}
+
+.label {
+	cursor: var(--label-cursor);
+
+	color: inherit;
+
+	fieldset:disabled &,
+	&:where([data-disabled]) {
+		color: var(--color-gray-5);
+	}
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
 </style>