vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/components/Pick/index.vue

@@ -1,322 +1,321 @@
-<template>
-  <view class="pick-wrapper" :style="customStyle">
-    <!-- Trigger Area -->
-    <view
-      :class="`pick-trigger ${!modelValue ? 'pick-trigger-placeholder' : ''}`"
-      @click="onOpenPick">
-      <text class="pick-trigger-text">
-        {{ label || placeholder || '请选择' }}
-      </text>
-      <view class="pick-handle">
-        <view
-          v-if="allowClear && modelValue"
-          class="pick-clear"
-          @click.stop="onClear">
-          ×
-        </view>
-        <view :class="['pick-arrow', isActive ? 'pick-arrow-active' : '']">
-          >
-        </view>
-      </view>
-    </view>
-
-    <!-- Popup Modal -->
-    <view class="pick-mask" v-if="isActive" @click="onClosePick">
-      <view class="pick-modal" @click.stop>
-        <!-- Header -->
-        <view class="pick-header">
-          <text class="pick-title">{{ placeholder || '请选择' }}</text>
-          <view class="pick-close" @click="onClosePick">×</view>
-        </view>
-
-        <!-- Search -->
-        <view class="pick-search" v-if="!readonly">
-          <input
-            class="pick-search-input"
-            :value="searchText"
-            placeholder="搜索..."
-            @input="debounceInput"
-            :focus="isActive" />
-        </view>
-
-        <!-- List -->
-        <scroll-view scroll-y class="pick-list">
-          <view
-            v-for="item in filteredOptions"
-            :key="item.value"
-            :class="[
-              'pick-item',
-              item.value === modelValue ? 'pick-item-active' : '',
-            ]"
-            @click="onSelect(item)">
-            <text class="pick-item-text">{{ item.label }}</text>
-            <text v-if="item.value === modelValue" class="pick-item-check">
-              ✓
-            </text>
-          </view>
-          <view v-if="filteredOptions.length === 0" class="pick-empty">
-            暂无数据
-          </view>
-        </scroll-view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { debounce } from '../../../utils';
-import { ref, computed } from 'vue';
-
-const props = defineProps<{
-  placeholder?: string;
-  readonly?: boolean;
-  allowClear?: boolean;
-  options?: { label: string; value: any }[];
-  customStyle?: Record<string, any> | string;
-}>();
-
-const modelValue = defineModel<string>('modelValue');
-
-const emit = defineEmits<{
-  (e: 'search', value: string): void;
-  (e: 'openSearch', value: boolean): void;
-  (e: 'change', value: { label: string; value: any }): void;
-}>();
-
-const isActive = ref(false);
-const searchText = ref('');
-
-// Computed label for the trigger
-const label = computed(() => {
-  return (
-    props.options?.find((item) => item.value === modelValue.value)?.label ??
-    modelValue.value
-  );
-});
-
-const filteredOptions = computed(() => {
-  if (!searchText.value) return props.options || [];
-  const lowerSearch = searchText.value.toLowerCase();
-  return (props.options || []).filter(
-    (item) => item.label && item.label.toLowerCase().includes(lowerSearch),
-  );
-});
-
-function onOpenPick() {
-  isActive.value = true;
-  searchText.value = '';
-  emit('openSearch', true);
-}
-
-function onClosePick() {
-  isActive.value = false;
-  emit('openSearch', false);
-}
-
-function onInput(e: any) {
-  const value = e.detail?.value ?? e.target?.value;
-  searchText.value = value;
-  emit('search', value);
-}
-
-const debounceInput = debounce(onInput, 300);
-
-function onSelect(item: { label: string; value: any }) {
-  modelValue.value = item.value;
-  emit('change', item);
-  onClosePick();
-}
-
-function onClear() {
-  modelValue.value = '';
-  emit('search', '');
-  emit('change', { label: '', value: '' });
-}
-</script>
-
-<style scoped>
-.pick-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.pick-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 0;
-  height: 24px; /* Slightly taller for easier click */
-  padding: 0 10px;
-  border-radius: 4px;
-  border: 1px solid var(--dev-tool-border-color);
-  background-color: var(--dev-tool-bg-color);
-  transition: all 0.3s;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-.pick-trigger:hover {
-  border-color: var(--dev-tool-active-color, #409eff);
-}
-
-.pick-trigger-placeholder .pick-trigger-text {
-  color: var(--dev-tool-text-color-placeholder, #999);
-}
-
-.pick-trigger-text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--dev-tool-text-color);
-}
-
-.pick-handle {
-  display: flex;
-  align-items: center;
-}
-
-.pick-arrow {
-  padding-left: 4px;
-  color: #999;
-  font-family: monospace;
-  font-weight: bold;
-  transform: rotate(90deg);
-  transition: transform 0.3s;
-  position: relative;
-  top: -1px;
-}
-
-.pick-arrow-active {
-  transform: rotate(-90deg);
-}
-
-.pick-clear {
-  padding-left: 8px;
-  font-size: 16px;
-  color: #999;
-}
-
-.pick-mask {
-  position: fixed;
-  inset: 0;
-  background-color: rgb(0 0 0 / 40%);
-  z-index: 10000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(2px);
-}
-
-.pick-modal {
-  width: 80%;
-  max-width: 400px;
-  height: 60vh;
-  max-height: 500px;
-  background-color: var(--dev-tool-bg-color);
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: pick-pop-in 0.2s ease-out;
-}
-
-@keyframes pick-pop-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.pick-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-
-.pick-title {
-  font-weight: 600;
-  color: var(--dev-tool-text-color);
-}
-
-.pick-close {
-  font-size: 20px;
-  color: #999;
-  padding: 4px;
-  cursor: pointer;
-}
-
-.pick-search {
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-
-.pick-search-input {
-  width: 100%;
-  height: 36px;
-  padding: 0 12px;
-  border-radius: 6px;
-  background-color: var(--dev-tool-bg2-color, #f5f5f5);
-  border: 1px solid transparent;
-  box-sizing: border-box;
-  color: var(--dev-tool-text-color);
-}
-
-.pick-search-input:focus {
-  border-color: var(--dev-tool-active-color, #409eff);
-  background-color: var(--dev-tool-bg-color);
-}
-
-.pick-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.pick-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.pick-item:hover,
-.pick-item:active {
-  background-color: var(--dev-tool-hover-bg-color, rgb(0 0 0 / 5%));
-}
-
-.pick-item-active {
-  background-color: var(--dev-tool-active-bg-color, rgb(64 158 255 / 10%));
-}
-
-.pick-item-active .pick-item-text {
-  color: var(--dev-tool-active-color, #409eff);
-  font-weight: 500;
-}
-
-.pick-item-text {
-  color: var(--dev-tool-text-color);
-}
-
-.pick-item-check {
-  color: var(--dev-tool-active-color, #409eff);
-  font-weight: bold;
-}
-
-.pick-empty {
-  padding: 24px;
-  text-align: center;
-  color: #999;
-}
-</style>
+<template>
+  <view class="pick-wrapper" :style="customStyle">
+    <!-- Trigger Area -->
+    <view
+      :class="`pick-trigger ${!modelValue ? 'pick-trigger-placeholder' : ''}`"
+      @click="onOpenPick">
+      <text class="pick-trigger-text">
+        {{ label || placeholder || '请选择' }}
+      </text>
+      <view class="pick-handle">
+        <view
+          v-if="allowClear && modelValue"
+          class="pick-clear"
+          @click.stop="onClear">
+          ×
+        </view>
+        <view :class="['pick-arrow', isActive ? 'pick-arrow-active' : '']">
+          >
+        </view>
+      </view>
+    </view>
+
+    <!-- Popup Modal -->
+    <view class="pick-mask" v-if="isActive" @click="onClosePick">
+      <view class="pick-modal" @click.stop>
+        <!-- Header -->
+        <view class="pick-header">
+          <text class="pick-title">{{ placeholder || '请选择' }}</text>
+          <view class="pick-close" @click="onClosePick">×</view>
+        </view>
+
+        <!-- Search -->
+        <view class="pick-search" v-if="!readonly">
+          <input
+            class="pick-search-input"
+            :value="searchText"
+            placeholder="搜索..."
+            @input="debounceInput"
+            :focus="isActive" />
+        </view>
+
+        <!-- List -->
+        <scroll-view scroll-y class="pick-list">
+          <view
+            v-for="item in filteredOptions"
+            :key="item.value"
+            :class="[
+              'pick-item',
+              item.value === modelValue ? 'pick-item-active' : '',
+            ]"
+            @click="onSelect(item)">
+            <text class="pick-item-text">{{ item.label }}</text>
+            <text v-if="item.value === modelValue" class="pick-item-check">
+              ✓
+            </text>
+          </view>
+          <view v-if="filteredOptions.length === 0" class="pick-empty">
+            暂无数据
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from '../../../utils';
+import { ref, computed } from 'vue';
+
+interface Option {
+  label: string;
+  value: any;
+}
+
+const props = defineProps<{
+  placeholder?: string;
+  readonly?: boolean;
+  allowClear?: boolean;
+  options?: Option[];
+  customStyle?: Record<string, any> | string;
+}>();
+
+const modelValue = defineModel<string>('modelValue');
+const emit = defineEmits<{
+  (e: 'search', value: string): void;
+  (e: 'openSearch', value: boolean): void;
+  (e: 'change', value: Option): void;
+}>();
+
+const isActive = ref(false);
+const searchText = ref('');
+
+const label = computed(
+  () =>
+    props.options?.find((i) => i.value === modelValue.value)?.label ??
+    modelValue.value,
+);
+
+const filteredOptions = computed(() => {
+  const list = props.options || [];
+  if (!searchText.value) return list;
+  const s = searchText.value.toLowerCase();
+  return list.filter((i) => i.label?.toLowerCase().includes(s));
+});
+
+const onOpenPick = () => {
+  isActive.value = true;
+  searchText.value = '';
+  emit('openSearch', true);
+};
+
+const onClosePick = () => {
+  isActive.value = false;
+  emit('openSearch', false);
+};
+
+const debounceInput = debounce((e: any) => {
+  const val = e.detail?.value ?? e.target?.value;
+  searchText.value = val;
+  emit('search', val);
+}, 300);
+
+const onSelect = (item: Option) => {
+  modelValue.value = item.value;
+  emit('change', item);
+  onClosePick();
+};
+
+const onClear = () => {
+  modelValue.value = '';
+  emit('search', '');
+  emit('change', { label: '', value: '' });
+};
+</script>
+
+<style scoped>
+.pick-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.pick-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  height: 24px; /* Slightly taller for easier click */
+  padding: 0 10px;
+  border-radius: 4px;
+  border: 1px solid var(--dev-tool-border-color);
+  background-color: var(--dev-tool-bg-color);
+  transition: all 0.3s;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.pick-trigger:hover {
+  border-color: var(--dev-tool-active-color, #409eff);
+}
+
+.pick-trigger-placeholder .pick-trigger-text {
+  color: var(--dev-tool-text-color-placeholder, #999);
+}
+
+.pick-trigger-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dev-tool-text-color);
+}
+
+.pick-handle {
+  display: flex;
+  align-items: center;
+}
+
+.pick-arrow {
+  padding-left: 4px;
+  color: #999;
+  font-family: monospace;
+  font-weight: bold;
+  transform: rotate(90deg);
+  transition: transform 0.3s;
+  position: relative;
+  top: -1px;
+}
+
+.pick-arrow-active {
+  transform: rotate(-90deg);
+}
+
+.pick-clear {
+  padding-left: 8px;
+  font-size: 16px;
+  color: #999;
+}
+
+.pick-mask {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 40%);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(2px);
+}
+
+.pick-modal {
+  width: 80%;
+  max-width: 400px;
+  height: 60vh;
+  max-height: 500px;
+  background-color: var(--dev-tool-bg-color);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: pick-pop-in 0.2s ease-out;
+}
+
+@keyframes pick-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.pick-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.pick-title {
+  font-weight: 600;
+  color: var(--dev-tool-text-color);
+}
+
+.pick-close {
+  font-size: 20px;
+  color: #999;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.pick-search {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.pick-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 6px;
+  background-color: var(--dev-tool-bg2-color, #f5f5f5);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  color: var(--dev-tool-text-color);
+}
+
+.pick-search-input:focus {
+  border-color: var(--dev-tool-active-color, #409eff);
+  background-color: var(--dev-tool-bg-color);
+}
+
+.pick-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.pick-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.pick-item:hover,
+.pick-item:active {
+  background-color: var(--dev-tool-hover-bg-color, rgb(0 0 0 / 5%));
+}
+
+.pick-item-active {
+  background-color: var(--dev-tool-active-bg-color, rgb(64 158 255 / 10%));
+}
+
+.pick-item-active .pick-item-text {
+  color: var(--dev-tool-active-color, #409eff);
+  font-weight: 500;
+}
+
+.pick-item-text {
+  color: var(--dev-tool-text-color);
+}
+
+.pick-item-check {
+  color: var(--dev-tool-active-color, #409eff);
+  font-weight: bold;
+}
+
+.pick-empty {
+  padding: 24px;
+  text-align: center;
+  color: #999;
+}
+</style>