qidian-vue-ui 2.6.2 → 2.7.0
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/dist/components/form/config.d.ts +1 -0
- package/dist/components/form/index.css +20 -20
- package/dist/components/form/index.vue.mjs +1 -1
- package/dist/components/form/index.vue2.mjs +11 -7
- package/dist/components/form/item.css +2 -2
- package/dist/components/form/item.vue.mjs +1 -1
- package/dist/components/form/item.vue2.mjs +18 -6
- package/dist/components/grid/config.d.ts +6 -0
- package/dist/components/grid/config.mjs +6 -0
- package/dist/components/grid/index.css +1 -1
- package/dist/components/grid/index.d.ts +3 -3
- package/dist/components/grid/index.vue.mjs +1 -1
- package/dist/components/grid/index.vue2.mjs +14 -2
- package/dist/components/grid/item.css +1 -1
- package/dist/components/grid/item.vue.mjs +1 -1
- package/dist/components/grid/item.vue2.mjs +30 -5
- package/dist/components/grid/types.d.ts +2 -1
- package/dist/components/grid/utils.d.ts +3 -2
- package/dist/components/grid/utils.mjs +11 -0
- package/dist/components/icon/index.vue.mjs +1 -1
- package/dist/components/office/pdf/index.vue.mjs +1 -1
- package/dist/components/office/pdf/index.vue2.mjs +1 -1
- package/dist/components/office/pdf/index2.css +21 -21
- package/dist/index.mjs +8 -2
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ export interface QdFormGridItemRegistryEntry {
|
|
|
4
4
|
gridIndex: ComputedRef<number | undefined>;
|
|
5
5
|
visible: ComputedRef<boolean>;
|
|
6
6
|
colSpan: ComputedRef<number>;
|
|
7
|
+
isFill: ComputedRef<boolean>;
|
|
7
8
|
}
|
|
8
9
|
export declare const PROVIDE_FORM_REGISTER_GRID_ITEM: InjectionKey<(entry: QdFormGridItemRegistryEntry) => void>;
|
|
9
10
|
export declare const PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE: InjectionKey<(item: QdFormBeforeSubmitQueueItem) => void>;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
.qd-form--small[data-v-
|
|
1
|
+
.qd-form--small[data-v-6a3db57f] {
|
|
2
2
|
font: var(--td-font-body-small);
|
|
3
3
|
}
|
|
4
|
-
.qd-form--small[data-v-
|
|
4
|
+
.qd-form--small[data-v-6a3db57f] .t-form__label--top {
|
|
5
5
|
min-height: var(--td-comp-margin-xxl);
|
|
6
6
|
line-height: var(--td-comp-margin-xxl);
|
|
7
7
|
}
|
|
8
|
-
.qd-form--small[data-v-
|
|
9
|
-
.qd-form--small[data-v-
|
|
8
|
+
.qd-form--small[data-v-6a3db57f] .t-form__controls,
|
|
9
|
+
.qd-form--small[data-v-6a3db57f] .t-form__controls-content {
|
|
10
10
|
min-height: var(--td-comp-margin-xxl);
|
|
11
11
|
}
|
|
12
|
-
.qd-form--descriptions[data-v-
|
|
12
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-grid {
|
|
13
13
|
border: 1px solid var(--td-component-border);
|
|
14
14
|
background-color: var(--td-component-border);
|
|
15
15
|
gap: 1px !important;
|
|
16
16
|
overflow: hidden;
|
|
17
17
|
}
|
|
18
|
-
.qd-form--descriptions[data-v-
|
|
18
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-grid-item {
|
|
19
19
|
background-color: var(--td-bg-color-container);
|
|
20
20
|
}
|
|
21
|
-
.qd-form--descriptions[data-v-
|
|
21
|
+
.qd-form--descriptions[data-v-6a3db57f] .t-form__item {
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: stretch;
|
|
24
24
|
height: 100%;
|
|
25
25
|
}
|
|
26
|
-
.qd-form--descriptions[data-v-
|
|
26
|
+
.qd-form--descriptions[data-v-6a3db57f] .t-form__label {
|
|
27
27
|
display: flex;
|
|
28
28
|
flex-direction: column;
|
|
29
29
|
justify-content: center;
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
height: 100%;
|
|
33
33
|
min-height: var(--td-comp-margin-xxl);
|
|
34
34
|
}
|
|
35
|
-
.qd-form--descriptions[data-v-
|
|
35
|
+
.qd-form--descriptions[data-v-6a3db57f] .t-form__label--top {
|
|
36
36
|
border-bottom: 1px solid var(--td-component-border);
|
|
37
37
|
align-items: center;
|
|
38
38
|
height: var(--qd-form-description-label-height, auto);
|
|
39
39
|
white-space: normal;
|
|
40
40
|
}
|
|
41
|
-
.qd-form--descriptions[data-v-
|
|
41
|
+
.qd-form--descriptions[data-v-6a3db57f] .t-form__label--top + .t-form__controls > .t-form__controls-content {
|
|
42
42
|
justify-content: center;
|
|
43
43
|
text-align: center;
|
|
44
44
|
}
|
|
45
|
-
.qd-form--descriptions[data-v-
|
|
45
|
+
.qd-form--descriptions[data-v-6a3db57f] .t-form__controls {
|
|
46
46
|
flex: 1 1 0;
|
|
47
47
|
overflow: hidden;
|
|
48
48
|
display: flex;
|
|
@@ -53,34 +53,34 @@
|
|
|
53
53
|
height: 100%;
|
|
54
54
|
min-height: var(--td-comp-margin-xxl);
|
|
55
55
|
}
|
|
56
|
-
.qd-form--descriptions[data-v-
|
|
56
|
+
.qd-form--descriptions[data-v-6a3db57f] .t-form__controls-content {
|
|
57
57
|
min-height: auto;
|
|
58
58
|
}
|
|
59
|
-
.qd-form--descriptions[data-v-
|
|
59
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-form-item--label-top {
|
|
60
60
|
display: grid;
|
|
61
61
|
grid-template-rows: auto minmax(min-content, 1fr);
|
|
62
62
|
grid-row: span 2 !important;
|
|
63
63
|
}
|
|
64
|
-
.qd-form--descriptions[data-v-
|
|
64
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-form-item--label-top > .t-form__item {
|
|
65
65
|
display: contents;
|
|
66
66
|
}
|
|
67
|
-
.qd-form--descriptions[data-v-
|
|
67
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-form-item--label-top .t-form__controls-content {
|
|
68
68
|
white-space: normal;
|
|
69
69
|
}
|
|
70
|
-
.qd-form--descriptions[data-v-
|
|
70
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-form-item--empty-content .t-form__controls {
|
|
71
71
|
padding: 0 !important;
|
|
72
72
|
min-height: 0;
|
|
73
73
|
height: 0;
|
|
74
74
|
overflow: hidden;
|
|
75
75
|
}
|
|
76
|
-
.qd-form--descriptions[data-v-
|
|
76
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-form-item:not(.qd-form-item--label-top):not(.qd-form-item--label-width-full) .t-form__label {
|
|
77
77
|
border-right: 1px solid var(--td-component-border);
|
|
78
78
|
}
|
|
79
|
-
.qd-form--descriptions[data-v-
|
|
79
|
+
.qd-form--descriptions[data-v-6a3db57f] .qd-form-item--filler {
|
|
80
80
|
background-color: var(--td-bg-color-secondarycontainer);
|
|
81
81
|
}
|
|
82
|
-
.qd-form--descriptions-mini[data-v-
|
|
83
|
-
.qd-form--descriptions-mini[data-v-
|
|
82
|
+
.qd-form--descriptions-mini[data-v-6a3db57f] .t-form__label,
|
|
83
|
+
.qd-form--descriptions-mini[data-v-6a3db57f] .t-form__controls {
|
|
84
84
|
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
|
|
85
85
|
font: var(--td-font-body-small);
|
|
86
86
|
}
|
|
@@ -2,7 +2,7 @@ import './index.css'
|
|
|
2
2
|
import _sfc_main from "./index.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6a3db57f"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdForm as default
|
|
8
8
|
};
|
|
@@ -170,14 +170,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
170
170
|
items.forEach((_, index) => {
|
|
171
171
|
const entry = entryMap.get(index);
|
|
172
172
|
if (entry?.visible.value) {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
used
|
|
173
|
+
if (entry.isFill.value) {
|
|
174
|
+
used = columns;
|
|
175
|
+
} else {
|
|
176
|
+
const span = entry.colSpan.value;
|
|
177
|
+
if (span > 0) {
|
|
178
|
+
if (used + span > columns) {
|
|
179
|
+
const remaining2 = columns - used;
|
|
180
|
+
if (remaining2 > 0) nodes.push({ type: "filler", span: remaining2 });
|
|
181
|
+
used = 0;
|
|
182
|
+
}
|
|
183
|
+
used += span;
|
|
179
184
|
}
|
|
180
|
-
used += span;
|
|
181
185
|
}
|
|
182
186
|
}
|
|
183
187
|
nodes.push({ type: "item", index });
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.qd-form-item[data-v-
|
|
1
|
+
.qd-form-item[data-v-e77adabb] > .t-form__item > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
|
|
2
2
|
width: 100%;
|
|
3
3
|
}
|
|
4
|
-
.qd-form-item__component[data-v-
|
|
4
|
+
.qd-form-item__component[data-v-e77adabb]:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
|
|
5
5
|
width: 100%;
|
|
6
6
|
}
|
|
@@ -2,7 +2,7 @@ import './item.css'
|
|
|
2
2
|
import _sfc_main from "./item.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdFormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdFormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e77adabb"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdFormItem as default
|
|
8
8
|
};
|
|
@@ -7,8 +7,8 @@ import { qdUseComputeValue } from "../config-renderer/compute.mjs";
|
|
|
7
7
|
import { PROVIDE_FORM_REGISTER_GRID_ITEM } from "./config.mjs";
|
|
8
8
|
import { qdFormItemProps } from "./props.mjs";
|
|
9
9
|
import { resolveQdFormItemOptions } from "./utils.mjs";
|
|
10
|
-
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY, DEFAULT_GRID_WIDTH } from "../grid/config.mjs";
|
|
11
|
-
import {
|
|
10
|
+
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY, DEFAULT_GRID_WIDTH, DEFAULT_COL } from "../grid/config.mjs";
|
|
11
|
+
import { mergeGridValue, resolveGridSpan } from "../grid/utils.mjs";
|
|
12
12
|
import QdGridItem from "../grid/item.vue.mjs";
|
|
13
13
|
import _sfc_main$1 from "../config-renderer/index.vue.mjs";
|
|
14
14
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -63,11 +63,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
63
63
|
});
|
|
64
64
|
const gridDefaultProps = inject(PROVIDE_GRID_ITEM_PROPS_KEY, void 0);
|
|
65
65
|
const gridWidth = inject(PROVIDE_GRID_WIDTH_KEY, ref(DEFAULT_GRID_WIDTH));
|
|
66
|
-
const colSpan = computed(
|
|
67
|
-
() => resolveGridSpan(mergeGridValue(props.col, gridDefaultProps?.value?.col), gridWidth.value)
|
|
68
|
-
);
|
|
69
66
|
const gridIndex = computed(() => props.gridIndex);
|
|
70
|
-
|
|
67
|
+
const reCol = computed(() => mergeGridValue(props.col, gridDefaultProps?.value?.col));
|
|
68
|
+
const colSpan = computed(() => {
|
|
69
|
+
const col = reCol.value;
|
|
70
|
+
if (col === "fill") return DEFAULT_COL;
|
|
71
|
+
return resolveGridSpan(col, gridWidth.value);
|
|
72
|
+
});
|
|
73
|
+
const isFill = computed(() => reCol.value === "fill");
|
|
74
|
+
inject(
|
|
75
|
+
PROVIDE_FORM_REGISTER_GRID_ITEM,
|
|
76
|
+
void 0
|
|
77
|
+
)?.({
|
|
78
|
+
visible: reIfRender,
|
|
79
|
+
colSpan,
|
|
80
|
+
gridIndex,
|
|
81
|
+
isFill
|
|
82
|
+
});
|
|
71
83
|
const reProps = computed(() => {
|
|
72
84
|
const {
|
|
73
85
|
col,
|
|
@@ -2,6 +2,12 @@ import type { ComputedRef, InjectionKey, Ref } from 'vue';
|
|
|
2
2
|
import type { QdGridItemProps } from './types';
|
|
3
3
|
export declare const PROVIDE_GRID_WIDTH_KEY: InjectionKey<Ref<number>>;
|
|
4
4
|
export declare const PROVIDE_GRID_ITEM_PROPS_KEY: InjectionKey<ComputedRef<QdGridItemProps>>;
|
|
5
|
+
export declare const PROVIDE_GRID_COLUMNS_KEY: InjectionKey<ComputedRef<number>>;
|
|
6
|
+
export interface QdGridItemRegistryEntry {
|
|
7
|
+
colSpan: ComputedRef<number>;
|
|
8
|
+
}
|
|
9
|
+
export declare const PROVIDE_GRID_REGISTER_ITEM: InjectionKey<(entry: QdGridItemRegistryEntry) => void>;
|
|
10
|
+
export declare const PROVIDE_GRID_REGISTRY_KEY: InjectionKey<Ref<QdGridItemRegistryEntry[]>>;
|
|
5
11
|
export declare const DEFAULT_GRID_WIDTH = 1920;
|
|
6
12
|
export declare const DEFAULT_BREAKPOINTS: {
|
|
7
13
|
xs: number;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
const PROVIDE_GRID_WIDTH_KEY = /* @__PURE__ */ Symbol("QdGridWidth");
|
|
2
2
|
const PROVIDE_GRID_ITEM_PROPS_KEY = /* @__PURE__ */ Symbol("QdGridItemProps");
|
|
3
|
+
const PROVIDE_GRID_COLUMNS_KEY = /* @__PURE__ */ Symbol("QdGridColumns");
|
|
4
|
+
const PROVIDE_GRID_REGISTER_ITEM = /* @__PURE__ */ Symbol("QdGridRegisterItem");
|
|
5
|
+
const PROVIDE_GRID_REGISTRY_KEY = /* @__PURE__ */ Symbol("QdGridRegistry");
|
|
3
6
|
const DEFAULT_GRID_WIDTH = 1920;
|
|
4
7
|
const DEFAULT_BREAKPOINTS = {
|
|
5
8
|
// <768px 手机
|
|
@@ -23,6 +26,9 @@ export {
|
|
|
23
26
|
DEFAULT_COLUMNS,
|
|
24
27
|
DEFAULT_GRID_WIDTH,
|
|
25
28
|
DEFAULT_ROW,
|
|
29
|
+
PROVIDE_GRID_COLUMNS_KEY,
|
|
26
30
|
PROVIDE_GRID_ITEM_PROPS_KEY,
|
|
31
|
+
PROVIDE_GRID_REGISTER_ITEM,
|
|
32
|
+
PROVIDE_GRID_REGISTRY_KEY,
|
|
27
33
|
PROVIDE_GRID_WIDTH_KEY
|
|
28
34
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { DEFAULT_GRID_WIDTH, PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY } from './config';
|
|
1
|
+
export { DEFAULT_COL, DEFAULT_COLUMNS, DEFAULT_GRID_WIDTH, PROVIDE_GRID_COLUMNS_KEY, PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_REGISTER_ITEM, PROVIDE_GRID_REGISTRY_KEY, PROVIDE_GRID_WIDTH_KEY, type QdGridItemRegistryEntry } from './config';
|
|
2
2
|
export { default as QdGrid } from './index.vue';
|
|
3
3
|
export { default as QdGridItem } from './item.vue';
|
|
4
|
-
export type { QdGridItemProps, QdGridProps } from './types';
|
|
5
|
-
export { mergeGridValue, resolveGridSpan } from './utils';
|
|
4
|
+
export type { GridColValue, QdGridItemProps, QdGridProps } from './types';
|
|
5
|
+
export { computeFillSpan, mergeGridValue, resolveGridSpan } from './utils';
|
|
@@ -2,7 +2,7 @@ import './index.css'
|
|
|
2
2
|
import _sfc_main from "./index.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3fdb373b"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdGrid as default
|
|
8
8
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './index.css'
|
|
2
|
-
import { defineComponent, computed, provide, useTemplateRef, ref, withDirectives, createElementBlock, openBlock, normalizeStyle, renderSlot, unref } from "vue";
|
|
2
|
+
import { defineComponent, computed, provide, useTemplateRef, ref, shallowRef, nextTick, onBeforeUnmount, withDirectives, createElementBlock, openBlock, normalizeStyle, renderSlot, unref } from "vue";
|
|
3
3
|
import { resizeDirective, isEmpty } from "qidian-shared";
|
|
4
|
-
import { DEFAULT_COLUMNS, PROVIDE_GRID_ITEM_PROPS_KEY, DEFAULT_GRID_WIDTH, PROVIDE_GRID_WIDTH_KEY, DEFAULT_BREAKPOINTS } from "./config.mjs";
|
|
4
|
+
import { DEFAULT_COLUMNS, PROVIDE_GRID_ITEM_PROPS_KEY, DEFAULT_GRID_WIDTH, PROVIDE_GRID_WIDTH_KEY, PROVIDE_GRID_COLUMNS_KEY, PROVIDE_GRID_REGISTER_ITEM, PROVIDE_GRID_REGISTRY_KEY, DEFAULT_BREAKPOINTS } from "./config.mjs";
|
|
5
5
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
6
|
...{
|
|
7
7
|
name: "QdGrid"
|
|
@@ -20,6 +20,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
20
20
|
const gridRef = useTemplateRef("gridEl");
|
|
21
21
|
const gridWidth = ref(DEFAULT_GRID_WIDTH);
|
|
22
22
|
provide(PROVIDE_GRID_WIDTH_KEY, gridWidth);
|
|
23
|
+
const gridColumns = computed(() => props.columns);
|
|
24
|
+
provide(PROVIDE_GRID_COLUMNS_KEY, gridColumns);
|
|
25
|
+
const gridItemRegistry = shallowRef([]);
|
|
26
|
+
provide(PROVIDE_GRID_REGISTER_ITEM, (entry) => {
|
|
27
|
+
nextTick(() => {
|
|
28
|
+
gridItemRegistry.value = [...gridItemRegistry.value, entry];
|
|
29
|
+
});
|
|
30
|
+
onBeforeUnmount(() => {
|
|
31
|
+
gridItemRegistry.value = gridItemRegistry.value.filter((it) => it !== entry);
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
provide(PROVIDE_GRID_REGISTRY_KEY, gridItemRegistry);
|
|
23
35
|
function onResize() {
|
|
24
36
|
gridWidth.value = gridRef.value?.clientWidth ?? DEFAULT_GRID_WIDTH;
|
|
25
37
|
}
|
|
@@ -2,7 +2,7 @@ import './item.css'
|
|
|
2
2
|
import _sfc_main from "./item.vue2.mjs";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
5
|
-
const QdGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
5
|
+
const QdGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7df35ba7"]]);
|
|
6
6
|
export {
|
|
7
7
|
QdGridItem as default
|
|
8
8
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import './item.css'
|
|
2
2
|
import { defineComponent, inject, ref, computed, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { useUICsl } from "../../utils/tools.mjs";
|
|
4
|
+
import { PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY, DEFAULT_GRID_WIDTH, PROVIDE_GRID_COLUMNS_KEY, DEFAULT_COLUMNS, PROVIDE_GRID_REGISTER_ITEM, PROVIDE_GRID_REGISTRY_KEY, DEFAULT_COL, DEFAULT_ROW } from "./config.mjs";
|
|
5
|
+
import { mergeGridValue, computeFillSpan, resolveGridSpan } from "./utils.mjs";
|
|
5
6
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
6
7
|
...{
|
|
7
8
|
name: "QdGridItem"
|
|
@@ -12,26 +13,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
12
13
|
row: {}
|
|
13
14
|
},
|
|
14
15
|
setup(__props) {
|
|
16
|
+
const csl = useUICsl("QdGridItem");
|
|
15
17
|
const props = __props;
|
|
16
18
|
const defaultProps = inject(PROVIDE_GRID_ITEM_PROPS_KEY, void 0);
|
|
17
19
|
const gridWidth = inject(PROVIDE_GRID_WIDTH_KEY, ref(DEFAULT_GRID_WIDTH));
|
|
20
|
+
const gridColumns = inject(
|
|
21
|
+
PROVIDE_GRID_COLUMNS_KEY,
|
|
22
|
+
computed(() => DEFAULT_COLUMNS)
|
|
23
|
+
);
|
|
24
|
+
const registerGridItem = inject(PROVIDE_GRID_REGISTER_ITEM, void 0);
|
|
25
|
+
const gridItemRegistry = inject(PROVIDE_GRID_REGISTRY_KEY, ref([]));
|
|
18
26
|
const reProps = computed(() => ({
|
|
19
27
|
col: mergeGridValue(props.col, defaultProps?.value?.col),
|
|
20
28
|
row: mergeGridValue(props.row, defaultProps?.value?.row)
|
|
21
29
|
}));
|
|
22
|
-
const
|
|
30
|
+
const fillColSpan = computed(() => {
|
|
31
|
+
const index = gridItemRegistry.value.indexOf(entry);
|
|
32
|
+
if (index === -1) return DEFAULT_COL;
|
|
33
|
+
return computeFillSpan(
|
|
34
|
+
gridItemRegistry.value.slice(0, index).map((it) => it.colSpan.value),
|
|
35
|
+
gridColumns.value
|
|
36
|
+
);
|
|
37
|
+
});
|
|
38
|
+
const colSpan = computed(() => {
|
|
39
|
+
const col = reProps.value.col;
|
|
40
|
+
if (col === "fill") return fillColSpan.value;
|
|
41
|
+
return resolveGridSpan(col, gridWidth.value);
|
|
42
|
+
});
|
|
43
|
+
const entry = { colSpan };
|
|
23
44
|
const getRowSpan = computed(
|
|
24
45
|
() => resolveGridSpan(reProps.value.row, gridWidth.value, DEFAULT_ROW)
|
|
25
46
|
);
|
|
26
47
|
const itemStyle = computed(() => {
|
|
27
|
-
if (
|
|
48
|
+
if (colSpan.value === 0 || getRowSpan.value === 0) {
|
|
28
49
|
return { display: "none" };
|
|
29
50
|
}
|
|
30
51
|
return {
|
|
31
|
-
gridColumn: `span ${
|
|
52
|
+
gridColumn: `span ${colSpan.value}`,
|
|
32
53
|
gridRow: `span ${getRowSpan.value}`
|
|
33
54
|
};
|
|
34
55
|
});
|
|
56
|
+
registerGridItem?.(entry);
|
|
57
|
+
if (props.col === "fill" && !registerGridItem) {
|
|
58
|
+
csl.warn("fill", 'col="fill" 需在 QdGrid 内使用,已降级为 1 列');
|
|
59
|
+
}
|
|
35
60
|
return (_ctx, _cache) => {
|
|
36
61
|
return openBlock(), createElementBlock("div", {
|
|
37
62
|
class: "qd-grid-item",
|
|
@@ -2,12 +2,13 @@ import type { GutterObject, TdRowProps } from 'tdesign-vue-next';
|
|
|
2
2
|
export type GridGutterValue = number | (GutterObject & {
|
|
3
3
|
span?: number;
|
|
4
4
|
});
|
|
5
|
+
export type GridColValue = GridGutterValue | 'fill';
|
|
5
6
|
export interface QdGridProps {
|
|
6
7
|
columns?: number;
|
|
7
8
|
gutter?: TdRowProps['gutter'];
|
|
8
9
|
grid?: QdGridItemProps;
|
|
9
10
|
}
|
|
10
11
|
export interface QdGridItemProps {
|
|
11
|
-
col?:
|
|
12
|
+
col?: GridColValue;
|
|
12
13
|
row?: GridGutterValue;
|
|
13
14
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import type { GridGutterValue } from './types';
|
|
2
|
-
export declare function mergeGridValue
|
|
1
|
+
import type { GridColValue, GridGutterValue } from './types';
|
|
2
|
+
export declare function mergeGridValue<P extends GridColValue | undefined, D extends GridColValue | undefined>(prop: P, defaultProp: D): P | D;
|
|
3
|
+
export declare function computeFillSpan(prevSpans: number[], columns: number): number;
|
|
3
4
|
export declare function resolveGridSpan(value: GridGutterValue | undefined, gridWidth: number, fallback?: number): number;
|
|
@@ -3,12 +3,22 @@ import { DEFAULT_COL, DEFAULT_BREAKPOINTS } from "./config.mjs";
|
|
|
3
3
|
function mergeGridValue(prop, defaultProp) {
|
|
4
4
|
if (prop === void 0) return defaultProp;
|
|
5
5
|
if (!defaultProp) return prop;
|
|
6
|
+
if (prop === "fill" || defaultProp === "fill") return prop;
|
|
6
7
|
if (typeof prop === "number" || typeof defaultProp === "number") return prop;
|
|
7
8
|
return {
|
|
8
9
|
...defaultProp,
|
|
9
10
|
...prop
|
|
10
11
|
};
|
|
11
12
|
}
|
|
13
|
+
function computeFillSpan(prevSpans, columns) {
|
|
14
|
+
let used = 0;
|
|
15
|
+
for (const span of prevSpans) {
|
|
16
|
+
if (span <= 0) continue;
|
|
17
|
+
if (used + span > columns) used = 0;
|
|
18
|
+
used += span;
|
|
19
|
+
}
|
|
20
|
+
return used > 0 && used < columns ? columns - used : 0;
|
|
21
|
+
}
|
|
12
22
|
function resolveGridSpan(value, gridWidth, fallback = DEFAULT_COL) {
|
|
13
23
|
if (isEmpty(value)) return fallback;
|
|
14
24
|
if (typeof value === "number") return value;
|
|
@@ -21,6 +31,7 @@ function resolveGridSpan(value, gridWidth, fallback = DEFAULT_COL) {
|
|
|
21
31
|
return xs ?? span ?? fallback;
|
|
22
32
|
}
|
|
23
33
|
export {
|
|
34
|
+
computeFillSpan,
|
|
24
35
|
mergeGridValue,
|
|
25
36
|
resolveGridSpan
|
|
26
37
|
};
|
|
@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
16
16
|
},
|
|
17
17
|
setup(__props) {
|
|
18
18
|
const props = __props;
|
|
19
|
-
const csl = useUICsl("
|
|
19
|
+
const csl = useUICsl("QdIcon");
|
|
20
20
|
const loadIcons = formatGlob(
|
|
21
21
|
/* @__PURE__ */ Object.assign({
|
|
22
22
|
"/node_modules/tdesign-icons-vue-next/esm/components/ability-open.js": () => import("../../node_modules/.pnpm/tdesign-icons-vue-next@0.4.4_vue@3.5.26_typescript@5.9.3_/node_modules/tdesign-icons-vue-next/esm/components/ability-open.mjs").then((m) => m["default"]),
|
|
@@ -4,7 +4,7 @@ import _sfc_main from "./index.vue2.mjs";
|
|
|
4
4
|
/* empty css */
|
|
5
5
|
/* empty css */
|
|
6
6
|
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
7
|
-
const QdOfficePdf = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
7
|
+
const QdOfficePdf = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c34c283e"]]);
|
|
8
8
|
export {
|
|
9
9
|
QdOfficePdf as default
|
|
10
10
|
};
|
|
@@ -40,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
40
40
|
const props = __props;
|
|
41
41
|
const emit = __emit;
|
|
42
42
|
const vResize = resizeDirective;
|
|
43
|
-
const csl = useUICsl("
|
|
43
|
+
const csl = useUICsl("QdOfficePdf");
|
|
44
44
|
const { t } = useConfig("office");
|
|
45
45
|
const globalOffice = inject(
|
|
46
46
|
PROVIDE_OFFICE,
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
.qd-office-pdf[data-v-
|
|
1
|
+
.qd-office-pdf[data-v-c34c283e] {
|
|
2
2
|
width: 100%;
|
|
3
3
|
height: 100%;
|
|
4
4
|
position: relative;
|
|
5
5
|
background-color: var(--td-bg-color-component);
|
|
6
6
|
}
|
|
7
|
-
.qd-office-pdf__container[data-v-
|
|
7
|
+
.qd-office-pdf__container[data-v-c34c283e] {
|
|
8
8
|
position: absolute;
|
|
9
9
|
width: 100%;
|
|
10
10
|
max-height: 100%;
|
|
11
11
|
overflow: auto;
|
|
12
12
|
}
|
|
13
|
-
.qd-office-pdf__viewer[data-v-
|
|
13
|
+
.qd-office-pdf__viewer[data-v-c34c283e] {
|
|
14
14
|
width: 100%;
|
|
15
15
|
height: 100%;
|
|
16
16
|
}
|
|
17
|
-
.qd-office-pdf__viewer[data-v-
|
|
17
|
+
.qd-office-pdf__viewer[data-v-c34c283e] .page {
|
|
18
18
|
box-sizing: content-box;
|
|
19
19
|
}
|
|
20
|
-
.qd-office-pdf__viewer[data-v-
|
|
20
|
+
.qd-office-pdf__viewer[data-v-c34c283e] .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a {
|
|
21
21
|
background-color: transparent;
|
|
22
22
|
}
|
|
23
|
-
.qd-office-pdf__controls[data-v-
|
|
23
|
+
.qd-office-pdf__controls[data-v-c34c283e] {
|
|
24
24
|
position: absolute;
|
|
25
25
|
left: 50%;
|
|
26
26
|
bottom: var(--td-comp-paddingTB-xl) !important;
|
|
@@ -32,39 +32,39 @@
|
|
|
32
32
|
user-select: none;
|
|
33
33
|
transition: all 0.2s linear;
|
|
34
34
|
}
|
|
35
|
-
.qd-office-pdf__controls .t-button[data-v-
|
|
35
|
+
.qd-office-pdf__controls .t-button[data-v-c34c283e] {
|
|
36
36
|
width: 38px;
|
|
37
37
|
height: 38px;
|
|
38
38
|
padding: 0;
|
|
39
39
|
margin-left: 0;
|
|
40
40
|
}
|
|
41
|
-
.qd-office-pdf__controls-body[data-v-
|
|
41
|
+
.qd-office-pdf__controls-body[data-v-c34c283e] {
|
|
42
42
|
display: flex;
|
|
43
43
|
align-items: center;
|
|
44
44
|
opacity: 0.5;
|
|
45
45
|
transition: opacity 0.2s linear;
|
|
46
46
|
}
|
|
47
|
-
.qd-office-pdf__controls-scale[data-v-
|
|
47
|
+
.qd-office-pdf__controls-scale[data-v-c34c283e] {
|
|
48
48
|
width: 39px;
|
|
49
49
|
margin: 0 var(--td-comp-margin-s);
|
|
50
50
|
}
|
|
51
|
-
.qd-office-pdf__controls-page[data-v-
|
|
51
|
+
.qd-office-pdf__controls-page[data-v-c34c283e] {
|
|
52
52
|
display: flex;
|
|
53
53
|
align-items: stretch;
|
|
54
54
|
}
|
|
55
|
-
.qd-office-pdf__controls-page[data-v-
|
|
55
|
+
.qd-office-pdf__controls-page[data-v-c34c283e] .t-input-number {
|
|
56
56
|
width: auto;
|
|
57
57
|
}
|
|
58
|
-
.qd-office-pdf__controls-page[data-v-
|
|
58
|
+
.qd-office-pdf__controls-page[data-v-c34c283e] .t-input-number .t-input {
|
|
59
59
|
padding: 0;
|
|
60
60
|
}
|
|
61
|
-
.qd-office-pdf__controls-page[data-v-
|
|
61
|
+
.qd-office-pdf__controls-page[data-v-c34c283e] .t-input-number .t-input__wrap {
|
|
62
62
|
min-width: 32px;
|
|
63
63
|
}
|
|
64
|
-
.qd-office-pdf__controls-page[data-v-
|
|
64
|
+
.qd-office-pdf__controls-page[data-v-c34c283e] .t-input-number .t-input__inner {
|
|
65
65
|
min-width: 32px;
|
|
66
66
|
}
|
|
67
|
-
.qd-office-pdf__controls-page-input[data-v-
|
|
67
|
+
.qd-office-pdf__controls-page-input[data-v-c34c283e] {
|
|
68
68
|
display: inline-flex;
|
|
69
69
|
align-items: center;
|
|
70
70
|
flex-shrink: 0;
|
|
@@ -74,17 +74,17 @@
|
|
|
74
74
|
background-color: var(--td-bg-color-secondarycontainer);
|
|
75
75
|
border-radius: var(--td-radius-default);
|
|
76
76
|
}
|
|
77
|
-
.qd-office-pdf__controls[data-v-
|
|
77
|
+
.qd-office-pdf__controls[data-v-c34c283e]:hover {
|
|
78
78
|
background-color: var(--td-bg-color-container);
|
|
79
79
|
}
|
|
80
|
-
.qd-office-pdf__controls:hover .qd-office-pdf__controls-body[data-v-
|
|
80
|
+
.qd-office-pdf__controls:hover .qd-office-pdf__controls-body[data-v-c34c283e] {
|
|
81
81
|
opacity: 1;
|
|
82
82
|
}
|
|
83
|
-
.controls-fade-leave-active[data-v-
|
|
84
|
-
.controls-fade-enter-active[data-v-
|
|
83
|
+
.controls-fade-leave-active[data-v-c34c283e],
|
|
84
|
+
.controls-fade-enter-active[data-v-c34c283e] {
|
|
85
85
|
transition: opacity 0.28s cubic-bezier(0.38, 0, 0.24, 1);
|
|
86
86
|
}
|
|
87
|
-
.controls-fade-enter-from[data-v-
|
|
88
|
-
.controls-fade-leave-to[data-v-
|
|
87
|
+
.controls-fade-enter-from[data-v-c34c283e],
|
|
88
|
+
.controls-fade-leave-to[data-v-c34c283e] {
|
|
89
89
|
opacity: 0;
|
|
90
90
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -33,10 +33,10 @@ import { PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE, PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUE
|
|
|
33
33
|
import { default as default23 } from "./components/form/index.vue.mjs";
|
|
34
34
|
import { default as default24 } from "./components/form/item.vue.mjs";
|
|
35
35
|
import { qdFormGrid, qdFormGutter } from "./components/form/props.mjs";
|
|
36
|
-
import { DEFAULT_GRID_WIDTH, PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_WIDTH_KEY } from "./components/grid/config.mjs";
|
|
36
|
+
import { DEFAULT_COL, DEFAULT_COLUMNS, DEFAULT_GRID_WIDTH, PROVIDE_GRID_COLUMNS_KEY, PROVIDE_GRID_ITEM_PROPS_KEY, PROVIDE_GRID_REGISTER_ITEM, PROVIDE_GRID_REGISTRY_KEY, PROVIDE_GRID_WIDTH_KEY } from "./components/grid/config.mjs";
|
|
37
37
|
import { default as default25 } from "./components/grid/index.vue.mjs";
|
|
38
38
|
import { default as default26 } from "./components/grid/item.vue.mjs";
|
|
39
|
-
import { mergeGridValue, resolveGridSpan } from "./components/grid/utils.mjs";
|
|
39
|
+
import { computeFillSpan, mergeGridValue, resolveGridSpan } from "./components/grid/utils.mjs";
|
|
40
40
|
import { default as default27 } from "./components/image/index.vue.mjs";
|
|
41
41
|
import { default as default28 } from "./components/left-ribbon-tag/index.vue.mjs";
|
|
42
42
|
import { default as default29 } from "./components/org/tag/index.vue.mjs";
|
|
@@ -69,11 +69,16 @@ import * as auth from "./utils/auth.mjs";
|
|
|
69
69
|
import { useUICsl } from "./utils/tools.mjs";
|
|
70
70
|
import { formatDuration } from "./utils/date.mjs";
|
|
71
71
|
export {
|
|
72
|
+
DEFAULT_COL,
|
|
73
|
+
DEFAULT_COLUMNS,
|
|
72
74
|
DEFAULT_GRID_WIDTH,
|
|
73
75
|
PROVIDE_FORM_ADD_AFTER_SUBMIT_QUEUE,
|
|
74
76
|
PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE,
|
|
75
77
|
PROVIDE_FORM_RESET_QUEUE,
|
|
78
|
+
PROVIDE_GRID_COLUMNS_KEY,
|
|
76
79
|
PROVIDE_GRID_ITEM_PROPS_KEY,
|
|
80
|
+
PROVIDE_GRID_REGISTER_ITEM,
|
|
81
|
+
PROVIDE_GRID_REGISTRY_KEY,
|
|
77
82
|
PROVIDE_GRID_WIDTH_KEY,
|
|
78
83
|
QD_TABLE_BLANK_FILTER_VALUE,
|
|
79
84
|
default11 as QdAutoTooltip,
|
|
@@ -115,6 +120,7 @@ export {
|
|
|
115
120
|
default37 as QdSteps,
|
|
116
121
|
default38 as QdUpload,
|
|
117
122
|
auth,
|
|
123
|
+
computeFillSpan,
|
|
118
124
|
defineQdCrudList,
|
|
119
125
|
defineQdCrudTable,
|
|
120
126
|
defineQdCrudTabsTable,
|