@visactor/vtable-editors 1.18.0 → 1.18.1
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/cjs/date-input-editor.js +5 -1
- package/cjs/date-input-editor.js.map +1 -1
- package/cjs/list-editor.js +8 -3
- package/cjs/list-editor.js.map +1 -1
- package/cjs/textArea-editor.js +9 -4
- package/cjs/textArea-editor.js.map +1 -1
- package/dist/vtable-editors.js +46 -8
- package/dist/vtable-editors.min.js +1 -1
- package/es/date-input-editor.js +5 -1
- package/es/date-input-editor.js.map +1 -1
- package/es/list-editor.js +8 -3
- package/es/list-editor.js.map +1 -1
- package/es/textArea-editor.js +9 -4
- package/es/textArea-editor.js.map +1 -1
- package/package.json +3 -3
package/cjs/date-input-editor.js
CHANGED
|
@@ -14,7 +14,11 @@ class DateInputEditor extends input_editor_1.InputEditor {
|
|
|
14
14
|
const input = document.createElement("input");
|
|
15
15
|
input.setAttribute("type", "date"), input.style.padding = "4px", input.style.width = "100%",
|
|
16
16
|
input.style.boxSizing = "border-box", input.style.position = "absolute", input.style.backgroundColor = "#FFFFFF",
|
|
17
|
-
|
|
17
|
+
input.style.borderRadius = "0px", input.style.border = "2px solid #d9d9d9", input.addEventListener("focus", (() => {
|
|
18
|
+
input.style.borderColor = "#4A90E2", input.style.outline = "none";
|
|
19
|
+
})), input.addEventListener("blur", (() => {
|
|
20
|
+
input.style.borderColor = "#d9d9d9";
|
|
21
|
+
})), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
|
|
18
22
|
"a" === e.key && (e.ctrlKey || e.metaKey) && e.stopPropagation();
|
|
19
23
|
})), input.addEventListener("wheel", (e => {
|
|
20
24
|
e.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":";;;AACA,iDAA6C;AAE7C,MAAa,eAAgB,SAAQ,0BAAW;IAE9C,YAAY,YAAgC;QAC1C,KAAK,CAAC,YAAY,CAAC,CAAC;QAFtB,eAAU,GAAW,WAAW,CAAC;QAG/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAExC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAQlC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;gBAE7C,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAGH,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;CACF;
|
|
1
|
+
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":";;;AACA,iDAA6C;AAE7C,MAAa,eAAgB,SAAQ,0BAAW;IAE9C,YAAY,YAAgC;QAC1C,KAAK,CAAC,YAAY,CAAC,CAAC;QAFtB,eAAU,GAAW,WAAW,CAAC;QAG/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAExC,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;QACjC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC;QAEzC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;YACpC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;YAClC,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;QAEtC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAQlC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;gBAE7C,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAGH,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AAnDD,0CAmDC","file":"date-input-editor.js","sourcesContent":["import type { InputEditorConfig } from './input-editor';\nimport { InputEditor } from './input-editor';\nimport type { IEditor } from './types';\nexport class DateInputEditor extends InputEditor implements IEditor {\n editorType: string = 'DateInput';\n constructor(editorConfig?: InputEditorConfig) {\n super(editorConfig);\n this.editorConfig = editorConfig;\n }\n createElement() {\n const input = document.createElement('input');\n\n input.setAttribute('type', 'date');\n\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.position = 'absolute';\n input.style.backgroundColor = '#FFFFFF';\n\n input.style.borderRadius = '0px';\n input.style.border = '2px solid #d9d9d9';\n // #region 为了保证input在focus时，没有圆角\n input.addEventListener('focus', () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n });\n\n input.addEventListener('blur', () => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n });\n\n this.element = input;\n this.container.appendChild(input);\n // 测试successCallback 调用是否正确\n // input.ondblclick = () => {\n // debugger;\n // this.successCallback();\n // };\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n\n // hack for preventing drag touch cause page jump\n input.addEventListener('wheel', e => {\n e.preventDefault();\n });\n }\n}\n"]}
|
package/cjs/list-editor.js
CHANGED
|
@@ -12,7 +12,11 @@ class ListEditor {
|
|
|
12
12
|
const select = document.createElement("select");
|
|
13
13
|
select.setAttribute("type", "text"), select.style.position = "absolute", select.style.padding = "4px",
|
|
14
14
|
select.style.width = "100%", select.style.boxSizing = "border-box", select.style.backgroundColor = "#FFFFFF",
|
|
15
|
-
|
|
15
|
+
select.style.borderRadius = "0px", select.style.border = "2px solid #d9d9d9", select.addEventListener("focus", (() => {
|
|
16
|
+
select.style.borderColor = "#4A90E2", select.style.outline = "none";
|
|
17
|
+
})), select.addEventListener("blur", (() => {
|
|
18
|
+
select.style.borderColor = "#d9d9d9";
|
|
19
|
+
})), this.element = select;
|
|
16
20
|
const {values: values} = this.editorConfig;
|
|
17
21
|
let opsStr = "";
|
|
18
22
|
values.forEach((item => {
|
|
@@ -32,8 +36,9 @@ class ListEditor {
|
|
|
32
36
|
this.element.focus();
|
|
33
37
|
}
|
|
34
38
|
adjustPosition(rect) {
|
|
35
|
-
|
|
36
|
-
this.element.style.
|
|
39
|
+
const top = rect.top - 1, left = rect.left - 1, width = rect.width + 2, height = rect.height + 2;
|
|
40
|
+
this.element.style.top = top + "px", this.element.style.left = left + "px", this.element.style.width = width + "px",
|
|
41
|
+
this.element.style.height = height + "px";
|
|
37
42
|
}
|
|
38
43
|
endEditing() {}
|
|
39
44
|
onEnd() {
|
package/cjs/list-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":";;;AAKA,MAAa,UAAU;IAQrB,YAAY,YAA8B;QAP1C,eAAU,GAAW,OAAO,CAAC;QAQ3B,
|
|
1
|
+
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"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","file":"list-editor.js","sourcesContent":["import type { EditContext, IEditor, Placement, RectProps } from './types';\nexport interface ListEditorConfig {\n values: string[];\n}\n\nexport class ListEditor implements IEditor {\n editorType: string = 'Input';\n input?: HTMLInputElement;\n editorConfig?: ListEditorConfig;\n container?: HTMLElement;\n element?: HTMLSelectElement;\n successCallback?: () => void;\n\n constructor(editorConfig: ListEditorConfig) {\n this.editorConfig = editorConfig;\n }\n\n createElement(value: string) {\n // create select tag\n const select = document.createElement('select');\n select.setAttribute('type', 'text');\n select.style.position = 'absolute';\n select.style.padding = '4px';\n select.style.width = '100%';\n select.style.boxSizing = 'border-box';\n select.style.backgroundColor = '#FFFFFF';\n select.style.borderRadius = '0px';\n select.style.border = '2px solid #d9d9d9';\n // #region 为了保证input在focus时，没有圆角\n select.addEventListener('focus', () => {\n select.style.borderColor = '#4A90E2';\n select.style.outline = 'none';\n });\n\n select.addEventListener('blur', () => {\n select.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n });\n\n\n\n this.element = select;\n\n // create option tags\n const { values } = this.editorConfig;\n let opsStr = '';\n values.forEach(item => {\n opsStr +=\n item === value\n ? `<option value=\"${item}\" selected>${item}</option>`\n : `<option value=\"${item}\" >${item}</option>`;\n });\n select.innerHTML = opsStr;\n\n this.container.appendChild(select);\n // this._bindSelectChangeEvent();\n }\n\n _bindSelectChangeEvent() {\n this.element.addEventListener('change', () => {\n // this.successCallback();\n });\n }\n\n setValue(value: string) {\n // do nothing\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ container, value, referencePosition, endEdit }: EditContext) {\n this.container = container;\n this.successCallback = endEdit;\n\n this.createElement(value);\n\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n this.element.focus();\n }\n\n adjustPosition(rect: RectProps) {\n\n //使border均分input位置rect的上下左右\n const borderWidth = 2;\n const top = rect.top - borderWidth / 2;\n const left = rect.left - borderWidth / 2;\n const width = rect.width + borderWidth;\n const height = rect.height + borderWidth;\n\n this.element.style.top =top + 'px';\n this.element.style.left =left + 'px';\n this.element.style.width = width + 'px';\n this.element.style.height = height + 'px';\n }\n\n endEditing() {\n // do nothing\n }\n\n onEnd() {\n this.container.removeChild(this.element);\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/cjs/textArea-editor.js
CHANGED
|
@@ -14,8 +14,12 @@ class TextAreaEditor {
|
|
|
14
14
|
(null === (_a = this.editorConfig) || void 0 === _a ? void 0 : _a.readonly) && input.setAttribute("readonly", `${this.editorConfig.readonly}`),
|
|
15
15
|
input.style.resize = "none", input.style.position = "absolute", input.style.padding = "4px",
|
|
16
16
|
input.style.width = "100%", input.style.height = "100%", input.style.boxSizing = "border-box",
|
|
17
|
-
input.style.backgroundColor = "#FFFFFF",
|
|
18
|
-
input.addEventListener("
|
|
17
|
+
input.style.backgroundColor = "#FFFFFF", input.style.borderRadius = "0px", input.style.border = "2px solid #d9d9d9",
|
|
18
|
+
input.addEventListener("focus", (() => {
|
|
19
|
+
input.style.borderColor = "#4A90E2", input.style.outline = "none";
|
|
20
|
+
})), input.addEventListener("blur", (() => {
|
|
21
|
+
input.style.borderColor = "#d9d9d9", input.style.outline = "none";
|
|
22
|
+
})), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
|
|
19
23
|
const _isSelectAll = "a" === e.key && (e.ctrlKey || e.metaKey), _isTextAreaNewLine = "Enter" === e.key && e.shiftKey;
|
|
20
24
|
(_isSelectAll || _isTextAreaNewLine) && e.stopPropagation();
|
|
21
25
|
}));
|
|
@@ -32,8 +36,9 @@ class TextAreaEditor {
|
|
|
32
36
|
this.element.focus();
|
|
33
37
|
}
|
|
34
38
|
adjustPosition(rect) {
|
|
35
|
-
|
|
36
|
-
this.element.style.
|
|
39
|
+
const top = rect.top - 1, left = rect.left - 1, width = rect.width + 2, height = rect.height + 2;
|
|
40
|
+
this.element.style.top = top + "px", this.element.style.left = left + "px", this.element.style.width = width + "px",
|
|
41
|
+
this.element.style.height = height + "px";
|
|
37
42
|
}
|
|
38
43
|
endEditing() {}
|
|
39
44
|
onEnd() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/textArea-editor.ts"],"names":[],"mappings":";;;AAMA,MAAa,cAAc;IAOzB,YAAY,YAAmC;QAN/C,eAAU,GAAW,UAAU,CAAC;QAO9B,IAAI,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,aAAa;;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAwB,CAAC;QACxE,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE;YAC/B,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;SACjE;QACD,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAExC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/textArea-editor.ts"],"names":[],"mappings":"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","file":"textArea-editor.js","sourcesContent":["import type { EditContext, IEditor, RectProps } from './types';\n\nexport interface TextAreaEditorConfig {\n readonly?: boolean;\n}\n\nexport class TextAreaEditor implements IEditor {\n editorType: string = 'TextArea';\n editorConfig: TextAreaEditorConfig;\n container: HTMLElement;\n successCallback?: () => void;\n element?: HTMLTextAreaElement;\n\n constructor(editorConfig?: TextAreaEditorConfig) {\n this.editorConfig = editorConfig || {};\n }\n\n createElement() {\n const input = document.createElement('textArea') as HTMLTextAreaElement;\n if (this.editorConfig?.readonly) {\n input.setAttribute('readonly', `${this.editorConfig.readonly}`);\n }\n input.style.resize = 'none';\n input.style.position = 'absolute';\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.height = '100%';\n input.style.boxSizing = 'border-box';\n input.style.backgroundColor = '#FFFFFF';\n\n input.style.borderRadius = '0px';\n input.style.border = '2px solid #d9d9d9';\n\n // #region 为了保证input在focus时，没有圆角\n input.addEventListener('focus', () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n });\n\n input.addEventListener('blur', () => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n input.style.outline = 'none';\n });\n\n this.element = input;\n this.container.appendChild(input);\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n const _isSelectAll = e.key === 'a' && (e.ctrlKey || e.metaKey);\n const _isTextAreaNewLine = e.key === 'Enter' && e.shiftKey;\n if (_isSelectAll || _isTextAreaNewLine) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n }\n\n setValue(value: string) {\n this.element.value = typeof value !== 'undefined' ? value : '';\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ value, referencePosition, container, endEdit }: EditContext<string>) {\n this.container = container;\n this.successCallback = endEdit;\n if (!this.element) {\n this.createElement();\n\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n }\n this.element.focus();\n // do nothing\n }\n\n adjustPosition(rect: RectProps) {\n\n\n //使border均分input位置rect的上下左右\n const borderWidth = 2;\n const top = rect.top - borderWidth / 2;\n const left = rect.left - borderWidth / 2;\n const width = rect.width + borderWidth;\n const height = rect.height + borderWidth;\n\n this.element.style.top = top + 'px';\n this.element.style.left = left + 'px';\n this.element.style.width = width + 'px';\n this.element.style.height = height + 'px';\n }\n\n endEditing() {\n // do nothing\n }\n\n onEnd() {\n // do nothing\n this.container.removeChild(this.element);\n this.element = undefined;\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/dist/vtable-editors.js
CHANGED
|
@@ -105,6 +105,15 @@
|
|
|
105
105
|
input.style.boxSizing = 'border-box';
|
|
106
106
|
input.style.position = 'absolute';
|
|
107
107
|
input.style.backgroundColor = '#FFFFFF';
|
|
108
|
+
input.style.borderRadius = '0px';
|
|
109
|
+
input.style.border = '2px solid #d9d9d9';
|
|
110
|
+
input.addEventListener('focus', () => {
|
|
111
|
+
input.style.borderColor = '#4A90E2';
|
|
112
|
+
input.style.outline = 'none';
|
|
113
|
+
});
|
|
114
|
+
input.addEventListener('blur', () => {
|
|
115
|
+
input.style.borderColor = '#d9d9d9';
|
|
116
|
+
});
|
|
108
117
|
this.element = input;
|
|
109
118
|
this.container.appendChild(input);
|
|
110
119
|
input.addEventListener('keydown', (e) => {
|
|
@@ -136,6 +145,15 @@
|
|
|
136
145
|
select.style.width = '100%';
|
|
137
146
|
select.style.boxSizing = 'border-box';
|
|
138
147
|
select.style.backgroundColor = '#FFFFFF';
|
|
148
|
+
select.style.borderRadius = '0px';
|
|
149
|
+
select.style.border = '2px solid #d9d9d9';
|
|
150
|
+
select.addEventListener('focus', () => {
|
|
151
|
+
select.style.borderColor = '#4A90E2';
|
|
152
|
+
select.style.outline = 'none';
|
|
153
|
+
});
|
|
154
|
+
select.addEventListener('blur', () => {
|
|
155
|
+
select.style.borderColor = '#d9d9d9';
|
|
156
|
+
});
|
|
139
157
|
this.element = select;
|
|
140
158
|
const { values } = this.editorConfig;
|
|
141
159
|
let opsStr = '';
|
|
@@ -170,10 +188,15 @@
|
|
|
170
188
|
this.element.focus();
|
|
171
189
|
}
|
|
172
190
|
adjustPosition(rect) {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
191
|
+
const borderWidth = 2;
|
|
192
|
+
const top = rect.top - borderWidth / 2;
|
|
193
|
+
const left = rect.left - borderWidth / 2;
|
|
194
|
+
const width = rect.width + borderWidth;
|
|
195
|
+
const height = rect.height + borderWidth;
|
|
196
|
+
this.element.style.top = top + 'px';
|
|
197
|
+
this.element.style.left = left + 'px';
|
|
198
|
+
this.element.style.width = width + 'px';
|
|
199
|
+
this.element.style.height = height + 'px';
|
|
177
200
|
}
|
|
178
201
|
endEditing() {
|
|
179
202
|
}
|
|
@@ -206,6 +229,16 @@
|
|
|
206
229
|
input.style.height = '100%';
|
|
207
230
|
input.style.boxSizing = 'border-box';
|
|
208
231
|
input.style.backgroundColor = '#FFFFFF';
|
|
232
|
+
input.style.borderRadius = '0px';
|
|
233
|
+
input.style.border = '2px solid #d9d9d9';
|
|
234
|
+
input.addEventListener('focus', () => {
|
|
235
|
+
input.style.borderColor = '#4A90E2';
|
|
236
|
+
input.style.outline = 'none';
|
|
237
|
+
});
|
|
238
|
+
input.addEventListener('blur', () => {
|
|
239
|
+
input.style.borderColor = '#d9d9d9';
|
|
240
|
+
input.style.outline = 'none';
|
|
241
|
+
});
|
|
209
242
|
this.element = input;
|
|
210
243
|
this.container.appendChild(input);
|
|
211
244
|
input.addEventListener('keydown', (e) => {
|
|
@@ -237,10 +270,15 @@
|
|
|
237
270
|
this.element.focus();
|
|
238
271
|
}
|
|
239
272
|
adjustPosition(rect) {
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
273
|
+
const borderWidth = 2;
|
|
274
|
+
const top = rect.top - borderWidth / 2;
|
|
275
|
+
const left = rect.left - borderWidth / 2;
|
|
276
|
+
const width = rect.width + borderWidth;
|
|
277
|
+
const height = rect.height + borderWidth;
|
|
278
|
+
this.element.style.top = top + 'px';
|
|
279
|
+
this.element.style.left = left + 'px';
|
|
280
|
+
this.element.style.width = width + 'px';
|
|
281
|
+
this.element.style.height = height + 'px';
|
|
244
282
|
}
|
|
245
283
|
endEditing() {
|
|
246
284
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).VTable=e.VTable||{},e.VTable.editors={}))}(this,(function(e){"use strict";class t{editorType="Input";editorConfig;container;successCallback;element;constructor(e){this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","text"),this.editorConfig?.readonly&&e.setAttribute("readonly",`${this.editorConfig.readonly}`),e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(()=>{e.style.borderColor="#d9d9d9"})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&e.stopPropagation()})),e.addEventListener("wheel",(e=>{e.preventDefault()}))}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}onStart({value:e,referencePosition:t,container:i,endEdit:n}){this.container=i,this.successCallback=n,this.element||(this.createElement(),null!=e&&this.setValue(e),t?.rect&&this.adjustPosition(t.rect)),this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).VTable=e.VTable||{},e.VTable.editors={}))}(this,(function(e){"use strict";class t{editorType="Input";editorConfig;container;successCallback;element;constructor(e){this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","text"),this.editorConfig?.readonly&&e.setAttribute("readonly",`${this.editorConfig.readonly}`),e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(()=>{e.style.borderColor="#d9d9d9"})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&e.stopPropagation()})),e.addEventListener("wheel",(e=>{e.preventDefault()}))}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}onStart({value:e,referencePosition:t,container:i,endEdit:n}){this.container=i,this.successCallback=n,this.element||(this.createElement(),null!=e&&this.setValue(e),t?.rect&&this.adjustPosition(t.rect)),this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,o=e.height+2;this.element.style.top=t+"px",this.element.style.left=i+"px",this.element.style.width=n+"px",this.element.style.height=o+"px"}endEditing(){}onEnd(){this.container?.contains(this.element)&&this.container.removeChild(this.element),this.element=void 0}isEditorElement(e){return e===this.element}validateValue(e,t,i,n){return!0}}var i,n;e.Placement=void 0,(i=e.Placement||(e.Placement={})).top="top",i.bottom="bottom",i.left="left",i.right="right",e.ValidateEnum=void 0,(n=e.ValidateEnum||(e.ValidateEnum={})).validateExit="validate-exit",n.invalidateExit="invalidate-exit",n.validateNotExit="validate-not-exit",n.invalidateNotExit="invalidate-not-exit",e.DateInputEditor=class extends t{editorType="DateInput";constructor(e){super(e),this.editorConfig=e}createElement(){const e=document.createElement("input");e.setAttribute("type","date"),e.style.padding="4px",e.style.width="100%",e.style.boxSizing="border-box",e.style.position="absolute",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(()=>{e.style.borderColor="#d9d9d9"})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{"a"===e.key&&(e.ctrlKey||e.metaKey)&&e.stopPropagation()})),e.addEventListener("wheel",(e=>{e.preventDefault()}))}},e.InputEditor=t,e.ListEditor=class{editorType="Input";input;editorConfig;container;element;successCallback;constructor(e){this.editorConfig=e}createElement(e){const t=document.createElement("select");t.setAttribute("type","text"),t.style.position="absolute",t.style.padding="4px",t.style.width="100%",t.style.boxSizing="border-box",t.style.backgroundColor="#FFFFFF",t.style.borderRadius="0px",t.style.border="2px solid #d9d9d9",t.addEventListener("focus",(()=>{t.style.borderColor="#4A90E2",t.style.outline="none"})),t.addEventListener("blur",(()=>{t.style.borderColor="#d9d9d9"})),this.element=t;const{values:i}=this.editorConfig;let n="";i.forEach((t=>{n+=t===e?`<option value="${t}" selected>${t}</option>`:`<option value="${t}" >${t}</option>`})),t.innerHTML=n,this.container.appendChild(t)}_bindSelectChangeEvent(){this.element.addEventListener("change",(()=>{}))}setValue(e){}getValue(){return this.element.value}onStart({container:e,value:t,referencePosition:i,endEdit:n}){this.container=e,this.successCallback=n,this.createElement(t),null!=t&&this.setValue(t),i?.rect&&this.adjustPosition(i.rect),this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,o=e.height+2;this.element.style.top=t+"px",this.element.style.left=i+"px",this.element.style.width=n+"px",this.element.style.height=o+"px"}endEditing(){}onEnd(){this.container.removeChild(this.element)}isEditorElement(e){return e===this.element}},e.TextAreaEditor=class{editorType="TextArea";editorConfig;container;successCallback;element;constructor(e){this.editorConfig=e||{}}createElement(){const e=document.createElement("textArea");this.editorConfig?.readonly&&e.setAttribute("readonly",`${this.editorConfig.readonly}`),e.style.resize="none",e.style.position="absolute",e.style.padding="4px",e.style.width="100%",e.style.height="100%",e.style.boxSizing="border-box",e.style.backgroundColor="#FFFFFF",e.style.borderRadius="0px",e.style.border="2px solid #d9d9d9",e.addEventListener("focus",(()=>{e.style.borderColor="#4A90E2",e.style.outline="none"})),e.addEventListener("blur",(()=>{e.style.borderColor="#d9d9d9",e.style.outline="none"})),this.element=e,this.container.appendChild(e),e.addEventListener("keydown",(e=>{const t="a"===e.key&&(e.ctrlKey||e.metaKey),i="Enter"===e.key&&e.shiftKey;(t||i)&&e.stopPropagation()}))}setValue(e){this.element.value=void 0!==e?e:""}getValue(){return this.element.value}onStart({value:e,referencePosition:t,container:i,endEdit:n}){this.container=i,this.successCallback=n,this.element||(this.createElement(),null!=e&&this.setValue(e),t?.rect&&this.adjustPosition(t.rect)),this.element.focus()}adjustPosition(e){const t=e.top-1,i=e.left-1,n=e.width+2,o=e.height+2;this.element.style.top=t+"px",this.element.style.left=i+"px",this.element.style.width=n+"px",this.element.style.height=o+"px"}endEditing(){}onEnd(){this.container.removeChild(this.element),this.element=void 0}isEditorElement(e){return e===this.element}}}));
|
package/es/date-input-editor.js
CHANGED
|
@@ -8,7 +8,11 @@ export class DateInputEditor extends InputEditor {
|
|
|
8
8
|
const input = document.createElement("input");
|
|
9
9
|
input.setAttribute("type", "date"), input.style.padding = "4px", input.style.width = "100%",
|
|
10
10
|
input.style.boxSizing = "border-box", input.style.position = "absolute", input.style.backgroundColor = "#FFFFFF",
|
|
11
|
-
|
|
11
|
+
input.style.borderRadius = "0px", input.style.border = "2px solid #d9d9d9", input.addEventListener("focus", (() => {
|
|
12
|
+
input.style.borderColor = "#4A90E2", input.style.outline = "none";
|
|
13
|
+
})), input.addEventListener("blur", (() => {
|
|
14
|
+
input.style.borderColor = "#d9d9d9";
|
|
15
|
+
})), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
|
|
12
16
|
"a" === e.key && (e.ctrlKey || e.metaKey) && e.stopPropagation();
|
|
13
17
|
})), input.addEventListener("wheel", (e => {
|
|
14
18
|
e.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAE9C,YAAY,YAAgC;QAC1C,KAAK,CAAC,YAAY,CAAC,CAAC;QAFtB,eAAU,GAAW,WAAW,CAAC;QAG/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAExC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAQlC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;gBAE7C,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAGH,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;CACF","file":"date-input-editor.js","sourcesContent":["import type { InputEditorConfig } from './input-editor';\nimport { InputEditor } from './input-editor';\nimport type { IEditor } from './types';\nexport class DateInputEditor extends InputEditor implements IEditor {\n editorType: string = 'DateInput';\n constructor(editorConfig?: InputEditorConfig) {\n super(editorConfig);\n this.editorConfig = editorConfig;\n }\n createElement() {\n const input = document.createElement('input');\n\n input.setAttribute('type', 'date');\n\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.position = 'absolute';\n input.style.backgroundColor = '#FFFFFF';\n\n this.element = input;\n this.container.appendChild(input);\n // 测试successCallback 调用是否正确\n // input.ondblclick = () => {\n // debugger;\n // this.successCallback();\n // };\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n\n // hack for preventing drag touch cause page jump\n input.addEventListener('wheel', e => {\n e.preventDefault();\n });\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/date-input-editor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAE9C,YAAY,YAAgC;QAC1C,KAAK,CAAC,YAAY,CAAC,CAAC;QAFtB,eAAU,GAAW,WAAW,CAAC;QAG/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IACD,aAAa;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEnC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAExC,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;QACjC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC;QAEzC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;YACpC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;YAClC,KAAK,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;QAEtC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAQlC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACrD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE;gBAE7C,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;QACH,CAAC,CAAC,CAAC;QAGH,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;CACF","file":"date-input-editor.js","sourcesContent":["import type { InputEditorConfig } from './input-editor';\nimport { InputEditor } from './input-editor';\nimport type { IEditor } from './types';\nexport class DateInputEditor extends InputEditor implements IEditor {\n editorType: string = 'DateInput';\n constructor(editorConfig?: InputEditorConfig) {\n super(editorConfig);\n this.editorConfig = editorConfig;\n }\n createElement() {\n const input = document.createElement('input');\n\n input.setAttribute('type', 'date');\n\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.boxSizing = 'border-box';\n input.style.position = 'absolute';\n input.style.backgroundColor = '#FFFFFF';\n\n input.style.borderRadius = '0px';\n input.style.border = '2px solid #d9d9d9';\n // #region 为了保证input在focus时，没有圆角\n input.addEventListener('focus', () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n });\n\n input.addEventListener('blur', () => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n });\n\n this.element = input;\n this.container.appendChild(input);\n // 测试successCallback 调用是否正确\n // input.ondblclick = () => {\n // debugger;\n // this.successCallback();\n // };\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n\n // hack for preventing drag touch cause page jump\n input.addEventListener('wheel', e => {\n e.preventDefault();\n });\n }\n}\n"]}
|
package/es/list-editor.js
CHANGED
|
@@ -6,7 +6,11 @@ export class ListEditor {
|
|
|
6
6
|
const select = document.createElement("select");
|
|
7
7
|
select.setAttribute("type", "text"), select.style.position = "absolute", select.style.padding = "4px",
|
|
8
8
|
select.style.width = "100%", select.style.boxSizing = "border-box", select.style.backgroundColor = "#FFFFFF",
|
|
9
|
-
|
|
9
|
+
select.style.borderRadius = "0px", select.style.border = "2px solid #d9d9d9", select.addEventListener("focus", (() => {
|
|
10
|
+
select.style.borderColor = "#4A90E2", select.style.outline = "none";
|
|
11
|
+
})), select.addEventListener("blur", (() => {
|
|
12
|
+
select.style.borderColor = "#d9d9d9";
|
|
13
|
+
})), this.element = select;
|
|
10
14
|
const {values: values} = this.editorConfig;
|
|
11
15
|
let opsStr = "";
|
|
12
16
|
values.forEach((item => {
|
|
@@ -26,8 +30,9 @@ export class ListEditor {
|
|
|
26
30
|
this.element.focus();
|
|
27
31
|
}
|
|
28
32
|
adjustPosition(rect) {
|
|
29
|
-
|
|
30
|
-
this.element.style.
|
|
33
|
+
const top = rect.top - 1, left = rect.left - 1, width = rect.width + 2, height = rect.height + 2;
|
|
34
|
+
this.element.style.top = top + "px", this.element.style.left = left + "px", this.element.style.width = width + "px",
|
|
35
|
+
this.element.style.height = height + "px";
|
|
31
36
|
}
|
|
32
37
|
endEditing() {}
|
|
33
38
|
onEnd() {
|
package/es/list-editor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"AAKA,MAAM,OAAO,UAAU;IAQrB,YAAY,YAA8B;QAP1C,eAAU,GAAW,OAAO,CAAC;QAQ3B,
|
|
1
|
+
{"version":3,"sources":["../src/list-editor.ts"],"names":[],"mappings":"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","file":"list-editor.js","sourcesContent":["import type { EditContext, IEditor, Placement, RectProps } from './types';\nexport interface ListEditorConfig {\n values: string[];\n}\n\nexport class ListEditor implements IEditor {\n editorType: string = 'Input';\n input?: HTMLInputElement;\n editorConfig?: ListEditorConfig;\n container?: HTMLElement;\n element?: HTMLSelectElement;\n successCallback?: () => void;\n\n constructor(editorConfig: ListEditorConfig) {\n this.editorConfig = editorConfig;\n }\n\n createElement(value: string) {\n // create select tag\n const select = document.createElement('select');\n select.setAttribute('type', 'text');\n select.style.position = 'absolute';\n select.style.padding = '4px';\n select.style.width = '100%';\n select.style.boxSizing = 'border-box';\n select.style.backgroundColor = '#FFFFFF';\n select.style.borderRadius = '0px';\n select.style.border = '2px solid #d9d9d9';\n // #region 为了保证input在focus时，没有圆角\n select.addEventListener('focus', () => {\n select.style.borderColor = '#4A90E2';\n select.style.outline = 'none';\n });\n\n select.addEventListener('blur', () => {\n select.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n });\n\n\n\n this.element = select;\n\n // create option tags\n const { values } = this.editorConfig;\n let opsStr = '';\n values.forEach(item => {\n opsStr +=\n item === value\n ? `<option value=\"${item}\" selected>${item}</option>`\n : `<option value=\"${item}\" >${item}</option>`;\n });\n select.innerHTML = opsStr;\n\n this.container.appendChild(select);\n // this._bindSelectChangeEvent();\n }\n\n _bindSelectChangeEvent() {\n this.element.addEventListener('change', () => {\n // this.successCallback();\n });\n }\n\n setValue(value: string) {\n // do nothing\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ container, value, referencePosition, endEdit }: EditContext) {\n this.container = container;\n this.successCallback = endEdit;\n\n this.createElement(value);\n\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n this.element.focus();\n }\n\n adjustPosition(rect: RectProps) {\n\n //使border均分input位置rect的上下左右\n const borderWidth = 2;\n const top = rect.top - borderWidth / 2;\n const left = rect.left - borderWidth / 2;\n const width = rect.width + borderWidth;\n const height = rect.height + borderWidth;\n\n this.element.style.top =top + 'px';\n this.element.style.left =left + 'px';\n this.element.style.width = width + 'px';\n this.element.style.height = height + 'px';\n }\n\n endEditing() {\n // do nothing\n }\n\n onEnd() {\n this.container.removeChild(this.element);\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/es/textArea-editor.js
CHANGED
|
@@ -8,8 +8,12 @@ export class TextAreaEditor {
|
|
|
8
8
|
(null === (_a = this.editorConfig) || void 0 === _a ? void 0 : _a.readonly) && input.setAttribute("readonly", `${this.editorConfig.readonly}`),
|
|
9
9
|
input.style.resize = "none", input.style.position = "absolute", input.style.padding = "4px",
|
|
10
10
|
input.style.width = "100%", input.style.height = "100%", input.style.boxSizing = "border-box",
|
|
11
|
-
input.style.backgroundColor = "#FFFFFF",
|
|
12
|
-
input.addEventListener("
|
|
11
|
+
input.style.backgroundColor = "#FFFFFF", input.style.borderRadius = "0px", input.style.border = "2px solid #d9d9d9",
|
|
12
|
+
input.addEventListener("focus", (() => {
|
|
13
|
+
input.style.borderColor = "#4A90E2", input.style.outline = "none";
|
|
14
|
+
})), input.addEventListener("blur", (() => {
|
|
15
|
+
input.style.borderColor = "#d9d9d9", input.style.outline = "none";
|
|
16
|
+
})), this.element = input, this.container.appendChild(input), input.addEventListener("keydown", (e => {
|
|
13
17
|
const _isSelectAll = "a" === e.key && (e.ctrlKey || e.metaKey), _isTextAreaNewLine = "Enter" === e.key && e.shiftKey;
|
|
14
18
|
(_isSelectAll || _isTextAreaNewLine) && e.stopPropagation();
|
|
15
19
|
}));
|
|
@@ -26,8 +30,9 @@ export class TextAreaEditor {
|
|
|
26
30
|
this.element.focus();
|
|
27
31
|
}
|
|
28
32
|
adjustPosition(rect) {
|
|
29
|
-
|
|
30
|
-
this.element.style.
|
|
33
|
+
const top = rect.top - 1, left = rect.left - 1, width = rect.width + 2, height = rect.height + 2;
|
|
34
|
+
this.element.style.top = top + "px", this.element.style.left = left + "px", this.element.style.width = width + "px",
|
|
35
|
+
this.element.style.height = height + "px";
|
|
31
36
|
}
|
|
32
37
|
endEditing() {}
|
|
33
38
|
onEnd() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/textArea-editor.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,cAAc;IAOzB,YAAY,YAAmC;QAN/C,eAAU,GAAW,UAAU,CAAC;QAO9B,IAAI,CAAC,YAAY,GAAG,YAAY,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,aAAa;;QACX,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAwB,CAAC;QACxE,IAAI,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE;YAC/B,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;SACjE;QACD,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QAClC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC5B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAExC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"sources":["../src/textArea-editor.ts"],"names":[],"mappings":"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","file":"textArea-editor.js","sourcesContent":["import type { EditContext, IEditor, RectProps } from './types';\n\nexport interface TextAreaEditorConfig {\n readonly?: boolean;\n}\n\nexport class TextAreaEditor implements IEditor {\n editorType: string = 'TextArea';\n editorConfig: TextAreaEditorConfig;\n container: HTMLElement;\n successCallback?: () => void;\n element?: HTMLTextAreaElement;\n\n constructor(editorConfig?: TextAreaEditorConfig) {\n this.editorConfig = editorConfig || {};\n }\n\n createElement() {\n const input = document.createElement('textArea') as HTMLTextAreaElement;\n if (this.editorConfig?.readonly) {\n input.setAttribute('readonly', `${this.editorConfig.readonly}`);\n }\n input.style.resize = 'none';\n input.style.position = 'absolute';\n input.style.padding = '4px';\n input.style.width = '100%';\n input.style.height = '100%';\n input.style.boxSizing = 'border-box';\n input.style.backgroundColor = '#FFFFFF';\n\n input.style.borderRadius = '0px';\n input.style.border = '2px solid #d9d9d9';\n\n // #region 为了保证input在focus时，没有圆角\n input.addEventListener('focus', () => {\n input.style.borderColor = '#4A90E2';\n input.style.outline = 'none';\n });\n\n input.addEventListener('blur', () => {\n input.style.borderColor = '#d9d9d9';\n // input.style.boxShadow = 'none';\n input.style.outline = 'none';\n });\n\n this.element = input;\n this.container.appendChild(input);\n\n // 监听键盘事件\n input.addEventListener('keydown', (e: KeyboardEvent) => {\n const _isSelectAll = e.key === 'a' && (e.ctrlKey || e.metaKey);\n const _isTextAreaNewLine = e.key === 'Enter' && e.shiftKey;\n if (_isSelectAll || _isTextAreaNewLine) {\n // 阻止冒泡 防止处理成表格全选事件\n e.stopPropagation();\n }\n });\n }\n\n setValue(value: string) {\n this.element.value = typeof value !== 'undefined' ? value : '';\n }\n\n getValue() {\n return this.element.value;\n }\n\n onStart({ value, referencePosition, container, endEdit }: EditContext<string>) {\n this.container = container;\n this.successCallback = endEdit;\n if (!this.element) {\n this.createElement();\n\n if (value !== undefined && value !== null) {\n this.setValue(value);\n }\n if (referencePosition?.rect) {\n this.adjustPosition(referencePosition.rect);\n }\n }\n this.element.focus();\n // do nothing\n }\n\n adjustPosition(rect: RectProps) {\n\n\n //使border均分input位置rect的上下左右\n const borderWidth = 2;\n const top = rect.top - borderWidth / 2;\n const left = rect.left - borderWidth / 2;\n const width = rect.width + borderWidth;\n const height = rect.height + borderWidth;\n\n this.element.style.top = top + 'px';\n this.element.style.left = left + 'px';\n this.element.style.width = width + 'px';\n this.element.style.height = height + 'px';\n }\n\n endEditing() {\n // do nothing\n }\n\n onEnd() {\n // do nothing\n this.container.removeChild(this.element);\n this.element = undefined;\n }\n\n isEditorElement(target: HTMLElement) {\n return target === this.element;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vtable-editors",
|
|
3
|
-
"version": "1.18.
|
|
3
|
+
"version": "1.18.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"ts-node": "10.9.0",
|
|
39
39
|
"tslib": "2.3.1",
|
|
40
40
|
"tslint": "5.12.1",
|
|
41
|
+
"@internal/bundler": "0.0.1",
|
|
41
42
|
"@internal/ts-config": "0.0.1",
|
|
42
|
-
"@internal/eslint-config": "0.0.1"
|
|
43
|
-
"@internal/bundler": "0.0.1"
|
|
43
|
+
"@internal/eslint-config": "0.0.1"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|