@ecolovo/uniapp-components 2.0.1 → 2.0.3

package/components/popover/popover-content.vue

@@ -17,7 +17,10 @@
 				<!-- header 插槽 -->
 				<slot name="header"></slot>
 
-				<scroll-view :class="$style['PopoverContent--body-scroll']" scroll-y="true">
+				<scroll-view
+					:class="$style['PopoverContent--body-scroll']"
+					scroll-y="true"
+				>
 					<view :class="$style['PopoverContent--body']">
 						<!-- 默认插槽 -->
 						<slot></slot>
@@ -39,7 +42,10 @@
 <script lang="ts" setup>
 import { ref, computed, nextTick, onMounted } from 'vue';
 import useClassNames from '../../composable/component-name';
-import { navBarBottomOffset, safeAreaInsetBottom } from '../../utils/windowInfo';
+import {
+	navBarBottomOffset,
+	safeAreaInsetBottom,
+} from '../../utils/windowInfo';
 import IconCpn from '../icon/icon.vue';
 
 defineOptions({
@@ -75,13 +81,16 @@ const initialized = ref(false);
 
 /** 计算后的位置值 */
 const usingPosition = computed(() => {
-	return ['top', 'bottom', 'left', 'right', 'center'].includes(props.position) ? props.position : 'center';
+	return ['top', 'bottom', 'left', 'right', 'center'].includes(props.position)
+		? props.position
+		: 'center';
 });
 
 const inlineCssVar = computed(() => {
-	return [`--page-header-bottom: ${navBarBottomOffset}px;`, `--safe-area-bottom: ${safeAreaInsetBottom}px;`].join(
-		' '
-	);
+	return [
+		`--page-header-bottom: ${navBarBottomOffset}px;`,
+		`--safe-area-bottom: ${safeAreaInsetBottom}px;`,
+	].join(' ');
 });
 
 onMounted(() => {
@@ -97,7 +106,11 @@ onMounted(() => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($popover, 'popover');
+	@include UTILS__DEFINE_COMPONENT_VARS('popover', $popover);
+}
+
+:host {
+	display: block;
 }
 
 .PopoverContent {
@@ -114,7 +127,9 @@ onMounted(() => {
 		min-height: UTILS__LOCAL_VAR(min-height);
 		max-height: UTILS__LOCAL_VAR(max-height);
 		transform: translate(0, -100%) scale(1);
-		--content-radius: 0 0 #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(radius)};
+		--content-radius: 0 0 #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(
+				radius
+			)};
 		--scroll-max-height: #{UTILS__LOCAL_VAR(max-height)};
 	}
 	&.PopoverContent--at-bottom {
@@ -124,7 +139,9 @@ onMounted(() => {
 		min-height: UTILS__LOCAL_VAR(min-height);
 		max-height: UTILS__LOCAL_VAR(max-height);
 		transform: translate(0, 100%) scale(1);
-		--content-radius: #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(radius)} 0 0;
+		--content-radius: #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(
+				radius
+			)} 0 0;
 		--scroll-max-height: #{UTILS__LOCAL_VAR(max-height)};
 	}
 	&.PopoverContent--at-left {
@@ -133,7 +150,9 @@ onMounted(() => {
 		width: UTILS__LOCAL_VAR(width);
 		height: 100%;
 		transform: translate(-100%, 0) scale(1);
-		--content-radius: 0 #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(radius)} 0;
+		--content-radius: 0 #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(
+				radius
+			)} 0;
 		--scroll-max-height: 100vh;
 	}
 	&.PopoverContent--at-right {
@@ -142,7 +161,9 @@ onMounted(() => {
 		width: UTILS__LOCAL_VAR(width);
 		height: 100%;
 		transform: translate(100%, 0) scale(1);
-		--content-radius: #{UTILS__LOCAL_VAR(radius)} 0 0 #{UTILS__LOCAL_VAR(radius)};
+		--content-radius: #{UTILS__LOCAL_VAR(radius)} 0 0 #{UTILS__LOCAL_VAR(
+				radius
+			)};
 		--scroll-max-height: 100vh;
 	}
 	&.PopoverContent--at-center {
@@ -151,10 +172,17 @@ onMounted(() => {
 		min-height: UTILS__LOCAL_VAR(min-height);
 		max-height: UTILS__LOCAL_VAR(max-height);
 		opacity: 0;
+		// 出现时 scale 从 0.8 变为 1
 		transform: translate(-50%, -50%) scale(0.8);
 		--appear-transform: translate(-50%, -50%) scale(1);
 		--content-radius: #{UTILS__LOCAL_VAR(radius)};
 		--scroll-max-height: #{UTILS__LOCAL_VAR(max-height)};
+		:global(.PopoverMask--animated:not(.PopoverMask--visible)) & {
+			// 防止在关闭动画中用户点击
+			pointer-events: none;
+			// 消失时 scale 从 1 变为 0
+			transform: translate(-50%, -50%) scale(0);
+		}
 	}
 	&.PopoverContent--fullscreen {
 		width: 100vw;
@@ -167,10 +195,11 @@ onMounted(() => {
 	// 内容部分显示动画
 	&.PopoverContent--content-initialized {
 		transition: transform 0.3s, opacity 0.3s;
-	}
-	:global(.PopoverMask--visible) &.PopoverContent--content-initialized {
-		opacity: 1;
-		transform: var(--appear-transform);
+
+		:global(.PopoverMask--visible) & {
+			opacity: 1;
+			transform: var(--appear-transform);
+		}
 	}
 
 	.PopoverContent--content {
@@ -221,10 +250,21 @@ onMounted(() => {
 
 	// scroll-view
 	.PopoverContent--body-scroll {
-		$header-padding: calc(var(--safe-top-padding, 0px) + #{UTILS__LOCAL_VAR(header-height)});
-		$footer-padding: calc(var(--safe-bottom-padding, 0px) + #{UTILS__LOCAL_VAR(footer-height)});
-		min-height: max(calc(#{UTILS__LOCAL_VAR(min-height)} - #{$header-padding} - #{$footer-padding}), 0px);
-		max-height: calc(var(--scroll-max-height) - #{$header-padding} - #{$footer-padding});
+		$header-padding: calc(
+			var(--safe-top-padding, 0px) + #{UTILS__LOCAL_VAR(header-height)}
+		);
+		$footer-padding: calc(
+			var(--safe-bottom-padding, 0px) + #{UTILS__LOCAL_VAR(footer-height)}
+		);
+		min-height: max(
+			calc(
+				#{UTILS__LOCAL_VAR(min-height)} - #{$header-padding} - #{$footer-padding}
+			),
+			0px
+		);
+		max-height: calc(
+			var(--scroll-max-height) - #{$header-padding} - #{$footer-padding}
+		);
 	}
 
 	.PopoverContent--body {

package/components/popover/popover-mask.vue

@@ -3,14 +3,18 @@
 		:class="[
 			...classNames,
 			$style['PopoverMask'],
-			{ [$style['PopoverMask--visible']]: isVisible, 'PopoverMask--visible': isVisible },
+			{
+				[$style['PopoverMask--visible']]: isVisible,
+				'PopoverMask--visible': isVisible,
+			},
+			{
+				[$style['PopoverMask--animated']]: isInitialized,
+				'PopoverMask--animated': isInitialized,
+			},
 		]"
 		@touchmove.stop.prevent
 	>
-		<view
-			:class="[$style['PopoverMask--mask'], { [$style['PopoverMask--animated']]: isInitialized }]"
-			@click="onMask()"
-		></view>
+		<view :class="[$style['PopoverMask--mask']]" @click="onMask()"></view>
 
 		<slot></slot>
 	</view>
@@ -86,14 +90,18 @@ defineExpose({ close });
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($popover, 'popover');
+	@include UTILS__DEFINE_COMPONENT_VARS('popover', $popover);
+}
+
+:host {
+	display: block;
 }
 
 .PopoverMask {
 	@extend %external-vars;
 	position: fixed;
 	inset: 0;
-	z-index: UTILS__z-index('popover');
+	z-index: UTILS__GLOBAL_VAR(z-index, popover);
 
 	// 遮罩层
 	.PopoverMask--mask {
@@ -101,13 +109,12 @@ defineExpose({ close });
 		inset: 0;
 		background-color: UTILS__LOCAL_VAR(mask-color);
 		opacity: 0;
-		&.PopoverMask--animated {
-			transition: opacity 0.3s;
-		}
 	}
 	&.PopoverMask--visible .PopoverMask--mask {
-		transition: opacity 0.3s;
 		opacity: 1;
 	}
+	&.PopoverMask--animated .PopoverMask--mask {
+		transition: opacity 0.3s;
+	}
 }
 </style>

package/components/popover/popover.vue

@@ -9,12 +9,22 @@
 			@close="$emit('close')"
 			@closed="$emit('closed')"
 		>
-			<popover-content-cpn v-if="$slots.custom" :position="position" :fullscreen="fullscreen" :loading="loading">
+			<popover-content-cpn
+				v-if="$slots.custom"
+				:position="position"
+				:fullscreen="fullscreen"
+				:loading="loading"
+			>
 				<template #custom>
 					<slot name="custom"></slot>
 				</template>
 			</popover-content-cpn>
-			<popover-content-cpn v-else :position="position" :fullscreen="fullscreen" :loading="loading">
+			<popover-content-cpn
+				v-else
+				:position="position"
+				:fullscreen="fullscreen"
+				:loading="loading"
+			>
 				<template v-if="$slots.header" #header>
 					<slot name="header"></slot>
 				</template>
@@ -82,5 +92,5 @@ defineExpose({ close });
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 </style>

package/components/popup/popup-content.vue

@@ -4,18 +4,28 @@
 			<!-- 内容上方标题 -->
 			<template #header>
 				<slot v-if="$slots.header" name="header"></slot>
-				<view v-else-if="title || showClose" :class="$style['PopupContent--header']">
+				<view
+					v-else-if="title || showClose"
+					:class="$style['PopupContent--header']"
+				>
 					<view
 						:class="[
 							$style['PopupContent--title'],
-							{ [$style['PopupContent--title-center']]: centerTitle },
+							{
+								[$style['PopupContent--title-center']]:
+									centerTitle,
+							},
 						]"
 					>
 						<slot name="title">
 							<text>{{ title }}</text>
 						</slot>
 					</view>
-					<view v-if="showClose" :class="$style['PopupContent--close']" @click="$emit('close')">
+					<view
+						v-if="showClose"
+						:class="$style['PopupContent--close']"
+						@click="$emit('close')"
+					>
 						<icon-cpn icon="close" tap-size="80rpx" />
 					</view>
 				</view>
@@ -27,7 +37,10 @@
 			<!-- 内容下方操作按钮 -->
 			<template #footer>
 				<slot v-if="$slots.footer" name="footer"></slot>
-				<view v-else-if="cancel || confirm" :class="$style['PopupContent--footer']">
+				<view
+					v-else-if="cancel || confirm"
+					:class="$style['PopupContent--footer']"
+				>
 					<view v-if="cancel" :class="$style['PopupContent--button']">
 						<slot name="cancel">
 							<button-cpn plain @click="$emit('cancel')">
@@ -35,7 +48,10 @@
 							</button-cpn>
 						</slot>
 					</view>
-					<view v-if="confirm" :class="$style['PopupContent--button']">
+					<view
+						v-if="confirm"
+						:class="$style['PopupContent--button']"
+					>
 						<slot name="confirm">
 							<button-cpn @click="$emit('confirm')">
 								{{ confirm }}
@@ -100,14 +116,22 @@ defineEmits<{
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($popup, 'popup');
+	@include UTILS__DEFINE_COMPONENT_VARS('popup', $popup);
+}
+
+:host {
+	display: block;
 }
 
 .PopupContent {
 	@extend %external-vars;
-	#{UTILS__VAR_NAME(header-height, popover)}: #{UTILS__LOCAL_VAR(header-height)};
-	#{UTILS__VAR_NAME(footer-height, popover)}: #{UTILS__LOCAL_VAR(footer-height)};
-	#{UTILS__VAR_NAME(padding, popover)}: 20rpx 30rpx;
+	#{UTILS__VAR_NAME(popover, header-height )}: #{UTILS__LOCAL_VAR(
+			header-height
+		)};
+	#{UTILS__VAR_NAME(popover, footer-height )}: #{UTILS__LOCAL_VAR(
+			footer-height
+		)};
+	#{UTILS__VAR_NAME(popover, padding )}: 20rpx 30rpx;
 
 	.PopupContent--header {
 		position: relative;
@@ -148,8 +172,8 @@ defineEmits<{
 	}
 	.PopupContent--button {
 		flex: 1;
-		#{UTILS__VAR_NAME(height, button)}: 84rpx;
-		#{UTILS__VAR_NAME(border-radius, button)}: 20rpx;
+		#{UTILS__VAR_NAME(button, height)}: 84rpx;
+		#{UTILS__VAR_NAME(button, border-radius)}: 20rpx;
 		& + #{UTILS__LAST_SELECTOR(&)} {
 			margin-left: 20rpx;
 		}

package/components/popup/popup.vue

@@ -17,8 +17,8 @@
 					:cancel="cancel"
 					:confirm="confirm"
 					@close="onClose()"
-					@cancel="onButton('cancel', closeOnCancel)"
-					@confirm="onButton('confirm', closeOnConfirm)"
+					@cancel="onCancel()"
+					@confirm="onConfirm()"
 				>
 					<slot></slot>
 				</popup-content-cpn>
@@ -86,7 +86,10 @@ const emit = defineEmits<{
 	(e: 'close'): void;
 	(e: 'closed'): void;
 	(e: 'cancel', closeFn?: VoidFunction): void;
-	(e: 'confirm', payload?: Omit<PromiseWithResolvers<unknown>, 'promise'> | VoidFunction): void;
+	(
+		e: 'confirm',
+		payload?: UniApp.PromiseResolvers<unknown> | VoidFunction
+	): void;
 }>();
 
 const isAsyncLoading = ref(false);
@@ -105,16 +108,34 @@ const onClose = () => {
 	close();
 };
 
-/** 点击取消或确认按钮
- * @param {'cancel' | 'confirm'} btnType 按钮类型
- * @param {boolean} shouldClose 是否自动关闭对话框
- */
-const onButton = (btnType: 'cancel' | 'confirm', shouldClose: boolean) => {
+/** 点击取消按钮响应 */
+const onCancel = () => {
 	if (isLoading.value) return;
 
-	if (btnType === 'confirm' && props.async) {
+	if (props.closeOnCancel) {
+		emit('cancel');
+		close();
+		return;
+	}
+
+	emit('cancel', maskRef.value?.close.bind(maskRef.value));
+};
+
+/** 点击确认按钮响应 */
+const onConfirm = () => {
+	if (isLoading.value) return;
+
+	if (props.async) {
 		isAsyncLoading.value = true;
-		const { promise, resolve, reject } = Promise.withResolvers();
+
+		// const { promise, resolve, reject } = Promise.withResolvers();
+		let resolve: UniApp.PromiseResolver<unknown>,
+			reject: UniApp.PromiseRejector<unknown>;
+		const promise = new Promise((res, rej) => {
+			resolve = res;
+			reject = rej;
+		});
+
 		promise
 			.then((willClose = true) => {
 				if (willClose === false) {
@@ -130,24 +151,22 @@ const onButton = (btnType: 'cancel' | 'confirm', shouldClose: boolean) => {
 				}
 				isAsyncLoading.value = false;
 			});
-		emit(btnType, { resolve, reject });
+		emit('confirm', { resolve, reject });
 		return;
 	}
 
-	if (shouldClose) {
-		// @ts-expect-error 这里语法是正确的
-		emit(btnType);
+	if (props.closeOnConfirm) {
+		emit('confirm');
 		close();
 		return;
 	}
 
-	// @ts-expect-error 这里语法是正确的
-	emit(btnType, maskRef.value?.close.bind(maskRef.value));
+	emit('confirm', maskRef.value?.close.bind(maskRef.value));
 };
 
 defineExpose({ close });
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 </style>

package/components/price/price.scss

@@ -13,6 +13,7 @@ $price-default: (
 	decimal-color: UTILS__LOCAL_VAR(color),
 	decimal-font-size: UTILS__LOCAL_VAR(font-size),
 	decimal-font-weight: UTILS__LOCAL_VAR(font-weight),
+	unit-spacing: 0,
 	unit-color: UTILS__LOCAL_VAR(color),
 	unit-font-size: UTILS__LOCAL_VAR(font-size),
 	unit-font-weight: UTILS__LOCAL_VAR(font-weight),

package/components/price/price.vue

@@ -6,12 +6,20 @@
 				<text :class="$style['Price--default-prefix-unit']">¥</text>
 			</slot>
 		</text>
-		<text v-if="showSymbol || formattedPrice.negative" :class="$style['Price--integer']">
+		<text
+			v-if="showSymbol || formattedPrice.negative"
+			:class="$style['Price--integer']"
+		>
 			{{ formattedPrice.negative ? '-' : '+' }}
 		</text>
-		<text :class="$style['Price--integer']"> {{ formattedPrice.integer }} </text>
-		<text v-if="alwaysShowDecimal || formattedPrice.decimal !== '00'" :class="$style['Price--decimal']">
-			.{{ formattedPrice.decimal }}
+		<text :class="$style['Price--integer']">
+			{{ formattedPrice.integer }}
+		</text>
+		<text
+			v-if="alwaysShowDecimal || formattedPrice.decimal !== '.00'"
+			:class="$style['Price--decimal']"
+		>
+			{{ formattedPrice.decimal }}
 		</text>
 		<text v-if="!prefixUnit" :class="$style['Price--unit']">
 			<!-- 默认插槽用于放置单位 -->
@@ -62,7 +70,11 @@ const formattedPrice = computed(() => formatPrice(props.value));
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($price, 'price');
+	@include UTILS__DEFINE_COMPONENT_VARS('price', $price);
+}
+
+:host {
+	display: inline;
 }
 
 .Price {
@@ -72,8 +84,7 @@ const formattedPrice = computed(() => formatPrice(props.value));
 	font-weight: UTILS__LOCAL_VAR(font-weight);
 }
 .Price--default-prefix-unit {
-	margin-left: 0.25em;
-	margin-right: 0.25em;
+	margin-right: UTILS__LOCAL_VAR(unit-spacing);
 }
 .Price--integer {
 	color: UTILS__LOCAL_VAR(integer-color);

package/components/search/search.vue

@@ -1,7 +1,11 @@
 <template>
 	<view :class="[...classNames, $style['Search']]">
 		<view :class="$style['Search--wrapper']">
-			<icon-cpn icon="search" :class="[$style['Search--icon'], $style['Search--prefix-icon']]"> </icon-cpn>
+			<icon-cpn
+				icon="search"
+				:class="[$style['Search--icon'], $style['Search--prefix-icon']]"
+			>
+			</icon-cpn>
 			<view
 				v-if="readonly"
 				:class="[
@@ -27,7 +31,7 @@
 				v-if="clearable && searchValue"
 				icon="close-circle-filled"
 				:class="[$style['Search--icon'], $style['Search--close-icon']]"
-				@click="onClear"
+				@tap.stop="onClear"
 			>
 			</icon-cpn>
 		</view>
@@ -45,7 +49,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import debounceFn from 'lodash-es/debounce';
+import { debounce as debounceFn } from 'lodash-es';
 import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
@@ -70,16 +74,16 @@ type _Props = {
 	debounce?: number;
 	/** 是否有清空按钮 */
 	clearable?: boolean;
-	/** 是否只读 */
+	/** 是否禁用 */
 	disabled?: boolean;
 	/** 是否只读 */
 	readonly?: boolean;
-	/** 是否显示搜索按钮 */
+	/** 是否显示取消按钮 */
 	cancelButton?: boolean;
 };
 
 const props = withDefaults(defineProps<_Props>(), {
-	modelValue: '',
+	modelValue: undefined,
 	maxlength: 140,
 	placeholder: '请输入搜索内容',
 	debounce: 300,
@@ -103,7 +107,10 @@ const innerSearchValue = ref('');
 
 /** 当前搜索值 */
 const searchValue = computed({
-	get: () => (props.modelValue === undefined ? innerSearchValue.value : props.modelValue),
+	get: () =>
+		props.modelValue === undefined
+			? innerSearchValue.value
+			: props.modelValue,
 	set: (value) => {
 		emit('update:modelValue', value);
 		innerSearchValue.value = value;
@@ -146,7 +153,14 @@ const onCancel = () => {
 
 // 定义外部变量
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS($search, 'search');
+	@include UTILS__DEFINE_COMPONENT_VARS('search', $search);
+}
+
+:host {
+	display: block;
+}
+:host(.display-inline) {
+	display: inline;
 }
 
 .Search {
@@ -190,7 +204,7 @@ const onCancel = () => {
 	flex: none;
 	font-size: UTILS__GLOBAL_VAR(font-size, normal);
 	height: 100%;
-	#{UTILS__VAR_NAME(color, button)}: #999;
-	#{UTILS__VAR_NAME(padding, button)}: 0 0 0 24rpx;
+	#{UTILS__VAR_NAME(button, color)}: #999;
+	#{UTILS__VAR_NAME(button, padding)}: 0 0 0 24rpx;
 }
 </style>

package/components/searching/searching.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$search: () !default;
+$search-default: (
+	$image-size: 300rpx,
+	$image-width: var(--image-size),
+	$image-height: var(--image-size),
+	$space: 20rpx,
+	$color: #999999,
+	$font-size: UTILS__GLOBAL_VAR(font-size, normal),
+);
+$search: map.merge($search-default, $search);

package/components/searching/searching.vue

@@ -37,9 +37,16 @@ withDefaults(defineProps<_Props>(), {
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './searching' as *;
+
+// 定义外部变量
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS('searching', $searching);
+}
 
 .Searching {
+	@extend %external-vars;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -47,28 +54,28 @@ withDefaults(defineProps<_Props>(), {
 }
 .Searching--image {
 	position: relative;
-	width: 300rpx;
-	height: 300rpx;
+	width: var(--image-width);
+	height: var(--image-height);
 }
 .Searching--search-icon-animation {
 	width: 100rpx;
 	height: 100rpx;
 	transform-origin: center center;
-	animation: circle 1.5s infinite linear;
+	animation: Searching--circle 1.5s infinite linear;
 }
 .Searching--search-icon {
 	position: absolute;
 	font-size: 60rpx;
-	color: #999;
-	animation: circle 1.5s linear infinite reverse;
+	color: var(--color);
+	animation: Searching--circle 1.5s linear infinite reverse;
 }
 .Searching--text {
-	margin-top: 20rpx;
-	color: #999;
-	font-size: 28rpx;
+	margin-top: var(--space);
+	color: var(--color);
+	font-size: var(--font-size);
 }
 
-@keyframes circle {
+@keyframes Searching--circle {
 	0% {
 		transform: rotate(0deg);
 	}

package/components/selector/selector.vue

@@ -3,10 +3,17 @@
 		<text v-if="isReadonly || modelValue" :class="$style['Selector--text']">
 			<slot>{{ modelValue || '' }}</slot>
 		</text>
-		<text v-else :class="[$style['Selector--text'], $style['Selector--placeholder']]">
+		<text
+			v-else
+			:class="[$style['Selector--text'], $style['Selector--placeholder']]"
+		>
 			{{ placeholder }}
 		</text>
-		<icon-cpn v-if="!isReadonly" icon="picker-arrow" :class="$style['Selector--icon']"></icon-cpn>
+		<icon-cpn
+			v-if="!isReadonly"
+			icon="picker-arrow"
+			:class="$style['Selector--icon']"
+		></icon-cpn>
 	</view>
 </template>
 
@@ -60,7 +67,7 @@ const onClick = () => {
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
 
 .Selector {
 	width: 100%;