@ibiz-template/vue3-util 0.7.41-alpha.2 → 0.7.41-alpha.20

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 (121) hide show
  1. package/dist/index.min.css +1 -1
  2. package/dist/index.system.min.js +1 -1
  3. package/es/common/badge/badge.css +1 -1
  4. package/es/common/control-base/control-base.css +1 -1
  5. package/es/common/control-base/control-base.d.ts +1 -0
  6. package/es/common/control-base/control-base.d.ts.map +1 -1
  7. package/es/common/control-base/control-base.mjs +38 -4
  8. package/es/common/custom-render/custom-render.d.ts.map +1 -1
  9. package/es/common/custom-render/custom-render.mjs +2 -2
  10. package/es/common/index.d.ts +1 -0
  11. package/es/common/index.d.ts.map +1 -1
  12. package/es/common/index.mjs +1 -0
  13. package/es/common/signature-pad/signature-pad.css +1 -0
  14. package/es/common/signature-pad/signature-pad.d.ts +19 -0
  15. package/es/common/signature-pad/signature-pad.d.ts.map +1 -0
  16. package/es/common/signature-pad/signature-pad.mjs +165 -0
  17. package/es/common/signature-pad/util/bezier.d.ts +58 -0
  18. package/es/common/signature-pad/util/bezier.d.ts.map +1 -0
  19. package/es/common/signature-pad/util/bezier.mjs +109 -0
  20. package/es/common/signature-pad/util/point.d.ts +55 -0
  21. package/es/common/signature-pad/util/point.d.ts.map +1 -0
  22. package/es/common/signature-pad/util/point.mjs +51 -0
  23. package/es/common/signature-pad/util/signature_pad.d.ts +593 -0
  24. package/es/common/signature-pad/util/signature_pad.d.ts.map +1 -0
  25. package/es/common/signature-pad/util/signature_pad.mjs +1018 -0
  26. package/es/common/view-shell/view-shell.d.ts +8 -1
  27. package/es/common/view-shell/view-shell.d.ts.map +1 -1
  28. package/es/common/view-shell/view-shell.mjs +13 -2
  29. package/es/control/panel/panel/panel.d.ts.map +1 -1
  30. package/es/control/panel/panel/panel.mjs +12 -1
  31. package/es/control/panel/view-layout-panel/view-layout-panel.d.ts +1 -1
  32. package/es/control/panel/view-layout-panel/view-layout-panel.d.ts.map +1 -1
  33. package/es/control/panel/view-layout-panel/view-layout-panel.mjs +12 -1
  34. package/es/index.mjs +2 -0
  35. package/es/locale/en/index.d.ts +1 -0
  36. package/es/locale/en/index.d.ts.map +1 -1
  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.d.ts.map +1 -1
  40. package/es/locale/zh-CN/index.mjs +2 -1
  41. package/es/panel-component/multi-data-container/multi-data-container.d.ts +1 -1
  42. package/es/panel-component/multi-data-container/multi-data-container.d.ts.map +1 -1
  43. package/es/panel-component/multi-data-container-raw/multi-data-container-raw.d.ts +1 -1
  44. package/es/panel-component/multi-data-container-raw/multi-data-container-raw.d.ts.map +1 -1
  45. package/es/panel-component/nav-pos/nav-pos.controller.d.ts +1 -1
  46. package/es/panel-component/nav-pos/nav-pos.d.ts +1 -1
  47. package/es/panel-component/panel-container/panel-container.d.ts.map +1 -1
  48. package/es/panel-component/panel-container/panel-container.mjs +30 -2
  49. package/es/panel-component/panel-field/panel-field.controller.mjs +1 -1
  50. package/es/panel-component/panel-tab-page/panel-tab-page.d.ts +1 -1
  51. package/es/panel-component/single-data-container/single-data-container.d.ts +1 -1
  52. package/es/panel-component/single-data-container/single-data-container.d.ts.map +1 -1
  53. package/es/panel-component/teleport-placeholder/teleport-placeholder.d.ts +1 -0
  54. package/es/panel-component/teleport-placeholder/teleport-placeholder.d.ts.map +1 -1
  55. package/es/panel-component/teleport-placeholder/teleport-placeholder.state.d.ts +1 -1
  56. package/es/panel-component/teleport-placeholder/teleport-placeholder.state.mjs +1 -1
  57. package/es/plugin/plugin-factory/plugin-factory.d.ts +13 -12
  58. package/es/plugin/plugin-factory/plugin-factory.d.ts.map +1 -1
  59. package/es/plugin/plugin-factory/plugin-factory.mjs +24 -18
  60. package/es/use/index.d.ts +1 -0
  61. package/es/use/index.d.ts.map +1 -1
  62. package/es/use/index.mjs +2 -0
  63. package/es/use/storage/index.d.ts +4 -6
  64. package/es/use/storage/index.d.ts.map +1 -1
  65. package/es/use/storage/index.mjs +16 -11
  66. package/es/use/vue-use/computed-async.d.ts +51 -0
  67. package/es/use/vue-use/computed-async.d.ts.map +1 -0
  68. package/es/use/vue-use/computed-async.mjs +66 -0
  69. package/es/use/vue-use/index.d.ts +2 -0
  70. package/es/use/vue-use/index.d.ts.map +1 -0
  71. package/es/use/vue-use/index.mjs +3 -0
  72. package/es/util/install.d.ts.map +1 -1
  73. package/es/util/overlay-container/overlay-container.d.ts +1 -1
  74. package/es/util/overlay-container/overlay-container.d.ts.map +1 -1
  75. package/es/util/overlay-container/overlay-container.mjs +7 -2
  76. package/es/util/overlay-view-util/overlay-view-util.d.ts +2 -2
  77. package/es/util/overlay-view-util/overlay-view-util.d.ts.map +1 -1
  78. package/es/util/overlay-view-util/overlay-view-util.mjs +2 -1
  79. package/es/util/render/render.d.ts.map +1 -1
  80. package/es/util/render/render.mjs +4 -1
  81. package/es/util/route/route.d.ts.map +1 -1
  82. package/es/util/route/route.mjs +18 -3
  83. package/es/view/common/index.d.ts.map +1 -1
  84. package/es/view/common/index.mjs +2 -0
  85. package/es/view/common/view.d.ts.map +1 -1
  86. package/es/view/common/view.mjs +14 -1
  87. package/es/view/md-custom-view/md-custom-view.provider.d.ts +13 -0
  88. package/es/view/md-custom-view/md-custom-view.provider.d.ts.map +1 -0
  89. package/es/view/md-custom-view/md-custom-view.provider.mjs +13 -0
  90. package/lib/common/badge/badge.css +1 -1
  91. package/lib/common/control-base/control-base.cjs +37 -3
  92. package/lib/common/control-base/control-base.css +1 -1
  93. package/lib/common/custom-render/custom-render.cjs +1 -1
  94. package/lib/common/index.cjs +2 -0
  95. package/lib/common/signature-pad/signature-pad.cjs +167 -0
  96. package/lib/common/signature-pad/signature-pad.css +1 -0
  97. package/lib/common/signature-pad/util/bezier.cjs +111 -0
  98. package/lib/common/signature-pad/util/point.cjs +53 -0
  99. package/lib/common/signature-pad/util/signature_pad.cjs +1022 -0
  100. package/lib/common/view-shell/view-shell.cjs +13 -2
  101. package/lib/control/panel/panel/panel.cjs +12 -1
  102. package/lib/control/panel/view-layout-panel/view-layout-panel.cjs +12 -1
  103. package/lib/index.cjs +4 -0
  104. package/lib/locale/en/index.cjs +2 -1
  105. package/lib/locale/zh-CN/index.cjs +2 -1
  106. package/lib/panel-component/panel-container/panel-container.cjs +29 -1
  107. package/lib/panel-component/panel-field/panel-field.controller.cjs +1 -1
  108. package/lib/panel-component/teleport-placeholder/teleport-placeholder.state.cjs +1 -1
  109. package/lib/plugin/plugin-factory/plugin-factory.cjs +24 -18
  110. package/lib/use/index.cjs +3 -0
  111. package/lib/use/storage/index.cjs +16 -11
  112. package/lib/use/vue-use/computed-async.cjs +68 -0
  113. package/lib/use/vue-use/index.cjs +7 -0
  114. package/lib/util/overlay-container/overlay-container.cjs +7 -2
  115. package/lib/util/overlay-view-util/overlay-view-util.cjs +2 -1
  116. package/lib/util/render/render.cjs +4 -1
  117. package/lib/util/route/route.cjs +18 -3
  118. package/lib/view/common/index.cjs +2 -0
  119. package/lib/view/common/view.cjs +13 -0
  120. package/lib/view/md-custom-view/md-custom-view.provider.cjs +15 -0
  121. package/package.json +7 -7
@@ -1 +1 @@
1
- .ibiz-badge{display:inline-block;width:var(--ibiz-width-icon-large);height:var(--ibiz-width-icon-large);line-height:var(--ibiz-width-icon-large);color:var(--ibiz-color-danger-text);background-color:var(--ibiz-badge-bg-color);border-radius:var(--ibiz-border-radius-circle)}.ibiz-badge--danger{--ibiz-badge-bg-color:var(--ibiz-color-danger)}.ibiz-badge--success{--ibiz-badge-bg-color:var(--ibiz-color-success)}.ibiz-badge--warning{--ibiz-badge-bg-color:var(--ibiz-color-warning)}.ibiz-badge--info{--ibiz-badge-bg-color:var(--ibiz-color-info)}.ibiz-badge--primary{--ibiz-badge-bg-color:var(--ibiz-color-primary)}
1
+ .ibiz-badge{--ibiz-badge-bg-color:var(--ibiz-color-danger);--ibiz-badge-height:18px;--ibiz-badge-border-radius:10px;display:inline-flex;align-items:center;justify-content:center;width:auto;height:var(--ibiz-badge-height);padding:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-small);line-height:normal;color:var(--ibiz-color-danger-text);white-space:nowrap;background-color:var(--ibiz-badge-bg-color);border:1px solid transparent;border-radius:var(--ibiz-badge-border-radius)}.ibiz-badge--danger{--ibiz-badge-bg-color:var(--ibiz-color-danger)}.ibiz-badge--success{--ibiz-badge-bg-color:var(--ibiz-color-success)}.ibiz-badge--warning{--ibiz-badge-bg-color:var(--ibiz-color-warning)}.ibiz-badge--info{--ibiz-badge-bg-color:var(--ibiz-color-info)}.ibiz-badge--primary{--ibiz-badge-bg-color:var(--ibiz-color-primary)}
@@ -1 +1 @@
1
- .ibiz-control{width:100%;height:100%}.ibiz-control__control-render{width:100%;height:100%}
1
+ .ibiz-control{--ibiz-control-base-scrollbar-width:0px;--ibiz-control-base-mask-text-color:var(--ibiz-color-primary-text);--ibiz-control-base-mask-background-color-blank:transparent;--ibiz-control-base-mask-background-color-mask:rgba(0, 0, 0, 0.5);width:100%;height:100%}.ibiz-control__control-render{width:100%;height:100%}.ibiz-control.is-disabled{position:relative}.ibiz-control__mask-container{position:absolute;top:0;left:0;z-index:10;width:calc(100% - var(--ibiz-control-base-scrollbar-width));height:100%}.ibiz-control--blank{background-color:var(--ibiz-control-base-mask-background-color-blank)}.ibiz-control--mask{color:var(--ibiz-control-base-mask-text-color);background-color:var(--ibiz-control-base-mask-background-color-mask);display:flex;align-items:center;justify-content:center}
@@ -1,2 +1,3 @@
1
+ import './control-base.scss';
1
2
  export declare const IBizControlBase: any;
2
3
  //# sourceMappingURL=control-base.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"control-base.d.ts","sourceRoot":"","sources":["../../../src/common/control-base/control-base.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,eAAe,EAAE,GA2N5B,CAAC"}
1
+ {"version":3,"file":"control-base.d.ts","sourceRoot":"","sources":["../../../src/common/control-base/control-base.tsx"],"names":[],"mappings":"AAsBA,OAAO,qBAAqB,CAAC;AAG7B,eAAO,MAAM,eAAe,EAAE,GA4R5B,CAAC"}
@@ -1,8 +1,9 @@
1
1
  import { defineComponent, reactive, createVNode, resolveComponent, computed, h } from 'vue';
2
- import { ScriptFactory } from '@ibiz-template/runtime';
2
+ import { ScriptFactory, PredefinedControlRender } from '@ibiz-template/runtime';
3
3
  import { fixJsonString } from '@ibiz-template/core';
4
4
  import { isNil } from 'ramda';
5
5
  import '../../use/index.mjs';
6
+ import './control-base.css';
6
7
  import { useNamespace } from '../../use/namespace/namespace.mjs';
7
8
 
8
9
  "use strict";
@@ -72,7 +73,7 @@ const IBizControlBase = /* @__PURE__ */ defineComponent({
72
73
  };
73
74
  const getControlRender = (data) => {
74
75
  var _a, _b;
75
- const controlRenders = model.controlRenders ? model.controlRenders.filter((item) => item.id !== "emptypanel") : void 0;
76
+ const controlRenders = model.controlRenders ? model.controlRenders.filter((item) => !Object.values(PredefinedControlRender).includes(item.id)) : void 0;
76
77
  if (!controlRenders || controlRenders.length === 0) {
77
78
  return void 0;
78
79
  }
@@ -105,6 +106,36 @@ const IBizControlBase = /* @__PURE__ */ defineComponent({
105
106
  const data = props.controller.data || props.controller.items;
106
107
  return getControlRender(data);
107
108
  });
109
+ const disableMaskInfoRender = () => {
110
+ const disableRender = model.controlRenders ? model.controlRenders.find((item) => item.id === PredefinedControlRender.DISABLEPANEL) : void 0;
111
+ if (!disableRender) {
112
+ return createVNode("div", {
113
+ "innerHTML": props.controller.state.maskOption.maskInfo || "",
114
+ "class": [ns.e("disable-mask-text")]
115
+ }, null);
116
+ }
117
+ if (disableRender.renderType === "LAYOUTPANEL_MODEL" && disableRender.layoutPanelModel) {
118
+ const htmlCode = ScriptFactory.execScriptFn({
119
+ ...props.controller.getEventArgs()
120
+ }, disableRender.layoutPanelModel, {
121
+ isAsync: false,
122
+ singleRowReturn: true
123
+ });
124
+ return createVNode("div", {
125
+ "innerHTML": htmlCode,
126
+ "class": [ns.e("disable-mask-text")]
127
+ }, null);
128
+ }
129
+ if (disableRender.renderType === "LAYOUTPANEL" && disableRender.layoutPanel) {
130
+ return createVNode(resolveComponent("iBizControlShell"), {
131
+ "class": [ns.e("disable-mask-text")],
132
+ "data": {},
133
+ "params": props.controller.params,
134
+ "context": props.controller.context,
135
+ "modelData": disableRender.layoutPanel
136
+ }, null);
137
+ }
138
+ };
108
139
  return {
109
140
  ns,
110
141
  typeClass,
@@ -113,6 +144,7 @@ const IBizControlBase = /* @__PURE__ */ defineComponent({
113
144
  codeName,
114
145
  controls,
115
146
  customRender,
147
+ disableMaskInfoRender,
116
148
  onLayoutPanelCreated
117
149
  };
118
150
  },
@@ -162,9 +194,11 @@ const IBizControlBase = /* @__PURE__ */ defineComponent({
162
194
  }, slots);
163
195
  }
164
196
  return createVNode("div", {
165
- "class": [this.ns.b(), this.ns.b(this.typeClass), this.ns.m(this.codeName), this.sysCssName],
197
+ "class": [this.ns.b(), this.ns.b(this.typeClass), this.ns.m(this.codeName), this.sysCssName, this.ns.is("disabled", state.disabled)],
166
198
  "style": this.inlineStyle
167
- }, [layoutPanel || this.customRender || ((_c = (_b = this.$slots).default) == null ? void 0 : _c.call(_b))]);
199
+ }, [layoutPanel || this.customRender || ((_c = (_b = this.$slots).default) == null ? void 0 : _c.call(_b)), state.disabled && createVNode("div", {
200
+ "class": [this.ns.e("mask-container"), this.ns.m(state.maskOption.mode.toLowerCase())]
201
+ }, [state.maskOption.mode === "MASK" && this.disableMaskInfoRender()])]);
168
202
  }
169
203
  });
170
204
 
@@ -1 +1 @@
1
- {"version":3,"file":"custom-render.d.ts","sourceRoot":"","sources":["../../../src/common/custom-render/custom-render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAiB,MAAM,wBAAwB,CAAC;AAG1E,OAAO,sBAAsB,CAAC;AAE9B,eAAO,MAAM,gBAAgB;;;;;;;4BAiDI,KAAK,GAAG,SAAS;;;;;;YAmDhD,CAAC"}
1
+ {"version":3,"file":"custom-render.d.ts","sourceRoot":"","sources":["../../../src/common/custom-render/custom-render.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EACL,iBAAiB,EAGlB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,sBAAsB,CAAC;AAE9B,eAAO,MAAM,gBAAgB;;;;;;;4BAiDI,KAAK,GAAG,SAAS;;;;;;YAmDhD,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, createVNode, resolveComponent } from 'vue';
2
- import { ScriptFactory } from '@ibiz-template/runtime';
2
+ import { ScriptFactory, PredefinedControlRender } from '@ibiz-template/runtime';
3
3
  import { fixJsonString } from '@ibiz-template/core';
4
4
  import '../../use/index.mjs';
5
5
  import './custom-render.css';
@@ -47,7 +47,7 @@ const IBizCustomRender = /* @__PURE__ */ defineComponent({
47
47
  if (!controlRenders || controlRenders.length === 0) {
48
48
  return void 0;
49
49
  }
50
- const noDataRender = controlRenders.find((item) => item.id === "emptypanel");
50
+ const noDataRender = controlRenders.find((item) => item.id === PredefinedControlRender.EMPTYPANEL);
51
51
  if (!noDataRender)
52
52
  return void 0;
53
53
  if (noDataRender.renderType === "LAYOUTPANEL_MODEL" && noDataRender.layoutPanelModel) {
@@ -7,4 +7,5 @@ export * from './code-list/code-list';
7
7
  export * from './control-loading-placeholder/control-loading-placeholder';
8
8
  export * from './badge/badge';
9
9
  export * from './custom-render/custom-render';
10
+ export * from './signature-pad/signature-pad';
10
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2DAA2D,CAAC;AAC1E,cAAc,eAAe,CAAC;AAC9B,cAAc,+BAA+B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2DAA2D,CAAC;AAC1E,cAAc,eAAe,CAAC;AAC9B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC"}
@@ -7,5 +7,6 @@ export { IBizCodeList } from './code-list/code-list.mjs';
7
7
  export { ControlLoadingPlaceholder } from './control-loading-placeholder/control-loading-placeholder.mjs';
8
8
  export { IBizBadge } from './badge/badge.mjs';
9
9
  export { IBizCustomRender } from './custom-render/custom-render.mjs';
10
+ export { IBizSignaturePad } from './signature-pad/signature-pad.mjs';
10
11
 
11
12
  "use strict";
@@ -0,0 +1 @@
1
+ .ibiz-signature-pad{width:100%;height:100%}.ibiz-signature-pad__container{width:100%;height:100%;background-color:var(--ibiz-color-bg-1)}
@@ -0,0 +1,19 @@
1
+ import { PropType } from 'vue';
2
+ import SignaturePad from './util/signature_pad';
3
+ import './signature-pad.scss';
4
+ export declare const IBizSignaturePad: import("vue").DefineComponent<{
5
+ options: {
6
+ type: PropType<import("@ibiz-template/core").IApiData>;
7
+ };
8
+ }, {
9
+ ns: import("@ibiz-template/core").Namespace;
10
+ canvasRef: import("vue").Ref<any>;
11
+ signaturePadRef: import("vue").Ref<any>;
12
+ signaturePad: import("vue").Ref<SignaturePad | undefined>;
13
+ updateSignaturePad: (_callback?: () => void) => void;
14
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
15
+ options: {
16
+ type: PropType<import("@ibiz-template/core").IApiData>;
17
+ };
18
+ }>>, {}, {}>;
19
+ //# sourceMappingURL=signature-pad.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"signature-pad.d.ts","sourceRoot":"","sources":["../../../src/common/signature-pad/signature-pad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,QAAQ,EAET,MAAM,KAAK,CAAC;AAGb,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAEhD,OAAO,sBAAsB,CAAC;AAE9B,eAAO,MAAM,gBAAgB;;;;;;;;;qCA2He,MAAM,IAAI;;;;;YAoCpD,CAAC"}
@@ -0,0 +1,165 @@
1
+ import { defineComponent, ref, nextTick, onMounted, onUnmounted, createVNode } from 'vue';
2
+ import { isString } from 'lodash-es';
3
+ import '../../use/index.mjs';
4
+ import SignaturePad from './util/signature_pad.mjs';
5
+ import './signature-pad.css';
6
+ import { useNamespace } from '../../use/namespace/namespace.mjs';
7
+
8
+ "use strict";
9
+ const IBizSignaturePad = /* @__PURE__ */ defineComponent({
10
+ name: "IBizSignaturePad",
11
+ props: {
12
+ options: {
13
+ type: Object
14
+ }
15
+ },
16
+ setup(props) {
17
+ const ns = useNamespace("signature-pad");
18
+ const signaturePadRef = ref();
19
+ const canvasRef = ref();
20
+ const signaturePad = ref();
21
+ const getSignatureOptions = () => {
22
+ const _options = {};
23
+ if (props.options) {
24
+ const {
25
+ dotsize,
26
+ minwidth,
27
+ maxwidth,
28
+ pencolor,
29
+ velocityfilterweight,
30
+ compositeoperation,
31
+ mindistance,
32
+ backgroundcolor,
33
+ throttle,
34
+ canvascontextoptions
35
+ } = props.options;
36
+ if (dotsize) {
37
+ Object.assign(_options, {
38
+ dotSize: Number(dotsize)
39
+ });
40
+ }
41
+ if (minwidth) {
42
+ Object.assign(_options, {
43
+ minWidth: Number(minwidth)
44
+ });
45
+ }
46
+ if (maxwidth) {
47
+ Object.assign(_options, {
48
+ maxWidth: Number(maxwidth)
49
+ });
50
+ }
51
+ if (velocityfilterweight) {
52
+ Object.assign(_options, {
53
+ velocityFilterWeight: Number(velocityfilterweight)
54
+ });
55
+ }
56
+ if (mindistance) {
57
+ Object.assign(_options, {
58
+ minDistance: Number(mindistance)
59
+ });
60
+ }
61
+ if (throttle) {
62
+ Object.assign(_options, {
63
+ throttle: Number(throttle)
64
+ });
65
+ }
66
+ if (pencolor) {
67
+ Object.assign(_options, {
68
+ penColor: String(pencolor)
69
+ });
70
+ }
71
+ if (compositeoperation) {
72
+ Object.assign(_options, {
73
+ compositeOperation: String(compositeoperation)
74
+ });
75
+ }
76
+ if (backgroundcolor) {
77
+ Object.assign(_options, {
78
+ backgroundColor: String(backgroundcolor)
79
+ });
80
+ }
81
+ if (canvascontextoptions) {
82
+ let canvasContextOptions = canvascontextoptions;
83
+ if (isString(canvascontextoptions)) {
84
+ try {
85
+ canvasContextOptions = JSON.parse(canvascontextoptions);
86
+ } catch (error) {
87
+ ibiz.log.error(error);
88
+ canvasContextOptions = void 0;
89
+ }
90
+ }
91
+ Object.assign(_options, {
92
+ canvasContextOptions: {
93
+ ...canvasContextOptions
94
+ }
95
+ });
96
+ }
97
+ }
98
+ return _options;
99
+ };
100
+ const preventScroll = (_e) => {
101
+ _e.preventDefault();
102
+ };
103
+ const initSignaturePad = (_callback) => {
104
+ nextTick(() => {
105
+ const canvas = canvasRef.value;
106
+ const signatures = signaturePadRef.value;
107
+ if (!canvas)
108
+ return;
109
+ const dpr = window.devicePixelRatio || 1;
110
+ const rect = signatures.getBoundingClientRect();
111
+ const canvasWidth = rect.width < 300 ? 300 : rect.width;
112
+ const canvasHeight = rect.height < 150 ? 150 : rect.height;
113
+ canvas.width = canvasWidth * dpr;
114
+ canvas.height = canvasHeight * dpr;
115
+ canvas.style.width = "".concat(canvasWidth, "px");
116
+ canvas.style.height = "".concat(canvasHeight, "px");
117
+ signaturePad.value = new SignaturePad(canvas, {
118
+ ...getSignatureOptions()
119
+ });
120
+ const ctx = canvas.getContext("2d");
121
+ ctx.scale(dpr, dpr);
122
+ canvas.addEventListener("touchstart", preventScroll, {
123
+ passive: false
124
+ });
125
+ canvas.addEventListener("touchmove", preventScroll, {
126
+ passive: false
127
+ });
128
+ _callback == null ? void 0 : _callback();
129
+ });
130
+ };
131
+ const updateSignaturePad = (_callback) => initSignaturePad(_callback);
132
+ const handleResize = () => {
133
+ if (signaturePad.value) {
134
+ signaturePad.value.off();
135
+ updateSignaturePad();
136
+ }
137
+ };
138
+ onMounted(() => {
139
+ initSignaturePad();
140
+ window.addEventListener("resize", handleResize);
141
+ });
142
+ onUnmounted(() => {
143
+ window.removeEventListener("resize", handleResize);
144
+ });
145
+ return {
146
+ ns,
147
+ canvasRef,
148
+ signaturePadRef,
149
+ signaturePad,
150
+ updateSignaturePad
151
+ };
152
+ },
153
+ render() {
154
+ return createVNode("div", {
155
+ "class": this.ns.b(),
156
+ "ref": "signaturePadRef"
157
+ }, [createVNode("div", {
158
+ "class": this.ns.e("container")
159
+ }, [createVNode("canvas", {
160
+ "ref": "canvasRef"
161
+ }, null)])]);
162
+ }
163
+ });
164
+
165
+ export { IBizSignaturePad };
@@ -0,0 +1,58 @@
1
+ import { IBasicPoint, Point } from './point';
2
+ /**
3
+ * @description 用于创建和计算三次贝塞尔曲线,支持从点数组生成曲线实例
4
+ * @export
5
+ * @class Bezier
6
+ */
7
+ export declare class Bezier {
8
+ startPoint: Point;
9
+ control2: IBasicPoint;
10
+ control1: IBasicPoint;
11
+ endPoint: Point;
12
+ startWidth: number;
13
+ endWidth: number;
14
+ /**
15
+ * 从点数组创建贝塞尔曲线
16
+ * @param points 点数组,至少需要4个点来计算曲线
17
+ * @param widths 包含起点和终点宽度的对象
18
+ * @returns 新创建的贝塞尔曲线实例
19
+ */
20
+ static fromPoints(points: Point[], widths: {
21
+ start: number;
22
+ end: number;
23
+ }): Bezier;
24
+ /**
25
+ * 计算贝塞尔曲线的控制点
26
+ * @param s1 第一个点
27
+ * @param s2 第二个点(中间点)
28
+ * @param s3 第三个点
29
+ * @returns 包含两个控制点的对象
30
+ */
31
+ private static calculateControlPoints;
32
+ /**
33
+ * 贝塞尔曲线构造函数
34
+ * @param startPoint 起始点
35
+ * @param control2 第二个控制点
36
+ * @param control1 第一个控制点
37
+ * @param endPoint 结束点
38
+ * @param startWidth 起始点宽度
39
+ * @param endWidth 结束点宽度
40
+ */
41
+ constructor(startPoint: Point, control2: IBasicPoint, control1: IBasicPoint, endPoint: Point, startWidth: number, endWidth: number);
42
+ /**
43
+ * 计算贝塞尔曲线的近似长度
44
+ * @returns 曲线的近似长度
45
+ */
46
+ length(): number;
47
+ /**
48
+ * 计算三次贝塞尔曲线在参数t处的x或y坐标值
49
+ * @param t 参数t,范围0到1
50
+ * @param start 起始点的坐标值(x或y)
51
+ * @param c1 第一个控制点的坐标值(x或y)
52
+ * @param c2 第二个控制点的坐标值(x或y)
53
+ * @param end 结束点的坐标值(x或y)
54
+ * @returns 计算得到的坐标值
55
+ */
56
+ private point;
57
+ }
58
+ //# sourceMappingURL=bezier.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"bezier.d.ts","sourceRoot":"","sources":["../../../../src/common/signature-pad/util/bezier.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,qBAAa,MAAM;IA6ER,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;IAjFzB;;;;;OAKG;WACW,UAAU,CACtB,MAAM,EAAE,KAAK,EAAE,EACf,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GACrC,MAAM;IAST;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,sBAAsB;IAyCrC;;;;;;;;OAQG;gBAEM,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM;IAGzB;;;OAGG;IACI,MAAM,IAAI,MAAM;IA0CvB;;;;;;;;OAQG;IACH,OAAO,CAAC,KAAK;CAcd"}
@@ -0,0 +1,109 @@
1
+ import { Point } from './point.mjs';
2
+
3
+ "use strict";
4
+ class Bezier {
5
+ /**
6
+ * 贝塞尔曲线构造函数
7
+ * @param startPoint 起始点
8
+ * @param control2 第二个控制点
9
+ * @param control1 第一个控制点
10
+ * @param endPoint 结束点
11
+ * @param startWidth 起始点宽度
12
+ * @param endWidth 结束点宽度
13
+ */
14
+ constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
15
+ this.startPoint = startPoint;
16
+ this.control2 = control2;
17
+ this.control1 = control1;
18
+ this.endPoint = endPoint;
19
+ this.startWidth = startWidth;
20
+ this.endWidth = endWidth;
21
+ }
22
+ /**
23
+ * 从点数组创建贝塞尔曲线
24
+ * @param points 点数组,至少需要4个点来计算曲线
25
+ * @param widths 包含起点和终点宽度的对象
26
+ * @returns 新创建的贝塞尔曲线实例
27
+ */
28
+ static fromPoints(points, widths) {
29
+ const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
30
+ const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
31
+ return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
32
+ }
33
+ /**
34
+ * 计算贝塞尔曲线的控制点
35
+ * @param s1 第一个点
36
+ * @param s2 第二个点(中间点)
37
+ * @param s3 第三个点
38
+ * @returns 包含两个控制点的对象
39
+ */
40
+ static calculateControlPoints(s1, s2, s3) {
41
+ const dx1 = s1.x - s2.x;
42
+ const dy1 = s1.y - s2.y;
43
+ const dx2 = s2.x - s3.x;
44
+ const dy2 = s2.y - s3.y;
45
+ const m1 = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 };
46
+ const m2 = { x: (s2.x + s3.x) / 2, y: (s2.y + s3.y) / 2 };
47
+ const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
48
+ const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
49
+ const dxm = m1.x - m2.x;
50
+ const dym = m1.y - m2.y;
51
+ const k = l1 + l2 === 0 ? 0 : l2 / (l1 + l2);
52
+ const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
53
+ const tx = s2.x - cm.x;
54
+ const ty = s2.y - cm.y;
55
+ return {
56
+ c1: new Point(m1.x + tx, m1.y + ty),
57
+ c2: new Point(m2.x + tx, m2.y + ty)
58
+ };
59
+ }
60
+ /**
61
+ * 计算贝塞尔曲线的近似长度
62
+ * @returns 曲线的近似长度
63
+ */
64
+ length() {
65
+ const steps = 10;
66
+ let length = 0;
67
+ let px;
68
+ let py;
69
+ for (let i = 0; i <= steps; i += 1) {
70
+ const t = i / steps;
71
+ const cx = this.point(
72
+ t,
73
+ this.startPoint.x,
74
+ this.control1.x,
75
+ this.control2.x,
76
+ this.endPoint.x
77
+ );
78
+ const cy = this.point(
79
+ t,
80
+ this.startPoint.y,
81
+ this.control1.y,
82
+ this.control2.y,
83
+ this.endPoint.y
84
+ );
85
+ if (i > 0) {
86
+ const xdiff = cx - px;
87
+ const ydiff = cy - py;
88
+ length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
89
+ }
90
+ px = cx;
91
+ py = cy;
92
+ }
93
+ return length;
94
+ }
95
+ /**
96
+ * 计算三次贝塞尔曲线在参数t处的x或y坐标值
97
+ * @param t 参数t,范围0到1
98
+ * @param start 起始点的坐标值(x或y)
99
+ * @param c1 第一个控制点的坐标值(x或y)
100
+ * @param c2 第二个控制点的坐标值(x或y)
101
+ * @param end 结束点的坐标值(x或y)
102
+ * @returns 计算得到的坐标值
103
+ */
104
+ point(t, start, c1, c2, end) {
105
+ return start * (1 - t) * (1 - t) * (1 - t) + 3 * c1 * (1 - t) * (1 - t) * t + 3 * c2 * (1 - t) * t * t + end * t * t * t;
106
+ }
107
+ }
108
+
109
+ export { Bezier };
@@ -0,0 +1,55 @@
1
+ /**
2
+ * @description 基础点接口,定义了点的基本属性
3
+ * @export
4
+ * @interface IBasicPoint
5
+ */
6
+ export interface IBasicPoint {
7
+ /** X坐标 */
8
+ x: number;
9
+ /** Y坐标 */
10
+ y: number;
11
+ /** 压力值(例如绘画时的笔触压力) */
12
+ pressure: number;
13
+ /** 时间戳(记录点创建的时间) */
14
+ time: number;
15
+ }
16
+ /**
17
+ * @description 点类,实现了BasicPoint接口,提供了点的常用操作方法
18
+ * @export
19
+ * @class Point
20
+ * @implements {IBasicPoint}
21
+ */
22
+ export declare class Point implements IBasicPoint {
23
+ x: number;
24
+ y: number;
25
+ pressure: number;
26
+ time: number;
27
+ /**
28
+ * 构造函数,创建一个Point实例
29
+ * @param x X坐标
30
+ * @param y Y坐标
31
+ * @param pressure 压力值,可选,默认为0
32
+ * @param time 时间戳,可选,默认为当前时间
33
+ * @throws 如果x或y是NaN,抛出错误
34
+ */
35
+ constructor(x: number, y: number, pressure?: number, time?: number);
36
+ /**
37
+ * 计算当前点到另一个点的直线距离
38
+ * @param start 起始点(另一个点)
39
+ * @returns 两点之间的距离
40
+ */
41
+ distanceTo(start: IBasicPoint): number;
42
+ /**
43
+ * 判断当前点是否与另一个点相等
44
+ * @param other 要比较的另一个点
45
+ * @returns 如果所有属性都相等则返回true,否则返回false
46
+ */
47
+ equals(other: IBasicPoint): boolean;
48
+ /**
49
+ * 计算从起始点到当前点的移动速度
50
+ * @param start 起始点
51
+ * @returns 速度值(距离/时间),如果时间相同则返回0
52
+ */
53
+ velocityFrom(start: IBasicPoint): number;
54
+ }
55
+ //# sourceMappingURL=point.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/common/signature-pad/util/point.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,UAAU;IACV,CAAC,EAAE,MAAM,CAAC;IACV,UAAU;IACV,CAAC,EAAE,MAAM,CAAC;IACV,sBAAsB;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;GAKG;AACH,qBAAa,KAAM,YAAW,WAAW;IAEhC,CAAC,EAAE,MAAM,CAAC;IAGV,CAAC,EAAE,MAAM,CAAC;IAGV,QAAQ,EAAE,MAAM,CAAC;IAGjB,IAAI,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;gBACS,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IAiBlE;;;;OAIG;IACI,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;IAK7C;;;;OAIG;IACI,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAS1C;;;;OAIG;IACI,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM;CAMhD"}
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ class Point {
3
+ /**
4
+ * 构造函数,创建一个Point实例
5
+ * @param x X坐标
6
+ * @param y Y坐标
7
+ * @param pressure 压力值,可选,默认为0
8
+ * @param time 时间戳,可选,默认为当前时间
9
+ * @throws 如果x或y是NaN,抛出错误
10
+ */
11
+ constructor(x, y, pressure, time) {
12
+ if (Number.isNaN(x) || Number.isNaN(y)) {
13
+ throw new Error(
14
+ ibiz.i18n.t("vue3Util.common.invalidPointCoordinates", {
15
+ x,
16
+ y
17
+ })
18
+ );
19
+ }
20
+ this.x = +x;
21
+ this.y = +y;
22
+ this.pressure = pressure || 0;
23
+ this.time = time || Date.now();
24
+ }
25
+ /**
26
+ * 计算当前点到另一个点的直线距离
27
+ * @param start 起始点(另一个点)
28
+ * @returns 两点之间的距离
29
+ */
30
+ distanceTo(start) {
31
+ return Math.sqrt((this.x - start.x) ** 2 + (this.y - start.y) ** 2);
32
+ }
33
+ /**
34
+ * 判断当前点是否与另一个点相等
35
+ * @param other 要比较的另一个点
36
+ * @returns 如果所有属性都相等则返回true,否则返回false
37
+ */
38
+ equals(other) {
39
+ return this.x === other.x && this.y === other.y && this.pressure === other.pressure && this.time === other.time;
40
+ }
41
+ /**
42
+ * 计算从起始点到当前点的移动速度
43
+ * @param start 起始点
44
+ * @returns 速度值(距离/时间),如果时间相同则返回0
45
+ */
46
+ velocityFrom(start) {
47
+ return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 0;
48
+ }
49
+ }
50
+
51
+ export { Point };