feat: update Icons and add Selector

src/components/Selector.vue

@@ -0,0 +1,93 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <el-select
+    size="small"
+    v-model="selected"
+    :placeholder="placeholder"
+    class="selectors"
+    @change="changeSelected"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+<script lang="ts" setup>
+import { defineProps, ref, defineEmits } from "vue";
+import type { PropType } from "vue";
+import { ElSelect, ElOption } from "element-plus";
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  options: {
+    type: Array as PropType<Option[]>,
+    default: () => [],
+  },
+  size: { type: String, default: "small" },
+  placeholder: { type: String, default: "Select a option" },
+});
+const selected = ref<string>("");
+function changeSelected(val: string) {
+  const optionSele = props.options.filter((d: Option) => d.value === val);
+  emit("change", optionSele);
+}
+</script>
+<style lang="scss" scope>
+.icon {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  fill: currentColor;
+
+  &.sm {
+    width: 14px;
+    height: 14px;
+  }
+
+  &.middle {
+    width: 18px;
+    height: 18px;
+  }
+
+  &.lg {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.loading {
+    animation: loading 1.5s linear infinite;
+  }
+
+  &.logo {
+    height: 30px;
+    width: 110px;
+  }
+
+  &.xl {
+    height: 30px;
+    width: 30px;
+  }
+}
+</style>

src/components/index.ts

@@ -16,25 +16,18 @@
  */
 import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
-import type { App, Plugin } from "vue";
+import Selector from "./Selector.vue";
+import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";
 
 const components: { [key: string]: any } = {
   Icon,
   TimePicker,
   VueGridLayout,
+  Selector,
 };
 const componentsName: string[] = Object.keys(components);
-const withInstall = <T>(component: T, alias?: string) => {
-  const comp = component as any;
-  comp.install = (app: App) => {
-    app.component(comp.name || comp.displayName, component);
-    if (alias) {
-      app.config.globalProperties[alias] = component;
-    }
-  };
-  return component as T & Plugin;
-};
+
 export default {
   install: (vue: App): void => {
     vue.use(components["VueGridLayout"]);