npm - @operato/data-grist - Versions diffs - 8.0.0 → 9.0.0-beta.10 - Mend

@operato/data-grist 8.0.0 → 9.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (309) hide show

package/dist/stories/default-filters.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default-filters.stories.js","sourceRoot":"","sources":["../../stories/default-filters.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAClF,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,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;gBAC1C,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,SAAS,WAAW,CAAC,EAAE,YAAY,EAA6B;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;YAC/B,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;SACpC;QACD,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,UAAU;aACvB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,IAAI;aACb;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,OAAO;iBACf;gBACD,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,aAAa;gBACnB,MAAM,EAAE,aAAa;gBACrB,MAAM,EAAE;oBACN,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,QAAQ;iBAChB;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;iBACd;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,KAAK;gBACb,MAAM,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,KAAK,EAAE;wBACL;4BACE,IAAI,EAAE,OAAO;4BACb,MAAM,EAAE;gCACN,YAAY,EAAE,CAAC,CAAC;gCAChB,QAAQ,EAAE,YAAY;gCACtB,MAAM,EAAE,YAAY;6BACrB;yBACF;wBACD;4BACE,IAAI,EAAE,OAAO;4BACb,MAAM,EAAE;gCACN,YAAY,EAAE,CAAC;gCACf,QAAQ,EAAE,YAAY;gCACtB,MAAM,EAAE,OAAO,CAAC,yBAAyB;gCACzC,MAAM,EAAE;oCACN,IAAI,EAAE,SAAS;oCACf,KAAK,EAAE,SAAS;oCAChB,GAAG,EAAE,SAAS;iCACf;6BACF;yBACF;qBACF;iBACF;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;iBACd;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,YAAY;gBACpB,MAAM,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,KAAK,EAAE;wBACL,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBAC/C,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;qBAChD;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,GAAG;aACX;SACF;QACD,IAAI,EAAE,EAAE;QACR,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI;aACX;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,YAAY;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;SAC1B;KACF,CAAA;AACH,CAAC;AAED,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACrC;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,YAAY,EAAY,EAAE,EAAE,CAC/D,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;QAqBE,iBAAiB,CAAC,OAAO;;;;QAIzB,iBAAiB,CAAC,OAAO;QACzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;gBAclB,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;;sBAEvB,YAAY;wBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;;;uBAShE,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;;;;;;;;;gBASC,CAAA;AAEhB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,IAAI;CACnB,CAAA","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { FetchHandler } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, 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 due: idx % 2 ? '2024-01-01' : '2024-02-01',\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n return {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\n filter: {\n operator: 'eq',\n value: 'shnam'\n },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: {\n operator: 'like',\n value: 'hahaha'\n },\n record: {\n align: 'left'\n },\n width: 200\n },\n {\n type: 'date',\n name: 'due',\n header: 'due',\n filter: {\n operator: 'between',\n value: [\n {\n name: 'today',\n params: {\n relativeDays: -2,\n timeZone: 'Asia/Seoul',\n format: 'YYYY-MM-DD'\n }\n },\n {\n name: 'today',\n params: {\n relativeDays: 1,\n timeZone: 'Asia/Seoul',\n locale: 'en-CA' /* 'YYYY-MM-DD' format */,\n format: {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit'\n }\n }\n }\n ]\n },\n record: {\n align: 'left'\n },\n width: 120\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n filter: {\n operator: 'between',\n value: [\n { name: 'week', params: { relativeWeeks: -1 } },\n { name: 'today', params: { relativeDays: +1 } }\n ]\n },\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n width: 180\n }\n ],\n rows: {},\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n filters: {\n header: headerFilter\n },\n pagination: {\n pages: [30, 50, 100, 200]\n }\n }\n}\n\nexport default {\n title: 'default filters for ox-grist',\n component: 'ox-grist',\n argTypes: {\n headerFilter: { 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 headerFilter: boolean\n theme?: 'light' \| 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${buildConfig({ headerFilter })}\n mode=\"GRID\"\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n headerFilter: true\n}\n"]}
1	+ {"version":3,"file":"default-filters.stories.js","sourceRoot":"","sources":["../../stories/default-filters.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 '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { FetchHandler } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, 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 due: idx % 2 ? '2024-01-01' : '2024-02-01',\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n return {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\n filter: {\n operator: 'eq',\n value: 'shnam'\n },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: {\n operator: 'like',\n value: 'hahaha'\n },\n record: {\n align: 'left'\n },\n width: 200\n },\n {\n type: 'date',\n name: 'due',\n header: 'due',\n filter: {\n operator: 'between',\n value: [\n {\n name: 'today',\n params: {\n relativeDays: -2,\n timeZone: 'Asia/Seoul',\n format: 'YYYY-MM-DD'\n }\n },\n {\n name: 'today',\n params: {\n relativeDays: 1,\n timeZone: 'Asia/Seoul',\n locale: 'en-CA' /* 'YYYY-MM-DD' format */,\n format: {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit'\n }\n }\n }\n ]\n },\n record: {\n align: 'left'\n },\n width: 120\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n filter: {\n operator: 'between',\n value: [\n { name: 'week', params: { relativeWeeks: -1 } },\n { name: 'today', params: { relativeDays: +1 } }\n ]\n },\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n width: 180\n }\n ],\n rows: {},\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n filters: {\n header: headerFilter\n },\n pagination: {\n pages: [30, 50, 100, 200]\n }\n }\n}\n\nexport default {\n title: 'default filters for ox-grist',\n component: 'ox-grist',\n argTypes: {\n headerFilter: { 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 headerFilter: boolean\n theme?: 'light' \| 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${buildConfig({ headerFilter })}\n mode=\"GRID\"\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n headerFilter: true\n}\n"]}

package/dist/stories/dynamic-editable.stories.js CHANGED Viewed

@@ -4,7 +4,7 @@ import '../src/sorters/sorters-control.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 const fetchHandler = async ({ sorters = [], filters, page, limit }) => {
     var total = 5;

package/dist/stories/dynamic-editable.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic-editable.stories.js","sourceRoot":"","sources":["../../stories/dynamic-editable.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 '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n var total = 5\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 number: idx,\n float: 1.3,\n date: '2023-09-20',\n active: idx % 2 === 0,\n role: 'admin',\n routing: {\n id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',\n name: '조림>세척'\n },\n updatedAt: Date.now()\n }\n })\n }\n}\n\n// 그리드 필드에 들어오는 값: string, number, date, checkbox(boolean), object, image(url)\n// 입력되는 케이스: 뷰 상태에서 입력, 에딧 상태에서 입력, 그리드 복붙, 엑셀 복붙\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n return {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\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: 'string',\n name: 'name',\n label: true,\n header: 'name',\n filter: {\n operator: 'eq',\n value: 'shnam'\n },\n record: {\n editable: true\n },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: {\n operator: 'like',\n value: 'hahaha'\n },\n record: {\n align: 'left',\n editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n return record?.name !== 'heartyoh-3'\n }\n },\n width: 200\n },\n {\n type: 'checkbox',\n name: 'chk',\n header: 'chk',\n record: {\n editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n return record?.name !== 'heartyoh-3'\n }\n },\n width: 40\n },\n {\n type: 'number',\n name: 'number',\n header: 'number',\n record: {\n editable: true,\n handlers: {\n change: () => {\n console.log('dblclick333')\n }\n }\n },\n width: 80\n },\n {\n type: 'float',\n name: 'float',\n header: 'float',\n record: {\n editable: true\n },\n width: 80\n },\n {\n type: 'date',\n name: 'date',\n header: 'date',\n width: 120\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: {\n value: 'false'\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 options: [\n { display: 'admin', value: 'admin' },\n { display: 'worker', value: 'worker' },\n { display: 'tester', value: 'tester' }\n ],\n editable: true\n },\n filter: {\n operator: 'in',\n value: ['worker']\n },\n sortable: true,\n width: 120\n },\n {\n type: 'object',\n name: 'routing',\n header: 'routing',\n record: { editable: true, options: { queryName: 'routings' }, mandatory: true },\n width: 180\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: false\n },\n handlers: {\n click: 'select-row',\n dblclick: () => {\n console.log('dblclick333')\n }\n },\n appendable: false\n },\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n filters: {\n header: headerFilter\n },\n pagination: {\n pages: [30, 50, 100, 200]\n }\n }\n}\n\nexport default {\n title: 'dynamic-editable for ox-grist',\n component: 'ox-grist',\n argTypes: {\n headerFilter: { 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 headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${buildConfig({ headerFilter })}\n mode=\"GRID\"\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n @field-change=${(e: any) => {\n const { name, number, chk } = e.detail.record\n console.log(name, number, chk)\n }}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
1	+ {"version":3,"file":"dynamic-editable.stories.js","sourceRoot":"","sources":["../../stories/dynamic-editable.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 '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n var total = 5\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 number: idx,\n float: 1.3,\n date: '2023-09-20',\n active: idx % 2 === 0,\n role: 'admin',\n routing: {\n id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',\n name: '조림>세척'\n },\n updatedAt: Date.now()\n }\n })\n }\n}\n\n// 그리드 필드에 들어오는 값: string, number, date, checkbox(boolean), object, image(url)\n// 입력되는 케이스: 뷰 상태에서 입력, 에딧 상태에서 입력, 그리드 복붙, 엑셀 복붙\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\n return {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\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: 'string',\n name: 'name',\n label: true,\n header: 'name',\n filter: {\n operator: 'eq',\n value: 'shnam'\n },\n record: {\n editable: true\n },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: {\n operator: 'like',\n value: 'hahaha'\n },\n record: {\n align: 'left',\n editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n return record?.name !== 'heartyoh-3'\n }\n },\n width: 200\n },\n {\n type: 'checkbox',\n name: 'chk',\n header: 'chk',\n record: {\n editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n return record?.name !== 'heartyoh-3'\n }\n },\n width: 40\n },\n {\n type: 'number',\n name: 'number',\n header: 'number',\n record: {\n editable: true,\n handlers: {\n change: () => {\n console.log('dblclick333')\n }\n }\n },\n width: 80\n },\n {\n type: 'float',\n name: 'float',\n header: 'float',\n record: {\n editable: true\n },\n width: 80\n },\n {\n type: 'date',\n name: 'date',\n header: 'date',\n width: 120\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: {\n value: 'false'\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 options: [\n { display: 'admin', value: 'admin' },\n { display: 'worker', value: 'worker' },\n { display: 'tester', value: 'tester' }\n ],\n editable: true\n },\n filter: {\n operator: 'in',\n value: ['worker']\n },\n sortable: true,\n width: 120\n },\n {\n type: 'object',\n name: 'routing',\n header: 'routing',\n record: { editable: true, options: { queryName: 'routings' }, mandatory: true },\n width: 180\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: false\n },\n handlers: {\n click: 'select-row',\n dblclick: () => {\n console.log('dblclick333')\n }\n },\n appendable: false\n },\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n filters: {\n header: headerFilter\n },\n pagination: {\n pages: [30, 50, 100, 200]\n }\n }\n}\n\nexport default {\n title: 'dynamic-editable for ox-grist',\n component: 'ox-grist',\n argTypes: {\n headerFilter: { 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 headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${buildConfig({ headerFilter })}\n mode=\"GRID\"\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n @field-change=${(e: any) => {\n const { name, number, chk } = e.detail.record\n console.log(name, number, chk)\n }}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/empty-sorters.stories.js CHANGED Viewed

@@ -4,7 +4,7 @@ import '../src/sorters/sorters-control.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 const fetchHandler = async ({ filters, page, limit }) => {
     var total = 120993;

package/dist/stories/empty-sorters.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-sorters.stories.js","sourceRoot":"","sources":["../../stories/empty-sorters.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,~~8CAA8C~~,CAAA;~~AAG1F~~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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ filters, 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 createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\n filter: {\n operator: 'eq',\n value: 'shnam'\n },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: {\n operator: 'like',\n value: 'hahaha'\n },\n record: {\n align: 'left'\n },\n width: 200\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n width: 180\n }\n ],\n pagination: {\n pages: [30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'empty sorters for ox-grist',\n component: 'ox-grist',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${config}\n mode=\"GRID\"\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
1	+ {"version":3,"file":"empty-sorters.stories.js","sourceRoot":"","sources":["../../stories/empty-sorters.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 '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ filters, 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 createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\n filter: {\n operator: 'eq',\n value: 'shnam'\n },\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: {\n operator: 'like',\n value: 'hahaha'\n },\n record: {\n align: 'left'\n },\n width: 200\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n width: 180\n }\n ],\n pagination: {\n pages: [30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'empty sorters for ox-grist',\n component: 'ox-grist',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${config}\n mode=\"GRID\"\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/explicit-fetch.stories.js CHANGED Viewed

@@ -4,7 +4,7 @@ import '../src/sorters/sorters-control.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 const fetchHandler = async ({ page, limit }) => {
     var total = 120993;

package/dist/stories/explicit-fetch.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"explicit-fetch.stories.js","sourceRoot":"","sources":["../../stories/explicit-fetch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,~~8CAA8C~~,CAAA;~~AAG1F~~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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { FetchHandler } from '../src/types.js'\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 createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\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 align: 'left'\n },\n width: 200\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n width: 180\n }\n ],\n rows: {},\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n pagination: {\n pages: [30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'explicit-fetch attribute for ox-grist',\n component: 'ox-grist',\n argTypes: {\n explicitFetch: { 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 explicitFetch: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${config}\n mode=\"GRID\"\n ?explicit-fetch=${explicitFetch}\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n explicitFetch: true\n}\n"]}
1	+ {"version":3,"file":"explicit-fetch.stories.js","sourceRoot":"","sources":["../../stories/explicit-fetch.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 '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { FetchHandler } from '../src/types.js'\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 createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n fields: ['name', 'description'],\n details: ['updatedAt', 'createdAt']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: 'name',\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 align: 'left'\n },\n width: 200\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n width: 180\n }\n ],\n rows: {},\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n pagination: {\n pages: [30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'explicit-fetch attribute for ox-grist',\n component: 'ox-grist',\n argTypes: {\n explicitFetch: { 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 explicitFetch: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .config=${config}\n mode=\"GRID\"\n ?explicit-fetch=${explicitFetch}\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form></ox-filters-form>\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 </div>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n explicitFetch: true\n}\n"]}

package/dist/stories/fixed-column.stories.js CHANGED Viewed

@@ -5,7 +5,7 @@ import '../src/record-view/ox-record-creator.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 import { OxPrompt } from '@operato/popup';
 const fetchHandler = async ({ page, limit }) => {

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

	@@ -1 +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/ox-record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\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'\nimport { OxPrompt } from '@operato/popup'\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: (async (after, before, record, column) => {\n if (after.indexOf('@') == -1) {\n return await OxPrompt.open({\n title: '잘못된 이메일 포맷',\n text: '그래도 변경하시겠습니까?',\n cancelButton: { text: 'No' },\n confirmButton: { text: 'Yes' }\n })\n }\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: 'between',\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n record: {\n wide: true\n },\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true,\n wide: 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 href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\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\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\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 </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config\n}\n"]}
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/ox-record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\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'\nimport { OxPrompt } from '@operato/popup'\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: (async (after, before, record, column) => {\n if (after.indexOf('@') == -1) {\n return await OxPrompt.open({\n title: '잘못된 이메일 포맷',\n text: '그래도 변경하시겠습니까?',\n cancelButton: { text: 'No' },\n confirmButton: { text: 'Yes' }\n })\n }\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: 'between',\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n record: {\n wide: true\n },\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true,\n wide: 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 href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n ox-filters-form {\n flex: 1;\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\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\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 </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config\n}\n"]}

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

@@ -8,7 +8,7 @@ import '../src/record-view/ox-record-creator.js';
 import '../src/personalizer/ox-grist-personalizer.js';
 import '../src/personalizer/ox-grist-filter-personalizer.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 import { OxPrompt } from '@operato/popup';
 const fetchHandler = async ({ page, limit }) => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"grid-setting.stories.js","sourceRoot":"","sources":["../../stories/grid-setting.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { sleep } from '@operato/utils'\n\nimport '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/ox-record-creator.js'\nimport '../src/personalizer/ox-grist-personalizer.js'\nimport '../src/personalizer/ox-grist-filter-personalizer.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n PersonalGristPreference,\n ValidationCallback\n} from '../src/types.js'\nimport { OxPrompt } from '@operato/popup'\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: (async (after, before, record, column) => {\n if (after.indexOf('@') == -1) {\n return await OxPrompt.open({\n title: '잘못된 이메일 포맷',\n text: '그래도 변경하시겠습니까?',\n cancelButton: { text: 'No' },\n confirmButton: { text: 'Yes' }\n })\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 record: {\n wide: true\n },\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true,\n wide: 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 withoutSearch: { control: 'boolean' },\n debug: { 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: 'GRID' \| 'LIST' \| 'CARD'\n urlParamsSensitive: boolean\n withoutSearch: boolean\n fetchHandler: FetchHandler\n debug: boolean\n}\n\nvar personalConfig: PersonalGristPreference = {\n columns: [\n { name: 'name', hidden: false, width: 200 },\n { name: 'description', hidden: true }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200],\n limit: 30\n }\n}\n\nconst Template: Story<ArgTypes> = ({\n config,\n mode = 'GRID',\n urlParamsSensitive = false,\n withoutSearch = false,\n debug = false,\n fetchHandler\n}: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/material-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n flex: 1;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .mode=${mode}\n .config=${config}\n .fetchHandler=${fetchHandler}\n .personalConfigProvider=${{\n async load() {\n await sleep(1000)\n return personalConfig\n },\n async save(preference: PersonalGristPreference) {\n await sleep(1000)\n personalConfig = {\n ...personalConfig,\n ...preference\n }\n console.log('saving preference', personalConfig)\n return preference\n },\n async reset() {\n personalConfig = {}\n await sleep(1000)\n }\n }}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form autofocus ?without-search=${withoutSearch}>\n <ox-grist-filter-personalizer slot=\"setting\"></ox-grist-filter-personalizer>\n </ox-filters-form>\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 </div>\n\n <ox-grist-personalizer slot=\"setting\" ?debug=${debug}></ox-grist-personalizer>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}
1	+ {"version":3,"file":"grid-setting.stories.js","sourceRoot":"","sources":["../../stories/grid-setting.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { sleep } from '@operato/utils'\n\nimport '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/ox-record-creator.js'\nimport '../src/personalizer/ox-grist-personalizer.js'\nimport '../src/personalizer/ox-grist-filter-personalizer.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n PersonalGristPreference,\n ValidationCallback\n} from '../src/types.js'\nimport { OxPrompt } from '@operato/popup'\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: (async (after, before, record, column) => {\n if (after.indexOf('@') == -1) {\n return await OxPrompt.open({\n title: '잘못된 이메일 포맷',\n text: '그래도 변경하시겠습니까?',\n cancelButton: { text: 'No' },\n confirmButton: { text: 'Yes' }\n })\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 record: {\n wide: true\n },\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true,\n wide: 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 withoutSearch: { control: 'boolean' },\n debug: { 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: 'GRID' \| 'LIST' \| 'CARD'\n urlParamsSensitive: boolean\n withoutSearch: boolean\n fetchHandler: FetchHandler\n debug: boolean\n}\n\nvar personalConfig: PersonalGristPreference = {\n columns: [\n { name: 'name', hidden: false, width: 200 },\n { name: 'description', hidden: true }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200],\n limit: 30\n }\n}\n\nconst Template: Story<ArgTypes> = ({\n config,\n mode = 'GRID',\n urlParamsSensitive = false,\n withoutSearch = false,\n debug = false,\n fetchHandler\n}: ArgTypes) =>\n html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/material-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonGristStyles.cssText}\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n ox-grist {\n flex: 1;\n }\n\n ox-filters-form {\n flex: 1;\n }\n </style>\n\n <ox-grist\n .mode=${mode}\n .config=${config}\n .fetchHandler=${fetchHandler}\n .personalConfigProvider=${{\n async load() {\n await sleep(1000)\n return personalConfig\n },\n async save(preference: PersonalGristPreference) {\n await sleep(1000)\n personalConfig = {\n ...personalConfig,\n ...preference\n }\n console.log('saving preference', personalConfig)\n return preference\n },\n async reset() {\n personalConfig = {}\n await sleep(1000)\n }\n }}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <ox-filters-form autofocus ?without-search=${withoutSearch}>\n <ox-grist-filter-personalizer slot=\"setting\"></ox-grist-filter-personalizer>\n </ox-filters-form>\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 </div>\n\n <ox-grist-personalizer slot=\"setting\" ?debug=${debug}></ox-grist-personalizer>\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 CHANGED Viewed

@@ -5,7 +5,7 @@ import '../src/record-view/ox-record-creator.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 import { OxPrompt } from '@operato/popup';
 const fetchHandler = async ({ page, limit }) => {