adtec-core-package 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/Search/ElIconSearch.vue +266 -263
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adtec-core-package",
3
- "version": "0.5.3",
3
+ "version": "0.5.4",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "scripts": {
package/src/components/Search/ElIconSearch.vue CHANGED
@@ -1,263 +1,266 @@
1
- <!--创建人 丁盼-->
2
- <!--说明: ELIconSearch-->
3
- <!--创建时间: 2024/11/25 上午10:17-->
4
- <!--修改时间: 2024/11/25 上午10:17-->
5
- <template>
6
- <el-popover
7
- :popper-options="{
8
- modifiers: [
9
- {
10
- name: 'offset',
11
- options: {
12
- offset: elementType === 'button' ? [0 - 15, 20] : [0 - 15, 12],
13
- },
14
- },
15
- ],
16
- }"
17
- @hide="visible = false"
18
- :popper-style="{ paddingTop: 0 }"
19
- ref="popoverRef"
20
- :virtual-ref="buttonRef"
21
- placement="right-end"
22
- :width="width"
23
- trigger="click"
24
- :teleported="false"
25
- :visible="visible"
26
- >
27
- <template #reference>
28
- <el-tooltip :content="tip" placement="top" style="cursor: pointer">
29
- <el-button v-if="elementType === 'button'" ref="buttonRef" style="padding: 8px 10px; margin-left: 4px">
30
- <el-icon
31
- :model-value="iconName"
32
- :style="style"
33
- :tip="tip"
34
- @click="iconClick"
35
- :class="getClass"
36
- >
37
- <svg v-if="selcomp" aria-hidden="true">
38
- <use :href="'#' + iconName"></use>
39
- </svg>
40
- <component v-else :is="iconName"></component>
41
- </el-icon>
42
- </el-button>
43
- <el-icon
44
- ref="buttonRef"
45
- v-else
46
- :model-value="iconName"
47
- :style="style"
48
- :tip="tip"
49
- @click="iconClick"
50
- class="icon-btn"
51
- :class="getClass"
52
- >
53
- <svg v-if="selcomp" class="icon" aria-hidden="true">
54
- <use :href="'#' + iconName"></use>
55
- </svg>
56
- <component v-else :is="iconName"></component>
57
- </el-icon>
58
- </el-tooltip>
59
- </template>
60
- <el-flex :vertical="true" @keypress="keypress">
61
- <el-flex
62
- height="45px"
63
- style="border-bottom: var(--border); margin-bottom: 10px"
64
- align="center"
65
- >
66
- <el-flex>
67
- <el-text style="font-size: 16px">{{ title }}</el-text>
68
- </el-flex>
69
- <el-flex align="center" justify="flex-end">
70
- <el-icons
71
- model-value="Close"
72
- style="font-size: 16px; cursor: pointer"
73
- @click="visible = false"
74
- ></el-icons>
75
- </el-flex>
76
- </el-flex>
77
- <slot></slot>
78
- <el-flex align="flex-end" justify="flex-end" height="40px" style="border-top: var(--border)">
79
- <el-button @click="reset">重置</el-button>
80
- <el-button type="primary" @click="search">查询</el-button>
81
- </el-flex>
82
- </el-flex>
83
- </el-popover>
84
- </template>
85
- <script setup lang="ts">
86
- // 定义Props类型
87
- import { useMousePressed, useVModel } from '@vueuse/core'
88
- import { computed, ref, unref, watch } from 'vue'
89
- const { pressed } = useMousePressed()
90
- const iconClick = () => {
91
- unref(popoverRef).popperRef?.delayHide?.()
92
- visible.value = !visible.value
93
- }
94
- watch(pressed, () => {
95
- if (pressed.value) {
96
- //@ts-ignore
97
- //@ts-ignore
98
- const target= (event.target.shadowRoot && event.composed) ? (event.composedPath()[0] || event.target) : event.target
99
- if (!hasParentWithStyle(target, 'el-popper')) {
100
- visible.value = false
101
- }
102
- }
103
- })
104
- function hasParentWithStyle(element: any, styleSelector: string) {
105
- let currentElement = element.parentNode
106
- let i = 0
107
- while (currentElement && i < 15) {
108
- if (currentElement?.tagName !== 'BODY') {
109
- try {
110
- if (currentElement.className?.indexOf(styleSelector) > -1) {
111
- return true
112
- }
113
- }catch{}
114
- currentElement = currentElement.parentNode
115
- i++
116
- } else {
117
- return false
118
- }
119
- }
120
- return false
121
- }
122
- const keypress = (e: KeyboardEvent) => {
123
- if (e.key === 'Enter') {
124
- visible.value = false
125
- setTimeout(() => {
126
- emit('search')
127
- }, 200)
128
- }
129
- }
130
- const search = () => {
131
- visible.value = false
132
- setTimeout(() => {
133
- emit('search')
134
- }, 200)
135
- }
136
- const reset = () => {
137
- emit('reset')
138
- }
139
- const visible = ref(false)
140
- const buttonRef = ref()
141
- const popoverRef = ref()
142
- const props = defineProps({
143
- /**
144
- * @type Object
145
- * @default {}
146
- * @description 样式对象
147
- */
148
- style: {
149
- type: Object,
150
- default: () => ({}),
151
- },
152
- /**
153
- * @type string
154
- * @default ''
155
- * @description 提示文字
156
- */
157
- tip: {
158
- type: String,
159
- default: '高级筛选',
160
- },
161
- /**
162
- * @type number
163
- * @default 400
164
- * @description 宽度
165
- */
166
- width: {
167
- type: Number,
168
- default: 350,
169
- },
170
- title: {
171
- type: String,
172
- default: '高级筛选',
173
- },
174
- modelValue: {
175
- type: String,
176
- default: 'adtec-filter',
177
- },
178
- /**
179
- * @type {'small'|'default'|'large'}
180
- * @default 'default'
181
- * @description 图标大小
182
- */
183
- size: {
184
- type: String,
185
- default: 'default',
186
- // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
187
- validator: (value: string) => ['large', 'default', 'small'].includes(value),
188
- },
189
- /**
190
- * @type {"default" | "success" | "warning" | "info" | "primary" | "danger"}
191
- * @default 'default'
192
- * @description 图标类型
193
- */
194
- type: {
195
- type: String,
196
- default: 'default',
197
- validator: (value: string) =>
198
- ['default', 'success', 'warning', 'info', 'primary', 'danger'].includes(value),
199
- },
200
- /**
201
- * @type {"icon" | "button"}
202
- * @default 'icon'
203
- * @description 元素类型
204
- */
205
- elementType: {
206
- type: String,
207
- default: 'icon',
208
- },
209
- disabled: {
210
- type: Boolean,
211
- default: false,
212
- },
213
- })
214
-
215
- const getClass = computed(() => {
216
- let className = 'icon-btn--' + props.type
217
- if (props.disabled) {
218
- className += ' icon-btn--disabled'
219
- }
220
- className += ' icon-btn--size-' + props.size
221
- return className
222
- })
223
- const emit = defineEmits(['update:modelValue', 'click', 'search', 'reset'])
224
- const iconName = useVModel(props, 'modelValue', emit)
225
-
226
- const selcomp = computed(() => {
227
- if (iconName.value?.includes('adtec')) {
228
- return true
229
- } else {
230
- return false
231
- }
232
- })
233
- </script>
234
- <style scoped lang="scss">
235
- .icon-btn {
236
- margin-right: 5px;
237
- cursor: pointer;
238
- --el-button-hover-bg-color: var(--el-color-primary-light-3);
239
- &:hover {
240
- color: var(--el-button-hover-bg-color);
241
- }
242
- &--disabled {
243
- color: var(--el-color-disabled-text-color);
244
- cursor: not-allowed !important;
245
- }
246
- &--size-large {
247
- font-size: var(--el-font-size-large);
248
- }
249
- &--size-default {
250
- font-size: var(--el-font-size-base);
251
- }
252
- &--size-small {
253
- font-size: var(--el-font-size-small);
254
- }
255
- @each $type in (primary, success, warning, danger, info) {
256
- &--#{$type} {
257
- --el-button-hover-bg-color: var(--el-color-#{$type}-light-3);
258
- --el-button-disabled-bg-color: var(--el-color-#{$type}-light-5);
259
- color: var(--el-color-#{$type});
260
- }
261
- }
262
- }
263
- </style>
1
+ <!--创建人 丁盼-->
2
+ <!--说明: ELIconSearch-->
3
+ <!--创建时间: 2024/11/25 上午10:17-->
4
+ <!--修改时间: 2024/11/25 上午10:17-->
5
+ <template>
6
+ <el-popover
7
+ :popper-options="{
8
+ modifiers: [
9
+ {
10
+ name: 'offset',
11
+ options: {
12
+ offset: elementType === 'button' ? [0 - 15, 20] : [0 - 15, 12],
13
+ },
14
+ },
15
+ ],
16
+ }"
17
+ @hide="visible = false"
18
+ :popper-style="{ paddingTop: 0 }"
19
+ ref="popoverRef"
20
+ :virtual-ref="buttonRef"
21
+ placement="right-end"
22
+ :width="width"
23
+ trigger="click"
24
+ :teleported="false"
25
+ :visible="visible"
26
+ >
27
+ <template #reference>
28
+ <el-tooltip :content="tip" placement="top" style="cursor: pointer">
29
+ <el-button
30
+ v-if="elementType === 'button'"
31
+ @click="iconClick"
32
+ ref="buttonRef"
33
+ :style="style"
34
+ :tip="tip"
35
+ style="padding: 8px 10px; margin-left: 4px"
36
+ >
37
+ <el-icon :model-value="iconName" :class="getClass">
38
+ <svg v-if="selcomp" aria-hidden="true">
39
+ <use :href="'#' + iconName"></use>
40
+ </svg>
41
+ <component v-else :is="iconName"></component>
42
+ </el-icon>
43
+ </el-button>
44
+ <el-icon
45
+ ref="buttonRef"
46
+ v-else
47
+ :model-value="iconName"
48
+ :style="style"
49
+ :tip="tip"
50
+ @click="iconClick"
51
+ class="icon-btn"
52
+ :class="getClass"
53
+ >
54
+ <svg v-if="selcomp" class="icon" aria-hidden="true">
55
+ <use :href="'#' + iconName"></use>
56
+ </svg>
57
+ <component v-else :is="iconName"></component>
58
+ </el-icon>
59
+ </el-tooltip>
60
+ </template>
61
+ <el-flex :vertical="true" @keypress="keypress">
62
+ <el-flex
63
+ height="45px"
64
+ style="border-bottom: var(--border); margin-bottom: 10px"
65
+ align="center"
66
+ >
67
+ <el-flex>
68
+ <el-text style="font-size: 16px">{{ title }}</el-text>
69
+ </el-flex>
70
+ <el-flex align="center" justify="flex-end">
71
+ <el-icons
72
+ model-value="Close"
73
+ style="font-size: 16px; cursor: pointer"
74
+ @click="visible = false"
75
+ ></el-icons>
76
+ </el-flex>
77
+ </el-flex>
78
+ <slot></slot>
79
+ <el-flex align="flex-end" justify="flex-end" height="40px" style="border-top: var(--border)">
80
+ <el-button @click="reset">重置</el-button>
81
+ <el-button type="primary" @click="search">查询</el-button>
82
+ </el-flex>
83
+ </el-flex>
84
+ </el-popover>
85
+ </template>
86
+ <script setup lang="ts">
87
+ // 定义Props类型
88
+ import { useMousePressed, useVModel } from '@vueuse/core'
89
+ import { computed, ref, unref, watch } from 'vue'
90
+ const { pressed } = useMousePressed()
91
+ const iconClick = () => {
92
+ unref(popoverRef).popperRef?.delayHide?.()
93
+ visible.value = !visible.value
94
+ }
95
+ watch(pressed, () => {
96
+ if (pressed.value) {
97
+ //@ts-ignore
98
+ const target =
99
+ event.target.shadowRoot && event.composed
100
+ ? event.composedPath()[0] || event.target
101
+ : event.target
102
+ if (!hasParentWithStyle(target, 'el-popper')) {
103
+ visible.value = false
104
+ }
105
+ }
106
+ })
107
+ function hasParentWithStyle(element: any, styleSelector: string) {
108
+ let currentElement = element.parentNode
109
+ let i = 0
110
+ while (currentElement && i < 15) {
111
+ if (currentElement?.tagName !== 'BODY') {
112
+ try {
113
+ if (currentElement.className?.indexOf(styleSelector) > -1) {
114
+ return true
115
+ }
116
+ } catch {}
117
+ currentElement = currentElement.parentNode
118
+ i++
119
+ } else {
120
+ return false
121
+ }
122
+ }
123
+ return false
124
+ }
125
+ const keypress = (e: KeyboardEvent) => {
126
+ if (e.key === 'Enter') {
127
+ visible.value = false
128
+ setTimeout(() => {
129
+ emit('search')
130
+ }, 200)
131
+ }
132
+ }
133
+ const search = () => {
134
+ visible.value = false
135
+ setTimeout(() => {
136
+ emit('search')
137
+ }, 200)
138
+ }
139
+ const reset = () => {
140
+ emit('reset')
141
+ }
142
+ const visible = ref(false)
143
+ const buttonRef = ref()
144
+ const popoverRef = ref()
145
+ const props = defineProps({
146
+ /**
147
+ * @type Object
148
+ * @default {}
149
+ * @description 样式对象
150
+ */
151
+ style: {
152
+ type: Object,
153
+ default: () => ({}),
154
+ },
155
+ /**
156
+ * @type string
157
+ * @default ''
158
+ * @description 提示文字
159
+ */
160
+ tip: {
161
+ type: String,
162
+ default: '高级筛选',
163
+ },
164
+ /**
165
+ * @type number
166
+ * @default 400
167
+ * @description 宽度
168
+ */
169
+ width: {
170
+ type: Number,
171
+ default: 350,
172
+ },
173
+ title: {
174
+ type: String,
175
+ default: '高级筛选',
176
+ },
177
+ modelValue: {
178
+ type: String,
179
+ default: 'adtec-filter',
180
+ },
181
+ /**
182
+ * @type {'small'|'default'|'large'}
183
+ * @default 'default'
184
+ * @description 图标大小
185
+ */
186
+ size: {
187
+ type: String,
188
+ default: 'default',
189
+ // 注意：在`<script setup>`中，直接使用函数进行验证，JSDoc辅助IDE提示
190
+ validator: (value: string) => ['large', 'default', 'small'].includes(value),
191
+ },
192
+ /**
193
+ * @type {"default" | "success" | "warning" | "info" | "primary" | "danger"}
194
+ * @default 'default'
195
+ * @description 图标类型
196
+ */
197
+ type: {
198
+ type: String,
199
+ default: 'default',
200
+ validator: (value: string) =>
201
+ ['default', 'success', 'warning', 'info', 'primary', 'danger'].includes(value),
202
+ },
203
+ /**
204
+ * @type {"icon" | "button"}
205
+ * @default 'icon'
206
+ * @description 元素类型
207
+ */
208
+ elementType: {
209
+ type: String,
210
+ default: 'icon',
211
+ },
212
+ disabled: {
213
+ type: Boolean,
214
+ default: false,
215
+ },
216
+ })
217
+
218
+ const getClass = computed(() => {
219
+ let className = 'icon-btn--' + props.type
220
+ if (props.disabled) {
221
+ className += ' icon-btn--disabled'
222
+ }
223
+ className += ' icon-btn--size-' + props.size
224
+ return className
225
+ })
226
+ const emit = defineEmits(['update:modelValue', 'click', 'search', 'reset'])
227
+ const iconName = useVModel(props, 'modelValue', emit)
228
+
229
+ const selcomp = computed(() => {
230
+ if (iconName.value?.includes('adtec')) {
231
+ return true
232
+ } else {
233
+ return false
234
+ }
235
+ })
236
+ </script>
237
+ <style scoped lang="scss">
238
+ .icon-btn {
239
+ margin-right: 5px;
240
+ cursor: pointer;
241
+ --el-button-hover-bg-color: var(--el-color-primary-light-3);
242
+ &:hover {
243
+ color: var(--el-button-hover-bg-color);
244
+ }
245
+ &--disabled {
246
+ color: var(--el-color-disabled-text-color);
247
+ cursor: not-allowed !important;
248
+ }
249
+ &--size-large {
250
+ font-size: var(--el-font-size-large);
251
+ }
252
+ &--size-default {
253
+ font-size: var(--el-font-size-base);
254
+ }
255
+ &--size-small {
256
+ font-size: var(--el-font-size-small);
257
+ }
258
+ @each $type in (primary, success, warning, danger, info) {
259
+ &--#{$type} {
260
+ --el-button-hover-bg-color: var(--el-color-#{$type}-light-3);
261
+ --el-button-disabled-bg-color: var(--el-color-#{$type}-light-5);
262
+ color: var(--el-color-#{$type});
263
+ }
264
+ }
265
+ }
266
+ </style>