@ditari/bsui 5.1.4 → 5.1.5
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/cjs/components/layout/Layout.vue2.cjs +4 -18
- package/dist/cjs/components/layout/Layout.vue2.cjs.map +1 -1
- package/dist/cjs/components/layout/components/layout/HeaderLayout.vue2.cjs +3 -25
- package/dist/cjs/components/layout/components/layout/HeaderLayout.vue2.cjs.map +1 -1
- package/dist/cjs/components/tab/Tab.vue2.cjs +264 -180
- package/dist/cjs/components/tab/Tab.vue2.cjs.map +1 -1
- package/dist/cjs/components/table/Table.cjs +2 -2
- package/dist/cjs/components/table/Table.cjs.map +1 -1
- package/dist/cjs/components/table-form/TableForm.cjs +2 -2
- package/dist/cjs/components/table-form/TableForm.cjs.map +1 -1
- package/dist/cjs/components/table-form/interface.cjs.map +1 -1
- package/dist/css/components/tab/style/index.css +1 -1
- package/dist/css/index.css +1 -1
- package/dist/esm/components/layout/Layout.vue2.mjs +6 -20
- package/dist/esm/components/layout/Layout.vue2.mjs.map +1 -1
- package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs +5 -27
- package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs.map +1 -1
- package/dist/esm/components/tab/Tab.vue2.mjs +268 -184
- package/dist/esm/components/tab/Tab.vue2.mjs.map +1 -1
- package/dist/esm/components/table/Table.mjs +1 -1
- package/dist/esm/components/table/Table.mjs.map +1 -1
- package/dist/esm/components/table-form/TableForm.mjs +1 -1
- package/dist/esm/components/table-form/TableForm.mjs.map +1 -1
- package/dist/esm/components/table-form/interface.mjs.map +1 -1
- package/dist/style/tab/style/index.scss +10 -4
- package/dist/types/components/layout/Layout.vue.d.ts +63 -51
- package/dist/types/components/layout/Layout.vue.d.ts.map +1 -1
- package/dist/types/components/layout/components/layout/HeaderLayout.vue.d.ts +63 -50
- package/dist/types/components/layout/components/layout/HeaderLayout.vue.d.ts.map +1 -1
- package/dist/types/components/tab/Tab.vue.d.ts +61 -22
- package/dist/types/components/tab/Tab.vue.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var vue = require('vue');
|
|
6
|
-
var vueRouter = require('vue-router');
|
|
7
6
|
var pinia = require('pinia');
|
|
8
7
|
var AppContext = require('./AppContext.cjs');
|
|
9
8
|
var Menu = require('./components/menu/Menu.cjs');
|
|
@@ -29,7 +28,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
29
28
|
enableTabContextMenu: { type: Boolean, required: false, default: true }
|
|
30
29
|
},
|
|
31
30
|
emits: ["onMenuClick"],
|
|
32
|
-
setup(__props, { emit: __emit }) {
|
|
31
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
33
32
|
const props = __props;
|
|
34
33
|
const emits = __emit;
|
|
35
34
|
const { layout, modeConfig, sideTokenStyle } = pinia.storeToRefs(store.useAppStore());
|
|
@@ -48,7 +47,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
48
47
|
rightStyle,
|
|
49
48
|
rightContentStyle
|
|
50
49
|
} = useStyle();
|
|
51
|
-
useKeepAlive();
|
|
52
50
|
function useReloadPage() {
|
|
53
51
|
const routerContentRef2 = vue.ref();
|
|
54
52
|
function onReloadPage2(item) {
|
|
@@ -60,21 +58,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
60
58
|
onReloadPage: onReloadPage2
|
|
61
59
|
};
|
|
62
60
|
}
|
|
63
|
-
function useKeepAlive() {
|
|
64
|
-
const route = vueRouter.useRoute();
|
|
65
|
-
const { save } = store.useKeepAliveStore();
|
|
66
|
-
vue.watch(
|
|
67
|
-
() => route.path,
|
|
68
|
-
() => {
|
|
69
|
-
if (props.keepAliveMode === "Name") {
|
|
70
|
-
save(route);
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
immediate: true
|
|
75
|
-
}
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
61
|
function useStyle() {
|
|
79
62
|
const layoutStyle2 = css.css`
|
|
80
63
|
height: 100vh;
|
|
@@ -129,6 +112,9 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
129
112
|
onMenuClick: onMenuClick2
|
|
130
113
|
};
|
|
131
114
|
}
|
|
115
|
+
__expose({
|
|
116
|
+
onReloadPage
|
|
117
|
+
});
|
|
132
118
|
return (_ctx, _cache) => {
|
|
133
119
|
const _component_a_layout_sider = vue.resolveComponent("a-layout-sider");
|
|
134
120
|
const _component_a_layout_content = vue.resolveComponent("a-layout-content");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.vue2.cjs","sources":["../../../../src/components/layout/Layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {
|
|
1
|
+
{"version":3,"file":"Layout.vue2.cjs","sources":["../../../../src/components/layout/Layout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n getCurrentInstance,\r\n provide,\r\n ref,\r\n VNode,\r\n watch\r\n} from \"vue\";\r\nimport { useRoute } from \"vue-router\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport { AppContext, AppContextKey } from \"./AppContext\";\r\nimport DMenu from \"./components/menu/Menu\";\r\nimport SettingDrawer from \"./components/settings/SettingDrawer\";\r\nimport { useAppStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\n\r\nimport HeaderLayout from \"./components/layout/HeaderLayout.vue\";\r\nimport RouterContent from \"./components/layout/RouterContent.vue\";\r\n\r\nconst props = defineProps({\n watermark: { type: Object, required: false, default: () => ({\r\n content: \"\"\r\n }) },\n isSettings: { type: Boolean, required: false, default: false },\n renderMenuIcon: { type: Function, required: false, default: undefined },\n keepAliveMode: { type: String, required: false, default: \"Name\" },\n enableTabContextMenu: { type: Boolean, required: false, default: true }\n});\r\nconst emits = defineEmits([\"onMenuClick\"]);\r\n\r\nconst { layout, modeConfig, sideTokenStyle } =\r\n storeToRefs(useAppStore());\r\n\r\nconst { onMenuClick } = useMenu();\r\nconst { routerContentRef, onReloadPage } = useReloadPage();\r\n\r\nprovide<AppContext>(AppContextKey, {\r\n watermarkContent: computed(() => props.watermark || \"\"),\r\n renderMenuIcon: props.renderMenuIcon,\r\n keepAliveMode: props.keepAliveMode,\r\n enableTabContextMenu: props.enableTabContextMenu,\r\n onReloadPage\r\n});\r\n\r\nconst {\r\n layoutStyle,\r\n siderStyle,\r\n rightStyle,\r\n rightContentStyle\r\n} = useStyle();\r\n\r\nfunction useReloadPage() {\r\n const routerContentRef = ref();\r\n\r\n function onReloadPage(item: { [key: string]: unknown }) {\r\n routerContentRef.value?.reloadPage(item.fullPath);\r\n }\r\n return {\r\n routerContentRef,\r\n onReloadPage\r\n };\r\n}\r\n\r\nfunction useStyle() {\r\n const layoutStyle = css`\r\n height: 100vh;\r\n `;\r\n\r\n const transitionStyle = css`\r\n transition: margin-left 0.4s\r\n cubic-bezier(0.22, 1.2, 0.36, 1);\r\n `;\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const siderStyle = computed(\r\n () => css`\r\n position: fixed !important;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n z-index: 1;\r\n width: ${layout.value.sideWidth}px;\r\n\r\n .app-side {\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n ${modeConfig.value.mode === \"light\"\r\n ? `background:${sideTokenStyle.value.bgColor};`\r\n : \"\"}\r\n }\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n margin-left: ${left.value};\r\n ${transitionStyle}\r\n `\r\n );\r\n\r\n const rightContentStyle = computed(\r\n () => css`\r\n padding-top: ${layout.value.headerHeight}px;\r\n `\r\n );\r\n\r\n return {\r\n layoutStyle,\r\n siderStyle,\r\n rightStyle,\r\n rightContentStyle\r\n };\r\n}\r\n\r\nfunction useMenu() {\r\n const onMenuClick = (item: never) => {\r\n emits(\"onMenuClick\", item);\r\n };\r\n\r\n return {\r\n onMenuClick\r\n };\r\n}\r\n\r\ndefineExpose({\r\n onReloadPage\r\n});\r\n</script>\r\n\r\n<template>\r\n <a-layout :class=\"layoutStyle\">\r\n <a-layout-sider\r\n v-model:collapsed=\"layout.collapsed\"\r\n theme=\"light\"\r\n collapsible\r\n :trigger=\"null\"\r\n :class=\"siderStyle\"\r\n :width=\"layout.sideWidth\"\r\n >\r\n <div class=\"app-side\">\r\n <slot name=\"logo\"></slot>\r\n <d-menu @onMenuClick=\"onMenuClick\" />\r\n </div>\r\n </a-layout-sider>\r\n <a-layout :class=\"rightStyle\">\r\n <header-layout>\r\n <slot name=\"headerRight\"></slot>\r\n </header-layout>\r\n <a-layout-content :class=\"rightContentStyle\">\r\n <RouterContent ref=\"routerContentRef\" />\r\n </a-layout-content>\r\n </a-layout>\r\n </a-layout>\r\n\r\n <SettingDrawer v-if=\"isSettings\" />\r\n <a-back-top></a-back-top>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["storeToRefs","useAppStore","provide","AppContextKey","computed","routerContentRef","ref","onReloadPage","layoutStyle","css","siderStyle","rightStyle","rightContentStyle","onMenuClick","_createVNode","_unref","_createElementVNode","_renderSlot","DMenu","HeaderLayout","RouterContent","_createBlock","SettingDrawer"],"mappings":"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"}
|
|
@@ -15,29 +15,8 @@ var Tab_vue_vue_type_script_setup_true_lang = require('../../../tab/Tab.vue2.cjs
|
|
|
15
15
|
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
16
16
|
__name: "HeaderLayout",
|
|
17
17
|
setup(__props) {
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const defaultLayout = {
|
|
21
|
-
sideWidth: 200,
|
|
22
|
-
headerHeight: 44,
|
|
23
|
-
collapsedWidth: 80,
|
|
24
|
-
collapsed: false
|
|
25
|
-
};
|
|
26
|
-
const defaultModeConfig = {
|
|
27
|
-
mode: "light",
|
|
28
|
-
list: [
|
|
29
|
-
{ value: "light", label: "\u4EAE\u8272" },
|
|
30
|
-
{ value: "dark", label: "\u6DF1\u8272" },
|
|
31
|
-
{ value: "os", label: "\u8DDF\u968F\u7CFB\u7EDF" }
|
|
32
|
-
]
|
|
33
|
-
};
|
|
34
|
-
const defaultHeaderTokenStyle = {
|
|
35
|
-
bgColor: "#1677ff",
|
|
36
|
-
txtColor: "#fff"
|
|
37
|
-
};
|
|
38
|
-
const layout = appStore ? pinia.storeToRefs(appStore).layout : vue.ref(defaultLayout);
|
|
39
|
-
const modeConfig = appStore ? pinia.storeToRefs(appStore).modeConfig : vue.ref(defaultModeConfig);
|
|
40
|
-
const headerTokenStyle = appStore ? pinia.storeToRefs(appStore).headerTokenStyle : vue.ref(defaultHeaderTokenStyle);
|
|
18
|
+
const appStore = store.useAppStore();
|
|
19
|
+
const { layout, modeConfig, headerTokenStyle } = pinia.storeToRefs(appStore);
|
|
41
20
|
const {
|
|
42
21
|
headerStyle,
|
|
43
22
|
headerTabStyle,
|
|
@@ -56,7 +35,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
56
35
|
top: 0;
|
|
57
36
|
right: 0;
|
|
58
37
|
z-index: 1;
|
|
59
|
-
background-color: ${modeConfig.value.mode !== "light" ? token.value.colorBgContainer : headerTokenStyle.value.
|
|
38
|
+
background-color: ${modeConfig.value.mode !== "light" ? token.value.colorBgContainer : headerTokenStyle.value.colorBgHeader};
|
|
60
39
|
left: ${left.value};
|
|
61
40
|
height: ${layout.value.headerHeight}px;
|
|
62
41
|
transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
|
|
@@ -79,7 +58,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
79
58
|
align-items: center;
|
|
80
59
|
justify-content: center;
|
|
81
60
|
cursor: pointer;
|
|
82
|
-
color: ${modeConfig.value.mode === "light" ? headerTokenStyle.value.txtColor : "inherit"};
|
|
83
61
|
`
|
|
84
62
|
);
|
|
85
63
|
const rightStyle2 = vue.computed(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderLayout.vue2.cjs","sources":["../../../../../../src/components/layout/components/layout/HeaderLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef
|
|
1
|
+
{"version":3,"file":"HeaderLayout.vue2.cjs","sources":["../../../../../../src/components/layout/components/layout/HeaderLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, type ComputedRef } from \"vue\";\r\nimport { theme } from \"ant-design-vue\";\r\nimport { storeToRefs } from \"pinia\";\r\n\r\nimport {\r\n MenuFoldOutlined,\r\n MenuUnfoldOutlined\r\n} from \"@ant-design/icons-vue\";\r\nimport { useAppStore } from \"@ditari/store\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\nimport type { RouteLocationNormalized } from \"vue-router\";\r\n\r\nimport Tab from \"../../../tab/Tab.vue\";\r\n\r\nconst appStore = useAppStore();\r\n\r\nconst { layout, modeConfig, headerTokenStyle } =\r\n storeToRefs(appStore);\r\n\r\nconst {\r\n headerStyle,\r\n headerTabStyle,\r\n collapsedStyle,\r\n rightStyle\r\n} = useStyle();\r\n\r\nfunction useStyle(): {\r\n headerStyle: ComputedRef<string>;\r\n headerTabStyle: ComputedRef<string>;\r\n collapsedStyle: ComputedRef<string>;\r\n rightStyle: ComputedRef<string>;\r\n} {\r\n const { useToken } = theme;\r\n const { token }: { token: ComputedRef<GlobalToken> } =\r\n useToken();\r\n\r\n const left = computed(\r\n () =>\r\n `${layout.value.collapsed ? layout.value.collapsedWidth : layout.value.sideWidth}px`\r\n );\r\n\r\n const headerStyle = computed(\r\n () => css`\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n z-index: 1;\r\n background-color: ${modeConfig.value.mode !== \"light\"\r\n ? token.value.colorBgContainer\r\n : headerTokenStyle.value.colorBgHeader};\r\n left: ${left.value};\r\n height: ${layout.value.headerHeight}px;\r\n transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);\r\n display: flex;\r\n align-items: flex-end;\r\n `\r\n );\r\n\r\n const headerTabStyle = computed(\r\n () => css`\r\n flex: 1;\r\n overflow: hidden;\r\n padding-right: 10px;\r\n `\r\n );\r\n\r\n const collapsedStyle = computed(\r\n () => css`\r\n padding: 0 10px;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n `\r\n );\r\n\r\n const rightStyle = computed(\r\n () => css`\r\n height: 100%;\r\n `\r\n );\r\n\r\n return {\r\n headerStyle,\r\n headerTabStyle,\r\n collapsedStyle,\r\n rightStyle\r\n };\r\n}\r\n</script>\r\n<template>\r\n <div :class=\"[headerStyle, 'app-header-layout']\">\r\n <div\r\n :class=\"collapsedStyle\"\r\n @click=\"layout.collapsed = !layout.collapsed\"\r\n >\r\n <menu-unfold-outlined\r\n v-if=\"layout.collapsed\"\r\n class=\"trigger\"\r\n />\r\n <menu-fold-outlined v-else />\r\n </div>\r\n <div :class=\"headerTabStyle\">\r\n <Tab />\r\n </div>\r\n <div :class=\"rightStyle\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n"],"names":["useAppStore","storeToRefs","theme","computed","headerStyle","css","headerTabStyle","collapsedStyle","rightStyle","_createElementBlock","_unref","_createElementVNode","_createBlock","MenuUnfoldOutlined","MenuFoldOutlined","_createVNode","Tab","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,WAAWA,iBAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,MAAA,EAAQ,UAAA,EAAY,gBAAA,EAAiB,GAC3CC,kBAAY,QAAQ,CAAA;AAEtB,IAAA,MAAM;AAAA,MACJ,WAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,QAAA,EAAS;AAEb,IAAA,SAAS,QAAA,GAKP;AACA,MAAA,MAAM,EAAE,UAAS,GAAIC,kBAAA;AACrB,MAAA,MAAM,EAAE,KAAA,EAAM,GACZ,QAAA,EAAS;AAEX,MAAA,MAAM,IAAA,GAAOC,YAAA;AAAA,QACX,MACE,CAAA,EAAG,MAAA,CAAO,KAAA,CAAM,SAAA,GAAY,OAAO,KAAA,CAAM,cAAA,GAAiB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EAAA;AAAA,OACpF;AAEA,MAAA,MAAMC,YAAAA,GAAcD,YAAA;AAAA,QAClB,MAAME,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAKgB,UAAA,CAAW,MAAM,IAAA,KAAS,OAAA,GAC1C,MAAM,KAAA,CAAM,gBAAA,GACZ,gBAAA,CAAiB,KAAA,CAAM,aAAa,CAAA;AAAA,YAAA,EAChC,KAAK,KAAK,CAAA;AAAA,cAAA,EACR,MAAA,CAAO,MAAM,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKvC;AAEA,MAAA,MAAMC,eAAAA,GAAiBH,YAAA;AAAA,QACrB,MAAME,OAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAKR;AAEA,MAAA,MAAME,eAAAA,GAAiBJ,YAAA;AAAA,QACrB,MAAME,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,OAQR;AAEA,MAAA,MAAMG,WAAAA,GAAaL,YAAA;AAAA,QACjB,MAAME,OAAA;AAAA;AAAA,IAAA;AAAA,OAGR;AAEA,MAAA,OAAO;AAAA,QACL,WAAA,EAAAD,YAAAA;AAAA,QACA,cAAA,EAAAE,eAAAA;AAAA,QACA,cAAA,EAAAC,eAAAA;AAAA,QACA,UAAA,EAAAC;AAAA,OACF;AAAA,IACF;;8BAGEC,sBAAA;AAAA,QAiBM,KAAA;AAAA,QAAA;AAAA,UAjBA,2BAAQC,UAAA,WAAA,CAAA,EAAW,mBAAA,CAAA;AAAA;;UACvBC,sBAAA;AAAA,YASM,KAAA;AAAA,YAAA;AAAA,cARH,KAAA,qBAAOD,SAAA,CAAA,cAAA,CAAc,CAAA;AAAA,cACrB,+CAAOA,SAAA,CAAA,MAAA,CAAA,CAAO,SAAA,GAAS,CAAIA,SAAA,CAAA,MAAA,CAAA,CAAO,SAAA;AAAA;;cAG3BA,SAAA,CAAA,MAAA,CAAA,CAAO,SAAA,qBADfE,eAAA,CAGEF,SAAA,CAAAG,2BAAA,CAAA,EAAA;AAAA;gBADA,KAAA,EAAM;AAAA,sCAERD,eAAA,CAA6BF,SAAA,CAAAI,yBAAA,CAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA;AAAA;;;;UAE/BH,sBAAA;AAAA,YAEM,KAAA;AAAA,YAAA;AAAA,cAFA,KAAA,qBAAOD,SAAA,CAAA,cAAA,CAAc;AAAA;;cACzBK,gBAAOC,+CAAA;AAAA;;;;UAETL,sBAAA;AAAA,YAEM,KAAA;AAAA,YAAA;AAAA,cAFA,KAAA,qBAAOD,SAAA,CAAA,UAAA,CAAU;AAAA;;cACrBO,cAAA,CAAa,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA;;;;;;;;;;;;;;"}
|