From b15e337a96dfb617c107d11f8213bdeeca50caf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=80=9A=E7=AA=97=E5=90=AC=E9=9B=A8=E4=B8=BF=E9=86=89?=
 =?UTF-8?q?=E6=97=A0=E5=BF=83?= <994039348@qq.com>
Date: Fri, 15 Nov 2024 19:32:38 +0800
Subject: [PATCH] =?UTF-8?q?[snippets]=20=E6=96=B0=E5=A2=9E=20`mel-select`?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 meta/packages.ts                              | 10 ++++
 packages/snippets/src/mel-select/index.ts     |  5 ++
 .../snippets/src/mel-select/src/index.vue     | 39 +++++++++++++++
 packages/snippets/src/mel-select/src/types.ts | 50 +++++++++++++++++++
 5 files changed, 105 insertions(+)
 create mode 100644 packages/snippets/src/mel-select/index.ts
 create mode 100644 packages/snippets/src/mel-select/src/index.vue
 create mode 100644 packages/snippets/src/mel-select/src/types.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a776a5a..fa223ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,5 @@
 ## [Unreleased]
+  - 🌟 [@mixte/snippets] 新增 `mel-select` 组件
 
 ## [v3.0.0-beta.2]
   - 📅 2024-11-14
diff --git a/meta/packages.ts b/meta/packages.ts
index 95c144e..f83e1a4 100644
--- a/meta/packages.ts
+++ b/meta/packages.ts
@@ -70,4 +70,14 @@ export const packages = [
     outputFileName: 'toggleThemeViewTransition',
     external: ['mixte'],
   },
+
+  // @mixte/snippets/mel-select
+  {
+    input: 'packages/snippets/src/mel-select/index.ts',
+    outputDir: 'packages/snippets/dist',
+    outputFileName: 'mel-select',
+    external: ['element-plus'],
+    dtsExternal: ['element-plus'],
+    vueSfcComponent: true,
+  },
 ];
diff --git a/packages/snippets/src/mel-select/index.ts b/packages/snippets/src/mel-select/index.ts
new file mode 100644
index 0000000..65241f5
--- /dev/null
+++ b/packages/snippets/src/mel-select/index.ts
@@ -0,0 +1,5 @@
+import MelSelect from './src/index.vue';
+
+export {
+  MelSelect,
+};
diff --git a/packages/snippets/src/mel-select/src/index.vue b/packages/snippets/src/mel-select/src/index.vue
new file mode 100644
index 0000000..4406190
--- /dev/null
+++ b/packages/snippets/src/mel-select/src/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <Render />
+</template>
+
+<script lang="tsx" setup>
+  import type { ISelectProps } from 'element-plus';
+  import type { MelSelectProps, MelSelectSlots, SelectInstance } from './types';
+  import { ElOption, ElSelect } from 'element-plus';
+  import { ref } from 'vue';
+
+  const props = defineProps<MelSelectProps>();
+  const slots = defineSlots<MelSelectSlots>();
+
+  const value = defineModel<ISelectProps['modelValue']>('modelValue');
+
+  const selectRef = ref<SelectInstance>();
+
+  function Render() {
+    return (
+      <ElSelect
+        ref={selectRef}
+        v-model={value.value}
+      >
+        {{
+          default: () => {
+            return props.options?.map((option) => {
+              return <ElOption key={`${option.value}`} {...option} />;
+            });
+          },
+          ...slots,
+        }}
+      </ElSelect>
+    );
+  }
+
+  defineExpose({
+    selectRef,
+  });
+</script>
diff --git a/packages/snippets/src/mel-select/src/types.ts b/packages/snippets/src/mel-select/src/types.ts
new file mode 100644
index 0000000..297165b
--- /dev/null
+++ b/packages/snippets/src/mel-select/src/types.ts
@@ -0,0 +1,50 @@
+import type { ElSelect, ISelectProps, SelectOptionProxy } from 'element-plus';
+
+export type SelectInstance = InstanceType<typeof ElSelect>;
+
+export type MelOptionProps = Pick<SelectOptionProxy, 'value' | 'label' | 'disabled'>;
+
+export interface MelSelectProps extends /* @vue-ignore */ Omit<ISelectProps, 'modelValue'> {
+  /** 选项数据源 */
+  options?: MelOptionProps[];
+}
+
+export interface MelSelectSlots {
+  /**
+   * 默认插槽, 可自定义渲染 option 组件列表
+   */
+  default?: () => void;
+  /**
+   * 下拉列表顶部的内容
+   * @version 2.4.3
+   */
+  header?: () => void;
+  /**
+   * 下拉列表底部的内容
+   * @version 2.4.3
+   */
+  footer?: () => void;
+  /**
+   * Select 组件头部内容
+   */
+  prefix?: () => void;
+  /**
+   * 无选项时的列表
+   */
+  empty?: () => void;
+  /**
+   * select 组件自定义标签内容
+   * @version 2.5.0
+   */
+  tag?: () => void;
+  /**
+   * select 组件自定义 loading 内容
+   * @version 2.5.2
+   */
+  loading?: () => void;
+  /**
+   * select 组件自定义标签内容
+   * @version 2.7.4
+   */
+  label?: () => void;
+}