@operato/data-grist 2.0.0-beta.25 → 2.0.0-beta.28

package/src/filters/filter-checkbox.ts

@@ -21,7 +21,7 @@ export const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {
       name=${column.name}
       ?checked=${value}
       indeterminatable
-      ?indeterminate=${value == null}
+      ?indeterminate=${value === undefined}
       left-label
       @change=${(e: CustomEvent) => {
         ;(e.target as HTMLElement).dispatchEvent(

package/src/personalizer/ox-grist-filter-personalizer.ts

@@ -107,7 +107,7 @@ export class OxGristFilterPersonalizer extends LitElement {
             ${this.preference?.filters!.map(
               filter => html`
                 <ox-checkbox label="checkbox" ?checked=${!filter.hidden} value=${filter.name} option
-                  >${filter.name}<span style="position: absolute; right: 10px; cursor: move;" handle
+                  >${filter.name}<span style="position: absolute; right: 10px; cursor: row-resize;opacity:.5" handle
                     >☰</span
                   ></ox-checkbox
                 >

package/src/personalizer/ox-grist-personalizer.ts

@@ -22,10 +22,11 @@ export class OxGristPersonalizer extends LitElement {
         background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));
         border-radius: 0px 0px 7px 7px;
         cursor: pointer;
+        padding-top:var(--spacing-small);
 
         &:hover {
-          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-primary));
-          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-on-primary));
+          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));
+          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));
         }
       }
     `
@@ -69,8 +70,18 @@ export class OxGristPersonalizer extends LitElement {
 
           const template = html`
             <div class="personalizer-header" slot="header">
-              <md-icon
-                style="margin-left: auto;"
+              <div
+                style=${`
+                  display: flex;
+                  align-items: center;
+                  margin: 0 0 0 auto;
+                  min-height: 1.4em;
+                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
+                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
+                  border-radius: var(--md-sys-shape-corner-small);
+                  padding: 0 var(--spacing-small);
+                  cursor: pointer;
+                `}
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
                     const { mode, columns, sorters, pagination } = this.preference || {}
@@ -83,9 +94,21 @@ export class OxGristPersonalizer extends LitElement {
                   }
                   popup.close()
                 }}
-                title=${String(i18next.t('button.save'))}
-                >keep</md-icon
-              ><md-icon
+              >
+                ${String(i18next.t('button.save'))}
+              </div>
+              <div
+                style=${`
+                  display: flex;
+                  align-items: center;
+                  margin: 0 0 0 var(--spacing-small, 4px);
+                  min-height: 1.4em;
+                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
+                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
+                  border-radius: var(--md-sys-shape-corner-small);
+                  padding: 0 var(--spacing-small);
+                  cursor: pointer;
+                `}
                 @click=${async (e: MouseEvent) => {
                   if (grist.personalConfigProvider) {
                     grist.personalConfig = this.preference = {}
@@ -93,9 +116,17 @@ export class OxGristPersonalizer extends LitElement {
                   }
                   popup.close()
                 }}
-                title=${String(i18next.t('button.delete'))}
-                >keep_off</md-icon
-              ><md-icon @click=${async (e: MouseEvent) => popup.close()} title=${String(i18next.t('button.close'))}
+              >
+                ${String(i18next.t('button.delete'))}
+              </div>
+              <md-icon
+                style=${`
+                  --md-icon-size: 1.2em;
+                  margin-left: var(--spacing-tiny, 2px);
+                  cursor: pointer;
+                `}
+                @click=${async (e: MouseEvent) => popup.close()}
+                title=${String(i18next.t('button.close'))}
                 >close</md-icon
               >
             </div>
@@ -103,7 +134,7 @@ export class OxGristPersonalizer extends LitElement {
             ${columns.map(
               column => html`
                 <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
-                  >${column.header.renderer(column)}<span style="position: absolute; right: 10px; cursor: move;" handle
+                  >${column.header.renderer(column)}<span style="position: absolute; right: 10px; cursor: row-resize;opacity:.5" handle
                     >☰</span
                   ></ox-checkbox
                 >

package/stories/dynamic-editable.stories.ts

@@ -28,6 +28,8 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           number: idx,
           float: 1.3,
           date: '2023-09-20',
+          active: idx % 2 === 0,
+          role: 'admin',
           routing: {
             id: '006dc64d-4fb9-4afc-a9ea-962bd1b9e110',
             name: '조림>세척'
@@ -136,6 +138,40 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         header: 'date',
         width: 120
       },
+      {
+        type: 'boolean',
+        name: 'active',
+        header: 'active',
+        record: {
+          editable: true
+        },
+        filter: {
+          value: false
+        },
+        sortable: true,
+        width: 60
+      },
+      {
+        type: 'select',
+        name: 'role',
+        label: true,
+        header: 'role',
+        record: {
+          // options: ['', 'admin', 'worker', 'tester'],
+          options: [
+            { display: 'admin', value: 'admin' },
+            { display: 'worker', value: 'worker' },
+            { display: 'tester', value: 'tester' }
+          ],
+          editable: true
+        },
+        filter: {
+          operator: 'in',
+          value: ['worker']
+        },
+        sortable: true,
+        width: 120
+      },
       {
         type: 'object',
         name: 'routing',

package/stories/grid-setting.stories.ts

@@ -413,9 +413,14 @@ const Template: Story<ArgTypes> = ({
     </style>
 
     <style>
-      ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText}
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;

package/translations/en.json

@@ -1,4 +1,7 @@
 {
+  "button.save": "save",
+  "button.delete": "delete",
+
   "label.accumulator_sum": "sum",
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",

package/translations/ja.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "削除",
+  "button.save": "保存",
   "label.accumulator_sum": "合計",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "カウント",

package/translations/ko.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "삭제",
+  "button.save": "저장",
   "label.accumulator_sum": "합계",
   "label.accumulator_avg": "평균",
   "label.accumulator_count": "계수",

package/translations/ms.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "padam",
+  "button.save": "simpan",
   "label.accumulator_sum": "Jumlah",
   "label.accumulator_avg": "Purata",
   "label.accumulator_count": "Kiraan",

package/translations/zh.json

@@ -1,4 +1,6 @@
 {
+  "button.delete": "删除",
+  "button.save": "保存",
   "label.accumulator_sum": "总和",
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "计数",