@fmsim/board 1.0.40 → 1.0.41

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.
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property, query } from 'lit/decorators.js';
4
- import { getRestServiceFullPath, getUploadTempUrl } from '@fmsim/api/restful.js';
4
+ import { getRestServiceUrl, getUploadTempUrl } from '@fmsim/api/restful.js';
5
5
  let RestfulFileSelector = class RestfulFileSelector extends LitElement {
6
6
  constructor() {
7
7
  super(...arguments);
@@ -85,7 +85,7 @@ let RestfulFileSelector = class RestfulFileSelector extends LitElement {
85
85
  }
86
86
  }
87
87
  };
88
- xhr.open('POST', getRestServiceFullPath() + getUploadTempUrl());
88
+ xhr.open('POST', getRestServiceUrl() + getUploadTempUrl());
89
89
  xhr.send(formData);
90
90
  }
91
91
  onImageFileChanged(e) {
@@ -1 +1 @@
1
- {"version":3,"file":"restful-file-selector.js","sourceRoot":"","sources":["../../../src/component/restful-file-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { getRestServiceFullPath, getUploadTempUrl } from '@fmsim/api/restful.js'\n\n@customElement('restful-file-selector')\nexport class RestfulFileSelector extends LitElement {\n static styles = [\n css`\n :host {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n }\n\n #input-box {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n input[type='file'] {\n position: absolute;\n width: 0px;\n height: 0px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n label {\n padding: unset;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--file-selector-color, #999);\n font-size: inherit;\n line-height: normal;\n vertical-align: middle;\n background-color: var(--file-selector-bg-color, #fdfdfd);\n cursor: pointer;\n border: var(--file-selector-border, 1px solid #ebebeb);\n border-radius: var(--file-selector-border-radius, 0.25em);\n }\n\n /* named upload */\n .upload-name {\n flex: 1;\n padding: 0.5em 0.75em; /* label의 패딩값과 일치 */\n font-size: inherit;\n font-family: inherit;\n line-height: normal;\n vertical-align: middle;\n background-color: #f5f5f5;\n border: 1px solid #ebebeb;\n border-bottom-color: #e2e2e2;\n border-radius: 0.25em;\n -webkit-appearance: none; /* 네이티브 외형 감추기 */\n -moz-appearance: none;\n appearance: none;\n }\n `\n ]\n\n @property({ type: String }) label: string = 'select file'\n @property({ type: String }) accept?: string\n @property({ type: Boolean, attribute: 'show-filename' }) showFilename?: boolean\n @property({ type: Boolean, attribute: 'multiple' }) multiple: boolean = false\n @property({ type: Array }) _files: any[] = []\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n return html`\n <div id=\"input-box\">\n ${this.showFilename\n ? html`\n <input class=\"upload-name\" value=\"${this._files.map(f => f.name).join(', ') || this.label}\" disabled />\n `\n : html``}\n <label for=\"input-file\">${this.label}</label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept || ''}\n class=\"upload-hidden\"\n ?multiple=${this.multiple}\n hidden\n multiple\n onchange=${(e: Event) => {\n this.onFileChange(e)\n }}\n @change=${(e: Event) => {\n this.onFileChange(e)\n }}\n />\n </div>\n `\n }\n\n getUUID() {\n // UUID v4 generator in JavaScript (RFC4122 compliant)\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\n var r = (Math.random() * 16) | 0,\n v = c == 'x' ? r : (r & 3) | 8\n return v.toString(16)\n })\n }\n\n onFileChange(e: Event) {\n if (!e) {\n return\n }\n\n const el = e.currentTarget as HTMLInputElement\n const files = el.files || (e as any).dataTransfer.files\n const files2 = el.files || (e as any).dataTransfer.files\n\n if (!files.length) {\n return\n }\n\n const formData = new FormData()\n formData.append('file', files[0])\n formData.append('fileId', this.getUUID())\n const xhr = new XMLHttpRequest()\n const vm = this\n\n var fileId\n\n xhr.onreadystatechange = function () {\n if (xhr.readyState === 4) {\n try {\n let resp = JSON.parse(xhr.response)\n fileId = resp.result.fileId\n vm.dispatchEvent(\n new CustomEvent('file-change', {\n bubbles: true,\n composed: true,\n detail: {\n files: el.files,\n fileId: fileId + '.' + resp.result.fileExtension\n }\n })\n )\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: 'Upload File Temp Error // ' + ex,\n ex: ex\n }\n })\n )\n\n throw new Error('Upload File Temp Error')\n }\n }\n }\n xhr.open('POST', getRestServiceFullPath() + getUploadTempUrl())\n xhr.send(formData)\n }\n\n onImageFileChanged(e: Event) {\n this._files = [...this._files, ...Array.from((e.currentTarget as HTMLInputElement).files || [])]\n }\n}\n"]}
1
+ {"version":3,"file":"restful-file-selector.js","sourceRoot":"","sources":["../../../src/component/restful-file-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { getRestServiceUrl, getUploadTempUrl } from '@fmsim/api/restful.js'\n\n@customElement('restful-file-selector')\nexport class RestfulFileSelector extends LitElement {\n static styles = [\n css`\n :host {\n flex: 1;\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n }\n\n #input-box {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n input[type='file'] {\n position: absolute;\n width: 0px;\n height: 0px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n label {\n padding: unset;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--file-selector-color, #999);\n font-size: inherit;\n line-height: normal;\n vertical-align: middle;\n background-color: var(--file-selector-bg-color, #fdfdfd);\n cursor: pointer;\n border: var(--file-selector-border, 1px solid #ebebeb);\n border-radius: var(--file-selector-border-radius, 0.25em);\n }\n\n /* named upload */\n .upload-name {\n flex: 1;\n padding: 0.5em 0.75em; /* label의 패딩값과 일치 */\n font-size: inherit;\n font-family: inherit;\n line-height: normal;\n vertical-align: middle;\n background-color: #f5f5f5;\n border: 1px solid #ebebeb;\n border-bottom-color: #e2e2e2;\n border-radius: 0.25em;\n -webkit-appearance: none; /* 네이티브 외형 감추기 */\n -moz-appearance: none;\n appearance: none;\n }\n `\n ]\n\n @property({ type: String }) label: string = 'select file'\n @property({ type: String }) accept?: string\n @property({ type: Boolean, attribute: 'show-filename' }) showFilename?: boolean\n @property({ type: Boolean, attribute: 'multiple' }) multiple: boolean = false\n @property({ type: Array }) _files: any[] = []\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n return html`\n <div id=\"input-box\">\n ${this.showFilename\n ? html`\n <input class=\"upload-name\" value=\"${this._files.map(f => f.name).join(', ') || this.label}\" disabled />\n `\n : html``}\n <label for=\"input-file\">${this.label}</label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept || ''}\n class=\"upload-hidden\"\n ?multiple=${this.multiple}\n hidden\n multiple\n onchange=${(e: Event) => {\n this.onFileChange(e)\n }}\n @change=${(e: Event) => {\n this.onFileChange(e)\n }}\n />\n </div>\n `\n }\n\n getUUID() {\n // UUID v4 generator in JavaScript (RFC4122 compliant)\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\n var r = (Math.random() * 16) | 0,\n v = c == 'x' ? r : (r & 3) | 8\n return v.toString(16)\n })\n }\n\n onFileChange(e: Event) {\n if (!e) {\n return\n }\n\n const el = e.currentTarget as HTMLInputElement\n const files = el.files || (e as any).dataTransfer.files\n const files2 = el.files || (e as any).dataTransfer.files\n\n if (!files.length) {\n return\n }\n\n const formData = new FormData()\n formData.append('file', files[0])\n formData.append('fileId', this.getUUID())\n const xhr = new XMLHttpRequest()\n const vm = this\n\n var fileId\n\n xhr.onreadystatechange = function () {\n if (xhr.readyState === 4) {\n try {\n let resp = JSON.parse(xhr.response)\n fileId = resp.result.fileId\n vm.dispatchEvent(\n new CustomEvent('file-change', {\n bubbles: true,\n composed: true,\n detail: {\n files: el.files,\n fileId: fileId + '.' + resp.result.fileExtension\n }\n })\n )\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: 'Upload File Temp Error // ' + ex,\n ex: ex\n }\n })\n )\n\n throw new Error('Upload File Temp Error')\n }\n }\n }\n xhr.open('POST', getRestServiceUrl() + getUploadTempUrl())\n xhr.send(formData)\n }\n\n onImageFileChanged(e: Event) {\n this._files = [...this._files, ...Array.from((e.currentTarget as HTMLInputElement).files || [])]\n }\n}\n"]}