@operato/dataset 2.0.0-alpha.14 → 2.0.0-alpha.140

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/dataset",
   "description": "WebApplication dataset supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.140",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -105,37 +105,35 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^2.0.0-alpha.13",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/grist-editor": "^2.0.0-alpha.13",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.13",
-    "@operato/popup": "^2.0.0-alpha.9",
-    "@operato/property-editor": "^2.0.0-alpha.13",
-    "@operato/shell": "^2.0.0-alpha.8",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
-    "lit": "^2.5.0"
+    "@material/web": "^1.4.0",
+    "@operato/data-grist": "^2.0.0-alpha.140",
+    "@operato/graphql": "^2.0.0-alpha.111",
+    "@operato/grist-editor": "^2.0.0-alpha.140",
+    "@operato/i18n": "^2.0.0-alpha.111",
+    "@operato/input": "^2.0.0-alpha.134",
+    "@operato/popup": "^2.0.0-alpha.134",
+    "@operato/property-editor": "^2.0.0-alpha.140",
+    "@operato/shell": "^2.0.0-alpha.134",
+    "@operato/styles": "^2.0.0-alpha.134",
+    "@operato/utils": "^2.0.0-alpha.122",
+    "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -152,5 +150,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a0175bae24b9546f65a4ede34dfa27af48db5ed3"
+  "gitHead": "7d16d4f188adba3d56b4ce8c544c3edb275b2373"
 }

package/src/grist-editor/ox-popup-data-item-spec.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../ox-data-item-spec.js'
 
 import { css, html, LitElement } from 'lit'
@@ -5,13 +6,14 @@ import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 
 import { DataItem } from '../types.js'
 
 @customElement('ox-popup-data-item-spec')
 export class OxPopupDataItemSpec extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -39,11 +41,6 @@ export class OxPopupDataItemSpec extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -59,8 +56,10 @@ export class OxPopupDataItemSpec extends LitElement {
       </ox-data-item-spec>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/src/ox-data-entry-form.ts

@@ -11,8 +11,6 @@ import { OxDataEntrySubgroupForm } from './ox-data-entry-subgroup-form.js'
 export class OxDataEntryForm extends LitElement {
   static styles = css`
     :host {
-      display: flex;
-      flex-direction: row;
       --item-description-font: normal 0.8rem/1rem var(--theme-font);
       --item-description-color: var(--page-description-color);
     }
@@ -34,13 +32,12 @@ export class OxDataEntryForm extends LitElement {
     }
 
     form {
-      flex: 1;
-
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
 
-    label {
+    form > div[label] {
       display: grid;
 
       grid-template-rows: auto 1fr;
@@ -50,11 +47,11 @@ export class OxDataEntryForm extends LitElement {
       grid-gap: 9px;
       align-items: center;
       margin-bottom: var(--margin-default);
-    }
 
-    label:nth-child(odd) {
-      background-color: var(--main-section-background-color);
-      padding: var(--padding-default) 0;
+      &:nth-child(odd) {
+        background-color: var(--main-section-background-color);
+        padding: var(--padding-default) 0;
+      }
     }
 
     div[name] {
@@ -69,15 +66,15 @@ export class OxDataEntryForm extends LitElement {
       font: var(--item-description-font);
       color: var(--item-description-color);
       text-align: left;
-    }
 
-    div[description] * {
-      vertical-align: middle;
-    }
+      * {
+        vertical-align: middle;
+      }
 
-    div[description] mwc-icon {
-      margin-top: -3px;
-      font-size: 0.9rem;
+      md-icon {
+        margin-top: -3px;
+        font-size: 0.9rem;
+      }
     }
 
     div[elements] {
@@ -87,18 +84,18 @@ export class OxDataEntryForm extends LitElement {
       flex-wrap: wrap;
       gap: 10px;
       padding-right: var(--padding-default);
-    }
 
-    div[elements] * {
-      flex: 1;
-    }
+      * {
+        flex: 1;
+      }
 
-    div[elements] input,
-    div[elements] select {
-      border: var(--input-field-border);
-      border-radius: var(--input-field-border-radius);
-      padding: var(--input-field-padding);
-      font: var(--input-field-font);
+      input,
+      select {
+        border: var(--input-field-border);
+        border-radius: var(--input-field-border-radius);
+        padding: var(--input-field-padding);
+        font: var(--input-field-font);
+      }
     }
 
     div[subgroup] {
@@ -107,7 +104,7 @@ export class OxDataEntryForm extends LitElement {
     }
 
     @media only screen and (max-width: 460px) {
-      label {
+      form > div[label] {
         display: grid;
 
         grid-template-rows: auto auto 1fr;
@@ -168,7 +165,7 @@ export class OxDataEntryForm extends LitElement {
 
   private buildInputs4Subgroup(subgroup: string, dataItems: DataItem[], value: { [tag: string]: any }): TemplateResult {
     return html`
-      <label>
+      <div label>
         <div name>${subgroup}</div>
         <div subgroup>
           <ox-data-entry-subgroup-form
@@ -177,7 +174,7 @@ export class OxDataEntryForm extends LitElement {
             .value=${value}
           ></ox-data-entry-subgroup-form>
         </div>
-      </label>
+      </div>
     `
   }
 
@@ -199,23 +196,42 @@ export class OxDataEntryForm extends LitElement {
                 option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`
               )}
             </select>`
-            break
+
+          case 'radio':
+            return html`<div
+              @change=${(e: Event) => {
+                const div = e.currentTarget as HTMLElement
+                const inputHidden = div.querySelector(`input[name="${tag}"]`) as HTMLInputElement
+                inputHidden.value = (e.target as HTMLInputElement).value
+              }}
+            >
+              <input type="hidden" name=${tag} />
+
+              ${(options.options || []).map(
+                option =>
+                  html`<label>
+                    <input
+                      type="radio"
+                      name=${'$' + tag + '-' + idx}
+                      .value=${option.value}
+                      ?checked=${option.value === v}
+                    />
+                    ${option.text}
+                  </label>`
+              )}
+            </div>`
 
           case 'boolean':
             return html` <input type="checkbox" name=${tag} .checked=${v} />`
-            break
 
           case 'number':
             return html` <input type="number" name=${tag} value=${v} />`
-            break
 
           case 'date':
             return html` <input type="date" name=${tag} value=${v} />`
-            break
 
           case 'datetime':
             return html` <input type="datetime-local" name=${tag} value=${v} />`
-            break
 
           case 'file':
             return html`<ox-input-file name=${tag} label="Attach Files" accept="*/*" multiple="true"></ox-input-file>`
@@ -226,11 +242,11 @@ export class OxDataEntryForm extends LitElement {
         }
       })
 
-      return html` <label .title=${description}>
+      return html` <div label>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info</md-icon> ${description}</div>
         <div elements>${elements}</div>
-      </label>`
+      </div>`
     })
   }
 
@@ -238,19 +254,22 @@ export class OxDataEntryForm extends LitElement {
     const dataItems = this.dataSet!.dataItems
     const nonGroupDataItems = dataItems.filter(dataItem => !dataItem.group)
 
-    const nonGroupValue = (nonGroupDataItems || []).reduce((sum, dataItem) => {
-      const { tag, type } = dataItem
+    const nonGroupValue = (nonGroupDataItems || []).reduce(
+      (sum, dataItem) => {
+        const { tag, type } = dataItem
 
-      const editors = Array.prototype.slice.call(
-        this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
-      ) as HTMLInputElement[]
+        const editors = Array.prototype.slice.call(
+          this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>
+        ) as HTMLInputElement[]
 
-      if (editors.length > 0) {
-        sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
-      }
+        if (editors.length > 0) {
+          sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
+        }
 
-      return sum
-    }, {} as { [tag: string]: any })
+        return sum
+      },
+      {} as { [tag: string]: any }
+    )
 
     return Array.from(this.subgroups).reduce((value, subgroup) => {
       return {

package/src/ox-data-entry-subgroup-form.ts

@@ -58,6 +58,8 @@ export class OxDataEntrySubgroupForm extends LitElement {
 
       switch (type) {
         case 'select':
+        case 'radio': // 그리드안에 radio가 들어갈수 없어서 select로 변환
+          columnConfig.type = 'select'
           columnConfig.record.options = [
             '',
             ...(options.options || []).map((option: any) => {

package/src/ox-data-entry-view.ts

@@ -1,6 +1,6 @@
 import '@operato/input/ox-input-file.js'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
@@ -39,7 +39,7 @@ export class OxDataEntryView extends LitElement {
     [page-description] * {
       vertical-align: middle;
     }
-    [page-description] mwc-icon {
+    [page-description] md-icon {
       margin-top: -2px;
       font-size: 0.9rem;
       color: var(--page-description-color);
@@ -57,6 +57,7 @@ export class OxDataEntryView extends LitElement {
       font: var(--th-font);
       color: var(--th-color);
       text-align: left;
+      white-space: nowrap;
     }
     th[item] {
       min-width: 100px;
@@ -86,13 +87,19 @@ export class OxDataEntryView extends LitElement {
     td[name] {
       font-weight: bold;
     }
-    td mwc-icon {
+    td md-icon {
       color: var(--status-danger-color);
     }
 
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSet?: DataSet
@@ -154,20 +161,24 @@ export class OxDataEntryView extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info</md-icon> ${description}</div>
         <div elements>${elements}</div>
       </label>`
     })
   }
 
   render() {
+    if (!this.dataSet) {
+      return nothing
+    }
+
     const { name, description, useCase, dataItems = [] } = this.dataSet!
 
     const data = this.value || {}
     const useCaseNames = useCase?.split(',').filter(useCase => useCase.trim()) || []
 
     return html` <h2>${name}</h2>
-      <p page-description><mwc-icon>info_outline</mwc-icon> ${description}<br /></p>
+      <p page-description><md-icon>info</md-icon> ${description}<br /></p>
 
       <form>
         <table>
@@ -194,8 +205,8 @@ export class OxDataEntryView extends LitElement {
                 <td>${unit}</td>
                 <td>${this.buildValue(type, value)}</td>
                 <td><pre>${this.buildSpec(useCaseNames, spec)}</pre></td>
-                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
-                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>
+                <td>${ooc ? html`<md-icon>done</md-icon>` : ''}</td>
+                <td>${oos ? html`<md-icon>done</md-icon>` : ''}</td>
               </tr>
             `
           })}

package/src/ox-data-item-spec.ts

@@ -52,14 +52,14 @@ export class OxDataItemSpec extends LitElement {
     div[description] * {
       vertical-align: middle;
     }
-    div[description] mwc-icon {
+    div[description] md-icon {
       margin-top: -3px;
       font-size: 0.9rem;
     }
     ox-properties-dynamic-view {
       grid-area: inputs;
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       flex-wrap: wrap;
       gap: 10px;
       padding-right: var(--padding-default);
@@ -94,12 +94,13 @@ export class OxDataItemSpec extends LitElement {
   render() {
     return html`<form @property-change=${(e: Event) => this.onChange(e)}>
       ${this.dataItemSpecSets.map(
-        ({ name, description, specs }) => html` <label
-          ><div name>${name}</div>
-          <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
-          <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
-          </ox-properties-dynamic-view
-        ></label>`
+        ({ name, description, specs }) =>
+          html` <label
+            ><div name>${name}</div>
+            <div description><md-icon>info</md-icon> ${description}</div>
+            <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
+            </ox-properties-dynamic-view
+          ></label>`
       )}
     </form>`
   }

package/src/ox-data-ooc-badge.ts

@@ -1,6 +1,6 @@
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
-import '@material/mwc-icon'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -15,12 +15,16 @@ export class OxDataOocBadge extends LitElement {
       text-align: center;
     }
 
-    mwc-icon {
-      font-size: 80px;
+    md-icon {
+      --md-icon-size: 80px;
       opacity: 0.4;
       color: var(--primary-background-color);
     }
 
+    md-icon[filled] {
+      font-variation-settings: 'FILL' 1;
+    }
+
     div {
       position: absolute;
       top: 22px;
@@ -56,7 +60,7 @@ export class OxDataOocBadge extends LitElement {
 
     return html`
       <h3 ?danger=${state != 'CORRECTED'} ?complete=${state == 'CORRECTED'}>
-        <mwc-icon>shield</mwc-icon>
+        <md-icon filled>shield</md-icon>
         <div>DATA OOC <span field-state>${state || ''}</span></div>
       </h3>
     `

package/src/ox-data-ooc-brief-view.ts

@@ -2,7 +2,7 @@ import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
 import './ox-data-ooc-badge'
 import './ox-data-ooc-correction-part'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -15,7 +15,6 @@ export class OxDataOocBriefView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }

package/src/ox-data-ooc-correction-part.ts

@@ -1,5 +1,5 @@
 import '@operato/input/ox-input-file.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -14,7 +14,6 @@ export class OxDataOocCorrectionPart extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }
@@ -27,7 +26,7 @@ export class OxDataOocCorrectionPart extends LitElement {
       font-size: 20px;
     }
 
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
@@ -50,7 +49,7 @@ export class OxDataOocCorrectionPart extends LitElement {
       color: var(--secondary-color);
     }
 
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 3px;
       margin: 0 2px 0 10px;
@@ -86,7 +85,7 @@ export class OxDataOocCorrectionPart extends LitElement {
             <h3>${i18next.t('label.corrective instruction')}</h3>
             <p>
               <span field-info
-                >${formatter.format(new Date(reviewedAt!))} <mwc-icon>account_circle</mwc-icon>${reviewer.name}</span
+                >${formatter.format(new Date(reviewedAt!))} <md-icon>account_circle</md-icon>${reviewer.name}</span
               >
               <strong>${correctiveInstruction}</strong>
             </p>
@@ -97,7 +96,7 @@ export class OxDataOocCorrectionPart extends LitElement {
             <h3>${i18next.t('label.corrective action')}</h3>
             <p>
               <span field-info
-                >${formatter.format(new Date(correctedAt!))} <mwc-icon>account_circle</mwc-icon>${corrector.name}</span
+                >${formatter.format(new Date(correctedAt!))} <md-icon>account_circle</md-icon>${corrector.name}</span
               >
               <strong>${correctiveAction}</strong>
             </p>

package/src/ox-data-ooc-history.ts

@@ -1,6 +1,6 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -10,7 +10,7 @@ import { DataOoc } from './types.js'
 @customElement('ox-data-ooc-history')
 export class OxDataOocHistory extends LitElement {
   static styles = css`
-    mwc-icon {
+    md-icon {
       font-size: 16px;
     }
 
@@ -33,7 +33,7 @@ export class OxDataOocHistory extends LitElement {
       color: var(--secondary-color);
     }
 
-    mwc-icon {
+    md-icon {
       position: relative;
       top: 3px;
       margin: 0 2px 0 10px;
@@ -62,7 +62,7 @@ export class OxDataOocHistory extends LitElement {
           <p page-history>
             <!--상태에 따라 추가로 danger, complete를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
             <span field-info
-              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+              >${formatter.format(new Date(timestamp))} <md-icon>account_circle</md-icon>${user.name}</span
             >
             <span field-state>${state}</span>
             <strong>${comment}</strong>

package/src/ox-data-ooc-view.ts

@@ -1,7 +1,7 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
 import './ox-data-ooc-history'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -19,7 +19,6 @@ export class OxDataOocView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
 
       position: relative;
     }