vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{Tabs → components/Tabs}/index.vue

@@ -16,7 +16,10 @@
         :class="`tabs-item ${idx === modelValue ? 'tabs-item-active' : ''} `"
         :id="`tabs-item-${idx}`"
         @click="onChangeTabs(idx)">
-        {{ item.label }}
+        <view class="tabs-item-content">
+          <text v-if="item.icon" class="tabs-item-icon">{{ item.icon }}</text>
+          <text>{{ item.label }}</text>
+        </view>
       </view>
     </scroll-view>
     <view class="tabs-extra">
@@ -31,7 +34,13 @@ import { computed, ref, onMounted } from 'vue';
 import CircularButton from '../CircularButton/index.vue';
 
 defineProps<{
-  items: { label: string; key: string; value: any; index: number }[];
+  items: {
+    label: string;
+    key: string;
+    value: any;
+    index: number;
+    icon?: string;
+  }[];
   scrollLeft?: number;
 }>();
 
@@ -104,18 +113,35 @@ function onScroll(e: any) {
 
 .tabs-item {
   display: inline-block;
-  padding: 0 16px;
+  padding: 0 12px;
   height: 32px;
   line-height: 32px;
-  border-bottom: 1px solid transparent;
+  border-bottom: 2px solid transparent;
   box-sizing: border-box;
   transition: all 0.3s;
   cursor: pointer;
+  color: var(--dev-tool-text-color-secondary);
+}
+
+.tabs-item-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tabs-item-icon {
+  font-size: 14px;
+  opacity: 0.8;
 }
 
 .tabs-item-active {
   color: var(--dev-tool-main-color);
   border-color: var(--dev-tool-main-color);
+  background: rgb(var(--dev-tool-main-color-rgb), 0.05);
+}
+
+.tabs-item-active .tabs-item-icon {
+  opacity: 1;
 }
 
 .tabs-extra {

package/dist/v3/{Tag → components/Tag}/index.vue

@@ -1,113 +1,113 @@
-<template>
-  <view
-    :class="['tag', `tag-${mode}`, active ? 'tag-active' : '']"
-    :style="customStyle"
-    @click="onClick">
-    <slot></slot>
-  </view>
-</template>
-<script setup lang="ts">
-defineProps<{
-  mode:
-    | 'primary'
-    | 'warn'
-    | 'success'
-    | 'error'
-    | 'info'
-    | 'log'
-    | 'main'
-    | 'clear'
-    | string;
-  active?: boolean;
-  customStyle?: string | Record<string, any>;
-}>();
-const emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>();
-function onClick(event: MouseEvent) {
-  emit('click', event);
-}
-</script>
-<style scoped>
-.tag {
-  display: flex;
-  align-items: center;
-  padding: 0 6px;
-  width: min-content;
-  height: 22px;
-  color: var(--dev-tool-text-color);
-  border-radius: 4px;
-  white-space: nowrap;
-  box-sizing: border-box;
-  font-size: var(--dev-tool-tag-font-size);
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid transparent;
-}
-
-.tag:hover {
-  opacity: 0.85;
-  filter: brightness(1.1);
-}
-
-.tag:active {
-  transform: scale(0.92);
-}
-
-.tag-log {
-  background-color: var(--dev-tool-active-bg-color);
-  border-color: var(--dev-tool-border-color);
-}
-
-.tag-info {
-  background-color: var(--dev-tool-active-bg-color);
-  border-color: var(--dev-tool-border-color);
-}
-
-.tag-warn {
-  color: #fff;
-  background-color: var(--dev-tool-warn-color);
-  border-color: var(--dev-tool-warn-color);
-}
-
-.tag-success {
-  color: #fff;
-  background-color: var(--dev-tool-success-color);
-  border-color: var(--dev-tool-success-color);
-}
-
-.tag-error {
-  color: #fff;
-  background-color: var(--dev-tool-error-color);
-  border-color: var(--dev-tool-error-color);
-}
-
-.tag-main {
-  background-color: var(--dev-tool-main-color);
-  color: #fff;
-  border-color: var(--dev-tool-main-color);
-}
-
-.tag-primary {
-  background-color: var(--dev-tool-main-color);
-  color: #fff;
-  border-color: var(--dev-tool-main-color);
-}
-
-.tag-clear {
-  color: var(--dev-tool-main-color);
-  border-color: var(--dev-tool-main-color);
-  background-color: transparent;
-}
-
-.tag-all {
-  color: var(--dev-tool-text-color);
-  border-color: var(--dev-tool-border-color);
-  background-color: var(--dev-tool-active-bg-color);
-}
-
-.tag-active {
-  border-color: var(--dev-tool-main-color);
-  color: var(--dev-tool-main-color);
-  background-color: var(--dev-tool-active-bg-color);
-}
-</style>
+<template>
+  <view
+    :class="['tag', `tag-${mode}`, active ? 'tag-active' : '']"
+    :style="customStyle"
+    @click="onClick">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+defineProps<{
+  mode:
+    | 'primary'
+    | 'warn'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'log'
+    | 'main'
+    | 'clear'
+    | string;
+  active?: boolean;
+  customStyle?: string | Record<string, any>;
+}>();
+const emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>();
+function onClick(event: MouseEvent) {
+  emit('click', event);
+}
+</script>
+<style scoped>
+.tag {
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  width: min-content;
+  height: 22px;
+  color: var(--dev-tool-text-color);
+  border-radius: 4px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  font-size: var(--dev-tool-tag-font-size);
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid transparent;
+}
+
+.tag:hover {
+  opacity: 0.85;
+  filter: brightness(1.1);
+}
+
+.tag:active {
+  transform: scale(0.92);
+}
+
+.tag-log {
+  background-color: var(--dev-tool-active-bg-color);
+  border-color: var(--dev-tool-border-color);
+}
+
+.tag-info {
+  background-color: var(--dev-tool-active-bg-color);
+  border-color: var(--dev-tool-border-color);
+}
+
+.tag-warn {
+  color: #fff;
+  background-color: var(--dev-tool-warn-color);
+  border-color: var(--dev-tool-warn-color);
+}
+
+.tag-success {
+  color: #fff;
+  background-color: var(--dev-tool-success-color);
+  border-color: var(--dev-tool-success-color);
+}
+
+.tag-error {
+  color: #fff;
+  background-color: var(--dev-tool-error-color);
+  border-color: var(--dev-tool-error-color);
+}
+
+.tag-main {
+  background-color: var(--dev-tool-main-color);
+  color: #fff;
+  border-color: var(--dev-tool-main-color);
+}
+
+.tag-primary {
+  background-color: var(--dev-tool-main-color);
+  color: #fff;
+  border-color: var(--dev-tool-main-color);
+}
+
+.tag-clear {
+  color: var(--dev-tool-main-color);
+  border-color: var(--dev-tool-main-color);
+  background-color: transparent;
+}
+
+.tag-all {
+  color: var(--dev-tool-text-color);
+  border-color: var(--dev-tool-border-color);
+  background-color: var(--dev-tool-active-bg-color);
+}
+
+.tag-active {
+  border-color: var(--dev-tool-main-color);
+  color: var(--dev-tool-main-color);
+  background-color: var(--dev-tool-active-bg-color);
+}
+</style>

package/dist/v3/{VirtualList → components/VirtualList}/AutoSize.vue

@@ -1,40 +1,40 @@
-<template>
-  <view :class="className" :style="customStyle">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts" setup>
-import { getCurrentInstance, onMounted, nextTick } from 'vue';
-import { uniqueId } from '../../utils';
-
-const props = defineProps<{
-  index: number;
-  customStyle?: string | Record<string, any>;
-  itemsHeight: number[] | Record<number, number>;
-  onSizeChange: (index: number, height: number) => void;
-}>();
-
-const className = uniqueId('virtual-');
-
-onMounted(() => {
-  // TODO 可能会存在异步高度的问题
-  // TODO image 加载完成之后获取高度
-
-  const onSizeChange = props?.onSizeChange ?? (() => {});
-  const itemsHeight = props?.itemsHeight ?? [];
-  if (itemsHeight?.[props.index]) return;
-  const instance = getCurrentInstance();
-  nextTick(() => {
-    const query = uni.createSelectorQuery().in(instance);
-    query
-      .select('.' + className)
-      .boundingClientRect((rect) => {
-        if (Array.isArray(rect) || !rect) return;
-        onSizeChange?.(props.index, rect?.height ?? 0);
-      })
-      .exec();
-  });
-});
-</script>
-
-<style scoped></style>
+<template>
+  <view :class="className" :style="customStyle">
+    <slot></slot>
+  </view>
+</template>
+<script lang="ts" setup>
+import { uniqueId } from '../../../utils';
+import { getCurrentInstance, onMounted, nextTick } from 'vue';
+
+const props = defineProps<{
+  index: number;
+  customStyle?: string | Record<string, any>;
+  itemsHeight: number[] | Record<number, number>;
+  onSizeChange: (index: number, height: number) => void;
+}>();
+
+const className = uniqueId('virtual-');
+
+onMounted(() => {
+  // TODO 可能会存在异步高度的问题
+  // TODO image 加载完成之后获取高度
+
+  const onSizeChange = props?.onSizeChange ?? (() => {});
+  const itemsHeight = props?.itemsHeight ?? [];
+  if (itemsHeight?.[props.index]) return;
+  const instance = getCurrentInstance();
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(instance);
+    query
+      .select('.' + className)
+      .boundingClientRect((rect) => {
+        if (Array.isArray(rect) || !rect) return;
+        onSizeChange?.(props.index, rect?.height ?? 0);
+      })
+      .exec();
+  });
+});
+</script>
+
+<style scoped></style>