@operato/data-grist 1.0.0-beta.8 → 1.0.1

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 (203) hide show
  1. package/.storybook/main.js +3 -0
  2. package/.storybook/server.mjs +8 -0
  3. package/CHANGELOG.md +411 -0
  4. package/demo/data-grist-test.html +1 -1
  5. package/demo/index.html +13 -2
  6. package/demo/report-test.html +1 -1
  7. package/dist/src/configure/zero-config.d.ts +2 -0
  8. package/dist/src/configure/zero-config.js +3 -1
  9. package/dist/src/configure/zero-config.js.map +1 -1
  10. package/dist/src/data-card/data-card-field.d.ts +1 -1
  11. package/dist/src/data-card/data-card-field.js +3 -2
  12. package/dist/src/data-card/data-card-field.js.map +1 -1
  13. package/dist/src/data-card/data-card.js +1 -0
  14. package/dist/src/data-card/data-card.js.map +1 -1
  15. package/dist/src/data-grid/data-grid-body.d.ts +4 -2
  16. package/dist/src/data-grid/data-grid-body.js +74 -40
  17. package/dist/src/data-grid/data-grid-body.js.map +1 -1
  18. package/dist/src/data-grid/data-grid-field.d.ts +1 -1
  19. package/dist/src/data-grid/data-grid-field.js +1 -1
  20. package/dist/src/data-grid/data-grid-field.js.map +1 -1
  21. package/dist/src/data-grid/data-grid-footer.d.ts +2 -2
  22. package/dist/src/data-grid/data-grid-footer.js +9 -10
  23. package/dist/src/data-grid/data-grid-footer.js.map +1 -1
  24. package/dist/src/data-grid/data-grid-header.d.ts +4 -6
  25. package/dist/src/data-grid/data-grid-header.js +39 -48
  26. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  27. package/dist/src/data-grid/data-grid.d.ts +2 -2
  28. package/dist/src/data-grid/data-grid.js +4 -3
  29. package/dist/src/data-grid/data-grid.js.map +1 -1
  30. package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js +9 -11
  31. package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js.map +1 -1
  32. package/dist/src/data-grist.d.ts +7 -5
  33. package/dist/src/data-grist.js +154 -112
  34. package/dist/src/data-grist.js.map +1 -1
  35. package/dist/src/data-list/record-partial.js +1 -5
  36. package/dist/src/data-list/record-partial.js.map +1 -1
  37. package/dist/src/data-manipulator.d.ts +4 -1
  38. package/dist/src/data-manipulator.js +12 -0
  39. package/dist/src/data-manipulator.js.map +1 -1
  40. package/dist/src/data-provider.d.ts +4 -6
  41. package/dist/src/data-provider.js +12 -23
  42. package/dist/src/data-provider.js.map +1 -1
  43. package/dist/src/data-report/data-report-body.d.ts +1 -1
  44. package/dist/src/data-report/data-report-body.js +4 -4
  45. package/dist/src/data-report/data-report-body.js.map +1 -1
  46. package/dist/src/data-report/data-report-header.js +4 -4
  47. package/dist/src/data-report/data-report-header.js.map +1 -1
  48. package/dist/src/editors/ox-grist-editor.d.ts +1 -1
  49. package/dist/src/editors/ox-grist-editor.js +7 -4
  50. package/dist/src/editors/ox-grist-editor.js.map +1 -1
  51. package/dist/src/filters/filter-checkbox.d.ts +1 -1
  52. package/dist/src/filters/filter-checkbox.js +1 -1
  53. package/dist/src/filters/filter-checkbox.js.map +1 -1
  54. package/dist/src/filters/filter-input-barcode.d.ts +3 -0
  55. package/dist/src/filters/filter-input-barcode.js +27 -0
  56. package/dist/src/filters/filter-input-barcode.js.map +1 -0
  57. package/dist/src/filters/filter-input.js +1 -1
  58. package/dist/src/filters/filter-input.js.map +1 -1
  59. package/dist/src/filters/filter-styles.js +65 -17
  60. package/dist/src/filters/filter-styles.js.map +1 -1
  61. package/dist/src/filters/filters-form.js +16 -15
  62. package/dist/src/filters/filters-form.js.map +1 -1
  63. package/dist/src/filters/registry.d.ts +1 -1
  64. package/dist/src/filters/registry.js +10 -7
  65. package/dist/src/filters/registry.js.map +1 -1
  66. package/dist/src/gutters/gutter-button.js +5 -4
  67. package/dist/src/gutters/gutter-button.js.map +1 -1
  68. package/dist/src/gutters/gutter-dirty.d.ts +5 -1
  69. package/dist/src/gutters/gutter-dirty.js +17 -2
  70. package/dist/src/gutters/gutter-dirty.js.map +1 -1
  71. package/dist/src/gutters/gutter-row-selector.js +2 -1
  72. package/dist/src/gutters/gutter-row-selector.js.map +1 -1
  73. package/dist/src/gutters/gutter-sequence.js +15 -0
  74. package/dist/src/gutters/gutter-sequence.js.map +1 -1
  75. package/dist/src/record-view/event-handlers/record-view-body-click-handler.js +2 -4
  76. package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map +1 -1
  77. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js +2 -2
  78. package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map +1 -1
  79. package/dist/src/record-view/record-creator.js +0 -2
  80. package/dist/src/record-view/record-creator.js.map +1 -1
  81. package/dist/src/record-view/record-view-body.d.ts +0 -1
  82. package/dist/src/record-view/record-view-body.js +0 -5
  83. package/dist/src/record-view/record-view-body.js.map +1 -1
  84. package/dist/src/record-view/record-view-handler.d.ts +1 -1
  85. package/dist/src/record-view/record-view.d.ts +0 -1
  86. package/dist/src/record-view/record-view.js +1 -10
  87. package/dist/src/record-view/record-view.js.map +1 -1
  88. package/dist/src/renderers/ox-grist-renderer-color.js +1 -1
  89. package/dist/src/renderers/ox-grist-renderer-color.js.map +1 -1
  90. package/dist/src/renderers/ox-grist-renderer-json5.js +1 -1
  91. package/dist/src/renderers/ox-grist-renderer-json5.js.map +1 -1
  92. package/dist/src/renderers/ox-grist-renderer-link.js +1 -1
  93. package/dist/src/renderers/ox-grist-renderer-link.js.map +1 -1
  94. package/dist/src/renderers/ox-grist-renderer-select.js +2 -2
  95. package/dist/src/renderers/ox-grist-renderer-select.js.map +1 -1
  96. package/dist/src/renderers/ox-grist-renderer-text.js +6 -2
  97. package/dist/src/renderers/ox-grist-renderer-text.js.map +1 -1
  98. package/dist/src/sorters/sorters-control.d.ts +1 -1
  99. package/dist/src/sorters/sorters-control.js +5 -7
  100. package/dist/src/sorters/sorters-control.js.map +1 -1
  101. package/dist/src/types.d.ts +7 -4
  102. package/dist/src/types.js.map +1 -1
  103. package/dist/stories/{index.stories.d.ts → barcode-input-filter.stories.d.ts} +9 -13
  104. package/dist/stories/barcode-input-filter.stories.js +200 -0
  105. package/dist/stories/barcode-input-filter.stories.js.map +1 -0
  106. package/dist/stories/default-filters.stories.d.ts +20 -0
  107. package/dist/stories/default-filters.stories.js +187 -0
  108. package/dist/stories/default-filters.stories.js.map +1 -0
  109. package/dist/stories/empty-sorters.stories.d.ts +20 -0
  110. package/dist/stories/empty-sorters.stories.js +180 -0
  111. package/dist/stories/empty-sorters.stories.js.map +1 -0
  112. package/dist/stories/explicit-fetch.stories.d.ts +25 -0
  113. package/dist/stories/explicit-fetch.stories.js +186 -0
  114. package/dist/stories/explicit-fetch.stories.js.map +1 -0
  115. package/dist/stories/grist-modes.stories.d.ts +36 -0
  116. package/dist/stories/grist-modes.stories.js +448 -0
  117. package/dist/stories/grist-modes.stories.js.map +1 -0
  118. package/dist/tsconfig.tsbuildinfo +1 -1
  119. package/package.json +11 -11
  120. package/src/configure/zero-config.ts +4 -1
  121. package/src/data-card/data-card-field.ts +5 -3
  122. package/src/data-card/data-card.ts +1 -0
  123. package/src/data-grid/data-grid-body.ts +96 -49
  124. package/src/data-grid/data-grid-field.ts +3 -2
  125. package/src/data-grid/data-grid-footer.ts +8 -9
  126. package/src/data-grid/data-grid-header.ts +38 -47
  127. package/src/data-grid/data-grid.ts +8 -6
  128. package/src/data-grid/event-handlers/data-grid-body-click-handler.ts +11 -13
  129. package/src/data-grist.ts +179 -130
  130. package/src/data-list/record-partial.ts +1 -5
  131. package/src/data-manipulator.ts +12 -1
  132. package/src/data-provider.ts +13 -29
  133. package/src/data-report/data-report-body.ts +5 -5
  134. package/src/data-report/data-report-header.ts +5 -5
  135. package/src/editors/ox-grist-editor.ts +8 -5
  136. package/src/filters/filter-checkbox.ts +3 -3
  137. package/src/filters/filter-input-barcode.ts +33 -0
  138. package/src/filters/filter-input.ts +3 -3
  139. package/src/filters/filter-styles.ts +65 -17
  140. package/src/filters/filters-form.ts +19 -15
  141. package/src/filters/registry.ts +11 -8
  142. package/src/gutters/gutter-button.ts +5 -4
  143. package/src/gutters/gutter-dirty.ts +21 -3
  144. package/src/gutters/gutter-row-selector.ts +2 -1
  145. package/src/gutters/gutter-sequence.ts +18 -2
  146. package/src/record-view/event-handlers/record-view-body-click-handler.ts +2 -4
  147. package/src/record-view/event-handlers/record-view-body-keydown-handler.ts +2 -2
  148. package/src/record-view/record-creator.ts +0 -2
  149. package/src/record-view/record-view-body.ts +0 -2
  150. package/src/record-view/record-view.ts +1 -7
  151. package/src/renderers/ox-grist-renderer-color.ts +3 -2
  152. package/src/renderers/ox-grist-renderer-json5.ts +3 -2
  153. package/src/renderers/ox-grist-renderer-link.ts +3 -2
  154. package/src/renderers/ox-grist-renderer-select.ts +2 -2
  155. package/src/renderers/ox-grist-renderer-text.ts +8 -2
  156. package/src/sorters/sorters-control.ts +6 -9
  157. package/src/types.ts +8 -4
  158. package/stories/barcode-input-filter.stories.ts +220 -0
  159. package/stories/default-filters.stories.ts +204 -0
  160. package/stories/empty-sorters.stories.ts +197 -0
  161. package/stories/explicit-fetch.stories.ts +205 -0
  162. package/stories/grist-modes.stories.ts +488 -0
  163. package/themes/form-theme.css +75 -0
  164. package/themes/grist-theme.css +1 -1
  165. package/dist/src/editors/image-input.d.ts +0 -7
  166. package/dist/src/editors/image-input.js +0 -31
  167. package/dist/src/editors/image-input.js.map +0 -1
  168. package/dist/src/editors/input-editors.d.ts +0 -68
  169. package/dist/src/editors/input-editors.js +0 -329
  170. package/dist/src/editors/input-editors.js.map +0 -1
  171. package/dist/src/renderers/boolean-renderer.d.ts +0 -2
  172. package/dist/src/renderers/boolean-renderer.js +0 -30
  173. package/dist/src/renderers/boolean-renderer.js.map +0 -1
  174. package/dist/src/renderers/color-renderer.d.ts +0 -2
  175. package/dist/src/renderers/color-renderer.js +0 -6
  176. package/dist/src/renderers/color-renderer.js.map +0 -1
  177. package/dist/src/renderers/date-renderer.d.ts +0 -2
  178. package/dist/src/renderers/date-renderer.js +0 -52
  179. package/dist/src/renderers/date-renderer.js.map +0 -1
  180. package/dist/src/renderers/image-renderer.d.ts +0 -2
  181. package/dist/src/renderers/image-renderer.js +0 -24
  182. package/dist/src/renderers/image-renderer.js.map +0 -1
  183. package/dist/src/renderers/json5-renderer.d.ts +0 -2
  184. package/dist/src/renderers/json5-renderer.js +0 -7
  185. package/dist/src/renderers/json5-renderer.js.map +0 -1
  186. package/dist/src/renderers/link-renderer.d.ts +0 -2
  187. package/dist/src/renderers/link-renderer.js +0 -12
  188. package/dist/src/renderers/link-renderer.js.map +0 -1
  189. package/dist/src/renderers/password-renderer.d.ts +0 -2
  190. package/dist/src/renderers/password-renderer.js +0 -4
  191. package/dist/src/renderers/password-renderer.js.map +0 -1
  192. package/dist/src/renderers/progress-renderer.d.ts +0 -2
  193. package/dist/src/renderers/progress-renderer.js +0 -68
  194. package/dist/src/renderers/progress-renderer.js.map +0 -1
  195. package/dist/src/renderers/select-renderer.d.ts +0 -2
  196. package/dist/src/renderers/select-renderer.js +0 -15
  197. package/dist/src/renderers/select-renderer.js.map +0 -1
  198. package/dist/src/renderers/text-renderer.d.ts +0 -2
  199. package/dist/src/renderers/text-renderer.js +0 -6
  200. package/dist/src/renderers/text-renderer.js.map +0 -1
  201. package/dist/stories/index.stories.js +0 -33
  202. package/dist/stories/index.stories.js.map +0 -1
  203. package/stories/index.stories.ts +0 -52
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-renderer.js","sourceRoot":"","sources":["../../../src/renderers/date-renderer.ts"],"names":[],"mappings":"AAEA,kCAAkC;AAClC,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;IACd,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,SAAS;CACf,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,gBAAgB;IAC1B,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,YAAY;CACnB,CAAA;AAED,SAAS,MAAM,CAAC,IAAY;IAC1B,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IACzB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;AAC5E,CAAC;AAED;;;EAGE;AACF,MAAM,CAAC,MAAM,YAAY,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACpF,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAAE,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEhD,IAAI,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,IAAoC,CAAC,CAAA;IAC3F,IAAI,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAEpE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,UAAU;YACb,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAC1C,KAAK,MAAM;YACT,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAC1C,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst DATETIME_OPTIONS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n hour12: false\n}\n\nconst DATE_OPTIONS = {\n year: 'numeric',\n month: 'numeric',\n day: 'numeric'\n}\n\nconst TIME_OPTIONS = {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric'\n}\n\nconst OPTIONS = {\n datetime: DATETIME_OPTIONS,\n time: TIME_OPTIONS,\n date: DATE_OPTIONS\n}\n\nfunction getsec(time: string): number {\n var arr = time.split(':')\n return Number(arr[0]) * 3600 + Number(arr[1]) * 60 + (Number(arr[2]) || 0)\n}\n\n/* \n TODO date, time, month, week 등 datetime 이 외의 타입인 경우에는 문자열로 처리하도록 한다. \n 따라서, 이 경우는 타임존에 대한 처리가 불필요하다.\n*/\nexport const DateRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n if (!value) {\n return ''\n }\n\n if (!isNaN(Number(value))) value = Number(value)\n\n var options = column.record.options || OPTIONS[column.type as 'datetime' | 'date' | 'time']\n var formatter = new Intl.DateTimeFormat(navigator.language, options)\n\n switch (column.type) {\n case 'datetime':\n return formatter.format(new Date(value))\n case 'date':\n return formatter.format(new Date(value))\n case 'time':\n default:\n return value\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const ImageRenderer: FieldRenderer;
@@ -1,24 +0,0 @@
1
- import { html } from 'lit';
2
- const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href;
3
- export const ImageRenderer = (value, column, record, rowIndex, field) => {
4
- let src;
5
- if (!value) {
6
- src = IMAGE_FALLBACK;
7
- }
8
- else if (typeof value === 'string') {
9
- src = value;
10
- }
11
- else {
12
- src = URL.createObjectURL(value);
13
- requestAnimationFrame(() => URL.revokeObjectURL(src));
14
- }
15
- const { width, height } = column.record.options || {};
16
- return html ` <img
17
- src=${src}
18
- width=${width}
19
- height=${height}
20
- style="max-width: 100%;"
21
- onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
22
- />`;
23
- };
24
- //# sourceMappingURL=image-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"image-renderer.js","sourceRoot":"","sources":["../../../src/renderers/image-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3F,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,IAAI,GAAW,CAAA;IAEf,IAAI,CAAC,KAAK,EAAE;QACV,GAAG,GAAG,cAAc,CAAA;KACrB;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACpC,GAAG,GAAG,KAAK,CAAA;KACZ;SAAM;QACL,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;KACtD;IAED,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAErD,OAAO,IAAI,CAAA;UACH,GAAG;YACD,KAAK;aACJ,MAAM;;6BAEU,cAAc,qBAAqB,cAAc;KACzE,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types'\n\nconst IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href\n\nexport const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n let src: string\n\n if (!value) {\n src = IMAGE_FALLBACK\n } else if (typeof value === 'string') {\n src = value\n } else {\n src = URL.createObjectURL(value)\n requestAnimationFrame(() => URL.revokeObjectURL(src))\n }\n\n const { width, height } = column.record.options || {}\n\n return html` <img\n src=${src}\n width=${width}\n height=${height}\n style=\"max-width: 100%;\"\n onerror=\"this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')\"\n />`\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const Json5Renderer: FieldRenderer;
@@ -1,7 +0,0 @@
1
- import JSON5 from 'json5';
2
- import { html } from 'lit';
3
- export const Json5Renderer = (value, column, record, rowIndex, field) => {
4
- const text = value === undefined || value === null ? '' : JSON5.stringify(value);
5
- return html `<span>${text}</span>`;
6
- };
7
- //# sourceMappingURL=json5-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"json5-renderer.js","sourceRoot":"","sources":["../../../src/renderers/json5-renderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACrF,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAChF,OAAO,IAAI,CAAA,SAAS,IAAI,SAAS,CAAA;AACnC,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport JSON5 from 'json5'\nimport { html } from 'lit'\n\nexport const Json5Renderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n const text = value === undefined || value === null ? '' : JSON5.stringify(value)\n return html`<span>${text}</span>`\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const LinkRenderer: FieldRenderer;
@@ -1,12 +0,0 @@
1
- import { html } from 'lit';
2
- export const LinkRenderer = (value, column, record, rowIndex, field) => {
3
- var { href, target } = column.record.options || {};
4
- value = value === undefined ? '' : value;
5
- if (typeof href == 'function') {
6
- href = href(value, column, record, rowIndex, field);
7
- }
8
- return target
9
- ? html ` <a style="text-decoration:none;color:inherit" href=${href || value} target=${target}>${value}</a> `
10
- : html ` <a style="text-decoration:none;color:inherit" href=${href || value}>${value}</a> `;
11
- };
12
- //# sourceMappingURL=link-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"link-renderer.js","sourceRoot":"","sources":["../../../src/renderers/link-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACpF,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAElD,KAAK,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAExC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACpD;IAED,OAAO,MAAM;QACX,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,OAAO;QAC3G,CAAC,CAAC,IAAI,CAAA,uDAAuD,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,CAAA;AAC9F,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const LinkRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n var { href, target } = column.record.options || {}\n\n value = value === undefined ? '' : value\n\n if (typeof href == 'function') {\n href = href(value, column, record, rowIndex, field)\n }\n\n return target\n ? html` <a style=\"text-decoration:none;color:inherit\" href=${href || value} target=${target}>${value}</a> `\n : html` <a style=\"text-decoration:none;color:inherit\" href=${href || value}>${value}</a> `\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const PasswordRenderer: FieldRenderer;
@@ -1,4 +0,0 @@
1
- export const PasswordRenderer = (value, column, record, rowIndex, field) => {
2
- return Array(String(value).length).fill('*').join('');
3
- };
4
- //# sourceMappingURL=password-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"password-renderer.js","sourceRoot":"","sources":["../../../src/renderers/password-renderer.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACxF,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvD,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\n\nexport const PasswordRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n return Array(String(value).length).fill('*').join('')\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const ProgressRenderer: FieldRenderer;
@@ -1,68 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { LitElement, css, html } from 'lit';
3
- import { customElement, property } from 'lit/decorators.js';
4
- let DataGristProgressRenderer = class DataGristProgressRenderer extends LitElement {
5
- constructor() {
6
- super(...arguments);
7
- this.min = 0;
8
- this.max = 100;
9
- }
10
- render() {
11
- var { value, min, max } = this;
12
- var progress = isNaN(Number(value)) ? 0 : Math.min(100, Math.max(0, ((Number(value) - min) * 100) / (max - min)));
13
- return html `
14
- <div id="border"></div>
15
- <div id="bar" style="width:${progress}%">&nbsp;${progress}</div>
16
- `;
17
- }
18
- };
19
- DataGristProgressRenderer.styles = css `
20
- :host {
21
- display: block;
22
- position: relative;
23
-
24
- width: 100%;
25
- height: 100%;
26
- }
27
-
28
- #border {
29
- display: block;
30
- position: absolute;
31
-
32
- height: 100%;
33
- width: 100%;
34
- box-sizing: border-box;
35
-
36
- border: var(--grist-input-progress-border);
37
- background-color: var(--grist-input-progress-background);
38
- }
39
-
40
- #bar {
41
- background-color: var(--grist-input-progress-bar-background);
42
- text-align: left;
43
- color: var(--grist-input-progress-bar-color);
44
- }
45
- `;
46
- __decorate([
47
- property({ type: Number })
48
- ], DataGristProgressRenderer.prototype, "value", void 0);
49
- __decorate([
50
- property({ type: Number })
51
- ], DataGristProgressRenderer.prototype, "min", void 0);
52
- __decorate([
53
- property({ type: Number })
54
- ], DataGristProgressRenderer.prototype, "max", void 0);
55
- DataGristProgressRenderer = __decorate([
56
- customElement('ox-grist-progress-renderer')
57
- ], DataGristProgressRenderer);
58
- export const ProgressRenderer = (value, column, record, rowIndex, field) => {
59
- var { min = 0, max = 100 } = column.record.options || {};
60
- return html `
61
- <ox-grist-progress-renderer
62
- .value=${Number(value)}
63
- .min=${Number(min)}
64
- .max=${Number(max)}
65
- ></ox-grist-progress-renderer>
66
- `;
67
- };
68
- //# sourceMappingURL=progress-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"progress-renderer.js","sourceRoot":"","sources":["../../../src/renderers/progress-renderer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK3D,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;IAAlD;;QA8B8B,QAAG,GAAW,CAAC,CAAA;QACf,QAAG,GAAW,GAAG,CAAA;IAW/C,CAAC;IATC,MAAM;QACJ,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;QAC9B,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QAEjH,OAAO,IAAI,CAAA;;mCAEoB,QAAQ,YAAY,QAAQ;KAC1D,CAAA;IACH,CAAC;CACF,CAAA;AAzCQ,gCAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAkB;AA/BzC,yBAAyB;IAD9B,aAAa,CAAC,4BAA4B,CAAC;GACtC,yBAAyB,CA0C9B;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACxF,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAExD,OAAO,IAAI,CAAA;;eAEE,MAAM,CAAC,KAAK,CAAC;aACf,MAAM,CAAC,GAAG,CAAC;aACX,MAAM,CAAC,GAAG,CAAC;;GAErB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { FieldRenderer } from '../types'\n\n@customElement('ox-grist-progress-renderer')\nclass DataGristProgressRenderer extends LitElement {\n static styles = css`\n :host {\n display: block;\n position: relative;\n\n width: 100%;\n height: 100%;\n }\n\n #border {\n display: block;\n position: absolute;\n\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n border: var(--grist-input-progress-border);\n background-color: var(--grist-input-progress-background);\n }\n\n #bar {\n background-color: var(--grist-input-progress-bar-background);\n text-align: left;\n color: var(--grist-input-progress-bar-color);\n }\n `\n\n @property({ type: Number }) value?: number\n @property({ type: Number }) min: number = 0\n @property({ type: Number }) max: number = 100\n\n render() {\n var { value, min, max } = this\n var progress = isNaN(Number(value)) ? 0 : Math.min(100, Math.max(0, ((Number(value) - min) * 100) / (max - min)))\n\n return html`\n <div id=\"border\"></div>\n <div id=\"bar\" style=\"width:${progress}%\">&nbsp;${progress}</div>\n `\n }\n}\n\nexport const ProgressRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n var { min = 0, max = 100 } = column.record.options || {}\n\n return html`\n <ox-grist-progress-renderer\n .value=${Number(value)}\n .min=${Number(min)}\n .max=${Number(max)}\n ></ox-grist-progress-renderer>\n `\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const SelectRenderer: FieldRenderer;
@@ -1,15 +0,0 @@
1
- export const SelectRenderer = (value, column, record, rowIndex, field) => {
2
- if (!value) {
3
- return '';
4
- }
5
- var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField];
6
- var options = (rowOptionField === null || rowOptionField === void 0 ? void 0 : rowOptionField.options) ? rowOptionField.options : column.record.options;
7
- if (typeof options == 'function') {
8
- options = options.call(null, value, column, record, rowIndex, field);
9
- }
10
- var res = options.filter((option) => option.value == value);
11
- if (res.length)
12
- return res[0].display;
13
- return value;
14
- };
15
- //# sourceMappingURL=select-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"select-renderer.js","sourceRoot":"","sources":["../../../src/renderers/select-renderer.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACtF,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IACD,IAAI,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IACzF,IAAI,OAAO,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,EAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;IAEtF,IAAI,OAAO,OAAO,IAAI,UAAU,EAAE;QAChC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;KACrE;IAED,IAAI,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,CAAA;IAChE,IAAI,GAAG,CAAC,MAAM;QAAE,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IACrC,OAAO,KAAK,CAAA;AACd,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\n\nexport const SelectRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n if (!value) {\n return ''\n }\n var rowOptionField = column.record.rowOptionField && record[column.record.rowOptionField]\n var options = rowOptionField?.options ? rowOptionField.options : column.record.options\n\n if (typeof options == 'function') {\n options = options.call(null, value, column, record, rowIndex, field)\n }\n\n var res = options.filter((option: any) => option.value == value)\n if (res.length) return res[0].display\n return value\n}\n"]}
@@ -1,2 +0,0 @@
1
- import { FieldRenderer } from '../types';
2
- export declare const TextRenderer: FieldRenderer;
@@ -1,6 +0,0 @@
1
- import { html } from 'lit';
2
- export const TextRenderer = (value, column, record, rowIndex, field) => {
3
- const text = value === undefined ? '' : value;
4
- return html `<span title=${text}>${text}</span>`;
5
- };
6
- //# sourceMappingURL=text-renderer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-renderer.js","sourceRoot":"","sources":["../../../src/renderers/text-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACpF,MAAM,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;IAC7C,OAAO,IAAI,CAAA,eAAe,IAAI,IAAI,IAAI,SAAS,CAAA;AACjD,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types'\nimport { html } from 'lit'\n\nexport const TextRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {\n const text = value === undefined ? '' : value\n return html`<span title=${text}>${text}</span>`\n}\n"]}
@@ -1,33 +0,0 @@
1
- import '../index.js';
2
- import { html } from 'lit';
3
- export default {
4
- title: 'DataGrist',
5
- component: 'ox-grist',
6
- argTypes: {
7
- title: { control: 'text' },
8
- counter: { control: 'number' },
9
- textColor: { control: 'color' }
10
- }
11
- };
12
- const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
13
- <ox-grist style="--data-grist-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
14
- ${slot}
15
- </ox-grist>
16
- `;
17
- export const Regular = Template.bind({});
18
- export const CustomTitle = Template.bind({});
19
- CustomTitle.args = {
20
- title: 'My title'
21
- };
22
- export const CustomCounter = Template.bind({});
23
- CustomCounter.args = {
24
- counter: 123456
25
- };
26
- export const SlottedContent = Template.bind({});
27
- SlottedContent.args = {
28
- slot: html `<p>Slotted content</p>`
29
- };
30
- SlottedContent.argTypes = {
31
- slot: { table: { disable: true } }
32
- };
33
- //# sourceMappingURL=index.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;8CAC/D,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MACjG,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../index.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'DataGrist',\n component: 'ox-grist',\n argTypes: {\n title: { control: 'text' },\n counter: { control: 'number' },\n textColor: { control: 'color' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n title?: string\n counter?: number\n textColor?: string\n slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n <ox-grist style=\"--data-grist-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n ${slot}\n </ox-grist>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n slot: { table: { disable: true } }\n}\n"]}
@@ -1,52 +0,0 @@
1
- import '../index.js'
2
-
3
- import { html, TemplateResult } from 'lit'
4
-
5
- export default {
6
- title: 'DataGrist',
7
- component: 'ox-grist',
8
- argTypes: {
9
- title: { control: 'text' },
10
- counter: { control: 'number' },
11
- textColor: { control: 'color' }
12
- }
13
- }
14
-
15
- interface Story<T> {
16
- (args: T): TemplateResult
17
- args?: Partial<T>
18
- argTypes?: Record<string, unknown>
19
- }
20
-
21
- interface ArgTypes {
22
- title?: string
23
- counter?: number
24
- textColor?: string
25
- slot?: TemplateResult
26
- }
27
-
28
- const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
29
- <ox-grist style="--data-grist-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
30
- ${slot}
31
- </ox-grist>
32
- `
33
-
34
- export const Regular = Template.bind({})
35
-
36
- export const CustomTitle = Template.bind({})
37
- CustomTitle.args = {
38
- title: 'My title'
39
- }
40
-
41
- export const CustomCounter = Template.bind({})
42
- CustomCounter.args = {
43
- counter: 123456
44
- }
45
-
46
- export const SlottedContent = Template.bind({})
47
- SlottedContent.args = {
48
- slot: html`<p>Slotted content</p>`
49
- }
50
- SlottedContent.argTypes = {
51
- slot: { table: { disable: true } }
52
- }