adtec-core-package 0.4.0 → 0.4.2

package/src/components/Search/ElIconSearch.vue

@@ -1,239 +1,260 @@
-<!--创建人 丁盼-->
-<!--说明: ELIconSearch-->
-<!--创建时间: 2024/11/25 上午10:17-->
-<!--修改时间: 2024/11/25 上午10:17-->
-<template>
-  <el-popover
-    :popper-options="{
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: elementType === 'button' ? [0 - 15, 20] : [0 - 15, 12],
-          },
-        },
-      ],
-    }"
-    @hide="visible = false"
-    :popper-style="{ paddingTop: 0 }"
-    ref="popoverRef"
-    :virtual-ref="buttonRef"
-    placement="right-end"
-    :width="width"
-    trigger="click"
-    :teleported="false"
-    :visible="visible"
-  >
-    <template #reference>
-      <el-tooltip :content="tip" placement="top" style="cursor: pointer">
-        <el-button v-if="elementType === 'button'" style="padding: 8px 10px; margin-left: 4px">
-          <el-icon
-            ref="buttonRef"
-            :model-value="iconName"
-            :style="style"
-            :tip="tip"
-            @click="iconClick"
-            :class="getClass"
-          >
-            <svg v-if="selcomp" aria-hidden="true">
-              <use :href="'#' + iconName"></use>
-            </svg>
-            <component v-else :is="iconName"></component>
-          </el-icon>
-        </el-button>
-        <el-icon
-          ref="buttonRef"
-          v-else
-          :model-value="iconName"
-          :style="style"
-          :tip="tip"
-          @click="iconClick"
-          class="icon-btn"
-          :class="getClass"
-        >
-          <svg v-if="selcomp" class="icon" aria-hidden="true">
-            <use :href="'#' + iconName"></use>
-          </svg>
-          <component v-else :is="iconName"></component>
-        </el-icon>
-      </el-tooltip>
-    </template>
-    <el-flex :vertical="true" @keypress="keypress">
-      <el-flex
-        height="45px"
-        style="border-bottom: var(--border); margin-bottom: 10px"
-        align="center"
-      >
-        <el-flex>
-          <el-text style="font-size: 16px">{{ title }}</el-text>
-        </el-flex>
-        <el-flex align="center" justify="flex-end">
-          <el-icons
-            model-value="Close"
-            style="font-size: 16px; cursor: pointer"
-            @click="visible = false"
-          ></el-icons>
-        </el-flex>
-      </el-flex>
-      <slot></slot>
-      <el-flex
-        align="flex-end"
-        justify="flex-end"
-        height="40px"
-        style="border-top: var(--border)"
-      >
-        <el-button @click="reset">重置</el-button>
-        <el-button type="primary" @click="search">查询</el-button>
-      </el-flex>
-    </el-flex>
-  </el-popover>
-</template>
-<script setup lang="ts">
-// 定义Props类型
-import { useVModel } from '@vueuse/core'
-import { computed, ref, unref } from 'vue'
-import ElFlex from '../ElFlex/ElFlex.vue'
-import ElIcons from '../icon/ElIcons.vue'
-
-const iconClick = () => {
-  unref(popoverRef).popperRef?.delayHide?.()
-  visible.value = !visible.value
-}
-const keypress = (e: KeyboardEvent) => {
-  if (e.key === 'Enter') {
-    visible.value = false
-    emit('search')
-  }
-}
-const search = () => {
-  visible.value = false
-  emit('search')
-}
-const reset = () => {
-  emit('reset')
-}
-const visible = ref(false)
-const buttonRef = ref()
-const popoverRef = ref()
-const props = defineProps({
-  /**
-   * @type Object
-   * @default {}
-   * @description 样式对象
-   */
-  style: {
-    type: Object,
-    default: () => ({}),
-  },
-  /**
-   * @type string
-   * @default ''
-   * @description 提示文字
-   */
-  tip: {
-    type: String,
-    default: '高级筛选',
-  },
-  /**
-   * @type number
-   * @default 400
-   * @description 宽度
-   */
-  width: {
-    type: Number,
-    default: 350,
-  },
-  title: {
-    type: String,
-    default: '高级筛选',
-  },
-  modelValue: {
-    type: String,
-    default: 'adtec-filter',
-  },
-  /**
-   * @type {'small'|'default'|'large'}
-   * @default 'default'
-   * @description 图标大小
-   */
-  size: {
-    type: String,
-    default: 'default',
-    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
-    validator: (value: string) => ['large', 'default', 'small'].includes(value),
-  },
-  /**
-   * @type {"default" | "success" | "warning" | "info" | "primary" | "danger"}
-   * @default 'default'
-   * @description 图标类型
-   */
-  type: {
-    type: String,
-    default: 'default',
-    validator: (value: string) =>
-      ['default', 'success', 'warning', 'info', 'primary', 'danger'].includes(value),
-  },
-  /**
-   * @type {"icon" | "button"}
-   * @default 'icon'
-   * @description 元素类型
-   */
-  elementType: {
-    type: String,
-    default: 'icon',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const getClass = computed(() => {
-  let className = 'icon-btn--' + props.type
-  if (props.disabled) {
-    className += ' icon-btn--disabled'
-  }
-  className += ' icon-btn--size-' + props.size
-  return className
-})
-const emit = defineEmits(['update:modelValue', 'click', 'search', 'reset'])
-const iconName = useVModel(props, 'modelValue', emit)
-
-const selcomp = computed(() => {
-  if (iconName.value?.includes('adtec')) {
-    return true
-  } else {
-    return false
-  }
-})
-</script>
-<style scoped lang="scss">
-.icon-btn {
-  margin-right: 5px;
-  cursor: pointer;
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
-  &:hover {
-    color: var(--el-button-hover-bg-color);
-  }
-  &--disabled {
-    color: var(--el-color-disabled-text-color);
-    cursor: not-allowed !important;
-  }
-  &--size-large {
-    font-size: var(--el-font-size-large);
-  }
-  &--size-default {
-    font-size: var(--el-font-size-base);
-  }
-  &--size-small {
-    font-size: var(--el-font-size-small);
-  }
-  @each $type in (primary, success, warning, danger, info) {
-    &--#{$type} {
-      --el-button-hover-bg-color: var(--el-color-#{$type}-light-3);
-      --el-button-disabled-bg-color: var(--el-color-#{$type}-light-5);
-      color: var(--el-color-#{$type});
-    }
-  }
-}
-</style>
+<!--创建人 丁盼-->
+<!--说明: ELIconSearch-->
+<!--创建时间: 2024/11/25 上午10:17-->
+<!--修改时间: 2024/11/25 上午10:17-->
+<template>
+  <el-popover
+    :popper-options="{
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: elementType === 'button' ? [0 - 15, 20] : [0 - 15, 12],
+          },
+        },
+      ],
+    }"
+    @hide="visible = false"
+    :popper-style="{ paddingTop: 0 }"
+    ref="popoverRef"
+    :virtual-ref="buttonRef"
+    placement="right-end"
+    :width="width"
+    trigger="click"
+    :teleported="false"
+    :visible="visible"
+  >
+    <template #reference>
+      <el-tooltip :content="tip" placement="top" style="cursor: pointer">
+        <el-button v-if="elementType === 'button'" style="padding: 8px 10px; margin-left: 4px" @click="iconClick">
+          <el-icon
+            ref="buttonRef"
+            :model-value="iconName"
+            :style="style"
+            :tip="tip"
+
+            :class="getClass"
+          >
+            <svg v-if="selcomp" aria-hidden="true">
+              <use :href="'#' + iconName"></use>
+            </svg>
+            <component v-else :is="iconName"></component>
+          </el-icon>
+        </el-button>
+        <el-icon
+          ref="buttonRef"
+          v-else
+          :model-value="iconName"
+          :style="style"
+          :tip="tip"
+          @click="iconClick"
+          class="icon-btn"
+          :class="getClass"
+        >
+          <svg v-if="selcomp" class="icon" aria-hidden="true">
+            <use :href="'#' + iconName"></use>
+          </svg>
+          <component v-else :is="iconName"></component>
+        </el-icon>
+      </el-tooltip>
+    </template>
+    <el-flex :vertical="true" @keypress="keypress">
+      <el-flex
+        height="45px"
+        style="border-bottom: var(--border); margin-bottom: 10px"
+        align="center"
+      >
+        <el-flex>
+          <el-text style="font-size: 16px">{{ title }}</el-text>
+        </el-flex>
+        <el-flex align="center" justify="flex-end">
+          <el-icons
+            model-value="Close"
+            style="font-size: 16px; cursor: pointer"
+            @click="visible = false"
+          ></el-icons>
+        </el-flex>
+      </el-flex>
+      <slot></slot>
+      <el-flex align="flex-end" justify="flex-end" height="40px" style="border-top: var(--border)">
+        <el-button @click="reset">重置</el-button>
+        <el-button type="primary" @click="search">查询</el-button>
+      </el-flex>
+    </el-flex>
+  </el-popover>
+</template>
+<script setup lang="ts">
+// 定义Props类型
+import { useMousePressed, useVModel } from '@vueuse/core'
+import { computed, ref, unref, watch } from 'vue'
+const { pressed } = useMousePressed()
+const iconClick = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+  visible.value = !visible.value
+}
+watch(pressed, () => {
+  if (pressed.value) {
+    //@ts-ignore
+    if (!hasParentWithStyle(event.target, 'el-popper')) {
+      visible.value = false
+    }
+  }
+})
+function hasParentWithStyle(element: any, styleSelector: string) {
+  let currentElement = element.parentNode
+  let i = 0
+  while (currentElement && i < 15) {
+    if (currentElement?.tagName !== 'BODY') {
+      if (currentElement.className?.indexOf(styleSelector) > -1) {
+        return true
+      }
+      currentElement = currentElement.parentNode
+      i++
+    } else {
+      return false
+    }
+  }
+  return false
+}
+const keypress = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    visible.value = false
+    setTimeout(() => {
+      emit('search')
+    }, 200)
+  }
+}
+const search = () => {
+  visible.value = false
+  setTimeout(() => {
+    emit('search')
+  }, 200)
+}
+const reset = () => {
+  emit('reset')
+}
+const visible = ref(false)
+const buttonRef = ref()
+const popoverRef = ref()
+const props = defineProps({
+  /**
+   * @type Object
+   * @default {}
+   * @description 样式对象
+   */
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * @type string
+   * @default ''
+   * @description 提示文字
+   */
+  tip: {
+    type: String,
+    default: '高级筛选',
+  },
+  /**
+   * @type number
+   * @default 400
+   * @description 宽度
+   */
+  width: {
+    type: Number,
+    default: 350,
+  },
+  title: {
+    type: String,
+    default: '高级筛选',
+  },
+  modelValue: {
+    type: String,
+    default: 'adtec-filter',
+  },
+  /**
+   * @type {'small'|'default'|'large'}
+   * @default 'default'
+   * @description 图标大小
+   */
+  size: {
+    type: String,
+    default: 'default',
+    // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
+    validator: (value: string) => ['large', 'default', 'small'].includes(value),
+  },
+  /**
+   * @type {"default" | "success" | "warning" | "info" | "primary" | "danger"}
+   * @default 'default'
+   * @description 图标类型
+   */
+  type: {
+    type: String,
+    default: 'default',
+    validator: (value: string) =>
+      ['default', 'success', 'warning', 'info', 'primary', 'danger'].includes(value),
+  },
+  /**
+   * @type {"icon" | "button"}
+   * @default 'icon'
+   * @description 元素类型
+   */
+  elementType: {
+    type: String,
+    default: 'icon',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const getClass = computed(() => {
+  let className = 'icon-btn--' + props.type
+  if (props.disabled) {
+    className += ' icon-btn--disabled'
+  }
+  className += ' icon-btn--size-' + props.size
+  return className
+})
+const emit = defineEmits(['update:modelValue', 'click', 'search', 'reset'])
+const iconName = useVModel(props, 'modelValue', emit)
+
+const selcomp = computed(() => {
+  if (iconName.value?.includes('adtec')) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+<style scoped lang="scss">
+.icon-btn {
+  margin-right: 5px;
+  cursor: pointer;
+  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  &:hover {
+    color: var(--el-button-hover-bg-color);
+  }
+  &--disabled {
+    color: var(--el-color-disabled-text-color);
+    cursor: not-allowed !important;
+  }
+  &--size-large {
+    font-size: var(--el-font-size-large);
+  }
+  &--size-default {
+    font-size: var(--el-font-size-base);
+  }
+  &--size-small {
+    font-size: var(--el-font-size-small);
+  }
+  @each $type in (primary, success, warning, danger, info) {
+    &--#{$type} {
+      --el-button-hover-bg-color: var(--el-color-#{$type}-light-3);
+      --el-button-disabled-bg-color: var(--el-color-#{$type}-light-5);
+      color: var(--el-color-#{$type});
+    }
+  }
+}
+</style>