gi-component 0.0.20 → 0.0.22

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.
package/README.md CHANGED
@@ -35,8 +35,6 @@ pnpm install gi-component
35
35
  pnpm whoami
36
36
 
37
37
  npm login
38
- #或
39
- npm login --registry=https://nexusx.cyberwing.cn/repository/judp-npm-test/
40
38
 
41
39
  npm version patch
42
40
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "gi-component",
3
3
  "type": "module",
4
- "version": "0.0.20",
4
+ "version": "0.0.22",
5
5
  "description": "Vue3中基于Element Plus二次封装基础组件库",
6
6
  "author": "lin",
7
7
  "license": "MIT",
@@ -10,7 +10,7 @@ import { useBemClass } from '../../../hooks'
10
10
 
11
11
  const props = withDefaults(defineProps<DotProps>(), {
12
12
  type: 'circle',
13
- size: 7,
13
+ size: 6,
14
14
  color: 'primary'
15
15
  })
16
16
 
@@ -94,7 +94,6 @@ import {
94
94
  watch
95
95
  } from 'vue'
96
96
  import { useBemClass } from '../../../hooks'
97
- import GiCard from '../../card'
98
97
  import { Grid, GridItem } from '../../grid'
99
98
  import InputSearch from '../../input-search'
100
99
 
@@ -338,14 +337,16 @@ function updateModelValue(value: any, item: FormColumnItem) {
338
337
  )
339
338
  }
340
339
 
341
- watch(
342
- () => props.modelValue,
343
- () => {
344
- // eslint-disable-next-line no-console
345
- console.log('form', toRaw(props.modelValue))
346
- },
347
- { deep: true }
348
- )
340
+ if (import.meta.env.DEV) {
341
+ watch(
342
+ () => props.modelValue,
343
+ () => {
344
+ // eslint-disable-next-line no-console
345
+ console.log('form', toRaw(props.modelValue))
346
+ },
347
+ { deep: true }
348
+ )
349
+ }
349
350
 
350
351
  defineExpose({ formRef })
351
352
  </script>
@@ -57,7 +57,7 @@ export interface FormColumnItem<F = any> {
57
57
  labelRender?: () => VNode
58
58
  field: string
59
59
  fieldName?: string
60
- span?: number
60
+ span?: number | GridItemProps['span']
61
61
  props?: FormColumnProps
62
62
  formItemProps?: El.FormItemProps
63
63
  gridItemProps?: any
@@ -59,7 +59,6 @@ import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
59
59
  import { ElButton, ElCheckbox, ElCheckboxGroup, ElEmpty, ElIcon, ElScrollbar, ElSpace, ElTree } from 'element-plus'
60
60
  import { computed, onMounted, reactive, ref } from 'vue'
61
61
  import pkg from 'xe-utils'
62
- import { filterTree } from './utils'
63
62
 
64
63
  // 右边的列表keys
65
64
  const selectedKeys = defineModel('selectedKeys', { type: Array as PropType<string[]>, default: () => [] })
@@ -168,7 +167,6 @@ const leftTreeData = computed(() => {
168
167
  })
169
168
 
170
169
  const handleCheck = (data: any, obj: any) => {
171
- console.log(data, obj)
172
170
  leftObj.checkedKeys = obj.checkedNodes.filter((i: any) => i?.children === undefined).map((j: any) => j[nodeKey.value])
173
171
  leftObj.options = obj.checkedNodes.filter((i: any) => i?.children === undefined).map((j: any) => ({ label: j.label, value: j[nodeKey.value] }))
174
172
  // leftObj.checkedKeys = obj.checkedNodes.map((i: any) => i[nodeKey.value])
@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue'
3
3
 
4
4
  interface Options<T, U> {
5
5
  onSuccess?: () => void
6
+ onError?: (error: Error) => void
6
7
  immediate?: boolean
7
8
  rowKey?: keyof T
8
9
  }
@@ -26,7 +27,7 @@ export interface UseTableApi<T> {
26
27
  }
27
28
 
28
29
  export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Options<T, U>) {
29
- const { onSuccess, immediate = true, rowKey = 'id' } = options || {}
30
+ const { onSuccess, onError, immediate = true, rowKey = 'id' } = options || {}
30
31
 
31
32
  // const instance = getCurrentInstance();
32
33
  // const globalConfig = instance?.appContext.config.globalProperties?.$config || {};
@@ -63,6 +64,8 @@ export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Optio
63
64
  const total = !Array.isArray(res.data) ? res.data.total : data.length
64
65
  setTotal(total)
65
66
  onSuccess?.()
67
+ } catch (error) {
68
+ onError?.(error as Error)
66
69
  } finally {
67
70
  loading.value = false
68
71
  }
package/packages/index.ts CHANGED
@@ -70,13 +70,20 @@ function capitalizeWord(word: string) {
70
70
  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
71
71
  }
72
72
 
73
+ // 定义字典数据类型
74
+ export interface DictItem {
75
+ label: string
76
+ value: string | number
77
+ [key: string]: any // 允许扩展其他属性
78
+ }
79
+
73
80
  // 全局默认配置
74
81
  export interface Config {
75
82
  prefix?: string // 组件前缀
76
83
  /** 输入框是否可清除 */
77
84
  clearable?: boolean
78
85
  /** 字典请求方法 */
79
- dictRequest?: () => Promise<any>
86
+ dictRequest?: (code: string) => Promise<DictItem[]>
80
87
  /** 格式化响应数据, 用于useTable */
81
88
  // formatResponse?: (data: any) => any;
82
89
  }
@@ -0,0 +1,82 @@
1
+ @use './var.scss' as a;
2
+
3
+ .el-dialog {
4
+ padding: 0 !important;
5
+
6
+ &.is-fullscreen {
7
+ overflow: hidden;
8
+ display: inline-flex;
9
+ flex-direction: column;
10
+
11
+ .el-dialog__body {
12
+ flex: 1;
13
+ overflow-y: auto;
14
+ }
15
+ }
16
+
17
+ .el-dialog__header {
18
+ height: 48px;
19
+ padding-left: var(--el-dialog-padding-primary);
20
+ padding-bottom: 0;
21
+ display: flex;
22
+ align-items: center;
23
+ border-bottom: 1px solid var(--el-border-color);
24
+
25
+ .el-dialog__headerbtn {
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ }
30
+ }
31
+
32
+ .el-dialog__body {
33
+ padding: var(--el-dialog-padding-primary);
34
+ }
35
+
36
+ .el-dialog__footer {
37
+ padding: 12px var(--el-dialog-padding-primary);
38
+ border-top: 1px solid var(--el-border-color);
39
+ }
40
+ }
41
+
42
+ .el-dialog.#{a.$prefix}-dialog--simple {
43
+ .el-dialog__header {
44
+ border-bottom: none;
45
+ }
46
+
47
+ .el-dialog__body {
48
+ padding-top: 0;
49
+ padding-bottom: 0;
50
+ }
51
+
52
+ .el-dialog__footer {
53
+ border-top: none;
54
+ }
55
+ }
56
+
57
+ .el-drawer[role=dialog] {
58
+ --el-drawer-padding-primary: 16px;
59
+ }
60
+
61
+ .el-drawer {
62
+ .el-drawer__header {
63
+ height: 48px;
64
+ margin-bottom: 0;
65
+ padding-top: 0;
66
+ border-bottom: 1px solid var(--el-border-color);
67
+ display: flex;
68
+ justify-content: space-between;
69
+ align-items: center;
70
+ box-sizing: border-box;
71
+ }
72
+
73
+ .el-drawer__body {
74
+ font-size: 14px;
75
+ }
76
+
77
+ .el-drawer__footer {
78
+ padding-top: 12px;
79
+ padding-bottom: 12px;
80
+ border-top: 1px solid var(--el-border-color);
81
+ }
82
+ }
@@ -1,4 +1,5 @@
1
1
  @use './var.scss' as a;
2
+ @use './el.scss';
2
3
 
3
4
  body {
4
5
  --padding: 14px;
@@ -9,21 +10,6 @@ body {
9
10
  --padding-y-small: 8px;
10
11
  }
11
12
 
12
- .el-table__body-wrapper tr td.el-table-fixed-column--left,
13
- .el-table__body-wrapper tr td.el-table-fixed-column--right,
14
- .el-table__body-wrapper tr th.el-table-fixed-column--left,
15
- .el-table__body-wrapper tr th.el-table-fixed-column--right,
16
- .el-table__footer-wrapper tr td.el-table-fixed-column--left,
17
- .el-table__footer-wrapper tr td.el-table-fixed-column--right,
18
- .el-table__footer-wrapper tr th.el-table-fixed-column--left,
19
- .el-table__footer-wrapper tr th.el-table-fixed-column--right,
20
- .el-table__header-wrapper tr td.el-table-fixed-column--left,
21
- .el-table__header-wrapper tr td.el-table-fixed-column--right,
22
- .el-table__header-wrapper tr th.el-table-fixed-column--left,
23
- .el-table__header-wrapper tr th.el-table-fixed-column--right {
24
- background: var(--el-bg-color);
25
- }
26
-
27
13
  .gi-table .el-table {
28
14
  --el-table-header-bg-color: var(--el-fill-color-lighter);
29
15
  }
@@ -156,77 +142,6 @@ body {
156
142
  padding: 0 !important;
157
143
  }
158
144
 
159
- .el-dialog {
160
- padding: 0 !important;
161
-
162
- &.is-fullscreen {
163
- overflow: hidden;
164
- display: inline-flex;
165
- flex-direction: column;
166
-
167
- .el-dialog__body {
168
- flex: 1;
169
- overflow-y: auto;
170
- }
171
- }
172
-
173
- .el-dialog__header {
174
- height: 48px;
175
- padding-left: var(--el-dialog-padding-primary);
176
- padding-bottom: 0;
177
- display: flex;
178
- align-items: center;
179
- border-bottom: 1px solid var(--el-border-color);
180
- }
181
-
182
- .el-dialog__body {
183
- padding: var(--el-dialog-padding-primary);
184
- }
185
-
186
- .el-dialog__footer {
187
- padding: 12px var(--el-dialog-padding-primary);
188
- border-top: 1px solid var(--el-border-color);
189
- }
190
- }
191
-
192
- .el-dialog.#{a.$prefix}-dialog--simple {
193
- .el-dialog__header {
194
- border-bottom: none;
195
- }
196
-
197
- .el-dialog__body {
198
- padding-top: 0;
199
- padding-bottom: 0;
200
- }
201
-
202
- .el-dialog__footer {
203
- border-top: none;
204
- }
205
- }
206
-
207
- .el-drawer[role=dialog] {
208
- --el-drawer-padding-primary: 16px;
209
- }
210
-
211
- .el-drawer {
212
- .el-drawer__header {
213
- height: 48px;
214
- margin-bottom: 0;
215
- padding-top: 0;
216
- border-bottom: 1px solid var(--el-border-color);
217
- display: flex;
218
- justify-content: space-between;
219
- align-items: center;
220
- box-sizing: border-box;
221
- }
222
-
223
- .el-drawer__body {
224
- font-size: 14px;
225
- }
226
-
227
- .el-drawer__footer {
228
- padding-top: 12px;
229
- padding-bottom: 12px;
230
- border-top: 1px solid var(--el-border-color);
231
- }
145
+ .gi-flex-column {
146
+ flex-direction: column;
232
147
  }
@@ -0,0 +1,7 @@
1
+ import type { Config } from '../index'
2
+
3
+ declare module '@vue/runtime-core' {
4
+ interface ComponentCustomProperties {
5
+ $config?: Config
6
+ }
7
+ }