@ibiz-template/vue3-components 0.7.13-alpha.0 → 0.7.14

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.
Files changed (95) hide show
  1. package/dist/{index-WP6TUdg-.js → index-8Lu2Ax-_.js} +1 -1
  2. package/dist/index-8tvyarHw.js +4 -0
  3. package/dist/{index-kgWpXafW.js → index-Hg_8xCYx.js} +1 -1
  4. package/dist/index.min.css +1 -1
  5. package/dist/index.system.min.js +1 -1
  6. package/dist/{xlsx-util-OSsMvylt.js → xlsx-util-OfvrEAre.js} +1 -1
  7. package/es/common/carousel/carousel.d.ts +8 -0
  8. package/es/common/carousel/carousel.mjs +9 -1
  9. package/es/common/carousel-card/carousel-card.css +1 -0
  10. package/es/common/carousel-card/carousel-card.d.ts +41 -0
  11. package/es/common/carousel-card/carousel-card.mjs +218 -0
  12. package/es/common/index.mjs +2 -0
  13. package/es/control/app-menu/app-menu.mjs +1 -1
  14. package/es/control/context-menu/context-menu.css +1 -1
  15. package/es/control/context-menu/context-menu.d.ts +1 -0
  16. package/es/control/context-menu/context-menu.mjs +64 -7
  17. package/es/control/context-menu/index.d.ts +1 -0
  18. package/es/control/dashboard/custom-dashboard-container/custom-dashboard-container.d.ts +76 -1
  19. package/es/control/form/form/form.css +1 -1
  20. package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.d.ts +74 -0
  21. package/es/control/form/form-detail/form-page/form-page.css +1 -1
  22. package/es/control/form/form-detail/form-page/form-page.d.ts +1 -0
  23. package/es/control/form/form-detail/form-page/form-page.mjs +10 -4
  24. package/es/control/form/form-detail/form-page/index.d.ts +1 -0
  25. package/es/control/search-bar/filter-tree/filter-tree.mjs +19 -20
  26. package/es/control/toolbar/short-cut-button/short-cut-button.css +0 -0
  27. package/es/control/toolbar/short-cut-button/short-cut-button.d.ts +48 -0
  28. package/es/control/toolbar/short-cut-button/short-cut-button.mjs +71 -0
  29. package/es/control/toolbar/toolbar.mjs +38 -2
  30. package/es/control/tree/tree.css +1 -1
  31. package/es/control/tree/tree.mjs +2 -1
  32. package/es/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.css +1 -1
  33. package/es/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.d.ts +1 -0
  34. package/es/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.mjs +25 -13
  35. package/es/index.mjs +1 -0
  36. package/es/locale/en/index.d.ts +1 -0
  37. package/es/locale/en/index.mjs +2 -1
  38. package/es/locale/zh-CN/index.d.ts +1 -0
  39. package/es/locale/zh-CN/index.mjs +2 -1
  40. package/es/panel-component/auth-captcha/auth-captcha.controller.d.ts +13 -0
  41. package/es/panel-component/auth-captcha/auth-captcha.controller.mjs +15 -11
  42. package/es/panel-component/auth-userinfo/auth-userinfo.d.ts +1 -1
  43. package/es/panel-component/auth-userinfo/auth-userinfo.mjs +2 -7
  44. package/es/panel-component/auth-userinfo/index.d.ts +1 -1
  45. package/es/panel-component/panel-button/panel-button.controller.d.ts +1 -1
  46. package/es/panel-component/panel-button/panel-button.controller.mjs +6 -9
  47. package/es/panel-component/panel-static-carousel/index.d.ts +1 -0
  48. package/es/panel-component/panel-static-carousel/panel-static-carousel.d.ts +1 -0
  49. package/es/panel-component/panel-static-carousel/panel-static-carousel.mjs +13 -2
  50. package/es/panel-component/short-cut/index.d.ts +21 -4
  51. package/es/panel-component/short-cut/short-cut.css +1 -1
  52. package/es/panel-component/short-cut/short-cut.d.ts +21 -4
  53. package/es/panel-component/short-cut/short-cut.mjs +62 -42
  54. package/es/util/app-util/app-util.d.ts +90 -0
  55. package/es/util/app-util/app-util.mjs +152 -0
  56. package/es/util/index.d.ts +1 -0
  57. package/es/util/index.mjs +1 -0
  58. package/es/view-engine/login-view.engine.d.ts +31 -3
  59. package/es/view-engine/login-view.engine.mjs +32 -12
  60. package/es/web-app/components/modal-router-shell/modal-router-shell.mjs +19 -5
  61. package/es/web-app/main.mjs +2 -0
  62. package/lib/common/carousel/carousel.cjs +9 -1
  63. package/lib/common/carousel-card/carousel-card.cjs +220 -0
  64. package/lib/common/carousel-card/carousel-card.css +1 -0
  65. package/lib/common/index.cjs +2 -0
  66. package/lib/control/app-menu/app-menu.cjs +1 -1
  67. package/lib/control/context-menu/context-menu.cjs +63 -6
  68. package/lib/control/context-menu/context-menu.css +1 -1
  69. package/lib/control/form/form/form.css +1 -1
  70. package/lib/control/form/form-detail/form-page/form-page.cjs +10 -4
  71. package/lib/control/form/form-detail/form-page/form-page.css +1 -1
  72. package/lib/control/search-bar/filter-tree/filter-tree.cjs +19 -20
  73. package/lib/control/toolbar/short-cut-button/short-cut-button.cjs +73 -0
  74. package/lib/control/toolbar/short-cut-button/short-cut-button.css +0 -0
  75. package/lib/control/toolbar/toolbar.cjs +37 -1
  76. package/lib/control/tree/tree.cjs +2 -1
  77. package/lib/control/tree/tree.css +1 -1
  78. package/lib/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.cjs +24 -12
  79. package/lib/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.css +1 -1
  80. package/lib/index.cjs +2 -0
  81. package/lib/locale/en/index.cjs +2 -1
  82. package/lib/locale/zh-CN/index.cjs +2 -1
  83. package/lib/panel-component/auth-captcha/auth-captcha.controller.cjs +15 -11
  84. package/lib/panel-component/auth-userinfo/auth-userinfo.cjs +2 -7
  85. package/lib/panel-component/panel-button/panel-button.controller.cjs +6 -9
  86. package/lib/panel-component/panel-static-carousel/panel-static-carousel.cjs +13 -2
  87. package/lib/panel-component/short-cut/short-cut.cjs +61 -41
  88. package/lib/panel-component/short-cut/short-cut.css +1 -1
  89. package/lib/util/app-util/app-util.cjs +154 -0
  90. package/lib/util/index.cjs +2 -0
  91. package/lib/view-engine/login-view.engine.cjs +32 -12
  92. package/lib/web-app/components/modal-router-shell/modal-router-shell.cjs +17 -3
  93. package/lib/web-app/main.cjs +2 -0
  94. package/package.json +7 -7
  95. package/dist/index-Ky5xo5V5.js +0 -4
@@ -0,0 +1,152 @@
1
+ "use strict";
2
+ class AppUtil {
3
+ /**
4
+ * Creates an instance of AppUtil.
5
+ * @author tony001
6
+ * @date 2024-05-14 17:05:00
7
+ * @param {Router} router
8
+ */
9
+ constructor(router) {
10
+ this.router = router;
11
+ }
12
+ /**
13
+ * 登录
14
+ *
15
+ * @author tony001
16
+ * @date 2024-05-14 16:05:41
17
+ * @param {string} loginName
18
+ * @param {string} password
19
+ * @param {(boolean | undefined)} [remember]
20
+ * @param {(IData | undefined)} [headers]
21
+ * @param {(IData | undefined)} [opts]
22
+ * @return {*} {Promise<boolean>}
23
+ */
24
+ async login(loginName, password, remember, headers, opts) {
25
+ const bol = await ibiz.auth.login(loginName, password, remember, headers);
26
+ if (bol === true) {
27
+ window.location.hash = this.router.currentRoute.value.query.ru || "/";
28
+ window.history.pushState({}, "");
29
+ window.location.reload();
30
+ }
31
+ return bol;
32
+ }
33
+ /**
34
+ * 登出
35
+ *
36
+ * @author tony001
37
+ * @date 2024-05-14 16:05:02
38
+ * @param {(IData | undefined)} [opts]
39
+ * @return {*} {Promise<boolean>}
40
+ */
41
+ async logout(opts) {
42
+ const bol = await ibiz.auth.logout();
43
+ if (bol) {
44
+ const path = window.location;
45
+ if (path.search.indexOf("isAnonymous=true") !== -1) {
46
+ const href = "".concat(path.origin).concat(path.pathname).concat(path.hash);
47
+ window.history.replaceState({}, "", href);
48
+ }
49
+ await this.router.push(
50
+ "/login?ru=".concat(encodeURIComponent(
51
+ window.location.hash.replace("#/", "/")
52
+ ))
53
+ );
54
+ ibiz.util.showAppLoading();
55
+ window.location.reload();
56
+ }
57
+ return bol;
58
+ }
59
+ /**
60
+ * 变更密码
61
+ *
62
+ * @author tony001
63
+ * @date 2024-05-14 16:05:11
64
+ * @param {string} oldPwd
65
+ * @param {string} newPwd
66
+ * @param {(IData | undefined)} [opts]
67
+ * @return {*} {Promise<boolean>}
68
+ */
69
+ async changePwd(oldPwd, newPwd, opts) {
70
+ let bol = this.validatePwd(oldPwd, newPwd, opts);
71
+ if (bol) {
72
+ bol = await ibiz.auth.changePwd(oldPwd, newPwd);
73
+ }
74
+ return bol;
75
+ }
76
+ /**
77
+ * 切换组织
78
+ *
79
+ * @author tony001
80
+ * @date 2024-05-14 16:05:20
81
+ * @param {string} oldOrgId
82
+ * @param {string} newOrgId
83
+ * @param {(IData | undefined)} [opts]
84
+ * @return {*} {Promise<boolean>}
85
+ */
86
+ switchOrg(oldOrgId, newOrgId, opts) {
87
+ throw new Error("Method not implemented.");
88
+ }
89
+ /**
90
+ * 切换主题
91
+ *
92
+ * @author tony001
93
+ * @date 2024-05-14 16:05:30
94
+ * @param {string} oldTheme
95
+ * @param {string} newTheme
96
+ * @param {(IData | undefined)} [opts]
97
+ * @return {*} {Promise<boolean>}
98
+ */
99
+ switchTheme(oldTheme, newTheme, opts) {
100
+ throw new Error("Method not implemented.");
101
+ }
102
+ /**
103
+ * 切换语言
104
+ *
105
+ * @author tony001
106
+ * @date 2024-05-14 16:05:42
107
+ * @param {string} oldLanguage
108
+ * @param {string} newLanguage
109
+ * @param {(IData | undefined)} [opts]
110
+ * @return {*} {Promise<boolean>}
111
+ */
112
+ switchLanguage(oldLanguage, newLanguage, opts) {
113
+ throw new Error("Method not implemented.");
114
+ }
115
+ /**
116
+ * 校验密码
117
+ *
118
+ * @author tony001
119
+ * @date 2024-05-14 17:05:31
120
+ * @protected
121
+ * @param {string} oldPwd
122
+ * @param {string} newPwd
123
+ * @param {IData} [opts={}]
124
+ * @return {*} {boolean}
125
+ */
126
+ validatePwd(oldPwd, newPwd, opts = {}) {
127
+ const { surePwd } = opts;
128
+ if (!oldPwd) {
129
+ ibiz.message.error("\u539F\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A");
130
+ return false;
131
+ }
132
+ if (!newPwd) {
133
+ ibiz.message.error("\u65B0\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A");
134
+ return false;
135
+ }
136
+ if (!surePwd) {
137
+ ibiz.message.error("\u786E\u8BA4\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A");
138
+ return false;
139
+ }
140
+ if (oldPwd === newPwd) {
141
+ ibiz.message.error("\u65B0\u5BC6\u7801\u4E0D\u80FD\u4E0E\u65E7\u5BC6\u7801\u4E00\u81F4");
142
+ return false;
143
+ }
144
+ if (newPwd !== surePwd) {
145
+ ibiz.message.error("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
146
+ return false;
147
+ }
148
+ return true;
149
+ }
150
+ }
151
+
152
+ export { AppUtil };
@@ -8,3 +8,4 @@ export { OverlayController } from './overlay-controller/overlay-controller';
8
8
  export { usePagination } from './pagination/use-pagination';
9
9
  export { NoticeUtil } from './notice-util/notice-util';
10
10
  export { RenderUtil } from './render-util/render-util';
11
+ export { AppUtil } from './app-util/app-util';
package/es/util/index.mjs CHANGED
@@ -8,5 +8,6 @@ export { OverlayController } from './overlay-controller/overlay-controller.mjs';
8
8
  export { usePagination } from './pagination/use-pagination.mjs';
9
9
  export { NoticeUtil } from './notice-util/notice-util.mjs';
10
10
  export { RenderUtil } from './render-util/render-util.mjs';
11
+ export { AppUtil } from './app-util/app-util.mjs';
11
12
 
12
13
  "use strict";
@@ -1,11 +1,39 @@
1
- import { ViewController, ViewEngineBase, AppLoginViewController, IViewState, IViewEvent } from '@ibiz-template/runtime';
1
+ import { ViewController, ViewEngineBase, IAppLoginViewState, IAppLoginViewEvent } from '@ibiz-template/runtime';
2
2
  import { RouteLocationNormalizedLoaded } from 'vue-router';
3
3
  import { IAppView } from '@ibiz/model-core';
4
4
  export declare class LoginViewEngine extends ViewEngineBase {
5
+ /**
6
+ * 路由对象
7
+ *
8
+ * @type {RouteLocationNormalizedLoaded}
9
+ * @memberof LoginViewEngine
10
+ */
5
11
  route: RouteLocationNormalizedLoaded;
6
- protected view: AppLoginViewController<IAppView, IViewState, IViewEvent>;
7
- get AppLoginView(): ViewController;
12
+ /**
13
+ * 应用登录视图控制器
14
+ *
15
+ * @protected
16
+ * @type {ViewController<
17
+ * IAppView,
18
+ * IAppLoginViewState,
19
+ * IAppLoginViewEvent
20
+ * >}
21
+ * @memberof LoginViewEngine
22
+ */
23
+ protected view: ViewController<IAppView, IAppLoginViewState, IAppLoginViewEvent>;
24
+ /**
25
+ * 视图mounted生命周期执行逻辑
26
+ *
27
+ * @return {*} {Promise<void>}
28
+ * @memberof LoginViewEngine
29
+ */
8
30
  onMounted(): Promise<void>;
31
+ /**
32
+ * 视图destroyed生命周期执行逻辑
33
+ *
34
+ * @return {*} {Promise<void>}
35
+ * @memberof LoginViewEngine
36
+ */
9
37
  onDestroyed(): Promise<void>;
10
38
  call(key: string, args?: IData): Promise<IData | null | undefined>;
11
39
  login(args: IData): Promise<void>;
@@ -12,14 +12,21 @@ var __publicField = (obj, key, value) => {
12
12
  class LoginViewEngine extends ViewEngineBase {
13
13
  constructor() {
14
14
  super(...arguments);
15
+ /**
16
+ * 路由对象
17
+ *
18
+ * @type {RouteLocationNormalizedLoaded}
19
+ * @memberof LoginViewEngine
20
+ */
15
21
  __publicField(this, "route", useRoute());
16
22
  __publicField(this, "enterKeyListener", async (event) => {
17
- if (event.key === "Enter" && this.AppLoginView.layoutPanel) {
23
+ if (event.key === "Enter" && this.view.layoutPanel) {
18
24
  const args = {
19
25
  data: [
20
26
  {
21
- username: this.AppLoginView.layoutPanel.data.username,
22
- password: this.AppLoginView.layoutPanel.data.password
27
+ username: this.view.layoutPanel.data.username,
28
+ password: this.view.layoutPanel.data.password,
29
+ captcha: this.view.layoutPanel.data.captcha
23
30
  }
24
31
  ]
25
32
  };
@@ -27,13 +34,22 @@ class LoginViewEngine extends ViewEngineBase {
27
34
  }
28
35
  });
29
36
  }
30
- get AppLoginView() {
31
- return this.view.getController("AppLoginView");
32
- }
37
+ /**
38
+ * 视图mounted生命周期执行逻辑
39
+ *
40
+ * @return {*} {Promise<void>}
41
+ * @memberof LoginViewEngine
42
+ */
33
43
  async onMounted() {
34
44
  super.onMounted();
35
45
  document.addEventListener("keydown", this.enterKeyListener);
36
46
  }
47
+ /**
48
+ * 视图destroyed生命周期执行逻辑
49
+ *
50
+ * @return {*} {Promise<void>}
51
+ * @memberof LoginViewEngine
52
+ */
37
53
  async onDestroyed() {
38
54
  super.onDestroyed();
39
55
  document.removeEventListener("keydown", this.enterKeyListener);
@@ -51,8 +67,12 @@ class LoginViewEngine extends ViewEngineBase {
51
67
  let rememberme;
52
68
  const headers = {};
53
69
  const data = args.data[0] || {};
54
- if (this.AppLoginView.layoutPanel) {
55
- const panelData = this.AppLoginView.layoutPanel.data;
70
+ const panelDataParent = args.params.panelDataParent;
71
+ if (this.view.layoutPanel) {
72
+ if (!await this.view.layoutPanel.validate(panelDataParent)) {
73
+ return;
74
+ }
75
+ const panelData = this.view.layoutPanel.data;
56
76
  if (typeof panelData.isRemember === "boolean") {
57
77
  rememberme = panelData.isRemember;
58
78
  }
@@ -73,16 +93,16 @@ class LoginViewEngine extends ViewEngineBase {
73
93
  rememberme,
74
94
  headers
75
95
  );
76
- this.view.hooks.afterLogin.call({ ok: bol });
96
+ this.view.evt.emit("onAfterLogin", { ok: bol, panelDataParent });
77
97
  if (bol === true) {
78
98
  window.location.hash = this.route.query.ru || "/";
79
99
  window.location.reload();
80
100
  }
81
101
  }
82
102
  async cancelChanges() {
83
- if (this.AppLoginView.layoutPanel) {
84
- Object.keys(this.AppLoginView.layoutPanel.panelItems).forEach((key) => {
85
- const controller = this.AppLoginView.layoutPanel.panelItems[key];
103
+ if (this.view.layoutPanel) {
104
+ Object.keys(this.view.layoutPanel.panelItems).forEach((key) => {
105
+ const controller = this.view.layoutPanel.panelItems[key];
86
106
  const { viewFieldName } = controller.model;
87
107
  if (viewFieldName) {
88
108
  controller.setDataValue("", viewFieldName);
@@ -1,6 +1,6 @@
1
1
  import { ref, toRaw, onUnmounted, createVNode, defineComponent } from 'vue';
2
- import { parseRouteViewData, createOverlayView, routerCallback } from '@ibiz-template/vue3-util';
3
- import { useRoute, useRouter } from 'vue-router';
2
+ import { parseRouteViewData, createOverlayView, routerCallback, route2routePath } from '@ibiz-template/vue3-util';
3
+ import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
4
4
  import { IBizContext } from '@ibiz-template/core';
5
5
  import { RouteConst } from '@ibiz-template/runtime';
6
6
  import { isEmpty } from 'ramda';
@@ -18,10 +18,11 @@ const ModalRouterShell = /* @__PURE__ */ defineComponent({
18
18
  }
19
19
  },
20
20
  setup(props) {
21
- const route = useRoute();
21
+ const routeObj = useRoute();
22
22
  const router = useRouter();
23
23
  const isDestroyed = ref(false);
24
24
  const viewData = ref({});
25
+ const pathHistory = [];
25
26
  const destroyContext = () => {
26
27
  if (viewData.value.context) {
27
28
  const {
@@ -41,9 +42,12 @@ const ModalRouterShell = /* @__PURE__ */ defineComponent({
41
42
  }
42
43
  destroyContext();
43
44
  });
44
- const openView = async () => {
45
+ const openView = async (route) => {
45
46
  var _a;
46
47
  viewData.value = await parseRouteViewData(route, routeDepth, true);
48
+ if (isDestroyed.value) {
49
+ return;
50
+ }
47
51
  if (!(viewData.value.context instanceof IBizContext)) {
48
52
  viewData.value.context = IBizContext.create(viewData.value.context);
49
53
  }
@@ -97,6 +101,7 @@ const ModalRouterShell = /* @__PURE__ */ defineComponent({
97
101
  };
98
102
  overlay = ibiz.overlay.createModal(component, void 0, opts);
99
103
  overlay.present();
104
+ pathHistory.push(route.fullPath);
100
105
  const result = await overlay.onWillDismiss();
101
106
  overlay = null;
102
107
  if (isDestroyed.value === false) {
@@ -112,7 +117,16 @@ const ModalRouterShell = /* @__PURE__ */ defineComponent({
112
117
  });
113
118
  }
114
119
  };
115
- openView();
120
+ onBeforeRouteUpdate((to, from) => {
121
+ if (!isDestroyed.value && pathHistory.length > 0 && pathHistory.indexOf(from.fullPath) !== -1 && pathHistory.indexOf(to.fullPath) === -1) {
122
+ const pathNodes = route2routePath(to).pathNodes;
123
+ const lastNode = pathNodes[pathNodes.length - 1];
124
+ if (lastNode && lastNode.viewName === RouteConst.ROUTE_MODAL_TAG) {
125
+ openView(to);
126
+ }
127
+ }
128
+ });
129
+ openView(routeObj);
116
130
  return {};
117
131
  },
118
132
  render() {
@@ -10,6 +10,7 @@ import '../util/index.mjs';
10
10
  import './guard/index.mjs';
11
11
  import { UnauthorizedHandler } from './util/unauthorized-handler/unauthorized-handler.mjs';
12
12
  import { DynaAuthGuard } from './guard/auth-guard/dyna-auth-guard.mjs';
13
+ import { AppUtil } from '../util/app-util/app-util.mjs';
13
14
  import { OpenViewUtil } from '../util/open-view-util/open-view-util.mjs';
14
15
  import { RenderUtil } from '../util/render-util/render-util.mjs';
15
16
  import { MessageUtil } from '../util/message-util/message-util.mjs';
@@ -62,6 +63,7 @@ async function runApp(plugins, opts) {
62
63
  }
63
64
  AppRouter.setAuthGuard((notLogin) => authGuard.verify(notLogin));
64
65
  app.use(AppRouter.getRouter());
66
+ ibiz.appUtil = new AppUtil(AppRouter.getRouter());
65
67
  ibiz.openView = new OpenViewUtil(AppRouter.getRouter());
66
68
  ibiz.render = new RenderUtil();
67
69
  ibiz.message = new MessageUtil();
@@ -22,6 +22,10 @@ const IBizCarouselComponent = /* @__PURE__ */ vue.defineComponent({
22
22
  timeSpan: {
23
23
  type: Number,
24
24
  default: 3e3
25
+ },
26
+ carouselMode: {
27
+ type: String,
28
+ required: true
25
29
  }
26
30
  },
27
31
  setup(props) {
@@ -59,7 +63,11 @@ const IBizCarouselComponent = /* @__PURE__ */ vue.defineComponent({
59
63
  }, null);
60
64
  }
61
65
  };
62
- return vue.createVNode("div", null, [vue.createVNode(vue.resolveComponent("el-carousel"), {
66
+ return vue.createVNode("div", null, [this.carouselMode === "card" ? vue.createVNode(vue.resolveComponent("IBizCarousel-card"), {
67
+ "swipeData": this.swipeData,
68
+ "isAuto": this.isAuto,
69
+ "timeSpan": this.timeSpan
70
+ }, null) : vue.createVNode(vue.resolveComponent("el-carousel"), {
63
71
  "class": this.ns.b(),
64
72
  "autoplay": this.isAuto,
65
73
  "interval": this.timeSpan
@@ -0,0 +1,220 @@
1
+ 'use strict';
2
+
3
+ var vue = require('vue');
4
+ var vue3Util = require('@ibiz-template/vue3-util');
5
+ require('./carousel-card.css');
6
+
7
+ "use strict";
8
+ const IBizCarouselCard = /* @__PURE__ */ vue.defineComponent({
9
+ name: "IBizCarouselCard",
10
+ props: {
11
+ swipeData: {
12
+ type: Object,
13
+ required: true
14
+ },
15
+ isAuto: {
16
+ type: Boolean,
17
+ default: true
18
+ },
19
+ timeSpan: {
20
+ type: Number,
21
+ default: 3e3
22
+ }
23
+ },
24
+ setup(props) {
25
+ const ns = vue3Util.useNamespace("carousel-card");
26
+ const nowIndex = vue.ref(3);
27
+ const mainDom = vue.ref();
28
+ const listDom = vue.ref();
29
+ const gap = 0;
30
+ const imgWidth = vue.ref(600);
31
+ const containerWidth = vue.ref(0);
32
+ const diffLen = vue.computed(() => {
33
+ return (containerWidth.value - imgWidth.value - gap * 2) / 2;
34
+ });
35
+ let timer = null;
36
+ const imgDoms = document.getElementsByClassName("swiper-slide-card");
37
+ const scale = 0.8;
38
+ const aniTime = 500;
39
+ const resImgArr = vue.computed(() => {
40
+ if (props.swipeData.length > 2) {
41
+ return [...props.swipeData.slice(-2), ...props.swipeData, ...props.swipeData.slice(0, 2)];
42
+ }
43
+ return [...props.swipeData];
44
+ });
45
+ const setScale = () => {
46
+ for (let i = 0; i < imgDoms.length; i++) {
47
+ if (props.swipeData.length === 2) {
48
+ imgDoms[0].style.left = "".concat(containerWidth.value / 4 - imgWidth.value / 2, "px");
49
+ imgDoms[1].style.left = "".concat(containerWidth.value / 4 * 3 - imgWidth.value / 2, "px");
50
+ } else if (props.swipeData.length === 1) {
51
+ imgDoms[i].style.left = "".concat(containerWidth.value / 2 - imgWidth.value / 2, "px");
52
+ } else {
53
+ imgDoms[i].style.left = "".concat((i - 1) * (imgWidth.value + gap), "px");
54
+ }
55
+ if (i === nowIndex.value - 1) {
56
+ imgDoms[i].style.transform = "scale(1)";
57
+ } else {
58
+ imgDoms[i].style.transform = "scale(".concat(scale, ")");
59
+ }
60
+ }
61
+ };
62
+ const nextSlider = (anitime) => {
63
+ if (props.swipeData.length === 2) {
64
+ nowIndex.value = nowIndex.value ? 0 : 1;
65
+ setScale();
66
+ } else if (props.swipeData.length === 1) {
67
+ } else {
68
+ if (nowIndex.value >= 2) {
69
+ mainDom.value.style.transition = "left ".concat(anitime / 1e3, "s");
70
+ mainDom.value.style.left = "".concat(parseInt(mainDom.value.style.left, 10) - (gap + imgWidth.value), "px");
71
+ }
72
+ if (nowIndex.value === props.swipeData.length + 1) {
73
+ nowIndex.value = props.swipeData.length + 2;
74
+ setScale();
75
+ setTimeout(() => {
76
+ nowIndex.value = 2;
77
+ setScale();
78
+ mainDom.value.style.transitionProperty = "none";
79
+ mainDom.value.style.left = "".concat(-(imgWidth.value - diffLen.value), "px");
80
+ }, anitime);
81
+ } else {
82
+ nowIndex.value++;
83
+ setScale();
84
+ }
85
+ }
86
+ };
87
+ const prevSlider = (anitime) => {
88
+ if (props.swipeData.length === 2) {
89
+ nowIndex.value = nowIndex.value ? 0 : 1;
90
+ setScale();
91
+ } else if (props.swipeData.length === 1) {
92
+ } else {
93
+ nowIndex.value--;
94
+ mainDom.value.style.transition = "left ".concat(anitime / 1e3, "s");
95
+ mainDom.value.style.left = "".concat(parseInt(mainDom.value.style.left, 10) + (gap + imgWidth.value), "px");
96
+ if (nowIndex.value === 1) {
97
+ setScale();
98
+ setTimeout(() => {
99
+ nowIndex.value = props.swipeData.length + 1;
100
+ setScale();
101
+ mainDom.value.style.transitionProperty = "none";
102
+ mainDom.value.style.left = "".concat(-(parseInt(imgDoms[nowIndex.value].style.left, 10) - diffLen.value - gap), "px");
103
+ }, anitime);
104
+ } else {
105
+ setScale();
106
+ }
107
+ }
108
+ };
109
+ const startAutoplay = () => {
110
+ timer = window.setInterval(() => nextSlider(aniTime), props.timeSpan);
111
+ };
112
+ const stopAutoplay = () => {
113
+ if (timer) {
114
+ window.clearInterval(timer);
115
+ timer = null;
116
+ }
117
+ };
118
+ setScale();
119
+ vue.onMounted(() => {
120
+ if (props.isAuto) {
121
+ startAutoplay();
122
+ }
123
+ });
124
+ vue.onBeforeUnmount(() => {
125
+ stopAutoplay();
126
+ });
127
+ vue.nextTick(() => {
128
+ containerWidth.value = listDom.value.clientWidth;
129
+ imgWidth.value = imgDoms[0].clientWidth;
130
+ if (mainDom.value) {
131
+ mainDom.value.style.left = "".concat(-(2 * imgWidth.value + gap - diffLen.value), "px");
132
+ mainDom.value.style.width = "".concat((props.swipeData.length + 2) * (imgWidth.value + gap / 2), "px");
133
+ }
134
+ setScale();
135
+ });
136
+ const btnClick = (pos) => {
137
+ if (pos === "left") {
138
+ prevSlider(aniTime);
139
+ } else if (pos === "right") {
140
+ nextSlider(aniTime);
141
+ }
142
+ };
143
+ const dotClick = (targetIndex) => {
144
+ nowIndex.value = targetIndex + 2 + 1;
145
+ if (nowIndex.value === props.swipeData.length + 2) {
146
+ nowIndex.value = 2;
147
+ }
148
+ mainDom.value.style.transition = "left ".concat(aniTime / 1e3, "s");
149
+ mainDom.value.style.left = "".concat(-((nowIndex.value - 1) * imgWidth.value + gap - diffLen.value), "px");
150
+ setScale();
151
+ };
152
+ return {
153
+ ns,
154
+ btnClick,
155
+ mainDom,
156
+ listDom,
157
+ imgWidth,
158
+ resImgArr,
159
+ dotClick,
160
+ nowIndex
161
+ };
162
+ },
163
+ render() {
164
+ const renderPic = (item) => {
165
+ if (item.cssClass) {
166
+ if (item.cssClass.indexOf("fa-") !== -1) {
167
+ return vue.createVNode("i", {
168
+ "class": [item.cssClas, "swiper-slide-card"]
169
+ }, null);
170
+ }
171
+ return vue.createVNode("ion-icon", {
172
+ "class": "swiper-slide-card",
173
+ "name": item.cssClass
174
+ }, null);
175
+ }
176
+ if (item.imgUrl) {
177
+ return vue.createVNode("img", {
178
+ "class": "swiper-slide-card",
179
+ "style": "width: ".concat(this.imgWidth, "px"),
180
+ "alt": item.name,
181
+ "src": item.imgUrl
182
+ }, null);
183
+ }
184
+ };
185
+ let newIndex = this.nowIndex;
186
+ if (this.nowIndex < this.swipeData.length) {
187
+ newIndex = this.nowIndex + this.swipeData.length;
188
+ }
189
+ return vue.createVNode("div", {
190
+ "class": this.ns.b()
191
+ }, [vue.createVNode("div", {
192
+ "class": this.ns.e("swiper-list"),
193
+ "ref": "listDom"
194
+ }, [vue.createVNode("div", {
195
+ "class": this.ns.e("swiper-main"),
196
+ "ref": "mainDom"
197
+ }, [this.resImgArr.map((item) => {
198
+ return renderPic(item);
199
+ })]), vue.createVNode("div", {
200
+ "id": "prev-card",
201
+ "class": this.ns.e("leftBtn"),
202
+ "style": "width:".concat(this.imgWidth, "px"),
203
+ "onClick": () => this.btnClick("left")
204
+ }, null), vue.createVNode("div", {
205
+ "id": "next-card",
206
+ "class": this.ns.e("rightBtn"),
207
+ "style": "width:".concat(this.imgWidth, "px"),
208
+ "onClick": () => this.btnClick("right")
209
+ }, null)]), vue.createVNode("div", {
210
+ "class": this.ns.e("dot")
211
+ }, [this.swipeData.map((_item, index) => {
212
+ return vue.createVNode("div", {
213
+ "class": [this.ns.e("dot-item"), index === newIndex - 3 ? "isActive" : ""],
214
+ "onClick": () => this.dotClick(index)
215
+ }, null);
216
+ })])]);
217
+ }
218
+ });
219
+
220
+ exports.IBizCarouselCard = IBizCarouselCard;
@@ -0,0 +1 @@
1
+ .ibiz-carousel-card{position:relative;z-index:1;padding:0;margin-right:auto;margin-left:auto;overflow:hidden;list-style:none}.ibiz-carousel-card__swiper-list{position:relative;z-index:1;padding:0;margin-right:auto;margin-left:auto;overflow:hidden;list-style:none}.ibiz-carousel-card__swiper-main{position:relative;z-index:1;box-sizing:content-box;display:flex;width:100%;height:100%;transition:transform .5s ease-in-out;transition-property:transform}.ibiz-carousel-card__swiper-main img{display:block;display:inline-block;flex-shrink:0;border-radius:4px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.ibiz-carousel-card__leftBtn{position:absolute;top:0;left:0;z-index:2;height:100%;background-image:linear-gradient(90deg,#fff 38%,rgba(255,255,255,0));transition:.4s}.ibiz-carousel-card__rightBtn{position:absolute;top:0;right:0;z-index:2;height:100%;background-image:linear-gradient(270deg,#fff 38%,rgba(255,255,255,0));transition:.4s}.ibiz-carousel-card__dot{z-index:1;display:flex;justify-content:center;margin-top:20px}.ibiz-carousel-card__dot-item{width:8px;height:8px;margin-right:8px;cursor:pointer;background:#eee;border-radius:4px;transition:all .5s ease}.ibiz-carousel-card__dot-item.isActive{width:16px;background:#6698ff}
@@ -23,6 +23,7 @@ var gridSetting = require('./grid-setting/grid-setting.cjs');
23
23
  var doingNotice = require('./doing-notice/doing-notice.cjs');
24
24
  var carousel = require('./carousel/carousel.cjs');
25
25
  var coopAlert = require('./coop-alert/coop-alert.cjs');
26
+ var carouselCard = require('./carousel-card/carousel-card.cjs');
26
27
 
27
28
  "use strict";
28
29
  const IBizCommonComponents = {
@@ -59,6 +60,7 @@ const IBizCommonComponents = {
59
60
  v.component(vue3Util.IBizBadge.name, vue3Util.IBizBadge);
60
61
  v.component(carousel.IBizCarouselComponent.name, carousel.IBizCarouselComponent);
61
62
  v.component(coopAlert.IBizCoopAlert.name, coopAlert.IBizCoopAlert);
63
+ v.component(carouselCard.IBizCarouselCard.name, carouselCard.IBizCarouselCard);
62
64
  }
63
65
  };
64
66
 
@@ -280,7 +280,7 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
280
280
  "onSelect": this.onClick,
281
281
  "theme": "light",
282
282
  "mode": this.menuMode,
283
- "ellipsis": false
283
+ "ellipsis": this.menuMode === "horizontal"
284
284
  }, _isSlot(_slot = this.menus.map((item) => {
285
285
  var _a;
286
286
  if (((_a = item.children) == null ? void 0 : _a.length) > 0) {