@keyblade/pro-components 1.7.3 → 1.7.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.
- package/es/pro-layout/hooks.d.ts +4 -1
- package/es/pro-layout/hooks.js +68 -68
- package/es/pro-layout/index.d.ts +54 -0
- package/es/pro-layout/pro-layout.vue.d.ts +37 -0
- package/es/pro-layout/pro-layout.vue.js +94 -74
- package/es/pro-menu/interface.d.ts +4 -1
- package/es/pro-page-container/index.d.ts +33 -6
- package/es/pro-page-container/pro-page-container.vue.d.ts +17 -3
- package/es/pro-page-container/pro-page-container.vue.js +14 -11
- package/es/pro-page-header/index.d.ts +42 -6
- package/es/pro-page-header/pro-page-header.vue.d.ts +25 -3
- package/es/pro-page-header/pro-page-header.vue.js +63 -44
- package/es/pro-reuse-tabs/index.d.ts +54 -0
- package/es/pro-reuse-tabs/pro-reuse-tabs.vue.d.ts +35 -0
- package/es/pro-reuse-tabs/pro-reuse-tabs.vue.js +45 -28
- package/es/style.css +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,22 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
6
6
|
required: true;
|
|
7
7
|
default: () => never[];
|
|
8
8
|
};
|
|
9
|
+
tabsSize: {
|
|
10
|
+
type: PropType<"small" | "mini" | "medium" | "large">;
|
|
11
|
+
required: false;
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
/** tabs类型 */
|
|
15
|
+
tabsType: {
|
|
16
|
+
type: PropType<"line" | "text" | "card" | "card-gutter" | "rounded" | "capsule">;
|
|
17
|
+
required: false;
|
|
18
|
+
default: string;
|
|
19
|
+
};
|
|
20
|
+
tabsHeaderPadding: {
|
|
21
|
+
type: PropType<boolean>;
|
|
22
|
+
required: false;
|
|
23
|
+
default: boolean;
|
|
24
|
+
};
|
|
9
25
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
10
26
|
'tab-click': (key: string) => true;
|
|
11
27
|
'tab-delete': (key: string) => true;
|
|
@@ -15,10 +31,29 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
15
31
|
required: true;
|
|
16
32
|
default: () => never[];
|
|
17
33
|
};
|
|
34
|
+
tabsSize: {
|
|
35
|
+
type: PropType<"small" | "mini" | "medium" | "large">;
|
|
36
|
+
required: false;
|
|
37
|
+
default: string;
|
|
38
|
+
};
|
|
39
|
+
/** tabs类型 */
|
|
40
|
+
tabsType: {
|
|
41
|
+
type: PropType<"line" | "text" | "card" | "card-gutter" | "rounded" | "capsule">;
|
|
42
|
+
required: false;
|
|
43
|
+
default: string;
|
|
44
|
+
};
|
|
45
|
+
tabsHeaderPadding: {
|
|
46
|
+
type: PropType<boolean>;
|
|
47
|
+
required: false;
|
|
48
|
+
default: boolean;
|
|
49
|
+
};
|
|
18
50
|
}>> & {
|
|
19
51
|
"onTab-click"?: ((key: string) => any) | undefined;
|
|
20
52
|
"onTab-delete"?: ((key: string) => any) | undefined;
|
|
21
53
|
}, {
|
|
22
54
|
tabs: IProTab[];
|
|
55
|
+
tabsSize: "small" | "mini" | "medium" | "large";
|
|
56
|
+
tabsType: "line" | "text" | "card" | "card-gutter" | "rounded" | "capsule";
|
|
57
|
+
tabsHeaderPadding: boolean;
|
|
23
58
|
}, {}>;
|
|
24
59
|
export default _default;
|
|
@@ -1,53 +1,70 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as y, computed as m, resolveComponent as l, openBlock as a, createElementBlock as d, normalizeClass as f, createVNode as k, withCtx as g, Fragment as v, renderList as h, createBlock as C } from "vue";
|
|
2
|
+
const S = "keyblade-pro-reuse-tabs", q = /* @__PURE__ */ y({
|
|
3
3
|
__name: "pro-reuse-tabs",
|
|
4
4
|
props: {
|
|
5
5
|
tabs: {
|
|
6
6
|
type: Array,
|
|
7
7
|
required: !0,
|
|
8
8
|
default: () => []
|
|
9
|
+
},
|
|
10
|
+
tabsSize: {
|
|
11
|
+
type: String,
|
|
12
|
+
required: !1,
|
|
13
|
+
default: "small"
|
|
14
|
+
},
|
|
15
|
+
/** tabs类型 */
|
|
16
|
+
tabsType: {
|
|
17
|
+
type: String,
|
|
18
|
+
required: !1,
|
|
19
|
+
default: "rounded"
|
|
20
|
+
},
|
|
21
|
+
tabsHeaderPadding: {
|
|
22
|
+
type: Boolean,
|
|
23
|
+
required: !1,
|
|
24
|
+
default: !0
|
|
9
25
|
}
|
|
10
26
|
},
|
|
11
27
|
emits: {
|
|
12
|
-
"tab-click": (
|
|
13
|
-
"tab-delete": (
|
|
28
|
+
"tab-click": (e) => !0,
|
|
29
|
+
"tab-delete": (e) => !0
|
|
14
30
|
},
|
|
15
|
-
setup(
|
|
16
|
-
const s =
|
|
17
|
-
var
|
|
18
|
-
return ((
|
|
19
|
-
}),
|
|
20
|
-
n("tab-click", String(
|
|
21
|
-
}, u = (
|
|
22
|
-
n("tab-delete", String(
|
|
31
|
+
setup(e, { emit: n }) {
|
|
32
|
+
const s = e, o = m(() => {
|
|
33
|
+
var t;
|
|
34
|
+
return ((t = s.tabs.find((r) => r.active)) == null ? void 0 : t.name) ?? void 0;
|
|
35
|
+
}), c = (t) => {
|
|
36
|
+
n("tab-click", String(t));
|
|
37
|
+
}, u = (t) => {
|
|
38
|
+
n("tab-delete", String(t));
|
|
23
39
|
};
|
|
24
|
-
return (
|
|
25
|
-
const b =
|
|
26
|
-
return a(),
|
|
27
|
-
class:
|
|
40
|
+
return (t, r) => {
|
|
41
|
+
const b = l("a-tab-pane"), p = l("a-tabs");
|
|
42
|
+
return a(), d("div", {
|
|
43
|
+
class: f(S)
|
|
28
44
|
}, [
|
|
29
|
-
|
|
30
|
-
"active-key":
|
|
31
|
-
size:
|
|
32
|
-
type:
|
|
33
|
-
|
|
45
|
+
k(p, {
|
|
46
|
+
"active-key": o.value,
|
|
47
|
+
size: e.tabsSize,
|
|
48
|
+
type: e.tabsType,
|
|
49
|
+
"header-padding": e.tabsHeaderPadding,
|
|
50
|
+
editable: e.tabs.length > 1,
|
|
34
51
|
"hide-content": "",
|
|
35
52
|
"destroy-on-hide": "",
|
|
36
|
-
onTabClick:
|
|
53
|
+
onTabClick: c,
|
|
37
54
|
onDelete: u
|
|
38
55
|
}, {
|
|
39
|
-
default:
|
|
40
|
-
(a(!0),
|
|
41
|
-
key:
|
|
42
|
-
title:
|
|
56
|
+
default: g(() => [
|
|
57
|
+
(a(!0), d(v, null, h(e.tabs, (i) => (a(), C(b, {
|
|
58
|
+
key: i.name,
|
|
59
|
+
title: i.title
|
|
43
60
|
}, null, 8, ["title"]))), 128))
|
|
44
61
|
]),
|
|
45
62
|
_: 1
|
|
46
|
-
}, 8, ["active-key", "editable"])
|
|
63
|
+
}, 8, ["active-key", "size", "type", "header-padding", "editable"])
|
|
47
64
|
]);
|
|
48
65
|
};
|
|
49
66
|
}
|
|
50
67
|
});
|
|
51
68
|
export {
|
|
52
|
-
|
|
69
|
+
q as default
|
|
53
70
|
};
|
package/es/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--
|
|
1
|
+
.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--b58cdc96);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--b58cdc96);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--b58cdc96);padding-left:var(--36b16058);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--7bdbad26)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--36b16058);width:calc(100% - var(--36b16058))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--7bdbad26);width:calc(100% - var(--7bdbad26))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}
|