@peng_kai/kit 0.2.0-beta.25 → 0.2.0-beta.27

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.
@@ -1,153 +1,153 @@
1
- <script lang="ts" setup>
2
- import { computed, ref } from 'vue';
3
- import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
4
-
5
- defineOptions({
6
- inheritAttrs: false,
7
- });
8
-
9
- const props = withDefaults(defineProps<{
10
- loading?: boolean
11
- filterQuery?: any
12
- filterParams?: any
13
- filterForm?: any
14
- }>(), {
15
- loading: undefined,
16
- });
17
- const emits = defineEmits<{
18
- (e: 'filter'): void
19
- (e: 'reset', value: number): void
20
- }>();
21
-
22
- const filterVisible = ref(false);
23
- const loading = computed(() => {
24
- const _loading1 = props.loading;
25
- const _loading2: boolean = props.filterQuery?.isFetching.value;
26
-
27
- if (_loading1 === undefined && _loading2 === undefined)
28
- return false;
29
-
30
- if (_loading1 !== undefined)
31
- return _loading1;
32
-
33
- return _loading2;
34
- });
35
-
36
- function filter() {
37
- props.filterParams?.update?.();
38
- emits('filter');
39
- filterVisible.value = false;
40
- }
41
-
42
- function reset() {
43
- props.filterForm?.$form.resetFields?.();
44
- props.filterParams?.update?.();
45
- emits('reset', 1);
46
- filterVisible.value = false;
47
- }
48
- </script>
49
-
50
- <template>
51
- <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
52
- <!-- .filter-params 为空时显示 .filter-params-tips -->
53
-
54
- <div class="m--3 p-3" @click="filterVisible = true">
55
- <div class="filter-params">
56
- <slot name="params" />
57
- </div>
58
- <div class="filter-params-tips">
59
- 条件筛选,点击打开
60
- </div>
61
- </div>
62
-
63
- <!-- 操作区 -->
64
- <div v-if="$slots.actions || $slots.moreActions" class="actions">
65
- <slot name="actions" />
66
-
67
- <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
68
- <AButton type="link" size="small">
69
- 更多
70
- </AButton>
71
- <template #overlay>
72
- <slot name="moreActions" />
73
- </template>
74
- </ADropdown>
75
- </div>
76
- </div>
77
-
78
- <ADrawer
79
- v-model:open="filterVisible" class="filter-drawer" placement="bottom"
80
- height="50vh"
81
- >
82
- <template #extra>
83
- <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
84
- 重置
85
- </AButton>
86
- <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
87
- 筛选
88
- </AButton>
89
- </template>
90
- <template #default>
91
- <slot />
92
- </template>
93
- </ADrawer>
94
- </template>
95
-
96
- <style scoped lang="scss">
97
- .filter-params {
98
- display: flex;
99
- flex-wrap: wrap;
100
- justify-content: flex-start;
101
- gap: 5px 15px;
102
- }
103
-
104
- // .filter-params 为空时显示 .filter-params-tips
105
- .filter-params-tips {
106
- display: none;
107
- color: theme('colors.gray.DEFAULT');
108
- }
109
-
110
- .filter-params:empty {
111
- display: none;
112
- }
113
-
114
- .filter-params:empty + .filter-params-tips {
115
- display: block;
116
- }
117
-
118
- .actions {
119
- display: flex;
120
- align-items: center;
121
- justify-content: flex-end;
122
- border-top: 1px solid var(--antd-colorBorderSecondary);
123
- margin-top: 0.75rem;
124
- padding-top: 0.75rem;
125
- }
126
- </style>
127
-
128
- <style lang="scss">
129
- .filter-drawer {
130
- .ant-drawer-header {
131
- padding: 16px;
132
-
133
- .ant-drawer-close {
134
- --expand: 5px;
135
-
136
- padding: var(--expand);
137
- margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
138
- }
139
- }
140
-
141
- .ant-drawer-body {
142
- padding: 16px;
143
- }
144
-
145
- .ant-form-item {
146
- margin-bottom: 0;
147
-
148
- .ant-form-item-label {
149
- padding-bottom: 0;
150
- }
151
- }
152
- }
153
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed, ref } from 'vue';
3
+ import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
4
+
5
+ defineOptions({
6
+ inheritAttrs: false,
7
+ });
8
+
9
+ const props = withDefaults(defineProps<{
10
+ loading?: boolean
11
+ filterQuery?: any
12
+ filterParams?: any
13
+ filterForm?: any
14
+ }>(), {
15
+ loading: undefined,
16
+ });
17
+ const emits = defineEmits<{
18
+ (e: 'filter'): void
19
+ (e: 'reset', value: number): void
20
+ }>();
21
+
22
+ const filterVisible = ref(false);
23
+ const loading = computed(() => {
24
+ const _loading1 = props.loading;
25
+ const _loading2: boolean = props.filterQuery?.isFetching.value;
26
+
27
+ if (_loading1 === undefined && _loading2 === undefined)
28
+ return false;
29
+
30
+ if (_loading1 !== undefined)
31
+ return _loading1;
32
+
33
+ return _loading2;
34
+ });
35
+
36
+ function filter() {
37
+ props.filterParams?.update?.();
38
+ emits('filter');
39
+ filterVisible.value = false;
40
+ }
41
+
42
+ function reset() {
43
+ props.filterForm?.$form.resetFields?.();
44
+ props.filterParams?.update?.();
45
+ emits('reset', 1);
46
+ filterVisible.value = false;
47
+ }
48
+ </script>
49
+
50
+ <template>
51
+ <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
52
+ <!-- .filter-params 为空时显示 .filter-params-tips -->
53
+
54
+ <div class="m--3 p-3" @click="filterVisible = true">
55
+ <div class="filter-params">
56
+ <slot name="params" />
57
+ </div>
58
+ <div class="filter-params-tips">
59
+ 条件筛选,点击打开
60
+ </div>
61
+ </div>
62
+
63
+ <!-- 操作区 -->
64
+ <div v-if="$slots.actions || $slots.moreActions" class="actions">
65
+ <slot name="actions" />
66
+
67
+ <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
68
+ <AButton type="link" size="small">
69
+ 更多
70
+ </AButton>
71
+ <template #overlay>
72
+ <slot name="moreActions" />
73
+ </template>
74
+ </ADropdown>
75
+ </div>
76
+ </div>
77
+
78
+ <ADrawer
79
+ v-model:open="filterVisible" class="filter-drawer" placement="bottom"
80
+ height="50vh"
81
+ >
82
+ <template #extra>
83
+ <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
84
+ 重置
85
+ </AButton>
86
+ <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
87
+ 筛选
88
+ </AButton>
89
+ </template>
90
+ <template #default>
91
+ <slot />
92
+ </template>
93
+ </ADrawer>
94
+ </template>
95
+
96
+ <style scoped lang="scss">
97
+ .filter-params {
98
+ display: flex;
99
+ flex-wrap: wrap;
100
+ justify-content: flex-start;
101
+ gap: 5px 15px;
102
+ }
103
+
104
+ // .filter-params 为空时显示 .filter-params-tips
105
+ .filter-params-tips {
106
+ display: none;
107
+ color: theme('colors.gray.DEFAULT');
108
+ }
109
+
110
+ .filter-params:empty {
111
+ display: none;
112
+ }
113
+
114
+ .filter-params:empty + .filter-params-tips {
115
+ display: block;
116
+ }
117
+
118
+ .actions {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: flex-end;
122
+ border-top: 1px solid var(--antd-colorBorderSecondary);
123
+ margin-top: 0.75rem;
124
+ padding-top: 0.75rem;
125
+ }
126
+ </style>
127
+
128
+ <style lang="scss">
129
+ .filter-drawer {
130
+ .ant-drawer-header {
131
+ padding: 16px;
132
+
133
+ .ant-drawer-close {
134
+ --expand: 5px;
135
+
136
+ padding: var(--expand);
137
+ margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
138
+ }
139
+ }
140
+
141
+ .ant-drawer-body {
142
+ padding: 16px;
143
+ }
144
+
145
+ .ant-form-item {
146
+ margin-bottom: 0;
147
+
148
+ .ant-form-item-label {
149
+ padding-bottom: 0;
150
+ }
151
+ }
152
+ }
153
+ </style>
@@ -41,21 +41,24 @@ function reset() {
41
41
  </script>
42
42
 
43
43
  <template>
44
- <div class="flex-none flex w-min ml-auto">
45
- <AButton class="filter-btn mr2" type="primary" htmlType="submit" :loading="loading" @click="filter()">
46
- 查询
47
- </AButton>
48
- <AButton :disabled="loading" @click="reset()">
49
- 重置
50
- </AButton>
44
+ <div class="btns flex-none flex w-min ml-auto gap-2">
45
+ <slot :loading="loading" :filter="filter" :reset="reset">
46
+ <AButton class="filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
47
+ 查询
48
+ </AButton>
49
+ <AButton :disabled="loading" @click="reset()">
50
+ 重置
51
+ </AButton>
52
+ </slot>
51
53
  </div>
52
54
  </template>
53
55
 
54
56
  <style scoped lang="scss">
55
- .filter-btn {
57
+ .filter-btn,
58
+ :slotted(.filter-btn) {
56
59
  position: relative;
57
60
 
58
- :deep(.ant-btn-loading-icon) {
61
+ .ant-btn-loading-icon{
59
62
  position: absolute;
60
63
  left: 50%;
61
64
  transform: translateX(-50%);
@@ -1 +1 @@
1
- export { default as ScrollNav } from './src/ScrollNav.vue';
1
+ export { default as ScrollNav } from './src/ScrollNav.vue';
@@ -1,59 +1,59 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue';
3
- import { useElementSize } from '@vueuse/core';
4
-
5
- const props = defineProps<{
6
- selector: string
7
- }>();
8
-
9
- const $content = document.querySelector(props.selector) as HTMLElement;
10
- const $contentParent = $content.parentElement;
11
- const { height: contentParentH } = useElementSize($contentParent);
12
- const { height: contentH } = useElementSize($content);
13
- const visible = computed(() => contentParentH.value * 2 < contentH.value);
14
-
15
- function scrollTo(top: number) {
16
- $contentParent?.scrollTo({ top });
17
- }
18
- </script>
19
-
20
- <template>
21
- <div v-if="visible" class="wrapper">
22
- <div class="btn" @click="scrollTo(0)">
23
- <i class="i-fluent:arrow-previous-24-filled rotate-90" />
24
- </div>
25
- <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
26
- <i class="i-fluent:arrow-previous-24-filled rotate-270" />
27
- </div>
28
- <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
29
- <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
30
- </div> -->
31
- </div>
32
- </template>
33
-
34
- <style lang="scss" scoped>
35
- .wrapper {
36
- font-size: 18px;
37
- }
38
-
39
- .btn {
40
- display: flex;
41
- width: 2em;
42
- height: 2em;
43
- align-items: center;
44
- justify-content: center;
45
- border-radius: 2px;
46
- background: #bcbcbc;
47
- color: #000;
48
- cursor: pointer;
49
- opacity: 0.5;
50
-
51
- &:active {
52
- transform: scale(0.9);
53
- }
54
-
55
- & + & {
56
- margin-top: 1px;
57
- }
58
- }
59
- </style>
1
+ <script setup lang="ts">
2
+ import { computed } from 'vue';
3
+ import { useElementSize } from '@vueuse/core';
4
+
5
+ const props = defineProps<{
6
+ selector: string
7
+ }>();
8
+
9
+ const $content = document.querySelector(props.selector) as HTMLElement;
10
+ const $contentParent = $content.parentElement;
11
+ const { height: contentParentH } = useElementSize($contentParent);
12
+ const { height: contentH } = useElementSize($content);
13
+ const visible = computed(() => contentParentH.value * 2 < contentH.value);
14
+
15
+ function scrollTo(top: number) {
16
+ $contentParent?.scrollTo({ top });
17
+ }
18
+ </script>
19
+
20
+ <template>
21
+ <div v-if="visible" class="wrapper">
22
+ <div class="btn" @click="scrollTo(0)">
23
+ <i class="i-fluent:arrow-previous-24-filled rotate-90" />
24
+ </div>
25
+ <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
26
+ <i class="i-fluent:arrow-previous-24-filled rotate-270" />
27
+ </div>
28
+ <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
29
+ <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
30
+ </div> -->
31
+ </div>
32
+ </template>
33
+
34
+ <style lang="scss" scoped>
35
+ .wrapper {
36
+ font-size: 18px;
37
+ }
38
+
39
+ .btn {
40
+ display: flex;
41
+ width: 2em;
42
+ height: 2em;
43
+ align-items: center;
44
+ justify-content: center;
45
+ border-radius: 2px;
46
+ background: #bcbcbc;
47
+ color: #000;
48
+ cursor: pointer;
49
+ opacity: 0.5;
50
+
51
+ &:active {
52
+ transform: scale(0.9);
53
+ }
54
+
55
+ & + & {
56
+ margin-top: 1px;
57
+ }
58
+ }
59
+ </style>
@@ -0,0 +1 @@
1
+ export { default as Settings } from './src/Settings.vue';