npm - @operato/data-grist - Versions diffs - 1.5.36 → 1.5.41 - Mend

@operato/data-grist 1.5.36 → 1.5.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.

Files changed (64) hide show

package/dist/src/editors/input-editors.js ADDED Viewed

@@ -0,0 +1,329 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
+const STYLE = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background-color: transparent;
+  }
+  :host > * {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background-color: transparent;
+    box-sizing: border-box;
+    font-size: inherit;
+    font-family: inherit;
+  }
+  :host > style {
+    display: none;
+  }
+  :host > input[type='checkbox'] {
+    width: initial;
+    margin: auto;
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    zoom: var(--grist-input-zoom);
+  }
+  *:focus {
+    outline: none;
+  }
+  input[type='file'] {
+    opacity: 0%;
+  }
+  @media screen and (max-width: 460px) {
+    :host > * {
+      border: initial;
+      background-color: initial;
+    }
+    *:focus {
+      outline: none;
+    }
+  }
+`;
+let InputEditor = class InputEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.column = ZERO_COLUMN;
+        this.record = ZERO_RECORD;
+    }
+    render() {
+        return this.editorTemplate;
+    }
+    get editor() {
+        return this.renderRoot.firstElementChild;
+    }
+    async firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onchange.bind(this));
+        this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
+        this.renderRoot.addEventListener('click', this._onclick.bind(this));
+        this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
+        const align = this.column.record.align;
+        if (align) {
+            this.style.textAlign = align;
+            this.style.textAlignLast = align; /* for select */
+        }
+        const name = this.column.name || '';
+        this.value = this._dirtyValue = this.formatForEditor(this.record[name]);
+        this.focus();
+        await this.updateComplete;
+        this.select();
+    }
+    select() {
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.select) {
+            return this.editor.select();
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    formatForEditor(value) {
+        return value === undefined ? '' : value;
+    }
+    formatFromEditor(e) {
+        return e.target.value;
+    }
+    _onfocusout() {
+        if (this._dirtyValue !== this.value) {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: this._dirtyValue,
+                    column: this.column,
+                    record: this.record,
+                    row: this.row
+                }
+            }));
+        }
+    }
+    _onchange(e) {
+        e.stopPropagation();
+        this._dirtyValue = this.formatFromEditor(e);
+    }
+    _onclick(e) {
+        e.stopPropagation();
+    }
+    _ondblclick(e) {
+        e.stopPropagation();
+    }
+    get editorTemplate() {
+        return html ``;
+    }
+};
+InputEditor.styles = STYLE;
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], InputEditor.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "field", void 0);
+__decorate([
+    property({ type: Number })
+], InputEditor.prototype, "row", void 0);
+InputEditor = __decorate([
+    customElement('ox-input-editor')
+], InputEditor);
+export { InputEditor };
+let TextInput = class TextInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="text" .value=${this.value} /> `;
+    }
+};
+TextInput = __decorate([
+    customElement('ox-text-input')
+], TextInput);
+export { TextInput };
+let EmailInput = class EmailInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="email" .value=${this.value} /> `;
+    }
+};
+EmailInput = __decorate([
+    customElement('ox-email-input')
+], EmailInput);
+export { EmailInput };
+let TelInput = class TelInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="tel" .value=${this.value} /> `;
+    }
+};
+TelInput = __decorate([
+    customElement('ox-tel-input')
+], TelInput);
+export { TelInput };
+let NumberInput = class NumberInput extends InputEditor {
+    formatFromEditor(e) {
+        let value = e.target.value;
+        switch (this.column.type) {
+            case 'float':
+                return Number.parseFloat(value);
+            case 'integer':
+                return Number.parseInt(value);
+            default:
+                return Number(value);
+        }
+    }
+    get editorTemplate() {
+        var { min = -Infinity, max = Infinity } = this.column.record.options || {};
+        return html ` <input type="number" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `;
+    }
+};
+NumberInput = __decorate([
+    customElement('ox-number-input')
+], NumberInput);
+export { NumberInput };
+let PasswordInput = class PasswordInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="password" .value=${this.value} /> `;
+    }
+};
+PasswordInput = __decorate([
+    customElement('ox-password-input')
+], PasswordInput);
+export { PasswordInput };
+let DateInput = class DateInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="date" .value=${this.value} /> `;
+    }
+};
+DateInput = __decorate([
+    customElement('ox-date-input')
+], DateInput);
+export { DateInput };
+let MonthInput = class MonthInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="month" .value=${this.value} /> `;
+    }
+};
+MonthInput = __decorate([
+    customElement('ox-month-input')
+], MonthInput);
+export { MonthInput };
+let WeekInput = class WeekInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="week" .value=${this.value} /> `;
+    }
+};
+WeekInput = __decorate([
+    customElement('ox-week-input')
+], WeekInput);
+export { WeekInput };
+let TimeInput = class TimeInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="time" .value=${this.value} /> `;
+    }
+};
+TimeInput = __decorate([
+    customElement('ox-time-input')
+], TimeInput);
+export { TimeInput };
+let DateTimeInput = class DateTimeInput extends InputEditor {
+    formatForEditor(timestamp) {
+        if (!timestamp) {
+            timestamp = Date.now();
+        }
+        var datetime = new Date(timestamp);
+        var tzoffset = datetime.getTimezoneOffset() * 60000; //offset in milliseconds
+        return new Date(timestamp - tzoffset).toISOString().slice(0, -1);
+    }
+    formatFromEditor(e) {
+        var value = e.target.value;
+        var datetime = new Date(value);
+        return datetime.getTime();
+    }
+    get editorTemplate() {
+        return html ` <input type="datetime-local" .value=${this.value} /> `;
+    }
+};
+DateTimeInput = __decorate([
+    customElement('ox-datetime-input')
+], DateTimeInput);
+export { DateTimeInput };
+let ColorInput = class ColorInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="color" .value=${this.value} /> `;
+    }
+};
+ColorInput = __decorate([
+    customElement('ox-color-input')
+], ColorInput);
+export { ColorInput };
+let CheckboxInput = class CheckboxInput extends InputEditor {
+    formatFromEditor(e) {
+        return e.target.checked;
+    }
+    get editorTemplate() {
+        return html ` <input type="checkbox" .checked=${!!this.value} /> `;
+    }
+};
+CheckboxInput = __decorate([
+    customElement('ox-checkbox-input')
+], CheckboxInput);
+export { CheckboxInput };
+let Select = class Select extends InputEditor {
+    get editorTemplate() {
+        var rowOptionField = this.record[this.column.record.rowOptionField || ''];
+        var { options = [] } = rowOptionField ? rowOptionField : this.column.record;
+        if (typeof options == 'function') {
+            options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field);
+        }
+        options = options.map((option) => {
+            switch (typeof option) {
+                case 'string':
+                    return {
+                        display: option,
+                        value: option
+                    };
+                case 'object':
+                    return {
+                        display: option.display,
+                        value: option.value
+                    };
+                default:
+                    return option;
+            }
+        });
+        return html `
+      <select>
+        ${options.map((option) => html `
+            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
+          `)}
+      </select>
+    `;
+    }
+};
+Select = __decorate([
+    customElement('ox-select-input')
+], Select);
+export { Select };
+//# sourceMappingURL=input-editors.js.map

package/dist/src/editors/input-editors.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-editors.js","sourceRoot":"","sources":["../../../src/editors/input-editors.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst STYLE = css`\n :host {\n display: block;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n }\n\n :host > * {\n display: flex;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n\n box-sizing: border-box;\n\n font-size: inherit;\n font-family: inherit;\n }\n\n :host > style {\n display: none;\n }\n\n :host > input[type='checkbox'] {\n width: initial;\n margin: auto;\n }\n input[type='checkbox'],\n input[type='radio'] {\n zoom: var(--grist-input-zoom);\n }\n *:focus {\n outline: none;\n }\n\n input[type='file'] {\n opacity: 0%;\n }\n\n @media screen and (max-width: 460px) {\n :host > * {\n border: initial;\n background-color: initial;\n }\n *:focus {\n outline: none;\n }\n }\n`\n\n@customElement('ox-input-editor')\nexport class InputEditor extends LitElement {\n static styles = STYLE\n\n @property({ type: Object }) value?: any\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex?: number\n @property({ type: Object }) field?: DataGridField\n @property({ type: Number }) row?: number\n\n protected _dirtyValue?: any\n\n render() {\n return this.editorTemplate\n }\n\n get editor(): HTMLElement | null {\n return this.renderRoot.firstElementChild as HTMLElement\n }\n\n async firstUpdated() {\n this.renderRoot.addEventListener('change', this._onchange.bind(this))\n this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n this.renderRoot.addEventListener('click', this._onclick.bind(this))\n this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n const align = this.column.record.align\n if (align) {\n this.style.textAlign = align\n this.style.textAlignLast = align /* for select */\n }\n\n const name = this.column.name || ''\n this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n this.focus()\n await this.updateComplete\n this.select()\n }\n\n select() {\n if ((this.editor as HTMLInputElement)?.select) {\n return (this.editor as HTMLInputElement).select()\n }\n }\n\n focus() {\n this.editor?.focus()\n }\n\n formatForEditor(value: any): any {\n return value === undefined ? '' : value\n }\n\n formatFromEditor(e: Event): any {\n return (e.target as HTMLInputElement).value\n }\n\n _onfocusout() {\n if (this._dirtyValue !== this.value) {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: this._dirtyValue,\n column: this.column,\n record: this.record,\n row: this.row\n }\n })\n )\n }\n }\n\n _onchange(e: Event): void {\n e.stopPropagation()\n\n this._dirtyValue = this.formatFromEditor(e)\n }\n\n _onclick(e: Event): void {\n e.stopPropagation()\n }\n\n _ondblclick(e: Event): void {\n e.stopPropagation()\n }\n\n get editorTemplate() {\n return html``\n }\n}\n\n@customElement('ox-text-input')\nexport class TextInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"text\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-email-input')\nexport class EmailInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"email\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-tel-input')\nexport class TelInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"tel\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-number-input')\nexport class NumberInput extends InputEditor {\n formatFromEditor(e: Event) {\n let value = (e.target as HTMLInputElement).value\n\n switch (this.column.type) {\n case 'float':\n return Number.parseFloat(value)\n case 'integer':\n return Number.parseInt(value)\n default:\n return Number(value)\n }\n }\n\n get editorTemplate() {\n var { min = -Infinity, max = Infinity } = this.column.record.options || {}\n\n return html` <input type=\"number\" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `\n }\n}\n\n@customElement('ox-password-input')\nexport class PasswordInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"password\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-date-input')\nexport class DateInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"date\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-month-input')\nexport class MonthInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"month\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-week-input')\nexport class WeekInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"week\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-time-input')\nexport class TimeInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"time\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-datetime-input')\nexport class DateTimeInput extends InputEditor {\n formatForEditor(timestamp: any) {\n if (!timestamp) {\n timestamp = Date.now()\n }\n var datetime = new Date(timestamp)\n\n var tzoffset = datetime.getTimezoneOffset() * 60000 //offset in milliseconds\n\n return new Date(timestamp - tzoffset).toISOString().slice(0, -1)\n }\n\n formatFromEditor(e: Event) {\n var value = (e.target as HTMLInputElement).value\n var datetime = new Date(value)\n\n return datetime.getTime()\n }\n\n get editorTemplate() {\n return html` <input type=\"datetime-local\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-color-input')\nexport class ColorInput extends InputEditor {\n get editorTemplate() {\n return html` <input type=\"color\" .value=${this.value} /> `\n }\n}\n\n@customElement('ox-checkbox-input')\nexport class CheckboxInput extends InputEditor {\n formatFromEditor(e: Event) {\n return (e.target as HTMLInputElement).checked\n }\n\n get editorTemplate() {\n return html` <input type=\"checkbox\" .checked=${!!this.value} /> `\n }\n}\n\n@customElement('ox-select-input')\nexport class Select extends InputEditor {\n get editorTemplate() {\n var rowOptionField = this.record[this.column.record.rowOptionField || '']\n var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n if (typeof options == 'function') {\n options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n }\n\n options = options.map((option: any) => {\n switch (typeof option) {\n case 'string':\n return {\n display: option,\n value: option\n }\n case 'object':\n return {\n display: option.display,\n value: option.value\n }\n default:\n return option\n }\n })\n\n return html`\n <select>\n ${options.map(\n (option: any) => html`\n <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>\n `\n )}\n </select>\n `\n }\n}\n"]}

package/dist/src/editors/ox-grist-editor.js CHANGED Viewed

@@ -83,6 +83,7 @@ let OxGristEditor = class OxGristEditor extends LitElement {
         return this.renderRoot.firstElementChild;
     }
     async firstUpdated() {
+        var _a;
         this.renderRoot.addEventListener('change', this._onchange.bind(this));
         this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
         this.addEventListener('click', this._onclick.bind(this));
@@ -102,15 +103,18 @@ let OxGristEditor = class OxGristEditor extends LitElement {
         if (typeof currentValue == 'undefined' && defaultValue) {
             currentValue = getDefaultValue(defaultValue, this.record);
         }
-        this.value = this._dirtyValue = this.formatForEditor(currentValue);
+        // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환
+        const editorValue = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.valueWithEdit) ? this.field.valueWithEdit : this.formatForEditor(currentValue);
+        this.value = this._dirtyValue = editorValue;
         requestAnimationFrame(() => {
             this.focus();
             this.select();
         });
     }
     select() {
+        var _a;
         const editor = this.editor;
-        if (editor === null || editor === void 0 ? void 0 : editor.select) {
+        if ((editor === null || editor === void 0 ? void 0 : editor.select) && !((_a = this.field) === null || _a === void 0 ? void 0 : _a.valueWithEdit)) {
             return editor.select();
         }
     }

package/dist/src/editors/ox-grist-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEhB,CAAA;AAGM,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIuB,WAAM,GAAiB,WAAW,CAAA;QAClC,WAAM,GAAgB,WAAW,CAAA;~~IA+G~~/D,CAAC;~~IAxGC~~,MAAM;QACJ,OAAO,IAAI,CAAC,cAAc,CAAA;IAC5B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAgC,CAAA;IACzD,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACrE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACzE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACxD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAC9D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAE5D,wFAAwF;QACxF,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAA;QACrE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAA;QACrE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAA;QAEnE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACjC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAElD,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAA;YAC5B,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAA,CAAC,gBAAgB;SAClD;QAED,IAAI,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEpC,IAAI,OAAO,YAAY,IAAI,WAAW,IAAI,YAAY,EAAE;YACtD,YAAY,GAAG,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;SAC1D;QAED,IAAI,CAAC,KAAK,~~GAAG~~,IAAI,CAAC,~~WAAW~~,~~GAAG~~,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;~~QAElE~~,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,KAAK,EAAE,CAAA;YACZ,IAAI,CAAC,MAAM,EAAE,CAAA;QACf,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAC1B,~~IAAK~~,MAA2B,aAA3B,MAAM,uBAAN,MAAM,CAAuB,MAAM,EAAE;~~YACxC~~,OAAQ,MAA2B,CAAC,MAAM,EAAE,CAAA;SAC7C;IACH,CAAC;IAED,KAAK;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAC1B,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE,CAAA;SACf;IACH,CAAC;IAED,eAAe,CAAC,KAAU;QACxB,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IACnC,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,OAAQ,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAC7C,CAAC;IAED,WAAW;QACT,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACjC,IAAI,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QAE1C,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,EAAE;YACrC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,MAAM,EAAE,YAAY;oBACpB,KAAK,EAAE,IAAI,CAAC,WAAW;oBACvB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,MAAM,EAAE,IAAI,CAAC,MAAM;oBACnB,GAAG,EAAE,IAAI,CAAC,GAAG;iBACd;aACF,CAAC,CACH,CAAA;SACF;IACH,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAC7C,CAAC;IAED,UAAU,CAAC,CAAQ,IAAS,CAAC;IAE7B,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;;~~AAlHM~~,oBAAM,GAAG,KAAK,AAAR,CAAQ;AAEO;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAa;AAR7B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,~~CAoHzB~~","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { getDefaultValue } from '../value-generator'\n\nconst STYLE = css`\n :host {\n display: flex;\n\n align-items: center;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n\n overflow: visible;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n }\n\n :host > * {\n display: flex;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n\n box-sizing: border-box;\n\n align-items: center;\n }\n\n :host > style {\n display: none;\n }\n\n :host > input[type='checkbox'] {\n width: initial;\n margin: 0;\n }\n input[type='checkbox'],\n input[type='radio'] {\n zoom: var(--grist-input-zoom);\n }\n :focus {\n outline: none;\n }\n\n input[type='file'] {\n opacity: 0%;\n }\n\n @media screen and (max-width: 460px) {\n :host > {\n border: initial;\n background-color: initial;\n }\n\n :focus {\n outline: none;\n }\n\n input,\n select,\n textarea {\n font-size: 16px;\n }\n }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n static styles = STYLE\n\n @property({ type: Object }) value?: any\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex?: number\n @property({ type: Object }) field?: DataGridField\n @property({ type: Number }) row?: number\n\n protected _dirtyValue?: any\n\n render() {\n return this.editorTemplate\n }\n\n get editor(): HTMLElement \| null {\n return this.renderRoot.firstElementChild as HTMLElement\n }\n\n async firstUpdated() {\n this.renderRoot.addEventListener('change', this._onchange.bind(this))\n this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n this.addEventListener('click', this._onclick.bind(this))\n this.addEventListener('dblclick', this._ondblclick.bind(this))\n this.addEventListener('keydown', this._onkeydown.bind(this))\n\n / editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. /\n this.addEventListener('mousedown', (e: Event) => e.stopPropagation())\n this.addEventListener('mousemove', (e: Event) => e.stopPropagation())\n this.addEventListener('mouseup', (e: Event) => e.stopPropagation())\n\n const { name = '' } = this.column\n const { align, defaultValue } = this.column.record\n\n if (align) {\n this.style.textAlign = align\n this.style.textAlignLast = align / for select */\n }\n\n var currentValue = this.record[name]\n\n if (typeof currentValue == 'undefined' && defaultValue) {\n currentValue = getDefaultValue(defaultValue, this.record)\n }\n\n this.~~value~~ = this.~~_dirtyValue~~ = this.formatForEditor(currentValue)\n\n requestAnimationFrame(() => {\n this.focus()\n this.select()\n })\n }\n\n select() {\n const editor = this.editor\n if ((editor as HTMLInputElement)?.select) {\n return (editor as HTMLInputElement).select()\n }\n }\n\n focus() {\n const editor = this.editor\n if (editor) {\n editor.focus()\n }\n }\n\n formatForEditor(value: any): any {\n return value == null ? '' : value\n }\n\n formatFromEditor(e: Event): any {\n return (e.target as HTMLInputElement).value\n }\n\n _onfocusout() {\n const { name = '' } = this.column\n var currentValue = this.record[name] \|\| ''\n\n if (this._dirtyValue !== currentValue) {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: currentValue,\n after: this._dirtyValue,\n column: this.column,\n record: this.record,\n row: this.row\n }\n })\n )\n }\n }\n\n _onchange(e: Event): void {\n e.stopPropagation()\n\n this._dirtyValue = this.formatFromEditor(e)\n }\n\n _onkeydown(e: Event): void {}\n\n _onclick(e: Event): void {\n e.stopPropagation()\n }\n\n _ondblclick(e: Event): void {\n e.stopPropagation()\n }\n\n get editorTemplate() {\n return html``\n }\n}\n"]}
1	+ {"version":3,"file":"ox-grist-editor.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { getDefaultValue } from '../value-generator'\n\nconst STYLE = css`\n :host {\n display: flex;\n\n align-items: center;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n\n overflow: visible;\n justify-content: var(--data-grid-field-justify-content, flex-start);\n }\n\n :host > * {\n display: flex;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background-color: transparent;\n\n box-sizing: border-box;\n\n align-items: center;\n }\n\n :host > style {\n display: none;\n }\n\n :host > input[type='checkbox'] {\n width: initial;\n margin: 0;\n }\n input[type='checkbox'],\n input[type='radio'] {\n zoom: var(--grist-input-zoom);\n }\n :focus {\n outline: none;\n }\n\n input[type='file'] {\n opacity: 0%;\n }\n\n @media screen and (max-width: 460px) {\n :host > {\n border: initial;\n background-color: initial;\n }\n\n :focus {\n outline: none;\n }\n\n input,\n select,\n textarea {\n font-size: 16px;\n }\n }\n`\n\n@customElement('ox-grist-editor')\nexport class OxGristEditor extends LitElement {\n static styles = STYLE\n\n @property({ type: Object }) value?: any\n @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n @property({ type: Object }) record: GristRecord = ZERO_RECORD\n @property({ type: Number }) rowIndex?: number\n @property({ type: Object }) field?: DataGridField\n @property({ type: Number }) row?: number\n\n protected _dirtyValue?: any\n\n render() {\n return this.editorTemplate\n }\n\n get editor(): HTMLElement \| null {\n return this.renderRoot.firstElementChild as HTMLElement\n }\n\n async firstUpdated() {\n this.renderRoot.addEventListener('change', this._onchange.bind(this))\n this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n this.addEventListener('click', this._onclick.bind(this))\n this.addEventListener('dblclick', this._ondblclick.bind(this))\n this.addEventListener('keydown', this._onkeydown.bind(this))\n\n / editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. /\n this.addEventListener('mousedown', (e: Event) => e.stopPropagation())\n this.addEventListener('mousemove', (e: Event) => e.stopPropagation())\n this.addEventListener('mouseup', (e: Event) => e.stopPropagation())\n\n const { name = '' } = this.column\n const { align, defaultValue } = this.column.record\n\n if (align) {\n this.style.textAlign = align\n this.style.textAlignLast = align / for select */\n }\n\n var currentValue = this.record[name]\n\n if (typeof currentValue == 'undefined' && defaultValue) {\n currentValue = getDefaultValue(defaultValue, this.record)\n }\n\n // 입력을 위한 키를 누르면서 편집모드가 될때는 누른 키가 처음에 입력되도록, enter 같은 것을 눌러서 편집모드가 되면 현재 값으로 편집모드 전환\n const editorValue = this.field?.valueWithEdit ? this.field.valueWithEdit : this.formatForEditor(currentValue)\n this.value = this._dirtyValue = editorValue\n\n requestAnimationFrame(() => {\n this.focus()\n this.select()\n })\n }\n\n select() {\n const editor = this.editor\n if ((editor as HTMLInputElement)?.select && !this.field?.valueWithEdit) {\n return (editor as HTMLInputElement).select()\n }\n }\n\n focus() {\n const editor = this.editor\n if (editor) {\n editor.focus()\n }\n }\n\n formatForEditor(value: any): any {\n return value == null ? '' : value\n }\n\n formatFromEditor(e: Event): any {\n return (e.target as HTMLInputElement).value\n }\n\n _onfocusout() {\n const { name = '' } = this.column\n var currentValue = this.record[name] \|\| ''\n\n if (this._dirtyValue !== currentValue) {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: currentValue,\n after: this._dirtyValue,\n column: this.column,\n record: this.record,\n row: this.row\n }\n })\n )\n }\n }\n\n _onchange(e: Event): void {\n e.stopPropagation()\n\n this._dirtyValue = this.formatFromEditor(e)\n }\n\n _onkeydown(e: Event): void {}\n\n _onclick(e: Event): void {\n e.stopPropagation()\n }\n\n _ondblclick(e: Event): void {\n e.stopPropagation()\n }\n\n get editorTemplate() {\n return html``\n }\n}\n"]}

package/dist/src/renderers/boolean-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const BooleanRenderer: FieldRenderer;

package/dist/src/renderers/boolean-renderer.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+export const BooleanRenderer = (value, column, record, rowIndex, field) => {
+    return html `
+    <input
+      type="checkbox"
+      .checked=${!!value}
+      ?disabled=${!column.record.editable}
+      @click=${(e) => {
+        /*
+         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.
+         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.
+         *
+         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.
+         */
+        field.dispatchEvent(new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                before: value,
+                after: e.target.checked,
+                column: column,
+                record: record,
+                row: rowIndex
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=boolean-renderer.js.map

package/dist/src/renderers/boolean-renderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"boolean-renderer.js","sourceRoot":"","sources":["../../../src/renderers/boolean-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACvF,OAAO,IAAI,CAAA;;;iBAGI,CAAC,CAAC,KAAK;kBACN,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ;eAC1B,CAAC,CAAQ,EAAE,EAAE;QACpB;;;;;WAKG;QACH,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,KAAK;gBACb,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO;gBAC7C,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,QAAQ;aACd;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const BooleanRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n return html`\n <input\n type=\"checkbox\"\n .checked=${!!value}\n ?disabled=${!column.record.editable}\n @click=${(e: Event) => {\n /*\n * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.\n * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.\n *\n * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.\n */\n field.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: value,\n after: (e.target as HTMLInputElement).checked,\n column: column,\n record: record,\n row: rowIndex\n }\n })\n )\n }}\n />\n `\n}\n"]}

package/dist/src/renderers/color-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const ColorRenderer: FieldRenderer;

package/dist/src/renderers/color-renderer.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { html } from 'lit';
+export const ColorRenderer = (value, column, record, rowIndex, field) => {
+    value = value === undefined ? '#000' : value;
+    return html ` <div style="display:block;background-color:${value}">${value}</div> `;
+};
+//# sourceMappingURL=color-renderer.js.map

package/dist/src/renderers/color-renderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"color-renderer.js","sourceRoot":"","sources":["../../../src/renderers/color-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;IAE5C,OAAO,IAAI,CAAA,+CAA+C,KAAK,KAAK,KAAK,SAAS,CAAA;AACpF,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const ColorRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n value = value === undefined ? '#000' : value\n\n return html` <div style=\"display:block;background-color:${value}\">${value}</div> `\n}\n"]}

package/dist/src/renderers/date-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const DateRenderer: FieldRenderer;

package/dist/src/renderers/date-renderer.js ADDED Viewed

@@ -0,0 +1,52 @@
+// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
+const DATETIME_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false
+};
+const DATE_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric'
+};
+const TIME_OPTIONS = {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric'
+};
+const OPTIONS = {
+    datetime: DATETIME_OPTIONS,
+    time: TIME_OPTIONS,
+    date: DATE_OPTIONS
+};
+function getsec(time) {
+    var arr = time.split(':');
+    return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0);
+}
+/*
+  TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다.
+  따라서, 이 경우는 타임존에 대한 처리가 불필요하다.
+*/
+export const DateRenderer = (value, column, record, rowIndex, field) => {
+    if (!value) {
+        return '';
+    }
+    if (!isNaN(Number(value)))
+        value = Number(value);
+    var options = column.record.options || OPTIONS[column.type];
+    var formatter = new Intl.DateTimeFormat(navigator.language, options);
+    switch (column.type) {
+        case 'datetime':
+            return formatter.format(new Date(value));
+        case 'date':
+            return formatter.format(new Date(value));
+        case 'time':
+        default:
+            return value;
+    }
+};
+//# sourceMappingURL=date-renderer.js.map

package/dist/src/renderers/date-renderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-renderer.js","sourceRoot":"","sources":["../../../src/renderers/date-renderer.ts"],"names":[],"mappings":"AAEA,kCAAkC;AAClC,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;CACf,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,gBAAgB;IAC1B,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,YAAY;CACnB,CAAA;AAED,SAAS,MAAM,CAAC,IAAY;IAC1B,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACzB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;AAC5E,CAAC;AAED;;;EAGE;AACF,MAAM,CAAC,MAAM,YAAY,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACpF,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAAE,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEhD,IAAI,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,IAAoC,CAAC,CAAA;IAC3F,IAAI,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAEpE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,UAAU;YACb,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAC1C,KAAK,MAAM;YACT,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAC1C,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst DATETIME_OPTIONS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n}\n\nconst DATE_OPTIONS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric'\n}\n\nconst TIME_OPTIONS = {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n}\n\nconst OPTIONS = {\n datetime: DATETIME_OPTIONS,\n time: TIME_OPTIONS,\n date: DATE_OPTIONS\n}\n\nfunction getsec(time: string): number {\n var arr = time.split(':')\n return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0)\n}\n\n/* \n TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다. \n 따라서, 이 경우는 타임존에 대한 처리가 불필요하다.\n*/\nexport const DateRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n if (!value) {\n return ''\n }\n\n if (!isNaN(Number(value))) value = Number(value)\n\n var options = column.record.options || OPTIONS[column.type as 'datetime' | 'date' | 'time']\n var formatter = new Intl.DateTimeFormat(navigator.language, options)\n\n switch (column.type) {\n case 'datetime':\n return formatter.format(new Date(value))\n case 'date':\n return formatter.format(new Date(value))\n case 'time':\n default:\n return value\n }\n}\n"]}

package/dist/src/renderers/image-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const ImageRenderer: FieldRenderer;

package/dist/src/renderers/image-renderer.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href;
+export const ImageRenderer = (value, column, record, rowIndex, field) => {
+    let src;
+    if (!value) {
+        src = IMAGE_FALLBACK;
+    }
+    else if (typeof value === 'string') {
+        src = value;
+    }
+    else {
+        src = URL.createObjectURL(value);
+        requestAnimationFrame(() => URL.revokeObjectURL(src));
+    }
+    const { width, height } = column.record.options || {};
+    return html ` <img
+    src=${src}
+    width=${width}
+    height=${height}
+    style="max-width: 100%;"
+    onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
+  />`;
+};
+//# sourceMappingURL=image-renderer.js.map

package/dist/src/renderers/image-renderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"image-renderer.js","sourceRoot":"","sources":["../../../src/renderers/image-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3F,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,IAAI,GAAW,CAAA;IAEf,IAAI,CAAC,KAAK,EAAE;QACV,GAAG,GAAG,cAAc,CAAA;KACrB;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,GAAG,GAAG,KAAK,CAAA;KACZ;SAAM;QACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACtD;IAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAErD,OAAO,IAAI,CAAA;UACH,GAAG;YACD,KAAK;aACJ,MAAM;;6BAEU,cAAc,qBAAqB,cAAc;KACzE,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nconst IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href\n\nexport const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n let src: string\n\n if (!value) {\n src = IMAGE_FALLBACK\n } else if (typeof value === 'string') {\n src = value\n } else {\n src = URL.createObjectURL(value)\n requestAnimationFrame(() => URL.revokeObjectURL(src))\n }\n\n const { width, height } = column.record.options || {}\n\n return html` <img\n src=${src}\n width=${width}\n height=${height}\n style=\"max-width: 100%;\"\n onerror=\"this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')\"\n />`\n}\n"]}

package/dist/src/renderers/json5-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const Json5Renderer: FieldRenderer;

package/dist/src/renderers/json5-renderer.js ADDED Viewed

@@ -0,0 +1,7 @@
+import JSON5 from 'json5';
+import { html } from 'lit';
+export const Json5Renderer = (value, column, record, rowIndex, field) => {
+    const text = value === undefined || value === null ? '' : JSON5.stringify(value);
+    return html `<span>${text}</span>`;
+};
+//# sourceMappingURL=json5-renderer.js.map

package/dist/src/renderers/json5-renderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"json5-renderer.js","sourceRoot":"","sources":["../../../src/renderers/json5-renderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAChF,OAAO,IAAI,CAAA,SAAS,IAAI,SAAS,CAAA;AACnC,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport JSON5 from 'json5'\nimport { html } from 'lit'\n\nexport const Json5Renderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n const text = value === undefined || value === null ? '' : JSON5.stringify(value)\n return html`<span>${text}</span>`\n}\n"]}

package/dist/src/renderers/link-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const LinkRenderer: FieldRenderer;

package/dist/src/renderers/link-renderer.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+export const LinkRenderer = (value, column, record, rowIndex, field) => {
+    var { href, target } = column.record.options || {};
+    value = value === undefined ? '' : value;
+    if (typeof href == 'function') {
+        href = href(value, column, record, rowIndex, field);
+    }
+    return target
+        ? html ` <a style="text-decoration:none;color:inherit" href=${href || value} target=${target}>${value}</a> `
+        : html ` <a style="text-decoration:none;color:inherit" href=${href || value}>${value}</a> `;
+};
+//# sourceMappingURL=link-renderer.js.map

package/dist/src/renderers/link-renderer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"link-renderer.js","sourceRoot":"","sources":["../../../src/renderers/link-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACpF,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAElD,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACpD;IAED,OAAO,MAAM;QACX,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,OAAO;QAC3G,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,CAAA;AAC9F,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const LinkRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n var { href, target } = column.record.options || {}\n\n value = value === undefined ? '' : value\n\n if (typeof href == 'function') {\n href = href(value, column, record, rowIndex, field)\n }\n\n return target\n ? html` <a style=\"text-decoration:none;color:inherit\" href=${href || value} target=${target}>${value}</a> `\n : html` <a style=\"text-decoration:none;color:inherit\" href=${href || value}>${value}</a> `\n}\n"]}

package/dist/src/renderers/password-renderer.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { FieldRenderer } from '../types';
2	+ export declare const PasswordRenderer: FieldRenderer;

package/dist/src/renderers/password-renderer.js ADDED Viewed

@@ -0,0 +1,4 @@
+export const PasswordRenderer = (value, column, record, rowIndex, field) => {
+    return Array(String(value).length).fill('*').join('');
+};
+//# sourceMappingURL=password-renderer.js.map