cd-icon-picker 1.2.4 → 1.2.7

package/package.json

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

package/src/IconPicker.vue

@@ -5,7 +5,7 @@
       <span v-else-if="isSvgMode && currentSelect" class="flex items-center justify-center">
         <SvgIcon :name="currentSelect" :prefix="svgPrefix" />
       </span>
-      <Icon v-else :icon="currentSelect || defaultIcon" />
+      <Icon v-else :icon="currentSelect || defaultIcon" :color="color" />
     </div>
     <t-input v-else :readonly="readonly" :style="{ width }" :placeholder="mode === 'text' ? placeholder : ''" class="cd-icon-picker" v-model="displayValue" @click="handleOpen">
       <template #prefixIcon>
@@ -13,22 +13,32 @@
         <span v-else-if="isSvgMode && currentSelect" class="cursor-pointer px-2 py-1 flex items-center">
           <SvgIcon :name="currentSelect" :prefix="svgPrefix" />
         </span>
-        <Icon v-else :icon="currentSelect || defaultIcon" class="cursor-pointer px-2 py-1" />
+        <Icon v-else :icon="currentSelect || defaultIcon" :color="color" 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">
+      <t-dialog v-model:visible="visible" width="1100px"   :close-on-esc-keydown="true" :close-on-overlay-click="true" @confirm="handleConfirm" @cancel="handleCancel">
       <template #header>
         <div class="cd-picker-header">
           <span style="font-size: 14px;font-weight: normal;">当前图标：</span>
-          <img v-if="isImageUrl(currentSelect)" :src="currentSelect" :style="{ filter: color ? `drop-shadow(0 0 0 ${color})` : '' }" style="width: 20px; height: 20px; object-fit: contain;" />
+          <img v-if="isImageUrl(currentSelect)" :src="currentSelect" :style="{ filter: color ? `drop-shadow(0 0 0 ${color})` : '' }" style="width: 24px; height: 24px; object-fit: contain;" />
           <span v-else-if="isSvgMode && currentSelect" :style="{ color }">
-            <SvgIcon :name="currentSelect" :prefix="svgPrefix" :size="'20'" />
+            <SvgIcon :name="currentSelect" :prefix="svgPrefix" :size="'24'" />
           </span>
-          <Icon v-else :icon="currentSelect || defaultIcon" :size="'20'" :style="{ color }" />
-          <input type="color" v-model="color" style="margin-left: 8px; cursor: pointer; width: 30px; height: 24px; border: 1px solid #ddd; border-radius: 4px;" />
-          <span style="font-size: 14px; color: #666; margin-left: 12px;">预设：</span>
-          <span v-for="c in presetColors" :key="c" @click="color = c" :style="{ backgroundColor: c }" class="preset-color"></span>
+          <Icon v-else :icon="currentSelect || defaultIcon" :size="'24'" :style="{ color }" />
+          <span v-if="currentSelect" style="font-size: 12px; color: #999; margin-left: 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ currentSelect }}</span>
+        </div>
+      </template>
+      <template #footer>
+        <div class="cd-picker-footer">
+          <div class="cd-picker-footer-colors">
+            <input type="color" v-model="color" class="cd-picker-color-input" />
+            <span v-for="c in presetColors" :key="c" @click="color = c" :style="{ backgroundColor: c }" :class="['preset-color', color === c && 'preset-color-active']"></span>
+          </div>
+          <div class="cd-picker-footer-actions">
+            <t-button theme="default" @click="handleCancel">取消</t-button>
+            <t-button theme="primary" @click="handleConfirm">确定</t-button>
+          </div>
         </div>
       </template>
       <div class="cd-picker-body">
@@ -44,7 +54,6 @@
             <div class="cd-picker-section-title">来源</div>
             <ul class="cd-picker-cats">
                <li :class="['cd-picker-cat', sourceType === 'remix' && 'active']" @click="sourceType = 'remix'">通用</li>
-              <li :class="['cd-picker-cat', sourceType === 'tdesign' && 'active']" @click="sourceType = 'tdesign'">通用2</li>
              <li :class="['cd-picker-cat', sourceType === 'company' && 'active']" @click="sourceType = 'company'">企业</li>
               <li :class="['cd-picker-cat', sourceType === 'custom' && 'active']" @click="sourceType = 'custom'">自定义</li>
             </ul>
@@ -106,7 +115,7 @@ const props = defineProps({
   remixicon: { type: String, default: '' },
   svg: { type: String, default: '' },
   width: { type: String, default: '100%' },
-  pageSize: { type: Number, default: 140 },
+  pageSize: { type: Number, default: 168 },
   copy: { type: Boolean, default: false },
   diyIcon: { type: [Array, Object] as PropType<string[] | { prefix: string; icons: string[]; categoryMap?: Record<string, string[]> }> },
   placeholder: { type: String, default: '选择图标' },
@@ -163,7 +172,8 @@ const displayValue = computed({
 watch(
   () => props.type,
   v => {
-    sourceType.value = (v as any) || 'remix';
+    // backward compat: treat 'tdesign' as 'remix' since they're merged
+    sourceType.value = (v === 'tdesign' ? 'remix' : (v as any)) || 'remix';
   },
   { immediate: true },
 );
@@ -175,11 +185,7 @@ watch(
   { immediate: true },
 );
 watchEffect(() => {
-  let v = props.value || '';
-  if (sourceType.value === 'remix' && v && !/-line$|-fill$/.test(v)) {
-    v = v + (styleType.value === 'filled' ? '-fill' : '-line');
-  }
-  currentSelect.value = v;
+  currentSelect.value = props.value || '';
 });
 watch([rawIcons, styleType, sourceType], () => {
   page.value = 1;
@@ -189,10 +195,10 @@ const categoryMap = computed(() => {
   if (props.categoryMap) return props.categoryMap as Record<string, string[]>;
   const d = props.diyIcon as any;
   if (!Array.isArray(d) && d?.categoryMap) return d.categoryMap as Record<string, string[]>;
-  const map = (categories as any)[sourceType.value] || (categories as any).tdesign;
+  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 categoryOptions = computed(() => Object.keys(categoryMap.value || {}).filter(k => !k.endsWith('fill')));
 const filteredIcons = computed(() => {
   if (sourceType.value === 'custom') {
     const list = customIcons.value;
@@ -225,10 +231,6 @@ 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);
@@ -264,20 +266,13 @@ function handleConfirm() {
   visible.value = false;
   const icon = currentSelect.value;
   if (!icon) return;
-  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 || '';
-  if (sourceType.value === 'remix' && v && !/-line$|-fill$/.test(v)) {
-    v = v + (styleType.value === 'filled' ? '-fill' : '-line');
-  }
-  currentSelect.value = v;
+  currentSelect.value = props.value || '';
 }
 function handleAddCustomImage() {
   const url = customImageUrl.value.trim();
@@ -310,16 +305,22 @@ watch(
 .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-main { flex: 1; }
 .cd-picker-search { margin-bottom: 8px; }
 .cd-picker-content { border-top: 1px solid #eee; }
-.cd-picker-grid { list-style: none; margin: 0; padding: 10px 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
+.cd-picker-grid { list-style: none; margin: 0; padding: 10px 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
 .cd-picker-item { display: flex; width: 30px; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 6px; padding: 8px; cursor: pointer; }
 .cd-picker-item.active { border-color: var(--td-brand-color, #0052d9); }
 .cd-picker-item:hover { border-color: var(--td-brand-color, #0052d9); }
 .cd-picker-pagination { display: flex; justify-content: center; padding: 8px; }
 .cd-picker-empty { padding: 24px; }
-.cd-picker-header { display: flex; align-items: center; }
-.preset-color { display: inline-block; width: 30px; height: 24px; border-radius: 4px; margin-left: 6px; cursor: pointer; border: 1px solid #ddd; transition: all 0.2s; }
+.cd-picker-header { display: flex; align-items: center; gap: 6px; }
+.cd-picker-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; }
+.cd-picker-footer-colors { display: flex; align-items: center; gap: 6px; }
+.cd-picker-footer-actions { display: flex; align-items: center; gap: 8px; }
+.cd-picker-color-input { cursor: pointer; width: 28px; height: 28px; border: 1px solid #ddd; border-radius: 6px; padding: 1px; background: none; }
+.cd-picker-color-input:hover { border-color: var(--td-brand-color, #0052d9); }
+.preset-color { display: inline-block; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; box-sizing: border-box; }
 .preset-color:hover { border-color: var(--td-brand-color, #0052d9); transform: scale(1.1); }
+.preset-color-active { border-color: var(--td-brand-color, #0052d9); box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.2); }
 </style>