ff-ui-plus 2.0.7

package/packages/components/select-icon/src/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="t_select_icon">
+    <el-input
+      ref="inputRef"
+      v-model="valueIcon"
+      v-bind="attrs"
+      @clear="clearIcon"
+      @click="
+        () => {
+          ;(dialogVisible = true), (inputValue = '')
+        }
+      "
+    >
+      <template #append v-if="isShowIcon">
+        <el-button :icon="customIcons[modelValue]" />
+      </template>
+    </el-input>
+    <el-dialog
+      v-model="dialogVisible"
+      :title="attrs.dialogTitle"
+      draggable
+      :width="attrs.width"
+      class="t_select_icon_dialog"
+    >
+      <el-input
+        v-model="inputValue"
+        v-if="isShowSearch"
+        :placeholder="attrs.searchPlaceholder"
+        clearable
+        :prefix-icon="Icons.Search"
+      />
+      <el-scrollbar v-if="Object.keys(iconsList).length">
+        <div class="icon-list">
+          <div
+            v-for="item in iconsList"
+            :key="item"
+            class="icon-item"
+            :class="{ 'icon-active': item.name == valueIcon }"
+            @click="selectIcon(item)"
+          >
+            <component :is="item"></component>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-empty :description="attrs.emptyDescription" v-else />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useAttrs } from "vue"
+import * as Icons from "@element-plus/icons-vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+defineOptions({
+  name: "TSelectIcon"
+})
+export interface TSelectIconProps {
+  modelValue: any
+  prefixIcon?: string
+  selectBind?: Record<string, any>
+  isShowSearch?: boolean
+  isShowIcon?: boolean
+}
+const props = withDefaults(defineProps<TSelectIconProps>(), {
+  modelValue: "",
+  prefixIcon: "Search",
+  selectBind: () => ({}),
+  isShowSearch: true,
+  isShowIcon: true
+})
+const { t } = useLocale()
+const emit = defineEmits(["update:modelValue", "select"])
+let valueIcon = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit("update:modelValue", val)
+  }
+})
+const $attrs: any = useAttrs()
+const attrs = computed(() => {
+  const selectBind = {
+    "prefix-icon": customIcons[props.prefixIcon],
+    placeholder: t("plus.selectIcon.placeholder"),
+    dialogTitle: t("plus.selectIcon.dialogTitle"),
+    searchPlaceholder: t("plus.selectIcon.searchPlaceholder"),
+    emptyDescription: t("plus.selectIcon.emptyDescription"),
+    clearable: true,
+    width: "50%",
+    ...props.selectBind
+  }
+  return { ...$attrs, ...selectBind }
+})
+// open Dialog
+const dialogVisible = ref(false)
+
+// 选择图标
+const selectIcon = (item: any) => {
+  dialogVisible.value = false
+  valueIcon.value = item.name
+  emit("update:modelValue", item.name)
+  emit("select", item.name)
+}
+
+// 清空图标
+const inputRef = ref()
+const clearIcon = () => {
+  valueIcon.value = ""
+  emit("update:modelValue", "")
+  setTimeout(() => inputRef.value.blur(), 0)
+}
+
+// 监听搜索框值
+const inputValue = ref("")
+const customIcons: { [key: string]: any } = Icons
+const iconsList = computed((): { [key: string]: any } => {
+  if (!inputValue.value) return Icons
+  let result: { [key: string]: any } = {}
+  for (const key in customIcons) {
+    if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)
+      result[key] = customIcons[key]
+  }
+  return result
+})
+defineExpose({ clearIcon })
+</script>

package/packages/components/select-icon/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-select-icon.css"

package/packages/components/select-icon/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/select-icon.scss"

package/packages/components/select-table/index.ts

@@ -0,0 +1,4 @@
+import SelectTable from "./src/index.vue"
+export * from "./src/type"
+export * from "./src/ClickOutside"
+export const TSelectTable = SelectTable

package/packages/components/select-table/src/ClickOutside.ts

@@ -0,0 +1,106 @@
+import { isClient } from "@vueuse/core"
+
+import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from "vue"
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler
+    bindingFn: (...args: unknown[]) => unknown
+  }[]
+>
+
+const nodeList: FlushList = new Map()
+
+let startClick: MouseEvent
+
+if (isClient) {
+  document.addEventListener("mousedown", (e: MouseEvent) => (startClick = e))
+  document.addEventListener("mouseup", (e: MouseEvent) => {
+    for (const handlers of nodeList.values()) {
+      for (const { documentHandler } of handlers) {
+        documentHandler(e as MouseEvent, startClick)
+      }
+    }
+  })
+}
+
+function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
+  let excludes: HTMLElement[] = []
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg
+  } else if ((binding.arg as unknown) instanceof HTMLElement) {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement)
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: HTMLElement
+      }>
+    ).popperRef
+    const mouseUpTarget = mouseup.target as Node
+    const mouseDownTarget = mousedown?.target as Node
+    const isBound = !binding || !binding.instance
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget)
+    const isSelf = el === mouseUpTarget
+
+    const isTargetExcluded =
+      (excludes.length && excludes.some(item => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement))
+    const isContainedByPopper =
+      popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget))
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return
+    }
+    binding.value(mouseup, mousedown)
+  }
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+    // there could be multiple handlers on the element
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    nodeList.get(el)!.push({
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value
+    })
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    if (!nodeList.has(el)) {
+      nodeList.set(el, [])
+    }
+
+    const handlers = nodeList.get(el)!
+    const oldHandlerIndex = handlers.findIndex(item => item.bindingFn === binding.oldValue)
+    const newHandler = {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value
+    }
+
+    if (oldHandlerIndex >= 0) {
+      // replace the old handler to the new handler
+      handlers.splice(oldHandlerIndex, 1, newHandler)
+    } else {
+      handlers.push(newHandler)
+    }
+  },
+  unmounted(el: HTMLElement) {
+    // remove all listeners when a component unmounted
+    nodeList.delete(el)
+  }
+}
+
+export default ClickOutside