@operato/data-grist 2.0.0-alpha.85 → 2.0.0-alpha.87

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 (33) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/src/filters/filter-styles.js +3 -0
  3. package/dist/src/filters/filter-styles.js.map +1 -1
  4. package/dist/stories/accumulator.stories.js +2 -2
  5. package/dist/stories/accumulator.stories.js.map +1 -1
  6. package/dist/stories/default-filters.stories.js +1 -1
  7. package/dist/stories/default-filters.stories.js.map +1 -1
  8. package/dist/stories/dynamic-editable.stories.js +28 -0
  9. package/dist/stories/dynamic-editable.stories.js.map +1 -1
  10. package/dist/stories/fixed-column.stories.js +0 -1
  11. package/dist/stories/fixed-column.stories.js.map +1 -1
  12. package/dist/stories/grist-modes.stories.js +0 -1
  13. package/dist/stories/grist-modes.stories.js.map +1 -1
  14. package/dist/stories/group-header.stories.js +0 -1
  15. package/dist/stories/group-header.stories.js.map +1 -1
  16. package/dist/stories/textarea.stories.js +1 -1
  17. package/dist/stories/textarea.stories.js.map +1 -1
  18. package/dist/stories/tree-column-with-checkbox.stories.js +1 -2
  19. package/dist/stories/tree-column-with-checkbox.stories.js.map +1 -1
  20. package/dist/stories/tree-column.stories.js +0 -1
  21. package/dist/stories/tree-column.stories.js.map +1 -1
  22. package/dist/tsconfig.tsbuildinfo +1 -1
  23. package/package.json +5 -5
  24. package/src/filters/filter-styles.ts +3 -0
  25. package/stories/accumulator.stories.ts +2 -2
  26. package/stories/default-filters.stories.ts +1 -1
  27. package/stories/dynamic-editable.stories.ts +28 -0
  28. package/stories/fixed-column.stories.ts +0 -1
  29. package/stories/grist-modes.stories.ts +0 -1
  30. package/stories/group-header.stories.ts +0 -1
  31. package/stories/textarea.stories.ts +1 -1
  32. package/stories/tree-column-with-checkbox.stories.ts +1 -2
  33. package/stories/tree-column.stories.ts +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * data-grist filters-form stories ([5b46629](https://github.com/hatiolab/operato/commit/5b466290d70885b468fb17b7e294b361de058a2f))
12
+ * data-grist headroom stories ([fc4a193](https://github.com/hatiolab/operato/commit/fc4a193a1e50b5d63a4d7de2dec606d726cc4852))
13
+
14
+
15
+
16
+ ## [2.0.0-alpha.86](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.85...v2.0.0-alpha.86) (2024-04-16)
17
+
18
+
19
+ ### :bug: Bug Fix
20
+
21
+ * tweak filters-form style ([79e1f68](https://github.com/hatiolab/operato/commit/79e1f68f224770c8ad97d87e3f79327743a3d84d))
22
+
23
+
24
+
6
25
  ## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
7
26
 
8
27
 
package/dist/src/filters/filter-styles.js CHANGED
@@ -10,11 +10,13 @@ export const FilterStyles = css `
10
10
  --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
11
11
  --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
12
12
  --ox-filters-label-color: var(--label-color, var(--primary-text-color));
13
+ --ox-filters-input-background-color: transparent;
13
14
 
14
15
  --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
15
16
  --ox-filters-input-padding: var(--input-padding, 6px 2px);
16
17
 
17
18
  --ox-select-padding: var(--ox-filters-input-padding);
19
+ --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
18
20
  }
19
21
 
20
22
  label {
@@ -41,6 +43,7 @@ export const FilterStyles = css `
41
43
  border-bottom: var(--ox-filters-input-border);
42
44
  font: var(--ox-filters-input-font);
43
45
  color: var(--ox-filters-input-color);
46
+ background-color: var(--ox-filters-input-background-color, transparent);
44
47
  }
45
48
 
46
49
  ox-select:focus,
package/dist/src/filters/filter-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwF9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n :host {\n --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));\n\n --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));\n --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n --ox-filters-input-color: var(--input-color, var(--primary-text-color));\n --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));\n --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n --ox-filters-label-color: var(--label-color, var(--primary-text-color));\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: var(--input-padding, 6px 2px);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n }\n\n label {\n font: var(--ox-filters-label-font);\n color: var(--ox-filters-label-color);\n }\n\n span {\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color);\n opacity: 0.6;\n }\n\n input {\n padding: var(--ox-filters-input-padding);\n }\n\n ox-select,\n input {\n border: none;\n border-bottom: var(--ox-filters-input-border);\n font: var(--ox-filters-input-font);\n color: var(--ox-filters-input-color);\n }\n\n ox-select:focus,\n input:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border);\n color: var(--ox-filters-input-focus-color);\n }\n\n ox-select {\n min-width: 90px;\n max-width: 170px;\n }\n\n ox-input-search {\n max-width: 150px;\n }\n\n input[type='number'] {\n max-width: 90px;\n }\n\n input[type*='date'],\n input[type*='time'],\n input[type='week'],\n input[type='month'] {\n max-width: 170px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n --ox-filters-form-label-font: bold 13px var(--theme-font);\n --ox-filters-input-font: normal 16px var(--theme-font);\n }\n\n input[from],\n input[to] {\n max-width: 44%;\n }\n\n input[type*='datetime'][from],\n input[type*='datetime'][to] {\n padding-right: var(--padding-narrow);\n min-width: 91%;\n }\n }\n`\n"]}
1
+ {"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2F9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n :host {\n --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));\n\n --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));\n --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n --ox-filters-input-color: var(--input-color, var(--primary-text-color));\n --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));\n --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n --ox-filters-label-color: var(--label-color, var(--primary-text-color));\n --ox-filters-input-background-color: transparent;\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: var(--input-padding, 6px 2px);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n }\n\n label {\n font: var(--ox-filters-label-font);\n color: var(--ox-filters-label-color);\n }\n\n span {\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color);\n opacity: 0.6;\n }\n\n input {\n padding: var(--ox-filters-input-padding);\n }\n\n ox-select,\n input {\n border: none;\n border-bottom: var(--ox-filters-input-border);\n font: var(--ox-filters-input-font);\n color: var(--ox-filters-input-color);\n background-color: var(--ox-filters-input-background-color, transparent);\n }\n\n ox-select:focus,\n input:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border);\n color: var(--ox-filters-input-focus-color);\n }\n\n ox-select {\n min-width: 90px;\n max-width: 170px;\n }\n\n ox-input-search {\n max-width: 150px;\n }\n\n input[type='number'] {\n max-width: 90px;\n }\n\n input[type*='date'],\n input[type*='time'],\n input[type='week'],\n input[type='month'] {\n max-width: 170px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n --ox-filters-form-label-font: bold 13px var(--theme-font);\n --ox-filters-input-font: normal 16px var(--theme-font);\n }\n\n input[from],\n input[to] {\n max-width: 44%;\n }\n\n input[type*='datetime'][from],\n input[type*='datetime'][to] {\n padding-right: var(--padding-narrow);\n min-width: 91%;\n }\n }\n`\n"]}
package/dist/stories/accumulator.stories.js CHANGED
@@ -219,7 +219,7 @@ const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHand
219
219
  flex-direction: row;
220
220
  align-items: center;
221
221
  padding: var(--padding-default) var(--padding-wide);
222
- background-color: var(--theme-white-color);
222
+ background-color: unset;
223
223
  box-shadow: var(--box-shadow);
224
224
 
225
225
  --md-icon-size: 24px;
@@ -265,7 +265,7 @@ const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHand
265
265
  }
266
266
 
267
267
  #add {
268
- width: 50px;
268
+ margin-left: auto;
269
269
  text-align: right;
270
270
  }
271
271
 
package/dist/stories/accumulator.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"accumulator.stories.js","sourceRoot":"","sources":["../../stories/accumulator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAW1C,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,IAAI,KAAK,GAAG,EAAE,CAAA;IACd,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,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;gBACrB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;gBACvC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,OAAO;SACpB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,UAAU;SACvB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,cAAc;YAC1B,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE;gBACR,KAAK,EAAE,aAAa;aACrB;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,IAAI;SACb;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;aACf;YACD,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,IAAI;SACZ;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,aAAa;YACnB,MAAM,EAAE;gBACN,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa;gBAC7B,KAAK,EAAE,uBAAuB;aAC/B;YACD,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,OAAO;gBACd,YAAY,EAAE,GAAG;aAClB;YACD,WAAW,EAAE,KAAK;YAClB,iBAAiB;YACjB,iBAAiB;YACjB,cAAc;YACd,KAAK;YACL,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,CAAC,KAAU,EAAE,MAAW,EAAE,MAAW,EAAE,EAAE;oBACjD,OAAO,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBAC1D,CAAC;aACF;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,IAAI;aACV;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,IAAI,EAAE,KAAK;iBACZ;aACF;YACD,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;aAChB;YACD,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,GAAG;SACX;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,QAAQ,EAAE,KAAK;SAChB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,YAAY;SACpB;QACD,WAAW,EAAE,IAAI;KAClB;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,IAAI;SACX;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;KAC9B;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QAC9D,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,MAAM,EAAE,IAAI,GAAG,MAAM,EAAE,kBAAkB,GAAG,KAAK,EAAE,YAAY,EAAY,EAAE,EAAE,CAClH,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAgJU,MAAM;sBACA,YAAY;8BACJ,kBAAkB;wBACxB,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;;;;;gBAWvE,CAAA;AAEhB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM;IACN,YAAY;IACZ,IAAI,EAAE,MAAM;CACb,CAAA","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 25\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 accval: Math.random(),\n accval2: Math.round(Math.random() * 15),\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\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 record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 120,\n fixed: true\n },\n {\n type: 'string',\n name: 'description',\n header: {\n renderer: () => 'description',\n style: 'text-transform: none;'\n },\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200\n },\n {\n type: 'number',\n name: 'accval',\n label: true,\n header: 'accval',\n record: {\n editable: true,\n align: 'right',\n defaultValue: 100\n },\n accumulator: 'avg',\n // accumulator: {\n // type: 'avg',\n // tag: true\n // },\n sortable: true,\n width: 130\n },\n {\n type: 'number',\n name: 'accval2',\n label: true,\n header: 'accval2',\n record: {\n editable: true,\n align: 'right',\n renderer: (value: any, column: any, record: any) => {\n return value && Intl.NumberFormat('en-US').format(value)\n }\n },\n accumulator: {\n type: 'sum',\n tag: true\n },\n sortable: true,\n width: 130\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: false\n },\n handlers: {\n focus: 'select-row'\n },\n accumulator: true\n },\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'accumulator in ox-grist',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' },\n mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n mode: string\n urlParamsSensitive: boolean\n fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}
1
+ {"version":3,"file":"accumulator.stories.js","sourceRoot":"","sources":["../../stories/accumulator.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 25\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 accval: Math.random(),\n accval2: Math.round(Math.random() * 15),\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\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 record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 120,\n fixed: true\n },\n {\n type: 'string',\n name: 'description',\n header: {\n renderer: () => 'description',\n style: 'text-transform: none;'\n },\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200\n },\n {\n type: 'number',\n name: 'accval',\n label: true,\n header: 'accval',\n record: {\n editable: true,\n align: 'right',\n defaultValue: 100\n },\n accumulator: 'avg',\n // accumulator: {\n // type: 'avg',\n // tag: true\n // },\n sortable: true,\n width: 130\n },\n {\n type: 'number',\n name: 'accval2',\n label: true,\n header: 'accval2',\n record: {\n editable: true,\n align: 'right',\n renderer: (value: any, column: any, record: any) => {\n return value && Intl.NumberFormat('en-US').format(value)\n }\n },\n accumulator: {\n type: 'sum',\n tag: true\n },\n sortable: true,\n width: 130\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: false\n },\n handlers: {\n focus: 'select-row'\n },\n accumulator: true\n },\n sorters: [\n {\n name: 'name',\n desc: true\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'accumulator in ox-grist',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' },\n mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n mode: string\n urlParamsSensitive: boolean\n fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n ox-grist {\n height: 600px;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: unset;\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n margin-left: auto;\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}
package/dist/stories/default-filters.stories.js CHANGED
@@ -141,7 +141,7 @@ const Template = ({ headerFilter }) => html ` <link
141
141
  flex-direction: row;
142
142
  align-items: center;
143
143
  padding: var(--padding-default) var(--padding-wide);
144
- background-color: var(--theme-white-color);
144
+ background-color: unset;
145
145
  box-shadow: var(--box-shadow);
146
146
 
147
147
  --md-icon-size: 24px;
package/dist/stories/default-filters.stories.js.map CHANGED
@@ -1 +1 @@
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'\n\nimport { FetchHandler } from '../src/types.js'\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 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: '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 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}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n .config=${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\">\n <div id=\"filters\">\n <ox-filters-form></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n </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'\n\nimport { FetchHandler } from '../src/types.js'\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 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: '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 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}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: unset;\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n .config=${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\">\n <div id=\"filters\">\n <ox-filters-form></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n </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
@@ -252,6 +252,34 @@ const Template = ({ headerFilter }) => html ` <link
252
252
  margin-right: var(--margin-default);
253
253
  }
254
254
 
255
+ #add {
256
+ text-align: right;
257
+ }
258
+
259
+ #add button {
260
+ display: flex;
261
+ align-items: center;
262
+ justify-content: center;
263
+
264
+ background-color: var(--primary-color);
265
+ border: 0;
266
+ border-radius: 50%;
267
+ padding: 5px;
268
+ width: 32px;
269
+ height: 32px;
270
+ cursor: pointer;
271
+ }
272
+
273
+ #add button:hover {
274
+ background-color: var(--focus-background-color);
275
+ box-shadow: var(--box-shadow);
276
+ }
277
+
278
+ #add button md-icon {
279
+ font-size: 1.5em;
280
+ color: var(--theme-white-color);
281
+ }
282
+
255
283
  @media only screen and (max-width: 460px) {
256
284
  #filters {
257
285
  flex-direction: column;
package/dist/stories/dynamic-editable.stories.js.map CHANGED
@@ -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'\n\nimport { FetchHandler } from '../src/types.js'\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 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: '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\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n .config=${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\">\n <div id=\"filters\">\n <ox-filters-form></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
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'\n\nimport { FetchHandler } from '../src/types.js'\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 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: '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\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n #add {\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n .config=${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\">\n <div id=\"filters\">\n <ox-filters-form></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
package/dist/stories/fixed-column.stories.js CHANGED
@@ -387,7 +387,6 @@ const Template = ({ config }) => html ` <link
387
387
  }
388
388
 
389
389
  #add {
390
- width: 50px;
391
390
  text-align: right;
392
391
  }
393
392
 
package/dist/stories/fixed-column.stories.js.map CHANGED
@@ -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/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 120993\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n active: Math.round(Math.random() * 2) % 2 ? true : false,\n barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n company:\n idx % 2\n ? {\n id: '2',\n name: 'HatioLAB',\n description: `경기도 성남시-${start + idx + 1}`\n }\n : {\n id: '3',\n name: 'HatioSEA',\n description: `말레이시아 세티아알람-${start + idx + 1}`\n },\n thumbnail:\n idx % 4 === 0\n ? '' /* no source */\n : idx % 4 === 1\n ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n : idx % 4 === 2\n ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n role: ['admin', 'worker', 'tester'][idx % 3],\n color: idx % 2 ? `#87f018` : `#180f87`,\n rate: Math.round(Math.random() * 100),\n dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n homepage:\n idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n json5: {\n abc: 'abc',\n value: 123\n },\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['role', 'email']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'edit',\n title: 'edit',\n handlers: {\n click: function () {\n console.log('clicked')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n title: 'download',\n handlers: {\n click: 'move-down'\n },\n fixed: true\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'link',\n name: 'name',\n label: true,\n header: 'name',\n record: {\n editable: true,\n options: {\n // href: 'http://hatiolab.com',\n href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n return record['homepage']\n },\n target: '_blank'\n }\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n click: (columns, data, column, record, rowIndex, target) => {\n alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n }\n } as GristEventHandlerSet,\n fixed: true\n },\n {\n type: 'email',\n name: 'email',\n label: true,\n header: 'email',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 130,\n validation: function (after, before, record, column) {\n if (after.indexOf('@') == -1) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: `invalid value - ${after}`\n }\n })\n )\n return false\n }\n return true\n } as ValidationCallback\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: true,\n handlers: {\n dblclick: () => {\n const grist = document.querySelector('ox-grist') as any\n console.log(grist!.dirtyRecords)\n }\n },\n sortable: true,\n width: 60\n },\n {\n type: 'string[]',\n name: 'role',\n label: true,\n header: 'role',\n record: {\n options: ['', 'admin', 'worker', 'tester'],\n editable: true\n },\n filter: true,\n sortable: true,\n width: 120\n },\n {\n type: 'color',\n name: 'color',\n header: 'color',\n record: {\n editable: true\n },\n sortable: true,\n width: 50\n },\n {\n type: 'float',\n name: 'rate',\n header: 'rate',\n record: {\n align: 'right',\n editable: true,\n defaultValue: 10000.1\n },\n filter: 'between',\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true\n },\n width: 120\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: 'between',\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n focus: 'select-row-toggle'\n },\n classifier: function (record, rowIndex) {\n const rate = record['rate']\n const emphasized =\n rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n return {\n emphasized\n }\n } as GristClassifier\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'fixed column',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config\n}\n"]}
1
+ {"version":3,"file":"fixed-column.stories.js","sourceRoot":"","sources":["../../stories/fixed-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 120993\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n active: Math.round(Math.random() * 2) % 2 ? true : false,\n barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n company:\n idx % 2\n ? {\n id: '2',\n name: 'HatioLAB',\n description: `경기도 성남시-${start + idx + 1}`\n }\n : {\n id: '3',\n name: 'HatioSEA',\n description: `말레이시아 세티아알람-${start + idx + 1}`\n },\n thumbnail:\n idx % 4 === 0\n ? '' /* no source */\n : idx % 4 === 1\n ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n : idx % 4 === 2\n ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n role: ['admin', 'worker', 'tester'][idx % 3],\n color: idx % 2 ? `#87f018` : `#180f87`,\n rate: Math.round(Math.random() * 100),\n dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n homepage:\n idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n json5: {\n abc: 'abc',\n value: 123\n },\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['role', 'email']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'edit',\n title: 'edit',\n handlers: {\n click: function () {\n console.log('clicked')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n title: 'download',\n handlers: {\n click: 'move-down'\n },\n fixed: true\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'link',\n name: 'name',\n label: true,\n header: 'name',\n record: {\n editable: true,\n options: {\n // href: 'http://hatiolab.com',\n href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n return record['homepage']\n },\n target: '_blank'\n }\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n click: (columns, data, column, record, rowIndex, target) => {\n alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n }\n } as GristEventHandlerSet,\n fixed: true\n },\n {\n type: 'email',\n name: 'email',\n label: true,\n header: 'email',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 130,\n validation: function (after, before, record, column) {\n if (after.indexOf('@') == -1) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: `invalid value - ${after}`\n }\n })\n )\n return false\n }\n return true\n } as ValidationCallback\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: true,\n handlers: {\n dblclick: () => {\n const grist = document.querySelector('ox-grist') as any\n console.log(grist!.dirtyRecords)\n }\n },\n sortable: true,\n width: 60\n },\n {\n type: 'string[]',\n name: 'role',\n label: true,\n header: 'role',\n record: {\n options: ['', 'admin', 'worker', 'tester'],\n editable: true\n },\n filter: true,\n sortable: true,\n width: 120\n },\n {\n type: 'color',\n name: 'color',\n header: 'color',\n record: {\n editable: true\n },\n sortable: true,\n width: 50\n },\n {\n type: 'float',\n name: 'rate',\n header: 'rate',\n record: {\n align: 'right',\n editable: true,\n defaultValue: 10000.1\n },\n filter: 'between',\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true\n },\n width: 120\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: 'between',\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n focus: 'select-row-toggle'\n },\n classifier: function (record, rowIndex) {\n const rate = record['rate']\n const emphasized =\n rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n return {\n emphasized\n }\n } as GristClassifier\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: 'fixed column',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n mode=\"GRID\"\n .config=${config}\n .fetchHandler=${fetchHandler}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config\n}\n"]}
package/dist/stories/grist-modes.stories.js CHANGED
@@ -414,7 +414,6 @@ const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHand
414
414
  }
415
415
 
416
416
  #add {
417
- width: 50px;
418
417
  text-align: right;
419
418
  }
420
419
 
package/dist/stories/grist-modes.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grist-modes.stories.js","sourceRoot":"","sources":["../../stories/grist-modes.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 120993\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n active: Math.round(Math.random() * 2) % 2 ? true : false,\n barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n company:\n idx % 2\n ? {\n id: '2',\n name: 'HatioLAB',\n description: `경기도 성남시-${start + idx + 1}`\n }\n : {\n id: '3',\n name: 'HatioSEA',\n description: `말레이시아 세티아알람-${start + idx + 1}`\n },\n thumbnail:\n idx % 4 === 0\n ? '' /* no source */\n : idx % 4 === 1\n ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n : idx % 4 === 2\n ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n role: ['admin', 'worker', 'tester'][idx % 3],\n color: idx % 2 ? `#87f018` : `#180f87`,\n rate: Math.round(Math.random() * 100),\n dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n homepage:\n idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n json5: {\n abc: 'abc',\n value: 123\n },\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['role', 'email']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'edit',\n title: 'edit',\n handlers: {\n click: function () {\n console.log('clicked')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n title: 'download',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'link',\n name: 'name',\n label: true,\n fixed: true,\n header: 'name',\n record: {\n editable: true,\n options: {\n // href: 'http://hatiolab.com',\n href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n return record['homepage']\n },\n target: '_blank'\n }\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n click: (columns, data, column, record, rowIndex, target) => {\n alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n }\n } as GristEventHandlerSet\n },\n {\n type: 'email',\n name: 'email',\n label: true,\n header: 'email',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 130,\n validation: function (after, before, record, column) {\n if (after.indexOf('@') == -1) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: `invalid value - ${after}`\n }\n })\n )\n return false\n }\n return true\n } as ValidationCallback\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: true,\n handlers: {\n dblclick: () => {\n const grist = document.querySelector('ox-grist') as any\n console.log(grist!.dirtyRecords)\n }\n },\n sortable: true,\n width: 60\n },\n {\n type: 'select',\n name: 'role',\n label: true,\n header: 'role',\n record: {\n options: ['', 'admin', 'worker', 'tester'],\n editable: true\n },\n filter: true,\n sortable: true,\n width: 120\n },\n {\n type: 'color',\n name: 'color',\n header: 'color',\n record: {\n editable: true\n },\n sortable: true,\n width: 50\n },\n {\n type: 'float',\n name: 'rate',\n header: 'rate',\n record: {\n align: 'right',\n editable: true,\n defaultValue: 10000.1\n },\n filter: {\n operator: 'between',\n value: [1, 100]\n },\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true\n },\n width: 120\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: {\n operator: 'between',\n type: 'datetime',\n value: [\n {\n name: 'today',\n params: {\n type: 'datetime'\n }\n },\n {\n name: 'now',\n params: {\n type: 'datetime',\n relativeDays: 1\n }\n }\n ]\n },\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n focus: 'select-row-toggle'\n },\n classifier: function (record, rowIndex) {\n const rate = record['rate']\n const emphasized =\n rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n return {\n emphasized\n }\n } as GristClassifier\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: '3 modes in ox-grist',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' },\n mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n mode: string\n urlParamsSensitive: boolean\n fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n ox-grist {\n width: 100%;\n height: 600px;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n width: 50px;\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n .config=${config}\n .mode=${mode}\n .fetchHandler=${fetchHandler}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <div id=\"modes\">\n <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}
1
+ {"version":3,"file":"grist-modes.stories.js","sourceRoot":"","sources":["../../stories/grist-modes.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n ColumnConfig,\n FetchHandler,\n GristClassifier,\n GristEventHandlerSet,\n GristRecord,\n ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n var total = 120993\n var start = (page! - 1) * limit!\n\n await new Promise(resolve => setTimeout(resolve, 500))\n\n return {\n total,\n records: Array(limit! * page! > total ? total % limit! : limit)\n .fill('')\n .map((item, idx) => {\n return {\n id: String(idx),\n name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n email: idx % 2 ? `shnam-${start + idx + 1}@gmail.com` : `heartyoh-${start + idx + 1}@gmail.com`,\n active: Math.round(Math.random() * 2) % 2 ? true : false,\n barcode: idx % 2 ? `1234567890${start + idx + 1}` : `0987654321${start + idx + 1}`,\n company:\n idx % 2\n ? {\n id: '2',\n name: 'HatioLAB',\n description: `경기도 성남시-${start + idx + 1}`\n }\n : {\n id: '3',\n name: 'HatioSEA',\n description: `말레이시아 세티아알람-${start + idx + 1}`\n },\n thumbnail:\n idx % 4 === 0\n ? '' /* no source */\n : idx % 4 === 1\n ? `http://www.hatiolab.com/assets/img/operato-biz3.png`\n : idx % 4 === 2\n ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`\n : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,\n role: ['admin', 'worker', 'tester'][idx % 3],\n color: idx % 2 ? `#87f018` : `#180f87`,\n rate: Math.round(Math.random() * 100),\n dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],\n dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],\n homepage:\n idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,\n json5: {\n abc: 'abc',\n value: 123\n },\n createdAt: Date.now(),\n updatedAt: Date.now()\n }\n })\n }\n}\n\nconst config = {\n list: {\n thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['role', 'email']\n },\n columns: [\n {\n type: 'gutter',\n gutterName: 'dirty'\n },\n {\n type: 'gutter',\n gutterName: 'sequence'\n },\n {\n type: 'gutter',\n gutterName: 'row-selector',\n multiple: true\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'edit',\n title: 'edit',\n handlers: {\n click: function () {\n console.log('clicked')\n }\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'add',\n title: 'add',\n handlers: {\n click: 'record-copy'\n }\n },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'arrow_downward',\n title: 'download',\n handlers: {\n click: 'move-down'\n }\n },\n {\n type: 'string',\n name: 'id',\n hidden: true\n },\n {\n type: 'link',\n name: 'name',\n label: true,\n fixed: true,\n header: 'name',\n record: {\n editable: true,\n options: {\n // href: 'http://hatiolab.com',\n href: function (column: ColumnConfig, record: GristRecord, rowIndex: number) {\n return record['homepage']\n },\n target: '_blank'\n }\n },\n filter: 'search',\n sortable: true,\n width: 120\n },\n {\n type: 'string',\n name: 'description',\n header: 'description',\n filter: 'search',\n record: {\n editable: true,\n align: 'left'\n },\n width: 200,\n handlers: {\n click: (columns, data, column, record, rowIndex, target) => {\n alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n }\n } as GristEventHandlerSet\n },\n {\n type: 'email',\n name: 'email',\n label: true,\n header: 'email',\n record: {\n editable: true\n },\n filter: 'search',\n sortable: true,\n width: 130,\n validation: function (after, before, record, column) {\n if (after.indexOf('@') == -1) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: `invalid value - ${after}`\n }\n })\n )\n return false\n }\n return true\n } as ValidationCallback\n },\n {\n type: 'boolean',\n name: 'active',\n header: 'active',\n record: {\n editable: true\n },\n filter: true,\n handlers: {\n dblclick: () => {\n const grist = document.querySelector('ox-grist') as any\n console.log(grist!.dirtyRecords)\n }\n },\n sortable: true,\n width: 60\n },\n {\n type: 'select',\n name: 'role',\n label: true,\n header: 'role',\n record: {\n options: ['', 'admin', 'worker', 'tester'],\n editable: true\n },\n filter: true,\n sortable: true,\n width: 120\n },\n {\n type: 'color',\n name: 'color',\n header: 'color',\n record: {\n editable: true\n },\n sortable: true,\n width: 50\n },\n {\n type: 'float',\n name: 'rate',\n header: 'rate',\n record: {\n align: 'right',\n editable: true,\n defaultValue: 10000.1\n },\n filter: {\n operator: 'between',\n value: [1, 100]\n },\n sortable: true,\n width: 50\n },\n {\n type: 'json5',\n name: 'json5',\n header: 'JSON5',\n width: 200\n },\n {\n type: 'image',\n name: 'thumbnail',\n header: 'thumbnail',\n record: {\n editable: true\n },\n width: 120\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: 'updated at',\n record: {\n editable: true,\n defaultValue: {\n name: 'now'\n }\n },\n filter: {\n operator: 'between',\n type: 'datetime',\n value: [\n {\n name: 'today',\n params: {\n type: 'datetime'\n }\n },\n {\n name: 'now',\n params: {\n type: 'datetime',\n relativeDays: 1\n }\n }\n ]\n },\n sortable: true,\n width: 180\n },\n {\n type: 'datetime',\n name: 'createdAt',\n header: 'created at',\n record: {\n editable: false\n },\n sortable: true,\n width: 180\n }\n ],\n rows: {\n selectable: {\n multiple: true\n },\n handlers: {\n focus: 'select-row-toggle'\n },\n classifier: function (record, rowIndex) {\n const rate = record['rate']\n const emphasized =\n rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n return {\n emphasized\n }\n } as GristClassifier\n },\n sorters: [\n {\n name: 'name',\n desc: true\n },\n {\n name: 'email'\n }\n ],\n pagination: {\n pages: [20, 30, 50, 100, 200]\n }\n}\n\nexport default {\n title: '3 modes in ox-grist',\n component: 'ox-grist',\n argTypes: {\n config: { control: 'object' },\n mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n config: object\n mode: string\n urlParamsSensitive: boolean\n fetchHandler: object\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>\n html` <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-filters-form {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <style>\n ox-grist {\n width: 100%;\n height: 600px;\n }\n\n [slot='headroom'] {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: var(--padding-default) var(--padding-wide);\n background-color: var(--theme-white-color);\n box-shadow: var(--box-shadow);\n\n --md-icon-size: 24px;\n }\n #sorters md-icon,\n #modes md-icon {\n --md-icon-size: 18px;\n }\n #sorters {\n margin-left: auto;\n margin-right: var(--margin-default);\n padding-left: var(--padding-narrow);\n border-bottom: var(--border-dark-color);\n position: relative;\n color: var(--secondary-color);\n font-size: var(--fontsize-default);\n user-select: none;\n }\n\n #sorters > * {\n padding: var(--padding-narrow);\n vertical-align: middle;\n }\n\n #modes > * {\n padding: var(--padding-narrow);\n opacity: 0.5;\n color: var(--primary-text-color);\n cursor: pointer;\n }\n\n #modes > md-icon[active] {\n border-radius: 9px;\n background-color: rgba(var(--primary-color-rgb), 0.05);\n opacity: 1;\n color: var(--secondary-text-color);\n cursor: default;\n }\n\n #modes > md-icon:hover {\n opacity: 1;\n color: var(--secondary-text-color);\n }\n\n #add {\n text-align: right;\n }\n\n #add button {\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--primary-color);\n border: 0;\n border-radius: 50%;\n padding: 5px;\n width: 32px;\n height: 32px;\n cursor: pointer;\n }\n\n #add button:hover {\n background-color: var(--focus-background-color);\n box-shadow: var(--box-shadow);\n }\n\n #add button md-icon {\n font-size: 1.5em;\n color: var(--theme-white-color);\n }\n\n #filters {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n #filters * {\n margin-right: var(--margin-default);\n }\n\n @media only screen and (max-width: 460px) {\n #filters {\n flex-direction: column;\n }\n\n #modes {\n display: none;\n }\n }\n </style>\n\n <ox-grist\n .config=${config}\n .mode=${mode}\n .fetchHandler=${fetchHandler}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n >\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <md-icon\n @click=${(e: Event) => {\n const target = e.currentTarget as HTMLElement\n ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</md-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <div id=\"modes\">\n <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>\n <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>\n <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>\n </div>\n\n <ox-record-creator id=\"add\" light-popup>\n <button><md-icon>add</md-icon></button>\n </ox-record-creator>\n </div>\n </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n config,\n fetchHandler,\n mode: 'GRID'\n}\n"]}
package/dist/stories/group-header.stories.js CHANGED
@@ -417,7 +417,6 @@ const Template = ({ config }) => html ` <link
417
417
  }
418
418
 
419
419
  #add {
420
- width: 50px;
421
420
  text-align: right;
422
421
  }
423
422