@operato/input 9.0.0-beta.18 → 9.0.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/src/ox-input-table.d.ts +0 -2
- package/dist/src/ox-input-table.js +0 -2
- package/dist/src/ox-input-table.js.map +1 -1
- package/dist/stories/ox-input-table.stories.d.ts +21 -0
- package/dist/stories/ox-input-table.stories.js +84 -0
- package/dist/stories/ox-input-table.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/tsconfig.tsbuildinfo +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [9.0.0-beta.20](https://github.com/hatiolab/operato/compare/v9.0.0-beta.19...v9.0.0-beta.20) (2025-01-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* module property-panel ([03fb303](https://github.com/hatiolab/operato/commit/03fb303816c1629adca2a0ad843a8696ffaa4bef))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [9.0.0-beta.18](https://github.com/hatiolab/operato/compare/v9.0.0-beta.17...v9.0.0-beta.18) (2025-01-27)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/input
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import '@material/web/icon/icon.js';
|
|
5
|
-
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
|
|
6
|
-
import '@polymer/paper-item/paper-item.js';
|
|
7
5
|
import '@operato/i18n/ox-i18n.js';
|
|
8
6
|
import './ox-input-color.js';
|
|
9
7
|
import { OxFormField } from './ox-form-field.js';
|
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@material/web/icon/icon.js';
|
|
6
|
-
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
|
|
7
|
-
import '@polymer/paper-item/paper-item.js';
|
|
8
6
|
import '@operato/i18n/ox-i18n.js';
|
|
9
7
|
import './ox-input-color.js';
|
|
10
8
|
import { css, html } from 'lit';
|
|
@@ -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 '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'\nimport '@polymer/paper-item/paper-item.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=\"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"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import '../src/input/ox-input-table.js';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
value: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
13
|
+
interface Story<T> {
|
|
14
|
+
(args: T): TemplateResult;
|
|
15
|
+
args?: Partial<T>;
|
|
16
|
+
argTypes?: Record<string, unknown>;
|
|
17
|
+
}
|
|
18
|
+
interface ArgTypes {
|
|
19
|
+
value?: any;
|
|
20
|
+
}
|
|
21
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../src/input/ox-input-table.js';
|
|
3
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'OxInputTable',
|
|
6
|
+
component: 'ox-input-table',
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: { control: 'object' }
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
const Template = ({ value }) => html `
|
|
12
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
13
|
+
|
|
14
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
15
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
16
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
17
|
+
<link href="/themes/help-theme.css" rel="stylesheet" />
|
|
18
|
+
|
|
19
|
+
<link
|
|
20
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
/>
|
|
23
|
+
<link
|
|
24
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
/>
|
|
27
|
+
<link
|
|
28
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
29
|
+
rel="stylesheet"
|
|
30
|
+
/>
|
|
31
|
+
|
|
32
|
+
<style>
|
|
33
|
+
${MDTypeScaleStyles.cssText}
|
|
34
|
+
</style>
|
|
35
|
+
|
|
36
|
+
<style>
|
|
37
|
+
#place {
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 500px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
|
|
42
|
+
background-color: var(--md-sys-color-primary-container);
|
|
43
|
+
color: var(--md-sys-color-on-primary-container);
|
|
44
|
+
}
|
|
45
|
+
</style>
|
|
46
|
+
|
|
47
|
+
<ox-input-table .value=${value}> </ox-input-table>
|
|
48
|
+
`;
|
|
49
|
+
export const Regular = Template.bind({});
|
|
50
|
+
Regular.args = {
|
|
51
|
+
value: {
|
|
52
|
+
type: 'table-cell',
|
|
53
|
+
left: 290.42944785276075,
|
|
54
|
+
top: 0,
|
|
55
|
+
width: 96.80981595092024,
|
|
56
|
+
height: 62.02453987730057,
|
|
57
|
+
textWrap: true,
|
|
58
|
+
border: {
|
|
59
|
+
top: {
|
|
60
|
+
strokeStyle: '#999',
|
|
61
|
+
lineDash: 'solid',
|
|
62
|
+
lineWidth: 1
|
|
63
|
+
},
|
|
64
|
+
left: {
|
|
65
|
+
strokeStyle: '#999',
|
|
66
|
+
lineDash: 'solid',
|
|
67
|
+
lineWidth: 1
|
|
68
|
+
},
|
|
69
|
+
bottom: {
|
|
70
|
+
strokeStyle: '#999',
|
|
71
|
+
lineDash: 'solid',
|
|
72
|
+
lineWidth: 1
|
|
73
|
+
},
|
|
74
|
+
right: {
|
|
75
|
+
strokeStyle: '#999',
|
|
76
|
+
lineDash: 'solid',
|
|
77
|
+
lineWidth: 1
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
refid: 12,
|
|
81
|
+
dataIndex: 0
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=ox-input-table.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-table.stories.js","sourceRoot":"","sources":["../../stories/ox-input-table.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,gCAAgC,CAAA;AACvC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBzD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,KAAK;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,kBAAkB;QACxB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,GAAG,EAAE;gBACH,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,MAAM,EAAE;gBACN,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,MAAM;gBACnB,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,CAAC;aACb;SACF;QACD,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '../src/input/ox-input-table.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n title: 'OxInputTable',\n component: 'ox-input-table',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: any\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/help-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #place {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <ox-input-table .value=${value}> </ox-input-table>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n value: {\n type: 'table-cell',\n left: 290.42944785276075,\n top: 0,\n width: 96.80981595092024,\n height: 62.02453987730057,\n textWrap: true,\n border: {\n top: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n left: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n bottom: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n },\n right: {\n strokeStyle: '#999',\n lineDash: 'solid',\n lineWidth: 1\n }\n },\n refid: 12,\n dataIndex: 0\n }\n}\n"]}
|