@operato/data-grist 8.0.0-alpha.26 → 8.0.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.0.0-alpha.26",
+  "version": "8.0.0-alpha.29",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -63,13 +63,13 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.26",
-    "@operato/p13n": "^8.0.0-alpha.4",
-    "@operato/popup": "^8.0.0-alpha.4",
+    "@operato/input": "^8.0.0-alpha.29",
+    "@operato/p13n": "^8.0.0-alpha.29",
+    "@operato/popup": "^8.0.0-alpha.29",
     "@operato/pull-to-refresh": "^8.0.0-alpha.0",
-    "@operato/styles": "^8.0.0-alpha.4",
+    "@operato/styles": "^8.0.0-alpha.27",
     "@operato/time-calculator": "^8.0.0-alpha.6",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/utils": "^8.0.0-alpha.29",
     "i18next": "^23.11.5",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "14f757972a99c6c6807d3a7e8a555afbd4f891ce"
+  "gitHead": "f2f91b0c9ba7b29d7eeaca566f8e5875fa554331"
 }

package/src/data-grid/data-grid-body.ts

@@ -289,7 +289,7 @@ export class DataGridBody extends LitElement {
       )
     })
 
-    this.renderRoot.addEventListener('mousedown', (event: Event) => {
+    this.renderRoot.addEventListener('pointerdown', (event: Event) => {
       const e = event as MouseEvent
       this.setSelectBlock()
 
@@ -318,7 +318,7 @@ export class DataGridBody extends LitElement {
       }
     })
 
-    this.renderRoot.addEventListener('mousemove', (event: Event) => {
+    this.renderRoot.addEventListener('pointermove', (event: Event) => {
       const e = event as MouseEvent
       if (e.buttons !== 1 || !this._draggable) {
         return
@@ -340,7 +340,7 @@ export class DataGridBody extends LitElement {
       }
     })
 
-    this.renderRoot.addEventListener('mouseup', (event: Event) => {
+    this.renderRoot.addEventListener('pointerup', (event: Event) => {
       this._draggable = false
     })
 

package/src/data-grid/data-grid-header.ts

@@ -266,7 +266,9 @@ export class DataGridHeader extends LitElement {
           : nothing}
         ${column.resizable !== false
           ? html`
-              <span splitter draggable="false" @mousedown=${(e: MouseEvent) => this._mousedown(e, index)}>&nbsp;</span>
+              <span splitter draggable="false" @pointerdown=${(e: PointerEvent) => this._pointerdown(e, index)}
+                >&nbsp;</span
+              >
             `
           : nothing}
       </div>
@@ -543,11 +545,11 @@ export class DataGridHeader extends LitElement {
     this._throttledNotifier(idx, width)
   }
 
-  _mousedown(e: MouseEvent, idx: number) {
+  _pointerdown(e: MouseEvent, idx: number) {
     e.stopPropagation()
     e.preventDefault()
 
-    var mousemoveHandler = ((e: MouseEvent) => {
+    var pointermoveHandler = ((e: MouseEvent) => {
       e.stopPropagation()
       e.preventDefault()
       let column = this.columns[idx]
@@ -561,14 +563,14 @@ export class DataGridHeader extends LitElement {
       this._notifyWidthChange(idx, width)
     }).bind(this)
 
-    var mouseupHandler = ((e: MouseEvent) => {
-      document.removeEventListener('mousemove', mousemoveHandler)
-      document.removeEventListener('mouseup', mouseupHandler)
+    var pointerupHandler = ((e: MouseEvent) => {
+      document.removeEventListener('pointermove', pointermoveHandler)
+      document.removeEventListener('pointerup', pointerupHandler)
 
-      mousemoveHandler(e)
+      pointermoveHandler(e)
     }).bind(this)
 
-    document.addEventListener('mousemove', mousemoveHandler)
-    document.addEventListener('mouseup', mouseupHandler)
+    document.addEventListener('pointermove', pointermoveHandler)
+    document.addEventListener('pointerup', pointerupHandler)
   }
 }

package/src/editors/ox-grist-editor.ts

@@ -107,9 +107,9 @@ export class OxGristEditor extends LitElement {
     this.addEventListener('keydown', this._onkeydown.bind(this))
 
     /* editor mode 인 경우의 마우스 움직임이, grist-body의 이벤트 처리에 의해서 에디터를 리셋시킬 수 있으므로, 이벤트 전파를 막는다. */
-    this.addEventListener('mousedown', (e: Event) => e.stopPropagation())
-    this.addEventListener('mousemove', (e: Event) => e.stopPropagation())
-    this.addEventListener('mouseup', (e: Event) => e.stopPropagation())
+    this.addEventListener('pointerdown', (e: Event) => e.stopPropagation())
+    this.addEventListener('pointermove', (e: Event) => e.stopPropagation())
+    this.addEventListener('pointerup', (e: Event) => e.stopPropagation())
 
     const { name = '' } = this.column
     const { align, defaultValue } = this.column.record

package/src/renderers/ox-grist-renderer-boolean.ts

@@ -12,7 +12,7 @@ export const OxGristRendererBoolean: FieldRenderer = (value, column, record, row
       type="checkbox"
       .checked=${!!value && !!String(value).match(/true/i)}
       ?disabled=${!editable}
-      @mousedown=${(e: Event) => {
+      @pointerdown=${(e: Event) => {
         /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */
         e.stopPropagation()
       }}

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);