npm - @operato/input - Versions diffs - 9.0.0-beta.21 → 9.0.0-beta.29 - Mend

@operato/input 9.0.0-beta.21 → 9.0.0-beta.29

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 (12) hide show

package/CHANGELOG.md +18 -0
package/dist/src/ox-input-color-gradient.js +1 -1
package/dist/src/ox-input-color-gradient.js.map +1 -1
package/dist/src/ox-input-color-stops.js +5 -5
package/dist/src/ox-input-color-stops.js.map +1 -1
package/dist/src/ox-input-color.d.ts +11 -4
package/dist/src/ox-input-color.js +118 -60
package/dist/src/ox-input-color.js.map +1 -1
package/dist/src/ox-input-table.js +4 -4
package/dist/src/ox-input-table.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +5 -5

package/dist/src/ox-input-table.js CHANGED Viewed

@@ -139,19 +139,19 @@ let OxInputTable = class OxInputTable extends OxFormField {
             </ox-popup-list>
           </ox-select>
-          <label class="property-half-label"> <md-icon>line_weight</md-icon></label>
+          <label class="half-label"> <md-icon>line_weight</md-icon></label>
           <input
             type="number"
             id="border-width"
-            class="property-half-input"
+            class="half-editor"
             @change=${(e) => (this.borderWidth = Number(e.target.value))}
             .value=${String(this.borderWidth || '')}
           />
-          <label class="property-half-label"> <md-icon>border_color</md-icon></label>
+          <label class="half-label"> <md-icon>border_color</md-icon></label>
           <ox-input-color
             id="border-color"
-            class="property-half-input"
+            class="half-editor"
             @change=${(e) => (this.borderColor = e.target.value)}
             .value=${this.borderColor}
           >

package/dist/src/ox-input-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { TableEventStyles } from '@operato/styles/table-event-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n \| 'solid'\n \| 'round-dot'\n \| 'square-dot'\n \| 'dash'\n \| 'dash-dot'\n \| 'long-dash'\n \| 'long-dash-dot'\n \| 'long-dash-dot-dot'\n\n/\n 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nexport class OxInputTable extends OxFormField {\n static get styles() {\n return [\n PropertyGridStyles,\n LineStyles,\n TableEventStyles,\n css`\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n border-bottom: 1px solid #cfd8dc;\n color: var(--md-sys-color-on-primary-container);\n font-size: 12px;\n padding: 0 0 10px 0;\n margin: 0 0 10px 0;\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n font-size: 11px;\n color: #e46c2e;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n #border-set {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n #border-set > md-icon {\n margin: 0 0 0 8px;\n width: 32px;\n height: 32px;\n }\n\n #table-event {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n .table-event {\n position: relative;\n width: 100%;\n min-height: 65px;\n place-items: center;\n }\n\n .table-event span {\n position: absolute;\n bottom: 0;\n width: 100%;\n font-size: 0.9em;\n line-height: 1.2;\n text-transform: capitalize;\n text-align: center;\n vertical-align: bottom;\n }\n `\n ]\n }\n\n @property({ type: Number }) borderWidth: number = 1\n @property({ type: String }) borderColor: string = 'black'\n @property({ type: String }) borderStyle: BorderStyle = 'solid'\n @property({ type: Object }) value: any = null\n\n @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n firstUpdated() {\n this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n }\n\n render() {\n return html`\n <fieldset id=\"border-fieldset\">\n <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n <div\n id=\"border-set\"\n border-style-btn\"\n @click=${(e: Event) => this._onClickType(e)}\n >\n <md-icon data-value=\"out\">border_outer</md-icon>\n <md-icon data-value=\"in\">border_inner</md-icon>\n <md-icon data-value=\"all\">border_all</md-icon>\n <md-icon data-value=\"left\">border_left</md-icon>\n <md-icon data-value=\"center\">border_vertical</md-icon>\n <md-icon data-value=\"right\">border_right</md-icon>\n <md-icon data-value=\"top\">border_top</md-icon>\n <md-icon data-value=\"middle\">border_horizontal</md-icon>\n <md-icon data-value=\"bottom\">border_bottom</md-icon>\n <md-icon data-value=\"clear\">border_clear</md-icon>\n </div>\n\n <div class=\"property-grid\">\n\n <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n <ox-select value-key=\"lineDash\" .value=${this.borderStyle} class=\"custom-editor\">\n <div class=\"line-type ${this.borderStyle}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label class=\"property-half-label\"> <md-icon>line_weight</md-icon></label>\n <input\n type=\"number\"\n id=\"border-width\"\n class=\"property-half-input\"\n @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n .value=${String(this.borderWidth \|\| '')}\n />\n\n <label class=\"property-half-label\"> <md-icon>border_color</md-icon></label>\n <ox-input-color\n id=\"border-color\"\n class=\"property-half-input\"\n @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n .value=${this.borderColor}\n >\n </ox-input-color>\n </div>\n </fieldset>\n\n <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n <div id=\"table-event\">\n <div name=\"merge-cells\" class=\"table-event\"><span>merge cells</span></div>\n <div name=\"split-cells\" class=\"table-event\"><span>split cells</span></div>\n <div name=\"delete-row\" class=\"table-event\"><span>delete row</span></div>\n <div name=\"delete-column\" class=\"table-event\"><span>delete column</span></div>\n <div name=\"insert-above\" class=\"table-event\"><span>insert above</span></div>\n <div name=\"insert-below\" class=\"table-event\"><span>insert below</span></div>\n <div name=\"insert-left\" class=\"table-event\"><span>insert left</span></div>\n <div name=\"insert-right\" class=\"table-event\"><span>insert right</span></div>\n <div name=\"distribute-horizontal\" class=\"table-event\"><span>distribute horizontal</span></div>\n <div name=\"distribute-vertical\" class=\"table-event\"><span>distribute vertical</span></div>\n </div>\n </fieldset>\n `\n }\n\n _onClickCell(e: Event) {\n var target = e.target as HTMLElement\n\n const event = target?.closest('[table-event]')?.getAttribute('name')\n if (!event) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n switch (event) {\n case 'delete-row':\n table.deleteRows(selected)\n break\n case 'delete-column':\n table.deleteColumns(selected)\n break\n case 'insert-above':\n table.insertCellsAbove(selected)\n break\n case 'insert-below':\n table.insertCellsBelow(selected)\n break\n case 'insert-left':\n table.insertCellsLeft(selected)\n break\n case 'insert-right':\n table.insertCellsRight(selected)\n break\n case 'merge-cells':\n table.mergeCells(selected)\n break\n case 'split-cells':\n table.splitCells(selected)\n break\n case 'distribute-horizontal':\n table.distributeHorizontal(selected)\n break\n case 'distribute-vertical':\n table.distributeVertical(selected)\n break\n }\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n\n _onClickType(e: Event) {\n var target = e.target as HTMLElement\n\n const where = target?.closest('[data-value]')?.getAttribute('data-value')\n if (!where) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n table.setCellsStyle(\n selected,\n {\n strokeStyle: this.borderColor,\n lineDash: this.borderStyle,\n lineWidth: this.borderWidth\n },\n where\n )\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-table.js","sourceRoot":"","sources":["../../src/ox-input-table.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { TableEventStyles } from '@operato/styles/table-event-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\ntype BorderStyle =\n \| 'solid'\n \| 'round-dot'\n \| 'square-dot'\n \| 'dash'\n \| 'dash-dot'\n \| 'long-dash'\n \| 'long-dash-dot'\n \| 'long-dash-dot-dot'\n\n/\n 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.\n * Example:\n * <ox-input-table value=${border}>\n * </ox-input-table>\n */\n\n@customElement('ox-input-table')\nexport class OxInputTable extends OxFormField {\n static get styles() {\n return [\n PropertyGridStyles,\n LineStyles,\n TableEventStyles,\n css`\n :host {\n display: block;\n }\n\n fieldset {\n border: none;\n border-bottom: 1px solid #cfd8dc;\n color: var(--md-sys-color-on-primary-container);\n font-size: 12px;\n padding: 0 0 10px 0;\n margin: 0 0 10px 0;\n }\n\n fieldset legend {\n padding: 5px 0 0 5px;\n font-size: 11px;\n color: #e46c2e;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n #border-set {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n #border-set > md-icon {\n margin: 0 0 0 8px;\n width: 32px;\n height: 32px;\n }\n\n #table-event {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-gap: 5px;\n margin: 5px 0;\n place-items: center;\n }\n\n .table-event {\n position: relative;\n width: 100%;\n min-height: 65px;\n place-items: center;\n }\n\n .table-event span {\n position: absolute;\n bottom: 0;\n width: 100%;\n font-size: 0.9em;\n line-height: 1.2;\n text-transform: capitalize;\n text-align: center;\n vertical-align: bottom;\n }\n `\n ]\n }\n\n @property({ type: Number }) borderWidth: number = 1\n @property({ type: String }) borderColor: string = 'black'\n @property({ type: String }) borderStyle: BorderStyle = 'solid'\n @property({ type: Object }) value: any = null\n\n @query('#border-fieldset') borderFieldSet!: HTMLElement\n\n firstUpdated() {\n this.borderFieldSet.addEventListener('change', this._onClickType.bind(this))\n }\n\n render() {\n return html`\n <fieldset id=\"border-fieldset\">\n <legend><ox-i18n msgid=\"label.border-style\">border style</ox-i18n></legend>\n\n <div\n id=\"border-set\"\n border-style-btn\"\n @click=${(e: Event) => this._onClickType(e)}\n >\n <md-icon data-value=\"out\">border_outer</md-icon>\n <md-icon data-value=\"in\">border_inner</md-icon>\n <md-icon data-value=\"all\">border_all</md-icon>\n <md-icon data-value=\"left\">border_left</md-icon>\n <md-icon data-value=\"center\">border_vertical</md-icon>\n <md-icon data-value=\"right\">border_right</md-icon>\n <md-icon data-value=\"top\">border_top</md-icon>\n <md-icon data-value=\"middle\">border_horizontal</md-icon>\n <md-icon data-value=\"bottom\">border_bottom</md-icon>\n <md-icon data-value=\"clear\">border_clear</md-icon>\n </div>\n\n <div class=\"property-grid\">\n\n <label> <ox-i18n msgid=\"label.border-type\">border type</ox-i18n> </label>\n <ox-select value-key=\"lineDash\" .value=${this.borderStyle} class=\"custom-editor\">\n <div class=\"line-type ${this.borderStyle}\" slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${LineStyles.cssText}\n </style>\n <div class=\"line-type solid\" value=\"solid\" option></div>\n <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n <div class=\"line-type dash\" value=\"dash\" option></div>\n <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <label class=\"half-label\"> <md-icon>line_weight</md-icon></label>\n <input\n type=\"number\"\n id=\"border-width\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderWidth = Number((e.target as HTMLInputElement).value))}\n .value=${String(this.borderWidth \|\| '')}\n />\n\n <label class=\"half-label\"> <md-icon>border_color</md-icon></label>\n <ox-input-color\n id=\"border-color\"\n class=\"half-editor\"\n @change=${(e: Event) => (this.borderColor = (e.target as any).value)}\n .value=${this.borderColor}\n >\n </ox-input-color>\n </div>\n </fieldset>\n\n <fieldset id=\"cell-fieldset\" @click=${(e: Event) => this._onClickCell(e)}>\n <div id=\"table-event\">\n <div name=\"merge-cells\" class=\"table-event\"><span>merge cells</span></div>\n <div name=\"split-cells\" class=\"table-event\"><span>split cells</span></div>\n <div name=\"delete-row\" class=\"table-event\"><span>delete row</span></div>\n <div name=\"delete-column\" class=\"table-event\"><span>delete column</span></div>\n <div name=\"insert-above\" class=\"table-event\"><span>insert above</span></div>\n <div name=\"insert-below\" class=\"table-event\"><span>insert below</span></div>\n <div name=\"insert-left\" class=\"table-event\"><span>insert left</span></div>\n <div name=\"insert-right\" class=\"table-event\"><span>insert right</span></div>\n <div name=\"distribute-horizontal\" class=\"table-event\"><span>distribute horizontal</span></div>\n <div name=\"distribute-vertical\" class=\"table-event\"><span>distribute vertical</span></div>\n </div>\n </fieldset>\n `\n }\n\n _onClickCell(e: Event) {\n var target = e.target as HTMLElement\n\n const event = target?.closest('[table-event]')?.getAttribute('name')\n if (!event) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n switch (event) {\n case 'delete-row':\n table.deleteRows(selected)\n break\n case 'delete-column':\n table.deleteColumns(selected)\n break\n case 'insert-above':\n table.insertCellsAbove(selected)\n break\n case 'insert-below':\n table.insertCellsBelow(selected)\n break\n case 'insert-left':\n table.insertCellsLeft(selected)\n break\n case 'insert-right':\n table.insertCellsRight(selected)\n break\n case 'merge-cells':\n table.mergeCells(selected)\n break\n case 'split-cells':\n table.splitCells(selected)\n break\n case 'distribute-horizontal':\n table.distributeHorizontal(selected)\n break\n case 'distribute-vertical':\n table.distributeVertical(selected)\n break\n }\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n\n _onClickType(e: Event) {\n var target = e.target as HTMLElement\n\n const where = target?.closest('[data-value]')?.getAttribute('data-value')\n if (!where) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('i-need-selected', {\n bubbles: true,\n composed: true,\n detail: {\n callback: (selected: any[]) => {\n const table = selected[0].parent\n\n table.setCellsStyle(\n selected,\n {\n strokeStyle: this.borderColor,\n lineDash: this.borderStyle,\n lineWidth: this.borderWidth\n },\n where\n )\n }\n }\n })\n )\n\n this.value = {\n borderWidth: this.borderWidth,\n borderColor: this.borderColor,\n borderStyle: this.borderStyle\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n\n e.stopPropagation()\n }\n}\n"]}