cd-icon-picker 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-icon-picker",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Vue 3 icon picker supporting TDesign & RemixIcon, with custom SVG via :diy-icon.",
   "license": "MIT",
   "type": "module",

package/src/IconPicker.vue

@@ -16,7 +16,6 @@
         <Icon v-else :icon="currentSelect || defaultIcon" class="cursor-pointer px-2 py-1" />
       </template>
     </t-input>
-
     <teleport to="body">
       <t-dialog v-model:visible="visible" width="960px"   :close-on-esc-keydown="true" :close-on-overlay-click="true" @confirm="handleConfirm" @cancel="handleCancel">
       <template #header>
@@ -62,7 +61,7 @@
           <div class="cd-picker-search">
             <t-input :placeholder="searchPlaceholder" @input="debounceHandleSearchChange" clearable />
           </div>
-          <div v-if="sourceType === 'custom'" class="cd-picker-custom-url" style="padding: 12px; border-bottom: 1px solid #eee;">
+          <div v-if="sourceType === 'custom'" class="cd-picker-custom-url">
             <t-input v-model="customImageUrl" placeholder="输入图片URL (https://...)" clearable>
               <template #suffix>
                 <t-button size="small" @click="handleAddCustomImage">添加</t-button>
@@ -101,7 +100,6 @@ import { ref, watchEffect, watch, computed } from 'vue';
 import Icon from './Icon.vue';
 import SvgIcon from './SvgIcon.vue';
 import categories from '../data/categories';
-
 const props = defineProps({
   value: { type: String, default: '' },
   tdesign: { type: String, default: '' },
@@ -119,18 +117,14 @@ const props = defineProps({
   type: { type: String as PropType<'remix' | 'tdesign' | 'custom' | 'company'>, default: 'remix' },
   color: { type: String, default: '' },
 });
-
 const emit = defineEmits(['change', 'update:value', 'update:tdesign', 'update:remixicon', 'update:svg', 'update:type', 'update:color']);
-
 // dialog 不需要 attach/placement
-
 const isImageUrl = (icon: string) => /^https?:\/\/.+\.(png|jpg|jpeg|gif|svg|webp)/i.test(icon) || /^[./].*\.(png|jpg|jpeg|gif|svg|webp)$/i.test(icon);
 const isSvgMode = computed(() => sourceType.value === 'custom');
 const svgPrefix = computed(() => {
   const d = props.diyIcon as any;
   return Array.isArray(d) ? 'icon' : (d?.prefix ?? 'icon');
 });
-
 const rawIcons = computed<string[]>(() => {
   if (sourceType.value === 'custom') {
     const d = props.diyIcon as any;
@@ -141,17 +135,14 @@ const rawIcons = computed<string[]>(() => {
   }
   return [] as string[];
 });
-
 const styleType = ref<'outlined' | 'filled'>('outlined');
 const sourceType = ref<'remix' | 'tdesign' | 'custom' | 'company'>('remix');
 const categoryType = ref<string>('all');
-
 const customIcons = computed(() => {
   const d = props.diyIcon as any;
   const baseIcons = Array.isArray(d) ? (d as string[]) : ((d?.icons ?? []) as string[]);
   return [...baseIcons, ...customImageList.value];
 });
-
 const currentSelect = ref('');
 const visible = ref(false);
 const page = ref(1);
@@ -161,7 +152,6 @@ const colorPickerVisible = ref(false);
 const presetColors = ['#000000', '#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#34495e'];
 const customImageUrl = ref('');
 const customImageList = ref<string[]>([]);
-
 const displayValue = computed({
   get() {
     return props.mode === 'text' ? currentSelect.value : '';
@@ -170,7 +160,6 @@ const displayValue = computed({
     if (props.mode === 'text') currentSelect.value = v || '';
   },
 });
-
 watch(
   () => props.type,
   v => {
@@ -178,7 +167,13 @@ watch(
   },
   { immediate: true },
 );
-
+watch(
+  () => props.color,
+  v => {
+    color.value = v || '';
+  },
+  { immediate: true },
+);
 watchEffect(() => {
   let v = props.value || '';
   if (sourceType.value === 'remix' && v && !/-line$|-fill$/.test(v)) {
@@ -186,11 +181,9 @@ watchEffect(() => {
   }
   currentSelect.value = v;
 });
-
 watch([rawIcons, styleType, sourceType], () => {
   page.value = 1;
 });
-
 const searchText = ref('');
 const categoryMap = computed(() => {
   if (props.categoryMap) return props.categoryMap as Record<string, string[]>;
@@ -199,16 +192,12 @@ const categoryMap = computed(() => {
   const map = (categories as any)[sourceType.value] || (categories as any).tdesign;
   return map as Record<string, string[]>;
 });
-
 const categoryOptions = computed(() => Object.keys(categoryMap.value).filter(k => !k.endsWith('fill')));
-
-
 const filteredIcons = computed(() => {
   if (sourceType.value === 'custom') {
     const list = customIcons.value;
     return searchText.value ? list.filter(i => i.includes(searchText.value)) : list;
   }
-
   if (sourceType.value === 'company') {
     // 企业图标从 categories.ts 中的 company 数据加载
     const map: any = categoryMap.value;
@@ -224,11 +213,9 @@ const filteredIcons = computed(() => {
     }
     return searchText.value ? list.filter(i => i.includes(searchText.value)) : list;
   }
-
   const useFill = styleType.value === 'filled';
   const map: any = categoryMap.value;
   const cats = categoryOptions.value;
-
   let list: string[] = [];
   if (categoryType.value === 'all') {
     for (const cat of cats) {
@@ -238,51 +225,41 @@ const filteredIcons = computed(() => {
   } else {
     list = ((useFill ? map[`${categoryType.value}fill`] : map[categoryType.value]) || map[categoryType.value] || []) as string[];
   }
-
   if (sourceType.value === 'remix') {
     const suffix = useFill ? '-fill' : '-line';
     list = list.map(n => (/-line$|-fill$/.test(n) ? n : `${n}${suffix}`));
   }
-
   return searchText.value ? list.filter(i => i.includes(searchText.value)) : list;
 });
-
 const getTotal = computed(() => filteredIcons.value.length);
 const getPaginationList = computed(() => {
   const start = (page.value - 1) * pageSize.value;
   return filteredIcons.value.slice(start, start + pageSize.value);
 });
-
 function handlePageChange(p: number | { current: number }) {
   const next = typeof p === 'number' ? p : (p as any).current;
   page.value = next || 1;
 }
-
 const defaultIcon = 'ri-apps-line';
-
 function handleClick(icon: string) {
   currentSelect.value = icon;
   if (props.copy && navigator?.clipboard) {
     navigator.clipboard.writeText(icon).catch(() => {});
   }
 }
-
 let timer: any = null;
 function debounceHandleSearchChange(e: any) {
   const value = typeof e === 'string' ? e : (e?.target?.value || e?.detail?.value || '');
   if (timer) clearTimeout(timer);
   timer = setTimeout(() => handleSearch(value), 100);
 }
-
 function handleSearch(value: string) {
   searchText.value = value || '';
   page.value = 1;
 }
-
 function handleOpen() {
   visible.value = true;
 }
-
 function handleConfirm() {
   visible.value = false;
   const icon = currentSelect.value;
@@ -290,12 +267,10 @@ function handleConfirm() {
   if (sourceType.value === 'tdesign') emit('update:tdesign', icon);
   else if (sourceType.value === 'remix') emit('update:remixicon', icon);
   else emit('update:svg', icon);
-
   emit('update:value', icon);
   emit('update:color', color.value);
   emit('change', sourceType.value as any, icon as any, color.value);
 }
-
 function handleCancel() {
   visible.value = false;
   let v = props.value || '';
@@ -304,7 +279,6 @@ function handleCancel() {
   }
   currentSelect.value = v;
 }
-
 function handleAddCustomImage() {
   const url = customImageUrl.value.trim();
   if (!url) return;
@@ -318,18 +292,15 @@ function handleAddCustomImage() {
   currentSelect.value = url;
   customImageUrl.value = '';
 }
-
 watch(
   () => sourceType.value,
   v => {
     emit('update:type', v);
   },
 );
-
 </script>
 <style>
 .cd-icon-picker-popover .scrollbar { height: 220px; overflow: auto; }
-
 .cd-picker-body { display: flex; gap: 12px; }
 .cd-picker-sidebar { width: 240px; border-right: 1px solid #eee; padding-right: 12px; }
 .cd-picker-section { margin-bottom: 12px; }
@@ -337,10 +308,8 @@ watch(
 .cd-picker-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 4px; }
 .cd-picker-cat { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
 .cd-picker-cat.active { background: #f2f3f5; color: #0052d9; }
-
 .cd-icon-only { display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 6px; padding: 6px; cursor: pointer; }
 .cd-icon-only:hover { border-color: var(--td-brand-color, #0052d9); }
-
 .cd-picker-main { width: 620px; }
 .cd-picker-search { margin-bottom: 8px; }
 .cd-picker-content { border-top: 1px solid #eee; }