[snippets] 新增 mel-select 组件

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## [Unreleased]
+  - 🌟 [@mixte/snippets] 新增 `mel-select` 组件
 
 ## [v3.0.0-beta.2]
   - 📅 2024-11-14

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,
+  },
 ];

packages/snippets/src/mel-select/index.ts

@@ -0,0 +1,5 @@
+import MelSelect from './src/index.vue';
+
+export {
+  MelSelect,
+};

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>

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;
+}