@operato/data-grist 8.0.0-alpha.3 → 8.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.30",
   "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.3",
-    "@operato/p13n": "^8.0.0-alpha.0",
-    "@operato/popup": "^8.0.0-alpha.0",
+    "@operato/input": "^8.0.0-alpha.30",
+    "@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.0",
-    "@operato/time-calculator": "^8.0.0-alpha.0",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/styles": "^8.0.0-alpha.27",
+    "@operato/time-calculator": "^8.0.0-alpha.6",
+    "@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": "5978ef825cac0ae8589c0765f675c1791370d4fc"
+  "gitHead": "7024870c9c802e70e81e58e894c4ab4854ab5563"
 }

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

@@ -25,7 +25,16 @@ const OPTIONS: Intl.DateTimeFormatOptions = {
   // timeZone: 'America/Los_Angeles'
 }
 
-const formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)
+function getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {
+  try {
+    const safeLocale = locale || 'en-US'
+    return new Intl.DateTimeFormat(safeLocale, options)
+  } catch (e) {
+    return new Intl.DateTimeFormat('en-US', options)
+  }
+}
+
+const formatter = getSafeFormatter(navigator.language, OPTIONS)
 
 @customElement('ox-record-card')
 export class RecordCard extends LitElement {

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

@@ -61,6 +61,9 @@ export class DataGridBody extends LitElement {
     css`
       :host {
         font-variation-settings: 'FILL' 1;
+
+        overscroll-behavior: none;
+        user-select: none;
       }
 
       [select-block] {
@@ -72,6 +75,7 @@ export class DataGridBody extends LitElement {
         border: var(--grid-record-focused-cell-border);
         background-image: var(--focused-background-image);
         pointer-events: none;
+
         z-index: 5;
       }
 
@@ -289,14 +293,16 @@ export class DataGridBody extends LitElement {
       )
     })
 
-    this.renderRoot.addEventListener('mousedown', (event: Event) => {
-      const e = event as MouseEvent
+    this.renderRoot.addEventListener('pointerdown', (e: Event) => {
       this.setSelectBlock()
 
-      if (e.buttons !== 1) {
+      if ('buttons' in e && e.buttons !== 1) {
         return
       }
 
+      e.preventDefault()
+      e.stopPropagation()
+
       this._draggable = true
 
       var target = (e.target as Element).closest('ox-grid-field') as DataGridField
@@ -318,12 +324,15 @@ 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) {
+      if (('buttons' in e && e.buttons !== 1) || !this._draggable) {
         return
       }
 
+      e.preventDefault()
+      e.stopPropagation()
+
       const field = e.target as DataGridField
       if (!this._selectBlock) {
         this.setSelectBlock(this.focusedField || field, this.focusedField || field)
@@ -340,7 +349,10 @@ export class DataGridBody extends LitElement {
       }
     })
 
-    this.renderRoot.addEventListener('mouseup', (event: Event) => {
+    this.renderRoot.addEventListener('pointerup', (event: Event) => {
+      event.preventDefault()
+      event.stopPropagation()
+
       this._draggable = false
     })
 

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

@@ -21,6 +21,8 @@ export class DataGridFooter extends LitElement {
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
         align-items: center;
+
+        user-select: none;
       }
 
       :host * {

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

@@ -28,6 +28,8 @@ export class DataGridHeader extends LitElement {
         overflow: hidden;
 
         font-variation-settings: 'FILL' 1;
+
+        user-select: none;
       }
 
       :host([raised]) [fixed] {
@@ -266,7 +268,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 +547,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 +565,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/data-grist.ts

@@ -31,7 +31,8 @@ import {
   GristSelectFunction,
   PaginationConfig,
   PersonalGristPreference,
-  SortersConfig
+  SortersConfig,
+  ValidationReason
 } from './types'
 import { convertListParamToSearchString, convertSearchStringToListParam } from './utils'
 
@@ -478,28 +479,28 @@ export class DataGrist extends LitElement implements DataConsumer {
               </ox-grid>
             `
           : this.mode == 'CARD'
-            ? html`
-                <ox-card
-                  id="grist"
-                  .config=${this.compiledConfig}
-                  .data=${this._data}
-                  .sorters=${this.sorters || []}
-                  .filters=${this.filters || []}
-                  ?empty=${empty}
-                >
-                </ox-card>
-              `
-            : html`
-                <ox-list
-                  id="grist"
-                  .config=${this.compiledConfig}
-                  .data=${this._data}
-                  .sorters=${this.sorters || []}
-                  .filters=${this.filters || []}
-                  ?empty=${empty}
-                >
-                </ox-list>
-              `}
+          ? html`
+              <ox-card
+                id="grist"
+                .config=${this.compiledConfig}
+                .data=${this._data}
+                .sorters=${this.sorters || []}
+                .filters=${this.filters || []}
+                ?empty=${empty}
+              >
+              </ox-card>
+            `
+          : html`
+              <ox-list
+                id="grist"
+                .config=${this.compiledConfig}
+                .data=${this._data}
+                .sorters=${this.sorters || []}
+                .filters=${this.filters || []}
+                ?empty=${empty}
+              >
+              </ox-list>
+            `}
       </div>
 
       <div id="spinner" ?show=${this._showSpinner}></div>
@@ -1190,8 +1191,43 @@ export class DataGrist extends LitElement implements DataConsumer {
       })
     )
   }
-
+  /**
+   * Returns the current pagination limit.
+   * @returns {number} The current pagination limit value
+   */
   getCurrentLimit() {
     return this.dataProvider?.limit || ZERO_PAGINATION.limit
   }
+
+  /**
+   * Checks the validity of dirty records.
+   * @returns {Array<{record: GristRecord, invalidFields: Array<{field: string, reason: ValidationReason}>}>} List of invalid records and their corresponding invalid fields
+   */
+  checkDirtyRecordsValidity(): { record: GristRecord; invalidFields: { field: string; reason: ValidationReason }[] }[] {
+    const records = this.dirtyRecords
+    const validationResults = []
+
+    for (const record of records) {
+      const invalidFields = []
+
+      for (const column of this.compiledConfig.columns) {
+        if (column.record?.mandatory && (record[column.name] === undefined || record[column.name] === null)) {
+          invalidFields.push({
+            field: column.name,
+            reason: ValidationReason.MANDATORY
+          })
+        }
+        // Additional validation rules can be implemented here.
+      }
+
+      if (invalidFields.length > 0) {
+        validationResults.push({
+          record,
+          invalidFields
+        })
+      }
+    }
+
+    return validationResults
+  }
 }

package/src/data-list/record-partial.ts

@@ -26,7 +26,16 @@ const OPTIONS: Intl.DateTimeFormatOptions = {
   // timeZone: 'America/Los_Angeles'
 }
 
-const formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)
+function getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {
+  try {
+    const safeLocale = locale || 'en-US'
+    return new Intl.DateTimeFormat(safeLocale, options)
+  } catch (e) {
+    return new Intl.DateTimeFormat('en-US', options)
+  }
+}
+
+const formatter = getSafeFormatter(navigator.language, OPTIONS)
 
 @customElement('ox-record-partial')
 export class RecordPartial extends LitElement {

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

@@ -21,6 +21,8 @@ export class OxGristEditorFile extends OxGristEditor {
 
   get editorTemplate() {
     var value = typeof this.value === 'string' ? null : this.value
-    return html` <input style="opacity: 1" type="file" /> `
+    var { multiple = false } = this.column.record || {}
+
+    return html` <input style="opacity: 1" type="file" ?multiple=${multiple} /> `
   }
 }

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/record-view/record-creator.ts

@@ -7,7 +7,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { OxPopup } from '@operato/popup'
 
 import { DataGrist } from '../data-grist'
-import { ColumnConfig, GristRecord } from '../types'
+import { ColumnConfig, GristRecord, ValidationReason } from '../types'
 import { RecordView } from './record-view'
 
 @customElement('ox-record-creator')
@@ -43,6 +43,23 @@ export class RecordCreator extends LitElement {
     return html`<slot></slot>`
   }
 
+  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {
+    const columns = this.grist!.compiledConfig.columns;
+    const invalidFields: { field: string; reason: ValidationReason }[] = [];
+
+    columns.forEach(column => {
+      if (column.record?.mandatory && (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {
+        invalidFields.push({
+          field: column.name,
+          reason: ValidationReason.MANDATORY
+        });
+      }
+      // 여기에 추가적인 유효성 검사 규칙을 구현할 수 있습니다.
+    });
+
+    return invalidFields
+  }
+
   lightPopupRecordView() {
     const config = this.grist!.compiledConfig
     var title = 'create'
@@ -87,10 +104,21 @@ export class RecordCreator extends LitElement {
           @cancel=${(e: Event) => {
             popup.close()
           }}
-          @ok=${(e: Event) => {
-            popup.close()
+          @ok=${async (e: Event) => {
+              const view = e.currentTarget as RecordView
 
-            const view = e.currentTarget as RecordView
+            // 레코드 밸리데이션 체크
+            const invalidFields = await this.validateRecord(view.record);
+            if (invalidFields.length > 0) {
+              // const firstInvalidField = invalidFields[0];
+              // if (firstInvalidField) {
+              //   view.setFocus(firstInvalidField.field)
+              // }
+              view.setFocusOnInvalid(invalidFields);
+              return false;
+            }
+
+            popup.close()
 
             this.dispatchEvent(
               new CustomEvent('ok', {
@@ -142,8 +170,26 @@ export class RecordCreator extends LitElement {
 
             recordView.addEventListener('ok', async (e: Event) => {
               const view = e.currentTarget as RecordView
+
+              // 레코드 밸리데이션 체크
+              const invalidFields = await this.validateRecord(view.record);
+              if (invalidFields.length > 0) {
+                const firstInvalidField = invalidFields[0];
+                if (firstInvalidField) {
+                  const fieldElement = view.renderRoot?.querySelector(`[name="${firstInvalidField}"]`);
+                  if (fieldElement) {
+                    (fieldElement as HTMLElement).focus();
+                  }
+                }
+                return false;
+              }
+              
               if (await this.callback?.(view.record)) {
                 popup.close()
+              } else {
+                // 밸리데이션 실패 시 처리
+                console.error('레코드 밸리데이션 실패');
+                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.
               }
             })
 

package/src/record-view/record-view-body.ts

@@ -5,8 +5,9 @@ import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord } from '../types'
+import { ColumnConfig, GristRecord, ValidationReason } from '../types'
 import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'
+import i18next from 'i18next'
 
 @customElement('ox-record-view-body')
 export class RecordViewBody extends LitElement {
@@ -23,7 +24,7 @@ export class RecordViewBody extends LitElement {
       }
 
       div[content] {
-        align-self: auto;
+        align-self: center;
 
         display: grid;
         grid-template-columns: 2fr 3fr 2fr 3fr;
@@ -69,7 +70,6 @@ export class RecordViewBody extends LitElement {
       }
 
       ox-grid-field {
-        justify-content: var();
         background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));
         border: var(--record-view-grid-field-border);
         border-radius: var(--md-sys-shape-corner-small);
@@ -96,6 +96,20 @@ export class RecordViewBody extends LitElement {
         font-weight: bold;
       }
 
+      .highlight-invalid {
+        position: relative;
+        padding: var(--spacing-tiny) var(--spacing-small);
+      }
+
+      .highlight-invalid::after {
+        content: attr(data-reason); /* 콘텐츠를 동적으로 변경하기 위해 data-reason 속성을 사용 */
+        color: red;
+        font-size: 12px;
+        position: absolute;
+        left: 0;
+        bottom: -8px; /* 라벨 아래쪽에 메시지를 표시 */
+      }
+
       @media only screen and (max-width: 1000px) {
         div[content] {
           grid-template-columns: 2fr 3fr;
@@ -152,6 +166,35 @@ export class RecordViewBody extends LitElement {
     this.removeEventListener('keydown', this._onKeyDown)
   }
 
+  setFocus(fieldElement: HTMLElement) {
+    fieldElement?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))
+  }
+
+  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {
+    const allLabels = this.renderRoot.querySelectorAll('label')
+    allLabels.forEach((label: HTMLLabelElement) => {
+      label.classList.remove('highlight-invalid')
+      label.removeAttribute('data-reason')
+    })
+
+    // 유효성 검사를 통과하지 못한 필드에 대해 처리
+    invalidFields.forEach(({ field, reason }, index) => {
+      const labelElement = this.renderRoot.querySelector(`[data-name="${field}"]`) as HTMLLabelElement
+      const fieldElement = this.renderRoot.querySelector(`[data-name="${field}"] + ox-grid-field`) as HTMLInputElement
+
+      // 동적으로 data-reason 속성을 설정하여 메시지를 변경
+      if (labelElement) {
+        labelElement.classList.add('highlight-invalid')
+        labelElement.setAttribute('data-reason', '(' + i18next.t(`text.validation-reason.${reason}`) + ')')
+      }
+
+      // 첫 번째 필드에 포커스 설정
+      if (index === 0 && fieldElement) {
+        this.setFocus(fieldElement)
+      }
+    })
+  }
+
   _onKeyDown(event: KeyboardEvent) {
     if (event.key === 'Tab') {
       const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))
@@ -165,7 +208,8 @@ export class RecordViewBody extends LitElement {
       }
 
       event.preventDefault()
-      fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))
+      const nextField = fields[nextIndex] as HTMLInputElement
+      nextField && this.setFocus(nextField)
     }
   }
 
@@ -185,7 +229,7 @@ export class RecordViewBody extends LitElement {
           let dirtyFields = record['__dirtyfields__'] || {}
 
           return html`
-            <label ?editable=${editable} ?wide=${wide}>
+            <label ?editable=${editable} ?wide=${wide} data-name=${column.name}>
               <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>
               <md-icon>edit</md-icon>
             </label>

package/src/record-view/record-view.ts

@@ -4,12 +4,14 @@ import '@operato/input/ox-input-file.js'
 import '../data-grid/data-grid-field'
 
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import { ScrollbarStyles } from '@operato/styles'
 
 import { ZERO_RECORD } from '../configure/zero-config'
-import { ColumnConfig, GristRecord } from '../types'
+import { ColumnConfig, GristRecord, ValidationReason } from '../types'
+
+import { RecordViewBody } from './record-view-body'
 
 @customElement('ox-record-view')
 export class RecordView extends LitElement {
@@ -66,6 +68,8 @@ export class RecordView extends LitElement {
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
 
+  @query('ox-record-view-body') body!: RecordViewBody
+
   render() {
     return html`
       <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
@@ -82,6 +86,10 @@ export class RecordView extends LitElement {
     this.setAttribute('tabindex', '0')
   }
 
+  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {
+    this.body.setFocusOnInvalid(invalidFields)
+  }
+
   onReset() {
     this.focus()
 

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/src/renderers/ox-grist-renderer-file.ts

@@ -1,17 +1,31 @@
-import { html } from 'lit'
+import { html, nothing } from 'lit'
 
 import { FieldRenderer } from '../types'
 
+function download(file: { mimetype: string; name: string; fullpath: string }) {
+  const element = document.createElement('a')
+  element.setAttribute('href', file.fullpath)
+  element.setAttribute('download', file.name!)
+  document.body.appendChild(element)
+  element.click()
+}
+
 export const OxGristRendererFile: FieldRenderer = (value, column, record, rowIndex, field) => {
   let text: string
 
   if (!value) {
-    text = ''
+    return html`<span>&nbsp;</span>`
   } else if (typeof value === 'string') {
-    text = value
+    return html`<span>${value}</span>`
   } else {
-    text = value[0].name
+    const files = value as { mimetype: string; name: string; fullpath: string }[]
+    return html`<span
+      >${files.map(
+        (file, idx) => html`
+          <a @click=${() => download(file)} file><md-icon>description</md-icon>${file.name}</a>
+          ${files.length - 1 == idx ? html`</br>` : nothing}
+        `
+      )}</span
+    >`
   }
-
-  return html`<span>${text}</span>`
 }

package/src/types.ts

@@ -803,3 +803,11 @@ export type FilterPreference = {
   hidden?: boolean
   value?: any
 }
+
+export enum ValidationReason {
+  MANDATORY = 'MANDATORY',
+  FORMAT = 'FORMAT',
+  RANGE = 'RANGE',
+  UNIQUE = 'UNIQUE'
+}
+

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);

package/translations/en.json

@@ -6,5 +6,9 @@
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",
   "label.accumulator_max": "min",
-  "label.accumulator_min": "max"
+  "label.accumulator_min": "max",
+  "text.validation-reason.MANDATORY": "mandatory",
+  "text.validation-reason.FORMAT": "invalid format",
+  "text.validation-reason.RANGE": "out of range",
+  "text.validation-reason.UNIQUE": "duplicate value"
 }

package/translations/ja.json

@@ -5,5 +5,9 @@
   "label.accumulator_avg": "平均",
   "label.accumulator_count": "カウント",
   "label.accumulator_max": "最小",
-  "label.accumulator_min": "最大"
+  "label.accumulator_min": "最大",
+  "text.validation-reason.MANDATORY": "必須",
+  "text.validation-reason.FORMAT": "形式が正しくありません",
+  "text.validation-reason.RANGE": "範囲外",
+  "text.validation-reason.UNIQUE": "重複"
 }