@operato/scene-grist 0.0.9

package/dist/grist.js

@@ -0,0 +1,258 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'select',
+            label: 'grist-mode',
+            name: 'mode',
+            property: {
+                options: [
+                    {
+                        display: 'Grid',
+                        value: 'GRID'
+                    },
+                    {
+                        display: 'List',
+                        value: 'LIST'
+                    },
+                    {
+                        display: 'Depends on device',
+                        value: 'DEVICE'
+                    }
+                ]
+            }
+        },
+        {
+            type: 'textarea',
+            label: 'config',
+            name: 'config'
+        },
+        {
+            type: 'checkbox',
+            label: 'appendable',
+            name: 'appendable'
+        },
+        {
+            type: 'checkbox',
+            label: 'paginatable',
+            name: 'paginatable'
+        },
+        {
+            type: 'number',
+            label: 'content-scale',
+            name: 'contentScale',
+            property: {
+                step: 0.1,
+                min: 0.1
+            }
+        },
+        {
+            type: 'select',
+            label: 'bound-data',
+            name: 'boundData',
+            property: {
+                options: [
+                    {
+                        display: '',
+                        value: ''
+                    },
+                    {
+                        display: 'Focused Row',
+                        value: 'focused-row'
+                    },
+                    {
+                        display: 'Selected Rows',
+                        value: 'selected-rows'
+                    }
+                ]
+            }
+        }
+    ],
+    help: 'scene/component/grist'
+};
+import '@operato/data-grist';
+import { Component, HTMLOverlayElement, error } from '@hatiolab/things-scene';
+const isMobileDevice = () => false;
+export default class SceneGrist extends HTMLOverlayElement {
+    constructor() {
+        super(...arguments);
+        this.__value = {};
+        this.beforeFetchFuncs = {};
+    }
+    static get nature() {
+        return NATURE;
+    }
+    ready() {
+        super.ready();
+        if (this.rootModel) {
+            this._listenTo = this.rootModel;
+            this._listener = function (after) {
+                after.scale && this.rescale();
+            }.bind(this);
+            this.rootModel.on('change', this._listener);
+        }
+    }
+    removed() {
+        if (this._listenTo) {
+            this._listenTo.off('change', this._listener);
+            delete this._listenTo;
+            delete this._listener;
+        }
+    }
+    createElement() {
+        super.createElement();
+        this.grist = document.createElement('ox-data-grist');
+        this.grist.style.setProperty('--grist-padding', '0');
+        this.element.appendChild(this.grist);
+        this.rescale();
+        const grist = this.grist;
+        this.setGristConfig(grist);
+        //@ts-ignore
+        grist.fetchHandler = ({ page, limit, sorters, options }) => {
+            Object.values(this.beforeFetchFuncs).forEach((func) => func({ page, limit, sorters, options }));
+            var { total = 0, records = [] } = grist.data || {};
+            return {
+                page,
+                limit,
+                total,
+                records
+            };
+        };
+        grist.addEventListener('select-record-change', e => {
+            var _a;
+            if (this.state.boundData === 'selected-rows') {
+                this.data = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.selected) || [];
+            }
+        });
+        grist.addEventListener('select-all-change', e => {
+            var _a;
+            if (this.state.boundData === 'selected-rows') {
+                this.data = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.selected) || [];
+            }
+        });
+        grist.addEventListener('focus-change', (e) => {
+            var _a, _b;
+            if (this.state.boundData === 'focused-row') {
+                this.data = (((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.records) || [])[e.detail.row];
+            }
+        });
+    }
+    get value() {
+        return this.__value;
+    }
+    set value(value) {
+        this.__value = value;
+        if (!this.grist || typeof value !== 'object')
+            return;
+        var { page, limit } = this.config.pagination || {};
+        this.grist.data =
+            value instanceof Array
+                ? {
+                    page,
+                    limit,
+                    ...this.grist._data,
+                    total: value.length,
+                    records: Array.from(value)
+                }
+                : {
+                    page,
+                    limit,
+                    ...this.grist._data,
+                    ...value
+                };
+    }
+    onchange(after, before) {
+        if ('mode' in after || 'appendable' in after || 'paginatable' in after || 'config' in after) {
+            this.setGristConfig(this.grist);
+        }
+        this.rescale();
+    }
+    dispose() {
+        super.dispose();
+        delete this.grist;
+    }
+    /*
+     * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+     * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+     *
+     * ThingsComponent state => HTML element properties
+     */
+    setElementProperties(grist) {
+        this.rescale();
+    }
+    setGristConfig(grist) {
+        if (!grist) {
+            return;
+        }
+        var { mode } = this.state;
+        if (mode != 'DEVICE') {
+            grist.mode = mode;
+        }
+        else {
+            grist.mode = isMobileDevice() ? 'LIST' : 'GRID';
+        }
+        grist.config = this.config;
+    }
+    /*
+     * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
+     * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
+     */
+    reposition() {
+        super.reposition();
+    }
+    /*
+     * grist는 부모의 스케일의 역으로 transform해서, scale을 1로 맞춘다.
+     */
+    rescale() {
+        var grist = this.grist;
+        if (!grist) {
+            return;
+        }
+        const scale = this.getState('contentScale') || 1;
+        const sx = scale;
+        const sy = scale;
+        const transform = `scale(${sx}, ${sy})`;
+        ['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach((prefix) => {
+            grist.style.setProperty(prefix + 'transform', transform);
+            grist.style.setProperty(prefix + 'transform-origin', '0px 0px');
+        });
+        const { width, height } = this.state;
+        grist.style.width = Math.round(width / scale) + 'px';
+        grist.style.height = Math.round(height / scale) + 'px';
+    }
+    get config() {
+        var { config, appendable, paginatable } = this.state;
+        if (typeof config !== 'object') {
+            try {
+                config = eval(`(${config})`);
+            }
+            catch (e) {
+                error(e);
+            }
+        }
+        if (paginatable) {
+            if (config.pagination && !config.pagination.limit && config.pagination.pages && config.pagination.pages.length) {
+                config.pagination.limit = config.pagination.pages[0];
+            }
+        }
+        config.pagination = {
+            ...config.pagination,
+            infinite: !paginatable
+        };
+        config.rows = {
+            ...config.rows,
+            appendable: !!appendable
+        };
+        return config;
+    }
+    get tagName() {
+        return 'div';
+    }
+}
+Component.register('grist', SceneGrist);
+//# sourceMappingURL=grist.js.map

package/dist/grist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grist.js","sourceRoot":"","sources":["../src/grist.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'select',\n      label: 'grist-mode',\n      name: 'mode',\n      property: {\n        options: [\n          {\n            display: 'Grid',\n            value: 'GRID'\n          },\n          {\n            display: 'List',\n            value: 'LIST'\n          },\n          {\n            display: 'Depends on device',\n            value: 'DEVICE'\n          }\n        ]\n      }\n    },\n    {\n      type: 'textarea',\n      label: 'config',\n      name: 'config'\n    },\n    {\n      type: 'checkbox',\n      label: 'appendable',\n      name: 'appendable'\n    },\n    {\n      type: 'checkbox',\n      label: 'paginatable',\n      name: 'paginatable'\n    },\n    {\n      type: 'number',\n      label: 'content-scale',\n      name: 'contentScale',\n      property: {\n        step: 0.1,\n        min: 0.1\n      }\n    },\n    {\n      type: 'select',\n      label: 'bound-data',\n      name: 'boundData',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'Focused Row',\n            value: 'focused-row'\n          },\n          {\n            display: 'Selected Rows',\n            value: 'selected-rows'\n          }\n        ]\n      }\n    }\n  ],\n  help: 'scene/component/grist'\n}\n\nimport '@operato/data-grist'\n\nimport { Component, HTMLOverlayElement, Properties, error } from '@hatiolab/things-scene'\n\nimport { DataGrist } from '@operato/data-grist'\n\nconst isMobileDevice = () => false\n\nexport default class SceneGrist extends HTMLOverlayElement {\n  static get nature() {\n    return NATURE\n  }\n\n  private __value: any = {}\n  private beforeFetchFuncs: any = {}\n  private _listenTo?: any\n  private _listener?: any\n\n  public grist?: DataGrist\n\n  ready() {\n    super.ready()\n\n    if (this.rootModel) {\n      this._listenTo = this.rootModel\n      this._listener = function (this: SceneGrist, after: Properties) {\n        after.scale && this.rescale()\n      }.bind(this)\n      this.rootModel.on('change', this._listener)\n    }\n  }\n\n  removed() {\n    if (this._listenTo) {\n      this._listenTo.off('change', this._listener)\n\n      delete this._listenTo\n      delete this._listener\n    }\n  }\n\n  createElement() {\n    super.createElement()\n\n    this.grist = document.createElement('ox-data-grist') as DataGrist\n    this.grist.style.setProperty('--grist-padding', '0')\n\n    this.element.appendChild(this.grist)\n\n    this.rescale()\n\n    const grist = this.grist\n\n    this.setGristConfig(grist)\n\n    //@ts-ignore\n    grist.fetchHandler = ({ page, limit, sorters, options }) => {\n      Object.values(this.beforeFetchFuncs).forEach((func: any) => func({ page, limit, sorters, options }))\n      var { total = 0, records = [] } = grist.data || {}\n      return {\n        page,\n        limit,\n        total,\n        records\n      }\n    }\n\n    grist.addEventListener('select-record-change', e => {\n      if (this.state.boundData === 'selected-rows') {\n        this.data = (e.target as DataGrist)?.selected || []\n      }\n    })\n\n    grist.addEventListener('select-all-change', e => {\n      if (this.state.boundData === 'selected-rows') {\n        this.data = (e.target as DataGrist)?.selected || []\n      }\n    })\n\n    grist.addEventListener('focus-change', (e: Event) => {\n      if (this.state.boundData === 'focused-row') {\n        this.data = ((e.target as DataGrist)?.data?.records || [])[(e as CustomEvent).detail.row]\n      }\n    })\n  }\n\n  get value() {\n    return this.__value\n  }\n\n  set value(value) {\n    this.__value = value\n    if (!this.grist || typeof value !== 'object') return\n\n    var { page, limit } = this.config.pagination || {}\n\n    this.grist.data =\n      value instanceof Array\n        ? {\n            page,\n            limit,\n            ...this.grist._data,\n            total: value.length,\n            records: Array.from(value)\n          }\n        : {\n            page,\n            limit,\n            ...this.grist._data,\n            ...value\n          }\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('mode' in after || 'appendable' in after || 'paginatable' in after || 'config' in after) {\n      this.setGristConfig(this.grist)\n    }\n\n    this.rescale()\n  }\n\n  dispose() {\n    super.dispose()\n\n    delete this.grist\n  }\n\n  /*\n   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,\n   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.\n   *\n   * ThingsComponent state => HTML element properties\n   */\n  setElementProperties(grist: DataGrist) {\n    this.rescale()\n  }\n\n  setGristConfig(grist: DataGrist | undefined) {\n    if (!grist) {\n      return\n    }\n\n    var { mode } = this.state\n\n    if (mode != 'DEVICE') {\n      grist.mode = mode\n    } else {\n      grist.mode = isMobileDevice() ? 'LIST' : 'GRID'\n    }\n\n    grist.config = this.config\n  }\n\n  /*\n   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.\n   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.\n   */\n  reposition() {\n    super.reposition()\n  }\n\n  /*\n   * grist는 부모의 스케일의 역으로 transform해서, scale을 1로 맞춘다.\n   */\n  rescale() {\n    var grist = this.grist\n    if (!grist) {\n      return\n    }\n\n    const scale = this.getState('contentScale') || 1\n\n    const sx = scale\n    const sy = scale\n\n    const transform = `scale(${sx}, ${sy})`\n\n    ;['-webkit-', '-moz-', '-ms-', '-o-', ''].forEach((prefix: string) => {\n      grist!.style.setProperty(prefix + 'transform', transform)\n      grist!.style.setProperty(prefix + 'transform-origin', '0px 0px')\n    })\n\n    const { width, height } = this.state\n    grist.style.width = Math.round(width / scale) + 'px'\n    grist.style.height = Math.round(height / scale) + 'px'\n  }\n\n  get config() {\n    var { config, appendable, paginatable } = this.state\n\n    if (typeof config !== 'object') {\n      try {\n        config = eval(`(${config})`)\n      } catch (e) {\n        error(e)\n      }\n    }\n\n    if (paginatable) {\n      if (config.pagination && !config.pagination.limit && config.pagination.pages && config.pagination.pages.length) {\n        config.pagination.limit = config.pagination.pages[0]\n      }\n    }\n\n    config.pagination = {\n      ...config.pagination,\n      infinite: !paginatable\n    }\n\n    config.rows = {\n      ...config.rows,\n      appendable: !!appendable\n    }\n\n    return config\n  }\n\n  get tagName() {\n    return 'div'\n  }\n}\n\nComponent.register('grist', SceneGrist)\n"]}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Grist from './grist';
+import GristAction from './grist-action';
+declare const _default: (typeof GristAction | typeof Grist)[];
+export default _default;

package/dist/index.js

@@ -0,0 +1,4 @@
+import Grist from './grist';
+import GristAction from './grist-action';
+export default [Grist, GristAction];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,eAAe,CAAC,KAAK,EAAE,WAAW,CAAC,CAAA","sourcesContent":["import Grist from './grist'\nimport GristAction from './grist-action'\nexport default [Grist, GristAction]\n"]}

package/dist/templates/grist-action.d.ts

@@ -0,0 +1,17 @@
+import { ACTIONS } from '../grist-action';
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        action: ACTIONS;
+    };
+};
+export default _default;

package/dist/templates/grist-action.js

@@ -0,0 +1,19 @@
+import { ACTIONS } from '../grist-action';
+import icon from './grist-action.png';
+export default {
+    type: 'grist-action',
+    description: 'grist-action',
+    group: 'table',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'grist-action',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        strokeStyle: 'darkgray',
+        action: ACTIONS.GET_SELECTED
+    }
+};
+//# sourceMappingURL=grist-action.js.map

package/dist/templates/grist-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grist-action.js","sourceRoot":"","sources":["../../src/templates/grist-action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,IAAI,MAAM,oBAAoB,CAAA;AAErC,eAAe;IACb,IAAI,EAAE,cAAc;IACpB,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,OAAO;IACd,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;QACvB,MAAM,EAAE,OAAO,CAAC,YAAY;KAC7B;CACF,CAAA","sourcesContent":["import { ACTIONS } from '../grist-action'\nimport icon from './grist-action.png'\n\nexport default {\n  type: 'grist-action',\n  description: 'grist-action',\n  group: 'table',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'grist-action',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    strokeStyle: 'darkgray',\n    action: ACTIONS.GET_SELECTED\n  }\n}\n"]}

package/dist/templates/grist.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        mode: string;
+        config: string;
+    };
+};
+export default _default;

package/dist/templates/grist.js

@@ -0,0 +1,98 @@
+import icon from './grist.png';
+export default {
+    type: 'grist',
+    description: 'grist',
+    group: 'table',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'grist',
+        left: 10,
+        top: 10,
+        width: 400,
+        height: 300,
+        mode: 'GRID',
+        config: `{
+  columns: [
+    {
+      type: 'gutter',
+      gutterName: 'dirty'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'sequence'
+    },
+    {
+      type: 'gutter',
+      gutterName: 'row-selector',
+      multiple: true
+    },
+    {
+      type: 'string',
+      name: 'id',
+      hidden: true
+    },
+    {
+      type: 'string',
+      name: 'name',
+      header: 'name',
+      record: {
+        editable: true
+      },
+      sortable: true,
+      width: 120
+    },
+    {
+      type: 'string',
+      name: 'description',
+      header: 'description',
+      record: {
+        align: 'left',
+        editable: true
+      },
+      width: 200
+    },
+    {
+      type: 'boolean',
+      name: 'active',
+      header: 'active',
+      record: {
+        editable: true
+      },
+      sortable: true,
+      width: 60
+    },
+    {
+      type: 'datetime',
+      name: 'updatedAt',
+      header: 'updated at',
+      width: 180
+    },
+    {
+      type: 'datetime',
+      name: 'createdAt',
+      header: 'created at',
+      width: 180
+    }
+  ],
+  rows: {
+    selectable: {
+      multiple: true
+    },
+    handlers: {
+      click: 'select-row-toggle'
+    }
+  },
+  sorters: [
+    {
+      name: 'name',
+      desc: true
+    }
+  ],
+  pagination: {
+    pages: [20, 30, 50, 100, 200]
+  }
+}`
+    }
+};
+//# sourceMappingURL=grist.js.map

package/dist/templates/grist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grist.js","sourceRoot":"","sources":["../../src/templates/grist.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,aAAa,CAAA;AAE9B,eAAe;IACb,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,OAAO;IACd,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFV;KACC;CACF,CAAA","sourcesContent":["import icon from './grist.png'\n\nexport default {\n  type: 'grist',\n  description: 'grist',\n  group: 'table',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'grist',\n    left: 10,\n    top: 10,\n    width: 400,\n    height: 300,\n    mode: 'GRID',\n    config: `{\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      header: 'name',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      record: {\n        align: 'left',\n        editable: true\n      },\n      width: 200\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      click: 'select-row-toggle'\n    }\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}`\n  }\n}\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,30 @@
+declare const _default: ({
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        mode: string;
+        config: string;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        action: import("../grist-action").ACTIONS;
+    };
+})[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,4 @@
+import grist from "./grist";
+import gristAction from "./grist-action";
+export default [grist, gristAction];
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,eAAe,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import grist from \"./grist\";\nimport gristAction from \"./grist-action\";\nexport default [grist, gristAction];"]}

package/global/index.d.ts

@@ -0,0 +1 @@
+declare module '*.png'

package/helps/scene/component/grist-action.ko.md

@@ -0,0 +1,45 @@
+# grist action
+
+특정 Grist 컴포넌트에 연결되어 사용자의 마우스클릭(또는 탭) 이벤트가 발생했을 때, grist의 데이타를 가져오거나,
+grist에 동작을 지시하는 컴포넌트이다.
+
+그 밖의 일반적인 기능은 Rect(사각형) 컴포넌트와 동일하게 동작한다.
+
+## Properties
+
+- target grist
+  - 연결하고자하는 grist의 아이디를 설정한다.
+- action
+  - Get page information
+    - 페이지네이션 정보 가져오기
+    - graphql query resolver 에 직접 사용될 수 있는 입력 변수 형식으로 가공된 데이타로 제공됨
+    ```
+    {
+      page,
+      limit,
+      sorters
+    }
+    ```
+  - Get all rows
+    - 모든 레코드 데이터 가져오기
+  - Get selected rows
+    - 체크된 레코드 데이터 가져오기
+    ```
+    {
+      patches, /* 다중 레코드 업데이트용 graphql mutation resolver에 직접 사용될 수 있는 patch 데이타 형식으로 가공된 데이타 */
+      original /* 체크된 레코드 데이터 */
+    }
+    ```
+  - Get dirty rows
+    - 변경 사항이 있는 데이터 가져오기
+    - 다중 레코드 업데이트용 graphql mutation resolver에 직접 사용될 수 있는 patch 데이타 형식으로 가공된 데이타로 제공됨
+  - Add a row
+    - 행 추가
+  - Delete selected rows
+    - 선택 행 삭제
+  - Commit
+    - 변경 사항을 데이터에 적용
+- run at startup
+  - 뷰어 시작 시 자동 실행 여부
+- record adder format
+  - 행 추가 시의 포맷

package/helps/scene/component/grist-action.md

@@ -0,0 +1,43 @@
+# grist action
+
+When a user's mouse click (or tap) event occurs when connected to a specific Grist component, the grist data is retrieved, or it is a component that directs the operation to grist.
+
+그 밖의 일반적인 기능은 Rect(사각형) 컴포넌트와 동일하게 동작한다.
+
+## Properties
+
+- target grist
+  - Set the ID of grist to connect to.
+- action
+  - Get page information
+    - Get pagination information
+    - Provided as processed data in the form of input variables that can be used directly in graphql query resolver
+    ```js
+    {
+      page,
+      limit,
+      sorters
+    }
+    ```
+  - Get all rows
+    - Get all record data
+  - Get selected rows
+    - Get checked record data
+    ```ts
+    {
+      patches, /* Processed data in patch data format that can be used directly in the graphql mutation resolver for multiple record updates. */
+      original /* Checked record data */
+    }
+    ```
+  - Get dirty rows
+    - Get data with changes
+    - Provided as processed data in patch data format that can be used directly in graphql mutation resolver for multi-record update
+  - Add a row
+    - Add a row
+  - Delete selected rows
+  - Commit
+    - Apply changes to the data
+- run at startup
+  - Whether to run automatically when the viewer starts
+- record adder format
+  - data format when adding rows

package/helps/scene/component/grist-action.zh.md

@@ -0,0 +1,44 @@
+# grist action
+
+当通过连接到特定的Grist组件而发生用户的Click（或Tap）Event时，获取grist数据或提供操作指示给grist。
+
+其他功能与Rect（矩形）组件相同。
+
+## Properties
+
+- target grist
+  - 设置要连接的grist的ID。
+- action
+  - Get page information
+    - 获取分页信息
+    - 提供可以在graphql query resolver上直接使用的已加工的数据
+    ```js
+    {
+      page,
+      limit,
+      sorters
+    }
+    ```
+  - Get all rows
+    - 获取所有数据
+  - Get selected rows
+    - 获取已选择的数据
+    ```ts
+    {
+      patches, /* 提供多行更新用的graphql mutation resolver上直接使用的已加工的数据*/
+      original /* 获取已选择的数据 */
+    }
+    ```
+  - Get dirty rows
+    - 取得变更资料
+    - 提供多行更新用的graphql mutation resolver上直接使用的已加工的数据
+  - Add a row
+    - 添加行
+  - Delete selected rows
+    - 删除选择行
+  - Commit
+    - 将数据
+- run at startup
+  - 是否在画面打开时执行
+- record adder format
+  - 添加新行时的Format

package/helps/scene/component/grist.ko.md

@@ -0,0 +1,26 @@
+# grist
+
+데이타그리드 또는 데이타리스트 형태로 멀티플 레코드 데이타를 표현하는 컴포넌트이다.
+데이타그리드는 웹어플리케이션 UI에 적합한 형태이며, 데이타리스트는 모바일 앱에 적합한 형태이다.
+이는 grist mode 속성으로 설정할 수 있다.
+
+## Properties
+
+- grist mode
+  - Grid: 멀티컬럼을 테이블형태로 구성하는 데이타그리드 형태
+  - list: 멀티컬럼 정보를 아이템 블록 형태로 구성하는 데이타리스트 형태
+  - Depends on device : 현재 디스플레이에 따라 데이타그리드 또는 데이타리스트 형태로 자동 선택된다
+- config
+  - grist 구성을 위한 컨피규레이션
+  - 컬럼정보, 헤더정보, 레코드 정보, 페이지네이션 정보로 구성된다.
+- appendable
+  - 새로운 레코드를 추가할 수 있도록 UI기능을 제공할 것인지 설정
+- paginatable
+  - footer영역에 페이지네이션 기능을 제공하는 footer 영역 UI 기능을 제공할 것인지 설정
+- scale
+  - grist 내부 내용의 크기 비율을 설정
+  - 0.1부터 0.1단위로 설정할 수 있음
+  - 기본값은 1
+- bound data
+  - focused row : 사용자가 마우스나 키보드로 선택 또는 이동한 현재 레코드가 데이타 속성으로 보내진다. 하나의 레코드만 포커스되므로 데이타는 단일 오브젝트 형태가 된다.
+  - selected rows : 사용자가 선택 체크박스를 통해서 선택한 레코드들이 데이타 속성으로 보내진다. 여러 레코드가 선택될 수 있으므로 데이타는 레코드의 배열 형태가 된다.