@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.0

package/docs/default-value/value-generator/hour-time-generator.md

@@ -30,14 +30,47 @@ function getRelativeHourTime(params: RelativeHourTimeParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeHourTime = getRelativeHourTime({
   relativeHour: 2,
   relativeSeconds: 120,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeHourTime)
 ```
 
+```typescript
+/* text format style */
+const relativeHourTime = getRelativeHourTime({
+  relativeHour: 2,
+  relativeSeconds: 120,
+  timeZone: 'Asia/Seoul',
+  format: 'h:mm:ss'
+})
+
+console.log(relativeHourTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeHourTime = getRelativeHourTime({
+  relativeHour: 2,
+  relativeSeconds: 120,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeHourTime)
+```
+
 이 코드는 현재 시간으로부터 2시간 후와 2분 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/minute-time-generator.md

@@ -30,14 +30,47 @@ function getRelativeMinuteTime(params: RelativeMinuteTimeParams = {}): string |
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeMinuteTime = getRelativeMinuteTime({
   relativeMinutes: 15,
   relativeSeconds: 30,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeMinuteTime)
 ```
 
+```typescript
+/* text format style */
+const relativeMinuteTime = getRelativeMinuteTime({
+  relativeMinutes: 15,
+  relativeSeconds: 30,
+  timeZone: 'Asia/Seoul',
+  format: 'mm:ss'
+})
+
+console.log(relativeMinuteTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeMinuteTime = getRelativeMinuteTime({
+  relativeMinutes: 15,
+  relativeSeconds: 30,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeMinuteTime)
+```
+
 이 코드는 현재 시간으로부터 15분 30초 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/month-date-generator.md

@@ -30,10 +30,12 @@ function getRelativeMonthDate(params: RelativeMonthDateParams = {}): string | nu
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeMonthDate = getRelativeMonthDate({
   relativeMonths: 2,
   relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 

package/docs/default-value/value-generator/now-generator.md

@@ -28,12 +28,41 @@ function getCurrentTime(
 ## 예제
 
 ```typescript
+/* get Date() object */
 const currentTime = getCurrentTime({
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(currentTime)
 ```
 
+```typescript
+/* text format style */
+const relativeDate = getCurrentTime({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeDate = getCurrentTime({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeDate)
+```
+
 이 코드는 현재 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/time-generator.md

@@ -28,13 +28,44 @@ function getRelativeTime(params: RelativeTimeParams = {}): string | number | Dat
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeTime = getRelativeTime({
   relativeSeconds: 3600,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeTime)
 ```
 
+```typescript
+/* text format style */
+const relativeTime = getRelativeTime({
+  relativeSeconds: 3600,
+  timeZone: 'Asia/Seoul',
+  format: 'hh:mm:ss'
+})
+
+console.log(relativeTime)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeTime = getRelativeTime({
+  relativeSeconds: 3600,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
+  format: {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false,
+    timeZone: 'America/Los_Angeles'
+  }
+})
+
+console.log(relativeTime)
+```
+
 이 코드는 현재 시간으로부터 1시간 후의 시간을 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/today-generator.md

@@ -28,12 +28,41 @@ function getToday(
 ## 예제
 
 ```typescript
+/* get Date() object */
 const todayDate = getToday({
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(todayDate)
 ```
 
+```typescript
+/* text format style */
+const relativeDate = getToday({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeDate = getToday({
+  relativeDays: 1,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeDate)
+```
+
 이 코드는 오늘의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/week-date-generator.md

@@ -30,14 +30,45 @@ function getRelativeWeekDate(params: RelativeWeekDateParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeWeekDate = getRelativeWeekDate({
   relativeWeeks: 2,
   relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeWeekDate)
 ```
 
+```typescript
+/* text format style */
+const relativeWeekDate = getRelativeWeekDate({
+  relativeWeeks: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeWeekDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeWeekDate = getRelativeWeekDate({
+  relativeWeeks: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeWeekDate)
+```
+
 이 코드는 현재 시간으로부터 2주 후와 3일 후의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/docs/default-value/value-generator/year-date-generator.md

@@ -30,14 +30,45 @@ function getRelativeYearDate(params: RelativeYearDateParams = {}): string | numb
 ## 예제
 
 ```typescript
+/* get Date() object */
 const relativeYearDate = getRelativeYearDate({
   relativeYears: 2,
   relativeDays: 3,
   timeZone: 'Asia/Seoul',
+  loclae: 'en-CA',
   format: 'date'
 })
 
 console.log(relativeYearDate)
 ```
 
+```typescript
+/* text format style */
+const relativeYearDate = getRelativeYearDate({
+  relativeYears: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  format: 'YYYY-MM-DD'
+})
+
+console.log(relativeYearDate)
+```
+
+```typescript
+/* Intl.DateTimeFormat style */
+const relativeYearDate = getRelativeYearDate({
+  relativeYears: 2,
+  relativeDays: 3,
+  timeZone: 'Asia/Seoul',
+  loclae: 'en-CA' /* YYYY-MM-DD format */,
+  format: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  }
+})
+
+console.log(relativeYearDate)
+```
+
 이 코드는 현재 시간으로부터 2년 후와 3일 후의 날짜를 `'Asia/Seoul'` 시간대에서의 Date 객체로 반환합니다.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "2.0.0-alpha.99",
+  "version": "2.0.0-beta.0",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -21,7 +21,8 @@
     "./ox-report.js": "./dist/src/data-report.js",
     "./ox-filters-form.js": "./dist/src/filters/filters-form.js",
     "./ox-sorters-control.js": "./dist/src/sorters/sorters-control.js",
-    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js"
+    "./ox-record-creator.js": "./dist/src/record-view/record-creator.js",
+    "./ox-grist-personalizer.js": "./dist/src/personalizer/ox-grist-personalizer.js"
   },
   "typesVersions": {
     "*": {
@@ -39,6 +40,9 @@
       ],
       "ox-record-creator.js": [
         "dist/src/record-view/record-creator.d.ts"
+      ],
+      "ox-grist-personalizer.js": [
+        "dist/src/personalizer/ox-grist-personalizer.d.ts"
       ]
     }
   },
@@ -56,13 +60,14 @@
   },
   "dependencies": {
     "@material/web": "^1.4.0",
-    "@operato/headroom": "^2.0.0-alpha.57",
-    "@operato/input": "^2.0.0-alpha.99",
-    "@operato/popup": "^2.0.0-alpha.99",
-    "@operato/pull-to-refresh": "^2.0.0-alpha.57",
-    "@operato/styles": "^2.0.0-alpha.99",
-    "@operato/time-calculator": "^2.0.0-alpha.57",
-    "@operato/utils": "^2.0.0-alpha.68",
+    "@operato/headroom": "^2.0.0-beta.0",
+    "@operato/input": "^2.0.0-beta.0",
+    "@operato/p13n": "^2.0.0-beta.0",
+    "@operato/popup": "^2.0.0-beta.0",
+    "@operato/pull-to-refresh": "^2.0.0-beta.0",
+    "@operato/styles": "^2.0.0-beta.0",
+    "@operato/time-calculator": "^2.0.0-beta.0",
+    "@operato/utils": "^2.0.0-beta.0",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
     "lit": "^3.1.2",
@@ -101,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "8641cdd871ffdbef9e5b2a79bbf3862fb0422e3e"
+  "gitHead": "1c7306d2c3170b773e16d5d4ef79b490584d5441"
 }

package/src/data-card/data-card-field.ts

@@ -34,7 +34,7 @@ export class DataCardField extends LitElement {
       }
 
       :host > * {
-        margin: 0;
+        margin: var(--spacing-none);
 
         overflow: hidden;
 
@@ -44,7 +44,7 @@ export class DataCardField extends LitElement {
 
       :host > *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
 
       :host([name]) label {

package/src/data-card/data-card-gutter-menu.ts

@@ -16,22 +16,22 @@ class DataCardGutterMenu extends LitElement {
     }
 
     ::slotted(ox-popup) {
-      padding: 4px;
+      padding: var(--spacing-small);
     }
 
     md-icon {
       flex: 1;
-      margin: 0;
-      margin-bottom: 1px;
+      margin: var(--spacing-none);
       border: var(--data-card-item-btn-border);
       border-radius: var(--data-card-item-btn-border-radius);
       padding: var(--data-card-item-btn-padding);
-      font-size: var(--grid-record-fontsize);
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
     }
 
     md-icon:hover {
       cursor: pointer;
-      color: var(--grid-record-color-hover);
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
   `
 

package/src/data-card/data-card-gutter.ts

@@ -12,7 +12,7 @@ export class DataCardGutter extends LitElement {
     css`
       :host {
         background-color: transparent;
-
+        align-content: center;
         font-size: var(--grid-record-wide-fontsize);
         text-overflow: ellipsis;
         color: var(--grid-record-color);
@@ -20,22 +20,22 @@ export class DataCardGutter extends LitElement {
 
       * {
         flex: 1;
-        margin: 0;
-        margin-bottom: 1px;
+        margin: var(--spacing-tiny);
         border: var(--data-card-item-btn-border);
         border-radius: var(--data-card-item-btn-border-radius);
         padding: var(--data-card-item-btn-padding);
-        font-size: var(--grid-record-fontsize);
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       }
 
       *:hover {
         cursor: pointer;
-        color: var(--grid-record-color-hover);
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
 
       *[center] {
         flex: none;
-        margin: 0 auto;
+        margin: var(--spacing-none) auto;
       }
     `
   ]

package/src/data-card/data-card.ts

@@ -13,16 +13,13 @@ export class DataCard extends DataManipulator {
   static styles = [
     css`
       :host {
-        background-color: var(--data-card-background-color);
         overflow-y: auto;
-        padding: var(--padding-wide);
+        padding: var(--spacing-medium);
 
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-
         grid-template-rows: min-content;
-
-        grid-gap: var(--margin-wide);
+        grid-gap: var(--spacing-large);
       }
 
       ox-record-card {
@@ -33,24 +30,25 @@ export class DataCard extends DataManipulator {
         border-radius: var(--data-card-record-card-border-radius);
       }
       ox-record-card:hover {
+        background-color: var(--md-sys-color-inverse-primary);
         border: var(--data-card-record-card-border-hover);
         box-shadow: var(--data-card-record-card-boxshadow-hover);
       }
 
       [selected-row] {
-        background-color: var(--data-card-record-card-selected-border);
+        background-color: var(--grid-record-selected-background-color);
       }
 
       #upward {
-        --md-icon-size: 26px;
+        --md-icon-size: var(--icon-size-large);
         position: absolute;
         top: var(--data-card-fab-position-vertical);
         right: var(--data-card-fab-position-horizontal);
         background-color: rgba(255, 255, 255, 0.7);
-        border-radius: 20px;
+        border-radius: var(--md-sys-shape-corner-large);
         color: var(--data-card-fab-color);
         box-shadow: var(--data-card-fab-shadow);
-        padding: 7px;
+        padding: var(--spacing-small);
       }
 
       slot {

package/src/data-card/record-card.ts

@@ -41,24 +41,24 @@ export class RecordCard extends LitElement {
       :host([dirty])::before {
         content: '';
         position: absolute;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
 
-        width: 0px;
-        height: 0px;
+        width: var(--spacing-none);
+        height: var(--spacing-none);
         border-top: var(--grid-record-dirty-border-top);
         border-right: var(--grid-record-dirty-border-left);
       }
 
       [dirty] {
         position: absolute;
-        margin: 0;
+        margin: var(--spacing-none);
         height: 20px;
 
         font: var(--grid-record-dirty-icon-font);
         text-indent: 1px;
-        left: 0;
-        top: 0;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
         color: var(--grid-record-dirty-color);
       }
 
@@ -67,13 +67,12 @@ export class RecordCard extends LitElement {
         height: var(--data-card-thumbnail-height);
         border-top-left-radius: var(--data-card-record-card-border-radius);
         border-top-right-radius: var(--data-card-record-card-border-radius);
-        border-bottom: var(--data-card-thumbnail-border-bottom);
         overflow: hidden;
       }
 
       [content] {
         display: grid;
-        gap: 2px 7px;
+        gap: var(--spacing-tiny) var(--spacing-medium);
         grid-template:
           'brief gutters'
           'detail detail';
@@ -84,7 +83,7 @@ export class RecordCard extends LitElement {
       [brief] {
         display: flex;
         flex-direction: column;
-        gap: 2px;
+        gap: var(--spacing-tiny);
         grid-area: brief;
         overflow: hidden;
       }

package/src/data-grid/data-grid-accum-field.ts

@@ -22,13 +22,17 @@ export class DataGridAccumField extends LitElement {
         position: relative;
 
         white-space: nowrap;
-        background-color: var(--grid-accum-record-background-color, #ccc);
-        border: 1px solid transparent;
+        background-color: var(--md-sys-color-inverse-primary);
+        border: var(--grid-record-border-bottom);
         border-width: 1px 0;
-        border-bottom: var(--grid-record-border-bottom);
+        padding: var(--spacing-small);
 
         font-size: var(--grid-record-wide-fontsize);
-        min-height: 19px;
+        color: var(--md-sys-color-primary);
+        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
+
+        min-height: 30px;
+        box-sizing: border-box;
       }
 
       span,
@@ -62,7 +66,7 @@ export class DataGridAccumField extends LitElement {
   @property({ type: Boolean }) editing = false
   @property({ type: Object }) value = {}
   @property({ attribute: false }) emphasized: any = false
-  @property({ type: String }) fixed?: string
+  @property({ type: String, attribute: true }) fixed?: string
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
@@ -100,6 +104,8 @@ export class DataGridAccumField extends LitElement {
     if (changes.has('fixed')) {
       if (this.fixed) {
         this.style.left = this.fixed + 'px'
+      } else {
+        this.style.left = 'unset'
       }
     }
   }

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

@@ -70,4 +70,16 @@ export const dataGridBodyStyle = css`
       background-color: transparent;
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    ox-grid-field[focused-row] {
+      background-blend-mode: lighten;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    ox-grid-field[focused-row] {
+      background-blend-mode: darken;
+    }
+  }
 `