@operato/data-grist 2.0.0-alpha.90 → 2.0.0-alpha.92

package/dist/stories/fixed-column.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"fixed-column.stories.js","sourceRoot":"","sources":["../../stories/fixed-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n          active: Math.round(Math.random() * 2) % 2 ? true : false,\n          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n          company:\n            idx % 2\n              ? {\n                  id: '2',\n                  name: 'HatioLAB',\n                  description: `경기도 성남시-${start + idx + 1}`\n                }\n              : {\n                  id: '3',\n                  name: 'HatioSEA',\n                  description: `말레이시아 세티아알람-${start + idx + 1}`\n                },\n          thumbnail:\n            idx % 4 === 0\n              ? '' /* no source */\n              : idx % 4 === 1\n                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n                : idx % 4 === 2\n                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n          role: ['admin', 'worker', 'tester'][idx % 3],\n          color: idx % 2 ? `#87f018` : `#180f87`,\n          rate: Math.round(Math.random() * 100),\n          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n          homepage:\n            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n          json5: {\n            abc: 'abc',\n            value: 123\n          },\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\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: 'gutter',\n      gutterName: 'button',\n      icon: 'edit',\n      title: 'edit',\n      handlers: {\n        click: function () {\n          console.log('clicked')\n        }\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'arrow_downward',\n      title: 'download',\n      handlers: {\n        click: 'move-down'\n      },\n      fixed: true\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'link',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          // href: 'http://hatiolab.com',\n          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n            return record['homepage']\n          },\n          target: '_blank'\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200,\n      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet,\n      fixed: true\n    },\n    {\n      type: 'email',\n      name: 'email',\n      label: true,\n      header: 'email',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130,\n      validation: function (after, before, record, column) {\n        if (after.indexOf('@') == -1) {\n          document.dispatchEvent(\n            new CustomEvent('notify', {\n              detail: {\n                type: 'error',\n                message: `invalid value - ${after}`\n              }\n            })\n          )\n          return false\n        }\n        return true\n      } as ValidationCallback\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'string[]',\n      name: 'role',\n      label: true,\n      header: 'role',\n      record: {\n        options: ['', 'admin', 'worker', 'tester'],\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'color',\n      name: 'color',\n      header: 'color',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'float',\n      name: 'rate',\n      header: 'rate',\n      record: {\n        align: 'right',\n        editable: true,\n        defaultValue: 10000.1\n      },\n      filter: 'between',\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'json5',\n      name: 'json5',\n      header: 'JSON5',\n      width: 200\n    },\n    {\n      type: 'image',\n      name: 'thumbnail',\n      header: 'thumbnail',\n      record: {\n        editable: true\n      },\n      width: 120\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'fixed column',\n  component: 'ox-grist',\n  argTypes: {\n    config: { 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  config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) =>\n  html` <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    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ox-filters-form {\n        --input-gap-vertical: 8px;\n        --input-gap-horizontal: 16px;\n\n        --ox-filters-input-placeholder-color: var(--primary-color);\n\n        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n        --ox-filters-input-focus-border: 1px solid var(--primary-color);\n        --ox-filters-input-font: normal 14px var(--theme-font);\n        --ox-filters-input-color: var(--primary-text-color);\n        --ox-filters-input-focus-color: var(--primary-color);\n        --ox-filters-label-font: normal 14px var(--theme-font);\n        --ox-filters-label-color: var(--primary-text-color);\n\n        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n        --ox-filters-input-padding: 6px 2px;\n      }\n    </style>\n\n    <style>\n      [slot='headroom'] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n\n        --md-icon-size: 24px;\n      }\n      #sorters md-icon,\n      #modes md-icon {\n        --md-icon-size: 18px;\n      }\n      #sorters {\n        margin-left: auto;\n        margin-right: var(--margin-default);\n        padding-left: var(--padding-narrow);\n        border-bottom: var(--border-dark-color);\n        position: relative;\n        color: var(--secondary-color);\n        font-size: var(--fontsize-default);\n        user-select: none;\n      }\n\n      #sorters > * {\n        padding: var(--padding-narrow);\n        vertical-align: middle;\n      }\n\n      #modes > * {\n        padding: var(--padding-narrow);\n        opacity: 0.5;\n        color: var(--primary-text-color);\n        cursor: pointer;\n      }\n\n      #modes > md-icon[active] {\n        border-radius: 9px;\n        background-color: rgba(var(--primary-color-rgb), 0.05);\n        opacity: 1;\n        color: var(--secondary-text-color);\n        cursor: default;\n      }\n\n      #modes > md-icon:hover {\n        opacity: 1;\n        color: var(--secondary-text-color);\n      }\n\n      #add {\n        text-align: right;\n      }\n\n      #add button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background-color: var(--primary-color);\n        border: 0;\n        border-radius: 50%;\n        padding: 5px;\n        width: 32px;\n        height: 32px;\n        cursor: pointer;\n      }\n\n      #add button:hover {\n        background-color: var(--focus-background-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #add button md-icon {\n        font-size: 1.5em;\n        color: var(--theme-white-color);\n      }\n\n      #filters {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #filters * {\n        margin-right: var(--margin-default);\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n\n        #modes {\n          display: none;\n        }\n      }\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}
+{"version":3,"file":"fixed-column.stories.js","sourceRoot":"","sources":["../../stories/fixed-column.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAW1C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,IAAI,KAAK,GAAG,MAAM,CAAA;IAClB,IAAI,KAAK,GAAG,CAAC,IAAK,GAAG,CAAC,CAAC,GAAG,KAAM,CAAA;IAEhC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,KAAM,GAAG,IAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAM,CAAC,CAAC,CAAC,KAAK,CAAC;aAC5D,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACjB,OAAO;gBACL,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC;gBACf,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC1E,WAAW,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC5G,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY;gBAC/F,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBACxD,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAClF,OAAO,EACL,GAAG,GAAG,CAAC;oBACL,CAAC,CAAC;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,UAAU;wBAChB,WAAW,EAAE,WAAW,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;qBAC1C;oBACH,CAAC,CAAC;wBACE,EAAE,EAAE,GAAG;wBACP,IAAI,EAAE,UAAU;wBAChB,WAAW,EAAE,eAAe,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;qBAC9C;gBACP,SAAS,EACP,GAAG,GAAG,CAAC,KAAK,CAAC;oBACX,CAAC,CAAC,EAAE,CAAC,eAAe;oBACpB,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC;wBACb,CAAC,CAAC,qDAAqD;wBACvD,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC;4BACb,CAAC,CAAC,uDAAuD;4BACzD,CAAC,CAAC,uCAAuC,CAAC,kBAAkB;gBACpE,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;gBAC5C,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACtC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;gBACrC,WAAW,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;gBACnF,YAAY,EAAE,CAAC,cAAc,EAAE,uBAAuB,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;gBACtG,QAAQ,EACN,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,uBAAuB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,gCAAgC,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBACxG,KAAK,EAAE;oBACL,GAAG,EAAE,KAAK;oBACV,KAAK,EAAE,GAAG;iBACX;gBACD,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG;IACb,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;QAC/B,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;KAC3B;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,OAAO;SACpB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,UAAU;SACvB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,cAAc;YAC1B,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE;gBACR,KAAK,EAAE;oBACL,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;gBACxB,CAAC;aACF;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE;gBACR,KAAK,EAAE,aAAa;aACrB;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,gBAAgB;YACtB,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE;gBACR,KAAK,EAAE,WAAW;aACnB;YACD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,IAAI;SACb;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE;oBACP,+BAA+B;oBAC/B,IAAI,EAAE,UAAU,MAAoB,EAAE,MAAmB,EAAE,QAAgB;wBACzE,OAAO,MAAM,CAAC,UAAU,CAAC,CAAA;oBAC3B,CAAC;oBACD,MAAM,EAAE,QAAQ;iBACjB;aACF;YACD,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,aAAa;YACnB,MAAM,EAAE,aAAa;YACrB,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE;gBACR,KAAK,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;oBACzD,KAAK,CAAC,GAAG,MAAO,CAAC,IAAI,IAAI,MAAO,CAAC,MAAO,CAAC,IAAI,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAA;gBACtE,CAAC;aACsB;YACzB,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,OAAO;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;YACV,UAAU,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;gBACjD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;oBAC7B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,MAAM,EAAE;4BACN,IAAI,EAAE,OAAO;4BACb,OAAO,EAAE,mBAAmB,KAAK,EAAE;yBACpC;qBACF,CAAC,CACH,CAAA;oBACD,OAAO,KAAK,CAAA;gBACd,CAAC;gBACD,OAAO,IAAI,CAAA;YACb,CAAuB;SACxB;QACD;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE;gBACR,QAAQ,EAAE,GAAG,EAAE;oBACb,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAQ,CAAA;oBACvD,OAAO,CAAC,GAAG,CAAC,KAAM,CAAC,YAAY,CAAC,CAAA;gBAClC,CAAC;aACF;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;gBAC1C,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,OAAO;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,OAAO;aACtB;YACD,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,WAAW;YACnB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,IAAI,EAAE,KAAK;iBACZ;aACF;YACD,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;aAChB;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,QAAQ,EAAE,IAAI;SACf;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,mBAAmB;SAC3B;QACD,UAAU,EAAE,UAAU,MAAM,EAAE,QAAQ;YACpC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;YAC3B,MAAM,UAAU,GACd,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC3G,OAAO;gBACL,UAAU;aACX,CAAA;QACH,CAAoB;KACrB;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,IAAI;SACX;QACD;YACE,IAAI,EAAE,OAAO;SACd;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;KAC9B;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC9B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,MAAM,EAAY,EAAE,EAAE,CACzD,IAAI,CAAA;;;;;;;;;;;;;;;;;;QAkBE,iBAAiB,CAAC,OAAO;QACzB,kBAAkB,CAAC,OAAO;;;;;gBAKlB,MAAM;sBACA,YAAY;wBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;;;;qBAUlE,CAAC,CAAQ,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAC5C;IAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAE,CAAC,aAAa,CAAC,iBAAiB,CAAS,CAAC,IAAI,CAAC;QAC1E,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY;KAC5C,CAAC,CAAA;AACJ,CAAC;;;;;;;;;;;;gBAYG,CAAA;AAEhB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM;CACP,CAAA","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n          active: Math.round(Math.random() * 2) % 2 ? true : false,\n          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n          company:\n            idx % 2\n              ? {\n                  id: '2',\n                  name: 'HatioLAB',\n                  description: `경기도 성남시-${start + idx + 1}`\n                }\n              : {\n                  id: '3',\n                  name: 'HatioSEA',\n                  description: `말레이시아 세티아알람-${start + idx + 1}`\n                },\n          thumbnail:\n            idx % 4 === 0\n              ? '' /* no source */\n              : idx % 4 === 1\n                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n                : idx % 4 === 2\n                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n          role: ['admin', 'worker', 'tester'][idx % 3],\n          color: idx % 2 ? `#87f018` : `#180f87`,\n          rate: Math.round(Math.random() * 100),\n          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n          homepage:\n            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n          json5: {\n            abc: 'abc',\n            value: 123\n          },\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\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: 'gutter',\n      gutterName: 'button',\n      icon: 'edit',\n      title: 'edit',\n      handlers: {\n        click: function () {\n          console.log('clicked')\n        }\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'arrow_downward',\n      title: 'download',\n      handlers: {\n        click: 'move-down'\n      },\n      fixed: true\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'link',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          // href: 'http://hatiolab.com',\n          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n            return record['homepage']\n          },\n          target: '_blank'\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200,\n      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet,\n      fixed: true\n    },\n    {\n      type: 'email',\n      name: 'email',\n      label: true,\n      header: 'email',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130,\n      validation: function (after, before, record, column) {\n        if (after.indexOf('@') == -1) {\n          document.dispatchEvent(\n            new CustomEvent('notify', {\n              detail: {\n                type: 'error',\n                message: `invalid value - ${after}`\n              }\n            })\n          )\n          return false\n        }\n        return true\n      } as ValidationCallback\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'string[]',\n      name: 'role',\n      label: true,\n      header: 'role',\n      record: {\n        options: ['', 'admin', 'worker', 'tester'],\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'color',\n      name: 'color',\n      header: 'color',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'float',\n      name: 'rate',\n      header: 'rate',\n      record: {\n        align: 'right',\n        editable: true,\n        defaultValue: 10000.1\n      },\n      filter: 'between',\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'json5',\n      name: 'json5',\n      header: 'JSON5',\n      width: 200\n    },\n    {\n      type: 'image',\n      name: 'thumbnail',\n      header: 'thumbnail',\n      record: {\n        editable: true\n      },\n      width: 120\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'fixed column',\n  component: 'ox-grist',\n  argTypes: {\n    config: { 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  config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) =>\n  html` <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    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}

package/dist/stories/grid-setting.stories.js

@@ -5,6 +5,7 @@ import '../src/record-view/record-creator.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 const fetchHandler = async ({ page, limit }) => {
     var total = 120993;
     var start = (page - 1) * limit;
@@ -338,141 +339,8 @@ const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHand
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
     <style>
-      ox-filters-form {
-        --input-gap-vertical: 8px;
-        --input-gap-horizontal: 16px;
-
-        --ox-filters-input-placeholder-color: var(--primary-color);
-
-        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
-        --ox-filters-input-focus-border: 1px solid var(--primary-color);
-        --ox-filters-input-font: normal 14px var(--theme-font);
-        --ox-filters-input-color: var(--primary-text-color);
-        --ox-filters-input-focus-color: var(--primary-color);
-        --ox-filters-label-font: normal 14px var(--theme-font);
-        --ox-filters-label-color: var(--primary-text-color);
-
-        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-        --ox-filters-input-padding: 6px 2px;
-      }
-    </style>
-
-    <style>
-      ox-grist {
-        width: 100%;
-        height: 600px;
-      }
-
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #modes > * {
-        padding: var(--padding-narrow);
-        opacity: 0.5;
-        color: var(--primary-text-color);
-        cursor: pointer;
-      }
-
-      #modes > md-icon[active] {
-        border-radius: 9px;
-        background-color: rgba(var(--primary-color-rgb), 0.05);
-        opacity: 1;
-        color: var(--secondary-text-color);
-        cursor: default;
-      }
-
-      #modes > md-icon:hover {
-        opacity: 1;
-        color: var(--secondary-text-color);
-      }
-
-      #add {
-        text-align: right;
-      }
-
-      #add button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        background-color: var(--primary-color);
-        border: 0;
-        border-radius: 50%;
-        padding: 5px;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-      }
-
-      #add button:hover {
-        background-color: var(--focus-background-color);
-        box-shadow: var(--box-shadow);
-      }
-
-      #add button md-icon {
-        font-size: 1.5em;
-        color: var(--theme-white-color);
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      [slot='setting'] {
-        --md-icon-size: 18px;
-        position: absolute;
-        right: 0;
-        top: 2px;
-        color: rgba(var(--secondary-color-rgb), 0.8);
-        cursor: pointer;
-      }
-
-      [slot='setting']:hover {
-        color: var(--primary-color);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/dist/stories/grid-setting.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-setting.stories.js","sourceRoot":"","sources":["../../stories/grid-setting.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\nimport { DataGrist } from '../src/index.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n          active: Math.round(Math.random() * 2) % 2 ? true : false,\n          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n          company:\n            idx % 2\n              ? {\n                  id: '2',\n                  name: 'HatioLAB',\n                  description: `경기도 성남시-${start + idx + 1}`\n                }\n              : {\n                  id: '3',\n                  name: 'HatioSEA',\n                  description: `말레이시아 세티아알람-${start + idx + 1}`\n                },\n          thumbnail:\n            idx % 4 === 0\n              ? '' /* no source */\n              : idx % 4 === 1\n                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n                : idx % 4 === 2\n                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n          role: ['admin', 'worker', 'tester'][idx % 3],\n          color: idx % 2 ? `#87f018` : `#180f87`,\n          rate: Math.round(Math.random() * 100),\n          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n          homepage:\n            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n          json5: {\n            abc: 'abc',\n            value: 123\n          },\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\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: 'gutter',\n      gutterName: 'button',\n      icon: 'edit',\n      title: 'edit',\n      handlers: {\n        click: function () {\n          console.log('clicked')\n        }\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'arrow_downward',\n      title: 'download',\n      handlers: {\n        click: 'move-down'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'link',\n      name: 'name',\n      label: true,\n      fixed: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          // href: 'http://hatiolab.com',\n          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n            return record['homepage']\n          },\n          target: '_blank'\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200,\n      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet\n    },\n    {\n      type: 'email',\n      name: 'email',\n      label: true,\n      header: 'email',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130,\n      validation: function (after, before, record, column) {\n        if (after.indexOf('@') == -1) {\n          document.dispatchEvent(\n            new CustomEvent('notify', {\n              detail: {\n                type: 'error',\n                message: `invalid value - ${after}`\n              }\n            })\n          )\n          return false\n        }\n        return true\n      } as ValidationCallback\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'select',\n      name: 'role',\n      label: true,\n      header: 'role',\n      record: {\n        options: ['', 'admin', 'worker', 'tester'],\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'color',\n      name: 'color',\n      header: 'color',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'float',\n      name: 'rate',\n      header: 'rate',\n      record: {\n        align: 'right',\n        editable: true,\n        defaultValue: 10000.1\n      },\n      filter: {\n        operator: 'between',\n        value: [1, 100]\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'json5',\n      name: 'json5',\n      header: 'JSON5',\n      width: 200\n    },\n    {\n      type: 'image',\n      name: 'thumbnail',\n      header: 'thumbnail',\n      record: {\n        editable: true\n      },\n      width: 120\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: {\n        operator: 'between',\n        type: 'datetime',\n        value: [\n          {\n            name: 'today',\n            params: {\n              type: 'datetime'\n            }\n          },\n          {\n            name: 'now',\n            params: {\n              type: 'datetime',\n              relativeDays: 1\n            }\n          }\n        ]\n      },\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'grid setting',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n  html` <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    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ox-filters-form {\n        --input-gap-vertical: 8px;\n        --input-gap-horizontal: 16px;\n\n        --ox-filters-input-placeholder-color: var(--primary-color);\n\n        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n        --ox-filters-input-focus-border: 1px solid var(--primary-color);\n        --ox-filters-input-font: normal 14px var(--theme-font);\n        --ox-filters-input-color: var(--primary-text-color);\n        --ox-filters-input-focus-color: var(--primary-color);\n        --ox-filters-label-font: normal 14px var(--theme-font);\n        --ox-filters-label-color: var(--primary-text-color);\n\n        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n        --ox-filters-input-padding: 6px 2px;\n      }\n    </style>\n\n    <style>\n      ox-grist {\n        width: 100%;\n        height: 600px;\n      }\n\n      [slot='headroom'] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n\n        --md-icon-size: 24px;\n      }\n      #sorters md-icon,\n      #modes md-icon {\n        --md-icon-size: 18px;\n      }\n      #sorters {\n        margin-left: auto;\n        margin-right: var(--margin-default);\n        padding-left: var(--padding-narrow);\n        border-bottom: var(--border-dark-color);\n        position: relative;\n        color: var(--secondary-color);\n        font-size: var(--fontsize-default);\n        user-select: none;\n      }\n\n      #sorters > * {\n        padding: var(--padding-narrow);\n        vertical-align: middle;\n      }\n\n      #modes > * {\n        padding: var(--padding-narrow);\n        opacity: 0.5;\n        color: var(--primary-text-color);\n        cursor: pointer;\n      }\n\n      #modes > md-icon[active] {\n        border-radius: 9px;\n        background-color: rgba(var(--primary-color-rgb), 0.05);\n        opacity: 1;\n        color: var(--secondary-text-color);\n        cursor: default;\n      }\n\n      #modes > md-icon:hover {\n        opacity: 1;\n        color: var(--secondary-text-color);\n      }\n\n      #add {\n        text-align: right;\n      }\n\n      #add button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background-color: var(--primary-color);\n        border: 0;\n        border-radius: 50%;\n        padding: 5px;\n        width: 32px;\n        height: 32px;\n        cursor: pointer;\n      }\n\n      #add button:hover {\n        background-color: var(--focus-background-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #add button md-icon {\n        font-size: 1.5em;\n        color: var(--theme-white-color);\n      }\n\n      #filters {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #filters * {\n        margin-right: var(--margin-default);\n      }\n\n      [slot='setting'] {\n        --md-icon-size: 18px;\n        position: absolute;\n        right: 0;\n        top: 2px;\n        color: rgba(var(--secondary-color-rgb), 0.8);\n        cursor: pointer;\n      }\n\n      [slot='setting']:hover {\n        color: var(--primary-color);\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n\n        #modes {\n          display: none;\n        }\n      }\n    </style>\n\n    <ox-grist\n      .config=${config}\n      .mode=${mode}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <div id=\"modes\">\n          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n\n      <md-icon\n        title=\"personal setting\"\n        slot=\"setting\"\n        @click=${(e: MouseEvent) => {\n          const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist\n          alert('setting clicked. will fetch again.')\n          grist?.fetch()\n        }}\n        >tune</md-icon\n      >\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}
+{"version":3,"file":"grid-setting.stories.js","sourceRoot":"","sources":["../../stories/grid-setting.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\nimport { DataGrist } from '../src/index.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n          active: Math.round(Math.random() * 2) % 2 ? true : false,\n          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n          company:\n            idx % 2\n              ? {\n                  id: '2',\n                  name: 'HatioLAB',\n                  description: `경기도 성남시-${start + idx + 1}`\n                }\n              : {\n                  id: '3',\n                  name: 'HatioSEA',\n                  description: `말레이시아 세티아알람-${start + idx + 1}`\n                },\n          thumbnail:\n            idx % 4 === 0\n              ? '' /* no source */\n              : idx % 4 === 1\n                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n                : idx % 4 === 2\n                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n          role: ['admin', 'worker', 'tester'][idx % 3],\n          color: idx % 2 ? `#87f018` : `#180f87`,\n          rate: Math.round(Math.random() * 100),\n          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n          homepage:\n            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n          json5: {\n            abc: 'abc',\n            value: 123\n          },\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\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: 'gutter',\n      gutterName: 'button',\n      icon: 'edit',\n      title: 'edit',\n      handlers: {\n        click: function () {\n          console.log('clicked')\n        }\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'arrow_downward',\n      title: 'download',\n      handlers: {\n        click: 'move-down'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'link',\n      name: 'name',\n      label: true,\n      fixed: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          // href: 'http://hatiolab.com',\n          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n            return record['homepage']\n          },\n          target: '_blank'\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200,\n      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet\n    },\n    {\n      type: 'email',\n      name: 'email',\n      label: true,\n      header: 'email',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130,\n      validation: function (after, before, record, column) {\n        if (after.indexOf('@') == -1) {\n          document.dispatchEvent(\n            new CustomEvent('notify', {\n              detail: {\n                type: 'error',\n                message: `invalid value - ${after}`\n              }\n            })\n          )\n          return false\n        }\n        return true\n      } as ValidationCallback\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'select',\n      name: 'role',\n      label: true,\n      header: 'role',\n      record: {\n        options: ['', 'admin', 'worker', 'tester'],\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'color',\n      name: 'color',\n      header: 'color',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'float',\n      name: 'rate',\n      header: 'rate',\n      record: {\n        align: 'right',\n        editable: true,\n        defaultValue: 10000.1\n      },\n      filter: {\n        operator: 'between',\n        value: [1, 100]\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'json5',\n      name: 'json5',\n      header: 'JSON5',\n      width: 200\n    },\n    {\n      type: 'image',\n      name: 'thumbnail',\n      header: 'thumbnail',\n      record: {\n        editable: true\n      },\n      width: 120\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: {\n        operator: 'between',\n        type: 'datetime',\n        value: [\n          {\n            name: 'today',\n            params: {\n              type: 'datetime'\n            }\n          },\n          {\n            name: 'now',\n            params: {\n              type: 'datetime',\n              relativeDays: 1\n            }\n          }\n        ]\n      },\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: 'grid setting',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n  html` <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    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      .config=${config}\n      .mode=${mode}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <div id=\"modes\">\n          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n\n      <md-icon\n        title=\"personal setting\"\n        slot=\"setting\"\n        @click=${(e: MouseEvent) => {\n          const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist\n          alert('setting clicked. will fetch again.')\n          grist?.fetch()\n        }}\n        >tune</md-icon\n      >\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}

package/dist/stories/grist-modes.stories.js

@@ -5,6 +5,7 @@ import '../src/record-view/record-creator.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 const fetchHandler = async ({ page, limit }) => {
     var total = 120993;
     var start = (page - 1) * limit;
@@ -338,128 +339,8 @@ const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHand
     <link href="/themes/grist-theme.css" rel="stylesheet" />
 
     <style>
-      ox-filters-form {
-        --input-gap-vertical: 8px;
-        --input-gap-horizontal: 16px;
-
-        --ox-filters-input-placeholder-color: var(--primary-color);
-
-        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
-        --ox-filters-input-focus-border: 1px solid var(--primary-color);
-        --ox-filters-input-font: normal 14px var(--theme-font);
-        --ox-filters-input-color: var(--primary-text-color);
-        --ox-filters-input-focus-color: var(--primary-color);
-        --ox-filters-label-font: normal 14px var(--theme-font);
-        --ox-filters-label-color: var(--primary-text-color);
-
-        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-        --ox-filters-input-padding: 6px 2px;
-      }
-    </style>
-
-    <style>
-      ox-grist {
-        width: 100%;
-        height: 600px;
-      }
-
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --md-icon-size: 24px;
-      }
-      #sorters md-icon,
-      #modes md-icon {
-        --md-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
-      #modes > * {
-        padding: var(--padding-narrow);
-        opacity: 0.5;
-        color: var(--primary-text-color);
-        cursor: pointer;
-      }
-
-      #modes > md-icon[active] {
-        border-radius: 9px;
-        background-color: rgba(var(--primary-color-rgb), 0.05);
-        opacity: 1;
-        color: var(--secondary-text-color);
-        cursor: default;
-      }
-
-      #modes > md-icon:hover {
-        opacity: 1;
-        color: var(--secondary-text-color);
-      }
-
-      #add {
-        text-align: right;
-      }
-
-      #add button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        background-color: var(--primary-color);
-        border: 0;
-        border-radius: 50%;
-        padding: 5px;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-      }
-
-      #add button:hover {
-        background-color: var(--focus-background-color);
-        box-shadow: var(--box-shadow);
-      }
-
-      #add button md-icon {
-        font-size: 1.5em;
-        color: var(--theme-white-color);
-      }
-
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
-      }
-
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
-      }
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
     <ox-grist

package/dist/stories/grist-modes.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"grist-modes.stories.js","sourceRoot":"","sources":["../../stories/grist-modes.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n          active: Math.round(Math.random() * 2) % 2 ? true : false,\n          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n          company:\n            idx % 2\n              ? {\n                  id: '2',\n                  name: 'HatioLAB',\n                  description: `경기도 성남시-${start + idx + 1}`\n                }\n              : {\n                  id: '3',\n                  name: 'HatioSEA',\n                  description: `말레이시아 세티아알람-${start + idx + 1}`\n                },\n          thumbnail:\n            idx % 4 === 0\n              ? '' /* no source */\n              : idx % 4 === 1\n                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n                : idx % 4 === 2\n                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n          role: ['admin', 'worker', 'tester'][idx % 3],\n          color: idx % 2 ? `#87f018` : `#180f87`,\n          rate: Math.round(Math.random() * 100),\n          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n          homepage:\n            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n          json5: {\n            abc: 'abc',\n            value: 123\n          },\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\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: 'gutter',\n      gutterName: 'button',\n      icon: 'edit',\n      title: 'edit',\n      handlers: {\n        click: function () {\n          console.log('clicked')\n        }\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'arrow_downward',\n      title: 'download',\n      handlers: {\n        click: 'move-down'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'link',\n      name: 'name',\n      label: true,\n      fixed: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          // href: 'http://hatiolab.com',\n          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n            return record['homepage']\n          },\n          target: '_blank'\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200,\n      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet\n    },\n    {\n      type: 'email',\n      name: 'email',\n      label: true,\n      header: 'email',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130,\n      validation: function (after, before, record, column) {\n        if (after.indexOf('@') == -1) {\n          document.dispatchEvent(\n            new CustomEvent('notify', {\n              detail: {\n                type: 'error',\n                message: `invalid value - ${after}`\n              }\n            })\n          )\n          return false\n        }\n        return true\n      } as ValidationCallback\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'select',\n      name: 'role',\n      label: true,\n      header: 'role',\n      record: {\n        options: ['', 'admin', 'worker', 'tester'],\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'color',\n      name: 'color',\n      header: 'color',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'float',\n      name: 'rate',\n      header: 'rate',\n      record: {\n        align: 'right',\n        editable: true,\n        defaultValue: 10000.1\n      },\n      filter: {\n        operator: 'between',\n        value: [1, 100]\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'json5',\n      name: 'json5',\n      header: 'JSON5',\n      width: 200\n    },\n    {\n      type: 'image',\n      name: 'thumbnail',\n      header: 'thumbnail',\n      record: {\n        editable: true\n      },\n      width: 120\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: {\n        operator: 'between',\n        type: 'datetime',\n        value: [\n          {\n            name: 'today',\n            params: {\n              type: 'datetime'\n            }\n          },\n          {\n            name: 'now',\n            params: {\n              type: 'datetime',\n              relativeDays: 1\n            }\n          }\n        ]\n      },\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: '3 modes in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n  html` <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    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ox-filters-form {\n        --input-gap-vertical: 8px;\n        --input-gap-horizontal: 16px;\n\n        --ox-filters-input-placeholder-color: var(--primary-color);\n\n        --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n        --ox-filters-input-focus-border: 1px solid var(--primary-color);\n        --ox-filters-input-font: normal 14px var(--theme-font);\n        --ox-filters-input-color: var(--primary-text-color);\n        --ox-filters-input-focus-color: var(--primary-color);\n        --ox-filters-label-font: normal 14px var(--theme-font);\n        --ox-filters-label-color: var(--primary-text-color);\n\n        --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n        --ox-filters-input-padding: 6px 2px;\n      }\n    </style>\n\n    <style>\n      ox-grist {\n        width: 100%;\n        height: 600px;\n      }\n\n      [slot='headroom'] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: var(--padding-default) var(--padding-wide);\n        background-color: var(--theme-white-color);\n        box-shadow: var(--box-shadow);\n\n        --md-icon-size: 24px;\n      }\n      #sorters md-icon,\n      #modes md-icon {\n        --md-icon-size: 18px;\n      }\n      #sorters {\n        margin-left: auto;\n        margin-right: var(--margin-default);\n        padding-left: var(--padding-narrow);\n        border-bottom: var(--border-dark-color);\n        position: relative;\n        color: var(--secondary-color);\n        font-size: var(--fontsize-default);\n        user-select: none;\n      }\n\n      #sorters > * {\n        padding: var(--padding-narrow);\n        vertical-align: middle;\n      }\n\n      #modes > * {\n        padding: var(--padding-narrow);\n        opacity: 0.5;\n        color: var(--primary-text-color);\n        cursor: pointer;\n      }\n\n      #modes > md-icon[active] {\n        border-radius: 9px;\n        background-color: rgba(var(--primary-color-rgb), 0.05);\n        opacity: 1;\n        color: var(--secondary-text-color);\n        cursor: default;\n      }\n\n      #modes > md-icon:hover {\n        opacity: 1;\n        color: var(--secondary-text-color);\n      }\n\n      #add {\n        text-align: right;\n      }\n\n      #add button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        background-color: var(--primary-color);\n        border: 0;\n        border-radius: 50%;\n        padding: 5px;\n        width: 32px;\n        height: 32px;\n        cursor: pointer;\n      }\n\n      #add button:hover {\n        background-color: var(--focus-background-color);\n        box-shadow: var(--box-shadow);\n      }\n\n      #add button md-icon {\n        font-size: 1.5em;\n        color: var(--theme-white-color);\n      }\n\n      #filters {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #filters * {\n        margin-right: var(--margin-default);\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n\n        #modes {\n          display: none;\n        }\n      }\n    </style>\n\n    <ox-grist\n      .config=${config}\n      .mode=${mode}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <div id=\"modes\">\n          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}
+{"version":3,"file":"grist-modes.stories.js","sourceRoot":"","sources":["../../stories/grist-modes.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(limit! * page! > total ? total % limit! : limit)\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(idx),\n          name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n          description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n          email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n          active: Math.round(Math.random() * 2) % 2 ? true : false,\n          barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n          company:\n            idx % 2\n              ? {\n                  id: '2',\n                  name: 'HatioLAB',\n                  description: `경기도 성남시-${start + idx + 1}`\n                }\n              : {\n                  id: '3',\n                  name: 'HatioSEA',\n                  description: `말레이시아 세티아알람-${start + idx + 1}`\n                },\n          thumbnail:\n            idx % 4 === 0\n              ? '' /* no source */\n              : idx % 4 === 1\n                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n                : idx % 4 === 2\n                  ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n                  : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n          role: ['admin', 'worker', 'tester'][idx % 3],\n          color: idx % 2 ? `#87f018` : `#180f87`,\n          rate: Math.round(Math.random() * 100),\n          dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n          dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n          homepage:\n            idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n          json5: {\n            abc: 'abc',\n            value: 123\n          },\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\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: 'gutter',\n      gutterName: 'button',\n      icon: 'edit',\n      title: 'edit',\n      handlers: {\n        click: function () {\n          console.log('clicked')\n        }\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'arrow_downward',\n      title: 'download',\n      handlers: {\n        click: 'move-down'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'link',\n      name: 'name',\n      label: true,\n      fixed: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          // href: 'http://hatiolab.com',\n          href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n            return record['homepage']\n          },\n          target: '_blank'\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200,\n      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet\n    },\n    {\n      type: 'email',\n      name: 'email',\n      label: true,\n      header: 'email',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 130,\n      validation: function (after, before, record, column) {\n        if (after.indexOf('@') == -1) {\n          document.dispatchEvent(\n            new CustomEvent('notify', {\n              detail: {\n                type: 'error',\n                message: `invalid value - ${after}`\n              }\n            })\n          )\n          return false\n        }\n        return true\n      } as ValidationCallback\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'select',\n      name: 'role',\n      label: true,\n      header: 'role',\n      record: {\n        options: ['', 'admin', 'worker', 'tester'],\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 120\n    },\n    {\n      type: 'color',\n      name: 'color',\n      header: 'color',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'float',\n      name: 'rate',\n      header: 'rate',\n      record: {\n        align: 'right',\n        editable: true,\n        defaultValue: 10000.1\n      },\n      filter: {\n        operator: 'between',\n        value: [1, 100]\n      },\n      sortable: true,\n      width: 50\n    },\n    {\n      type: 'json5',\n      name: 'json5',\n      header: 'JSON5',\n      width: 200\n    },\n    {\n      type: 'image',\n      name: 'thumbnail',\n      header: 'thumbnail',\n      record: {\n        editable: true\n      },\n      width: 120\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: {\n        operator: 'between',\n        type: 'datetime',\n        value: [\n          {\n            name: 'today',\n            params: {\n              type: 'datetime'\n            }\n          },\n          {\n            name: 'now',\n            params: {\n              type: 'datetime',\n              relativeDays: 1\n            }\n          }\n        ]\n      },\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  }\n}\n\nexport default {\n  title: '3 modes in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  mode: string\n  urlParamsSensitive: boolean\n  fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n  html` <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    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <ox-grist\n      .config=${config}\n      .mode=${mode}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <div id=\"modes\">\n          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config,\n  fetchHandler,\n  mode: 'GRID'\n}\n"]}