vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/StorageList/index.vue

@@ -1,174 +1,174 @@
-<template>
-  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
-  <view class="storage-content">
-    <view class="storage-control">
-      <DevToolTitle>{{ t('storage.title') }}</DevToolTitle>
-      <FilterInput
-        style="width: 100%"
-        v-model="modelValue"
-        placeholder="查询"
-        @search="emit('search', $event)" />
-      <Tag
-        v-for="item in storageFilerItem"
-        mode="clear"
-        :key="item.label"
-        @click="onChoose(item.value)">
-        {{ item.label }}
-      </Tag>
-    </view>
-    <scroll-view scroll-y class="storage-list">
-      <view class="storage-item" v-for="item in storageList" :key="item.key">
-        <view class="storage-key">
-          <view class="storage-key-label">
-            <view>key:</view>
-            <view v-html="item._oldKey" />
-          </view>
-          <CircularButton
-            style="margin-left: auto"
-            text="×"
-            @click="onRemove(item.key)" />
-        </view>
-
-        <JsonPretty
-          showLength
-          editable
-          :data="{
-            key: item.key,
-            value: item.value,
-          }"
-          :theme="theme"
-          :nodeSelectable="() => false"
-          :pathCollapsible="() => false"
-          @update:data="onUpdateData($event, item)" />
-      </view>
-      <Empty v-if="!storageList || storageList.length === 0" />
-    </scroll-view>
-  </view>
-</template>
-<script lang="ts" setup>
-import Tag from '../../../components/Tag/index.vue';
-import JsonPretty from '../../../components/JsonPretty/index.vue';
-import Empty from '../../../components/Empty/index.vue';
-import CircularButton from '../../../components/CircularButton/index.vue';
-import FilterInput from '../../../components/FilterInput/index.vue';
-import type { DevTool } from '../../../../type';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../../../i18n';
-import { computed } from 'vue';
-
-const { t } = useI18n();
-
-const props = defineProps<{
-  storageList: DevTool.StorageItem[];
-  theme?: string;
-}>();
-
-const modelValue = defineModel<string>('modelValue', { required: true });
-
-const emit = defineEmits<{
-  (e: 'choose', type: string): void;
-  (e: 'remove', key: string): void;
-  (e: 'update:storageList', data: DevTool.StorageItem[]): void;
-  (e: 'change', value: any): void;
-  (e: 'search', value: string): void;
-}>();
-
-function onUpdateData(data: DevTool.StorageItem, item: DevTool.StorageItem) {
-  const tempList = JSON.parse(JSON.stringify(props.storageList));
-  const index = props.storageList.findIndex(
-    (store) => store.key === item._oldKey,
-  );
-  if (index === -1) return;
-  tempList[index] = {
-    key: data.key,
-    _oldKey: tempList[index]._oldKey,
-    value: data.value,
-  };
-
-  emit('update:storageList', tempList);
-
-  emit('change', {
-    ...data,
-    _oldKey: tempList[index]._oldKey,
-    key: data.key,
-  });
-}
-
-const storageFilerItem = computed(() => [
-  {
-    label: t('common.add'),
-    value: 'add',
-  },
-  {
-    label: t('common.refresh'),
-    value: 'refresh',
-  },
-  {
-    label: t('common.clear'),
-    value: 'clear',
-  },
-]);
-// function calcValue(value: string) { ... }
-function onChoose(type: string) {
-  emit('choose', type);
-}
-function onRemove(key: string) {
-  emit('remove', key);
-}
-</script>
-<style scoped>
-.storage-content {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.storage-content .storage-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-
-.storage-content .storage-list .storage-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-
-.storage-content .storage-list .storage-item .storage-key {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  word-break: break-all;
-}
-
-.storage-key-label {
-  display: flex;
-  align-items: center;
-}
-
-.storage-content .storage-list .storage-item .storage-value {
-  word-break: break-all;
-}
-
-.storage-content .storage-list .storage-item .storage-remove {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin: auto 0 auto 16px;
-  border-radius: 50%;
-  border: 1px solid #000;
-  box-sizing: border-box;
-}
-
-.storage-control {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-</style>
+<template>
+  <!-- eslint-disable vue/no-v-html, vue/no-v-text-v-html-on-component -->
+  <view class="storage-content">
+    <view class="storage-control">
+      <DevToolTitle>{{ t('storage.title') }}</DevToolTitle>
+      <FilterInput
+        style="width: 100%"
+        v-model="modelValue"
+        placeholder="查询"
+        @search="emit('search', $event)" />
+      <Tag
+        v-for="item in storageFilerItem"
+        mode="clear"
+        :key="item.label"
+        @click="onChoose(item.value)">
+        {{ item.label }}
+      </Tag>
+    </view>
+    <scroll-view scroll-y class="storage-list">
+      <view class="storage-item" v-for="item in storageList" :key="item.key">
+        <view class="storage-key">
+          <view class="storage-key-label">
+            <view>key:</view>
+            <view v-html="item._oldKey" />
+          </view>
+          <CircularButton
+            style="margin-left: auto"
+            text="×"
+            @click="onRemove(item.key)" />
+        </view>
+
+        <JsonPretty
+          showLength
+          editable
+          :data="{
+            key: item.key,
+            value: item.value,
+          }"
+          :theme="theme"
+          :nodeSelectable="() => false"
+          :pathCollapsible="() => false"
+          @update:data="onUpdateData($event, item)" />
+      </view>
+      <Empty v-if="!storageList || storageList.length === 0" />
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts" setup>
+import Tag from '../../../components/Tag/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import type { DevTool } from '../../../../type';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../../../i18n';
+import { computed } from 'vue';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  storageList: DevTool.StorageItem[];
+  theme?: string;
+}>();
+
+const modelValue = defineModel<string>('modelValue', { required: true });
+
+const emit = defineEmits<{
+  (e: 'choose', type: string): void;
+  (e: 'remove', key: string): void;
+  (e: 'update:storageList', data: DevTool.StorageItem[]): void;
+  (e: 'change', value: any): void;
+  (e: 'search', value: string): void;
+}>();
+
+function onUpdateData(data: DevTool.StorageItem, item: DevTool.StorageItem) {
+  const tempList = JSON.parse(JSON.stringify(props.storageList));
+  const index = props.storageList.findIndex(
+    (store) => store.key === item._oldKey,
+  );
+  if (index === -1) return;
+  tempList[index] = {
+    key: data.key,
+    _oldKey: tempList[index]._oldKey,
+    value: data.value,
+  };
+
+  emit('update:storageList', tempList);
+
+  emit('change', {
+    ...data,
+    _oldKey: tempList[index]._oldKey,
+    key: data.key,
+  });
+}
+
+const storageFilerItem = computed(() => [
+  {
+    label: t('common.add'),
+    value: 'add',
+  },
+  {
+    label: t('common.refresh'),
+    value: 'refresh',
+  },
+  {
+    label: t('common.clear'),
+    value: 'clear',
+  },
+]);
+// function calcValue(value: string) { ... }
+function onChoose(type: string) {
+  emit('choose', type);
+}
+function onRemove(key: string) {
+  emit('remove', key);
+}
+</script>
+<style scoped>
+.storage-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.storage-content .storage-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.storage-content .storage-list .storage-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.storage-content .storage-list .storage-item .storage-key {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  word-break: break-all;
+}
+
+.storage-key-label {
+  display: flex;
+  align-items: center;
+}
+
+.storage-content .storage-list .storage-item .storage-value {
+  word-break: break-all;
+}
+
+.storage-content .storage-list .storage-item .storage-remove {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: auto 0 auto 16px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  box-sizing: border-box;
+}
+
+.storage-control {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+</style>