@operato/data-grist 1.0.0-beta.7 → 1.0.0

package/themes/form-theme.css

@@ -0,0 +1,75 @@
+body {
+  --form-border: none;
+  --form-margin: var(--margin-wide);
+  --form-max-width: 700px;
+  --form-multi-column-max-width: 100%;
+  --form-sublabel-font: normal 13px var(--theme-font);
+  --form-sublabel-color: var(--secondary-color);
+  --form-grid-gap: 12px 5px;
+
+  --legend-padding: var(--padding-default) 0;
+  --legend-font: bold 16px var(--theme-font);
+  --legend-text-color: var(--secondary-text-color);
+  --legend-border-bottom: 1px solid var(--primary-color);
+
+  --label-padding: 3px 0;
+  --label-font: normal 14px var(--theme-font);
+  --label-color: var(--secondary-color);
+
+  --input-field-border: 1px solid rgba(0, 0, 0, 0.2);
+  --input-field-border-radius: var(--border-radius);
+  --input-field-padding: 2px 9px;
+  --input-field-font: normal 14px var(--theme-font);
+
+  --search-panel-background-color: rgba(0, 0, 0, 0.1);
+  --search-panel-search-iconbutton-size: var(--icon-default-size);
+  --search-form-icon-color: var(--primary-color);
+  --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
+  --search-form-box-padding: 15px 30px 15px 15px;
+  --search-form-background-color: #fff;
+  --search-form-narrow-background-color: var(--primary-color);
+  --search-form-narrow-text-color: #fff;
+
+  --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
+  --file-uploader-background-color: var(--main-section-background-color);
+  --file-uploader-font: normal 12px/20px var(--theme-font);
+  --file-uploader-color: var(--secondary-color);
+  --file-uploader-icon-color: var(--primary-color);
+  --file-uploader-candrop-background-color: #fffde9;
+  --file-uploader-label-padding: 3px 20px;
+  --file-uploader-label-border-radius: var(--border-radius);
+  --file-uploader-label-background-color: var(--secondary-color);
+  --file-uploader-label-font: normal 12px var(--theme-font);
+  --file-uploader-label-color: #fff;
+  --file-uploader-li-padding: 2px 5px 0px 5px;
+  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+  --file-uploader-li-icon-margin: 2px 0 2px 5px;
+  --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
+  --file-uploader-li-icon-focus-color: var(--primary-color);
+}
+
+@media screen and (max-width: 480px) {
+  body {
+    --label-font: normal 15px var(--theme-font);
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    --form-margin: 15px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --label-font: normal 14px var(--theme-font);
+    --input-field-font: normal 15px var(--theme-font);
+    --input-field-padding: 3px 5px;
+  }
+}
+
+@media only screen and (max-width: 925px) {
+  body {
+    --form-margin: 14px 0;
+    --form-multi-column-max-width: 100%;
+    --form-container-padding: 0 9px 12px 9px;
+    --input-field-padding: 3px 5px;
+  }
+}

package/themes/grist-theme.css

@@ -38,7 +38,7 @@ body {
 
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);
-  --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+  --grid-record-padding: var(--padding-default);
   --grid-record-color: var(--secondary-color);
   --grid-record-color-hover: var(--primary-color);
   --grid-record-wide-fontsize: var(--fontsize-small);

package/dist/src/data-grid/event-handlers/data-grid-body-beforeinput-handler.d.ts

@@ -1,7 +0,0 @@
-import { DataGridBody } from '../data-grid-body';
-/**
- * ox-grid-body 의 beforeinput handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export declare function dataGridBodyBeforeInputHandler(this: DataGridBody, e: Event): Promise<void>;

package/dist/src/data-grid/event-handlers/data-grid-body-beforeinput-handler.js

@@ -1,12 +0,0 @@
-/**
- * ox-grid-body 의 beforeinput handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyBeforeInputHandler(e) {
-    if (!this.editTarget) {
-        var { row = 0, column = 0 } = this.focused || {};
-        this.startEditTarget(row, column);
-    }
-}
-//# sourceMappingURL=data-grid-body-beforeinput-handler.js.map

package/dist/src/data-grid/event-handlers/data-grid-body-beforeinput-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-body-beforeinput-handler.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-beforeinput-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,8BAA8B,CAAqB,CAAQ;IAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACpB,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEhD,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;KAClC;AACH,CAAC","sourcesContent":["import { DataGridBody } from '../data-grid-body'\n\n/**\n * ox-grid-body 의 beforeinput handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\nexport async function dataGridBodyBeforeInputHandler(this: DataGridBody, e: Event): Promise<void> {\n  if (!this.editTarget) {\n    var { row = 0, column = 0 } = this.focused || {}\n\n    this.startEditTarget(row, column)\n  }\n}\n"]}

package/dist/src/data-grid/event-handlers/data-grid-body-input-handler copy.d.ts

@@ -1,7 +0,0 @@
-import { DataGridBody } from '../data-grid-body';
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export declare function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void>;

package/dist/src/data-grid/event-handlers/data-grid-body-input-handler copy.js

@@ -1,88 +0,0 @@
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyKeydownHandler(e) {
-    // arrow-key
-    const key = e.key;
-    var { row = 0, column = 0 } = this.focused || {};
-    var { records = [] } = this.data || {};
-    var maxrow = this.config.rows.appendable ? records.length : records.length - 1;
-    var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1;
-    if (this.editTarget) {
-        switch (key) {
-            case 'Escape':
-            case 'Esc':
-            /* TODO 편집이 취소되어야 한다. */
-            case 'Enter':
-                this.editTarget = null;
-                this.focus();
-                return;
-            case 'PageUp':
-            case 'PageDown':
-            case 'End':
-                e.preventDefault();
-            case 'Home':
-                return;
-            // case 'Tab':
-            //   this.editTarget = null
-            //   column = Math.min(maxcolumn, column + 1)
-            //   this.focus()
-            //   break
-            // case 'Down':
-            // case 'ArrowDown':
-            //   this.editTarget = null
-            //   row = Math.min(maxrow, row + 1)
-            //   this.focus()
-            //   break
-            default:
-                return;
-        }
-    }
-    else {
-        switch (key) {
-            case 'Up':
-            case 'ArrowUp':
-                row = Math.max(0, row - 1);
-                break;
-            case 'Down':
-            case 'ArrowDown':
-                row = Math.min(maxrow, row + 1);
-                break;
-            case 'Enter':
-                this.startEditTarget(row, column);
-                return;
-            case 'Left':
-            case 'ArrowLeft':
-            case 'Backspace':
-                column = Math.max(0, column - 1);
-                break;
-            case 'Right':
-            case 'ArrowRight':
-            case 'Tab':
-                column = Math.min(maxcolumn, column + 1);
-                break;
-            case 'PageUp':
-                /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-                row = Math.max(0, row - 10);
-                break;
-            case 'PageDown':
-                row = Math.min(maxrow, row + 10);
-                break;
-            case 'Esc':
-            case 'Escape':
-                return;
-            default:
-                /* TODO move this to input event handler */
-                this.startEditTarget(row, column);
-                return;
-        }
-    }
-    if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-        this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }));
-    }
-    /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
-    e.preventDefault();
-}
-//# sourceMappingURL=data-grid-body-input-handler%20copy.js.map

package/dist/src/data-grid/event-handlers/data-grid-body-input-handler copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-body-input-handler copy.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-input-handler copy.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,0BAA0B,CAAqB,CAAgB;IACnF,YAAY;IACZ,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAA;IACjB,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;IAChD,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;IACtC,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;IAC9E,IAAI,SAAS,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA;IAEhF,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,QAAQ,GAAG,EAAE;YACX,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK,CAAC;YACX,wBAAwB;YACxB,KAAK,OAAO;gBACV,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;gBACtB,IAAI,CAAC,KAAK,EAAE,CAAA;gBACZ,OAAM;YAER,KAAK,QAAQ,CAAC;YACd,KAAK,UAAU,CAAC;YAChB,KAAK,KAAK;gBACR,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,KAAK,MAAM;gBACT,OAAM;YACR,cAAc;YACd,2BAA2B;YAC3B,6CAA6C;YAC7C,iBAAiB;YACjB,UAAU;YAEV,eAAe;YACf,oBAAoB;YACpB,2BAA2B;YAC3B,oCAAoC;YACpC,iBAAiB;YACjB,UAAU;YAEV;gBACE,OAAM;SACT;KACF;SAAM;QACL,QAAQ,GAAG,EAAE;YACX,KAAK,IAAI,CAAC;YACV,KAAK,SAAS;gBACZ,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAA;gBAC1B,MAAK;YAEP,KAAK,MAAM,CAAC;YACZ,KAAK,WAAW;gBACd,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAA;gBAC/B,MAAK;YAEP,KAAK,OAAO;gBACV,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;gBACjC,OAAM;YAER,KAAK,MAAM,CAAC;YACZ,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACd,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;gBAChC,MAAK;YAEP,KAAK,OAAO,CAAC;YACb,KAAK,YAAY,CAAC;YAClB,KAAK,KAAK;gBACR,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;gBACxC,MAAK;YAEP,KAAK,QAAQ;gBACX,sCAAsC;gBACtC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,CAAA;gBAC3B,MAAK;YAEP,KAAK,UAAU;gBACb,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAA;gBAChC,MAAK;YAEP,KAAK,KAAK,CAAC;YACX,KAAK,QAAQ;gBACX,OAAM;YAER;gBACE,2CAA2C;gBAC3C,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;gBACjC,OAAM;SACT;KACF;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE;QAC/E,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,CAAA;KAChH;IAED,kDAAkD;IAClD,CAAC,CAAC,cAAc,EAAE,CAAA;AACpB,CAAC","sourcesContent":["import { DataGridBody } from '../data-grid-body'\n\n/**\n * ox-grid-body 의 keydown handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\nexport async function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void> {\n  // arrow-key\n  const key = e.key\n  var { row = 0, column = 0 } = this.focused || {}\n  var { records = [] } = this.data || {}\n  var maxrow = this.config.rows.appendable ? records.length : records.length - 1\n  var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1\n\n  if (this.editTarget) {\n    switch (key) {\n      case 'Escape':\n      case 'Esc':\n      /* TODO 편집이 취소되어야 한다. */\n      case 'Enter':\n        this.editTarget = null\n        this.focus()\n        return\n\n      case 'PageUp':\n      case 'PageDown':\n      case 'End':\n        e.preventDefault()\n      case 'Home':\n        return\n      // case 'Tab':\n      //   this.editTarget = null\n      //   column = Math.min(maxcolumn, column + 1)\n      //   this.focus()\n      //   break\n\n      // case 'Down':\n      // case 'ArrowDown':\n      //   this.editTarget = null\n      //   row = Math.min(maxrow, row + 1)\n      //   this.focus()\n      //   break\n\n      default:\n        return\n    }\n  } else {\n    switch (key) {\n      case 'Up':\n      case 'ArrowUp':\n        row = Math.max(0, row - 1)\n        break\n\n      case 'Down':\n      case 'ArrowDown':\n        row = Math.min(maxrow, row + 1)\n        break\n\n      case 'Enter':\n        this.startEditTarget(row, column)\n        return\n\n      case 'Left':\n      case 'ArrowLeft':\n      case 'Backspace':\n        column = Math.max(0, column - 1)\n        break\n\n      case 'Right':\n      case 'ArrowRight':\n      case 'Tab':\n        column = Math.min(maxcolumn, column + 1)\n        break\n\n      case 'PageUp':\n        /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n        row = Math.max(0, row - 10)\n        break\n\n      case 'PageDown':\n        row = Math.min(maxrow, row + 10)\n        break\n\n      case 'Esc':\n      case 'Escape':\n        return\n\n      default:\n        /* TODO move this to input event handler */\n        this.startEditTarget(row, column)\n        return\n    }\n  }\n\n  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n    this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))\n  }\n\n  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */\n  e.preventDefault()\n}\n"]}

package/dist/src/data-grid/event-handlers/data-grid-body-input-handler.d.ts

@@ -1,7 +0,0 @@
-import { DataGridBody } from '../data-grid-body';
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export declare function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void>;

package/dist/src/data-grid/event-handlers/data-grid-body-input-handler.js

@@ -1,88 +0,0 @@
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyKeydownHandler(e) {
-    // arrow-key
-    const key = e.key;
-    var { row = 0, column = 0 } = this.focused || {};
-    var { records = [] } = this.data || {};
-    var maxrow = this.config.rows.appendable ? records.length : records.length - 1;
-    var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1;
-    if (this.editTarget) {
-        switch (key) {
-            case 'Escape':
-            case 'Esc':
-            /* TODO 편집이 취소되어야 한다. */
-            case 'Enter':
-                this.editTarget = null;
-                this.focus();
-                return;
-            case 'PageUp':
-            case 'PageDown':
-            case 'End':
-                e.preventDefault();
-            case 'Home':
-                return;
-            // case 'Tab':
-            //   this.editTarget = null
-            //   column = Math.min(maxcolumn, column + 1)
-            //   this.focus()
-            //   break
-            // case 'Down':
-            // case 'ArrowDown':
-            //   this.editTarget = null
-            //   row = Math.min(maxrow, row + 1)
-            //   this.focus()
-            //   break
-            default:
-                return;
-        }
-    }
-    else {
-        switch (key) {
-            case 'Up':
-            case 'ArrowUp':
-                row = Math.max(0, row - 1);
-                break;
-            case 'Down':
-            case 'ArrowDown':
-                row = Math.min(maxrow, row + 1);
-                break;
-            case 'Enter':
-                this.startEditTarget(row, column);
-                return;
-            case 'Left':
-            case 'ArrowLeft':
-            case 'Backspace':
-                column = Math.max(0, column - 1);
-                break;
-            case 'Right':
-            case 'ArrowRight':
-            case 'Tab':
-                column = Math.min(maxcolumn, column + 1);
-                break;
-            case 'PageUp':
-                /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-                row = Math.max(0, row - 10);
-                break;
-            case 'PageDown':
-                row = Math.min(maxrow, row + 10);
-                break;
-            case 'Esc':
-            case 'Escape':
-                return;
-            default:
-                /* TODO move this to input event handler */
-                this.startEditTarget(row, column);
-                return;
-        }
-    }
-    if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-        this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }));
-    }
-    /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
-    e.preventDefault();
-}
-//# sourceMappingURL=data-grid-body-input-handler.js.map

package/dist/src/data-grid/event-handlers/data-grid-body-input-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-body-input-handler.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-input-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridBody } from '../data-grid-body'\n\n/**\n * ox-grid-body 의 keydown handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\nexport async function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void> {\n  // arrow-key\n  const key = e.key\n  var { row = 0, column = 0 } = this.focused || {}\n  var { records = [] } = this.data || {}\n  var maxrow = this.config.rows.appendable ? records.length : records.length - 1\n  var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1\n\n  if (this.editTarget) {\n    switch (key) {\n      case 'Escape':\n      case 'Esc':\n      /* TODO 편집이 취소되어야 한다. */\n      case 'Enter':\n        this.editTarget = null\n        this.focus()\n        return\n\n      case 'PageUp':\n      case 'PageDown':\n      case 'End':\n        e.preventDefault()\n      case 'Home':\n        return\n      // case 'Tab':\n      //   this.editTarget = null\n      //   column = Math.min(maxcolumn, column + 1)\n      //   this.focus()\n      //   break\n\n      // case 'Down':\n      // case 'ArrowDown':\n      //   this.editTarget = null\n      //   row = Math.min(maxrow, row + 1)\n      //   this.focus()\n      //   break\n\n      default:\n        return\n    }\n  } else {\n    switch (key) {\n      case 'Up':\n      case 'ArrowUp':\n        row = Math.max(0, row - 1)\n        break\n\n      case 'Down':\n      case 'ArrowDown':\n        row = Math.min(maxrow, row + 1)\n        break\n\n      case 'Enter':\n        this.startEditTarget(row, column)\n        return\n\n      case 'Left':\n      case 'ArrowLeft':\n      case 'Backspace':\n        column = Math.max(0, column - 1)\n        break\n\n      case 'Right':\n      case 'ArrowRight':\n      case 'Tab':\n        column = Math.min(maxcolumn, column + 1)\n        break\n\n      case 'PageUp':\n        /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n        row = Math.max(0, row - 10)\n        break\n\n      case 'PageDown':\n        row = Math.min(maxrow, row + 10)\n        break\n\n      case 'Esc':\n      case 'Escape':\n        return\n\n      default:\n        /* TODO move this to input event handler */\n        this.startEditTarget(row, column)\n        return\n    }\n  }\n\n  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n    this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))\n  }\n\n  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */\n  e.preventDefault()\n}\n"]}

package/dist/src/data-grid/event-handlers/data-grid-body-keydown-handler copy.d.ts

@@ -1,7 +0,0 @@
-import { DataGridBody } from '../data-grid-body';
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export declare function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void>;

package/dist/src/data-grid/event-handlers/data-grid-body-keydown-handler copy.js

@@ -1,88 +0,0 @@
-/**
- * ox-grid-body 의 keydown handler
- *
- * - handler의 this 는 ox-grid-body임.
- */
-export async function dataGridBodyKeydownHandler(e) {
-    // arrow-key
-    const key = e.key;
-    var { row = 0, column = 0 } = this.focused || {};
-    var { records = [] } = this.data || {};
-    var maxrow = this.config.rows.appendable ? records.length : records.length - 1;
-    var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1;
-    if (this.editTarget) {
-        switch (key) {
-            case 'Escape':
-            case 'Esc':
-            /* TODO 편집이 취소되어야 한다. */
-            case 'Enter':
-                this.editTarget = null;
-                this.focus();
-                return;
-            case 'PageUp':
-            case 'PageDown':
-            case 'End':
-                e.preventDefault();
-            case 'Home':
-                return;
-            // case 'Tab':
-            //   this.editTarget = null
-            //   column = Math.min(maxcolumn, column + 1)
-            //   this.focus()
-            //   break
-            // case 'Down':
-            // case 'ArrowDown':
-            //   this.editTarget = null
-            //   row = Math.min(maxrow, row + 1)
-            //   this.focus()
-            //   break
-            default:
-                return;
-        }
-    }
-    else {
-        switch (key) {
-            case 'Up':
-            case 'ArrowUp':
-                row = Math.max(0, row - 1);
-                break;
-            case 'Down':
-            case 'ArrowDown':
-                row = Math.min(maxrow, row + 1);
-                break;
-            case 'Enter':
-                this.startEditTarget(row, column);
-                return;
-            case 'Left':
-            case 'ArrowLeft':
-            case 'Backspace':
-                column = Math.max(0, column - 1);
-                break;
-            case 'Right':
-            case 'ArrowRight':
-            case 'Tab':
-                column = Math.min(maxcolumn, column + 1);
-                break;
-            case 'PageUp':
-                /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
-                row = Math.max(0, row - 10);
-                break;
-            case 'PageDown':
-                row = Math.min(maxrow, row + 10);
-                break;
-            case 'Esc':
-            case 'Escape':
-                return;
-            default:
-                /* TODO move this to input event handler */
-                this.startEditTarget(row, column);
-                return;
-        }
-    }
-    if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
-        this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }));
-    }
-    /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
-    e.preventDefault();
-}
-//# sourceMappingURL=data-grid-body-keydown-handler%20copy.js.map

package/dist/src/data-grid/event-handlers/data-grid-body-keydown-handler copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-body-keydown-handler copy.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-keydown-handler copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridBody } from '../data-grid-body'\n\n/**\n * ox-grid-body 의 keydown handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\nexport async function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void> {\n  // arrow-key\n  const key = e.key\n  var { row = 0, column = 0 } = this.focused || {}\n  var { records = [] } = this.data || {}\n  var maxrow = this.config.rows.appendable ? records.length : records.length - 1\n  var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1\n\n  if (this.editTarget) {\n    switch (key) {\n      case 'Escape':\n      case 'Esc':\n      /* TODO 편집이 취소되어야 한다. */\n      case 'Enter':\n        this.editTarget = null\n        this.focus()\n        return\n\n      case 'PageUp':\n      case 'PageDown':\n      case 'End':\n        e.preventDefault()\n      case 'Home':\n        return\n      // case 'Tab':\n      //   this.editTarget = null\n      //   column = Math.min(maxcolumn, column + 1)\n      //   this.focus()\n      //   break\n\n      // case 'Down':\n      // case 'ArrowDown':\n      //   this.editTarget = null\n      //   row = Math.min(maxrow, row + 1)\n      //   this.focus()\n      //   break\n\n      default:\n        return\n    }\n  } else {\n    switch (key) {\n      case 'Up':\n      case 'ArrowUp':\n        row = Math.max(0, row - 1)\n        break\n\n      case 'Down':\n      case 'ArrowDown':\n        row = Math.min(maxrow, row + 1)\n        break\n\n      case 'Enter':\n        this.startEditTarget(row, column)\n        return\n\n      case 'Left':\n      case 'ArrowLeft':\n      case 'Backspace':\n        column = Math.max(0, column - 1)\n        break\n\n      case 'Right':\n      case 'ArrowRight':\n      case 'Tab':\n        column = Math.min(maxcolumn, column + 1)\n        break\n\n      case 'PageUp':\n        /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n        row = Math.max(0, row - 10)\n        break\n\n      case 'PageDown':\n        row = Math.min(maxrow, row + 10)\n        break\n\n      case 'Esc':\n      case 'Escape':\n        return\n\n      default:\n        /* TODO move this to input event handler */\n        this.startEditTarget(row, column)\n        return\n    }\n  }\n\n  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n    this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))\n  }\n\n  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */\n  e.preventDefault()\n}\n"]}

package/dist/stories/index.stories.js

@@ -1,33 +0,0 @@
-import '../index.js';
-import { html } from 'lit';
-export default {
-    title: 'DataGrist',
-    component: 'ox-grist',
-    argTypes: {
-        title: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' }
-    }
-};
-const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
-  <ox-grist style="--data-grist-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </ox-grist>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'My title'
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } }
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;8CAC/D,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MACjG,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../index.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'DataGrist',\n  component: 'ox-grist',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n  <ox-grist style=\"--data-grist-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n    ${slot}\n  </ox-grist>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n  title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n  counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } }\n}\n"]}

package/stories/index.stories.ts

@@ -1,52 +0,0 @@
-import '../index.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'DataGrist',
-  component: 'ox-grist',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  title?: string
-  counter?: number
-  textColor?: string
-  slot?: TemplateResult
-}
-
-const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
-  <ox-grist style="--data-grist-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </ox-grist>
-`
-
-export const Regular = Template.bind({})
-
-export const CustomTitle = Template.bind({})
-CustomTitle.args = {
-  title: 'My title'
-}
-
-export const CustomCounter = Template.bind({})
-CustomCounter.args = {
-  counter: 123456
-}
-
-export const SlottedContent = Template.bind({})
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`
-}
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } }
-}