@operato/dataset 2.0.0-alpha.23 → 2.0.0-alpha.27

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.23",
+  "version": "2.0.0-alpha.27",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -108,13 +108,13 @@
     "@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.23",
+    "@operato/data-grist": "^2.0.0-alpha.27",
     "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/grist-editor": "^2.0.0-alpha.23",
+    "@operato/grist-editor": "^2.0.0-alpha.27",
     "@operato/i18n": "^2.0.0-alpha.0",
     "@operato/input": "^2.0.0-alpha.20",
     "@operato/popup": "^2.0.0-alpha.9",
-    "@operato/property-editor": "^2.0.0-alpha.23",
+    "@operato/property-editor": "^2.0.0-alpha.27",
     "@operato/shell": "^2.0.0-alpha.21",
     "@operato/styles": "^2.0.0-alpha.0",
     "@operato/utils": "^2.0.0-alpha.8",
@@ -152,5 +152,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "a8741296e49c13e6e3fd2894e8bd1618e72bd558"
+  "gitHead": "95d81f4107ebb154452184d76e6e606037919c5c"
 }

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

@@ -40,7 +40,7 @@ export class OxDataEntryForm extends LitElement {
       flex-direction: column;
     }
 
-    label {
+    form > div[label] {
       display: grid;
 
       grid-template-rows: auto 1fr;
@@ -50,11 +50,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 +69,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;
+      mwc-icon {
+        margin-top: -3px;
+        font-size: 0.9rem;
+      }
     }
 
     div[elements] {
@@ -87,18 +87,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 +107,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;
@@ -199,38 +199,56 @@ 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
+            return html` <input type="number" name=${tag} .value=${v} />`
 
           case 'date':
-            return html` <input type="date" name=${tag} value=${v} />`
-            break
+            return html` <input type="date" name=${tag} .value=${v} />`
 
           case 'datetime':
-            return html` <input type="datetime-local" name=${tag} value=${v} />`
-            break
+            return html` <input type="datetime-local" name=${tag} .value=${v} />`
 
           case 'file':
             return html`<ox-input-file name=${tag} label="Attach Files" accept="*/*" multiple="true"></ox-input-file>`
 
           case 'string':
           default:
-            return html` <input type="text" name=${tag} value=${v} />`
+            return html` <input type="text" name=${tag} .value=${v} />`
         }
       })
 
-      return html` <label .title=${description}>
+      return html` <div label .title=${description}>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
         <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
         <div elements>${elements}</div>
-      </label>`
+      </div>`
     })
   }
 

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'
@@ -94,6 +94,12 @@ export class OxDataEntryView extends LitElement {
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSet?: DataSet
@@ -162,6 +168,10 @@ export class OxDataEntryView extends LitElement {
   }
 
   render() {
+    if (!this.dataSet) {
+      return nothing
+    }
+
     const { name, description, useCase, dataItems = [] } = this.dataSet!
 
     const data = this.value || {}

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

@@ -101,6 +101,12 @@ export class OxDataSampleView extends LitElement {
         display: block;
       }
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSample?: DataSample

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

@@ -93,6 +93,12 @@ export class OxDataSummaryView extends LitElement {
     pre {
       tab-size: 2;
     }
+
+    @media screen and (max-width: 480px) {
+      th {
+        min-width: 50px;
+      }
+    }
   `
 
   @property({ type: Object }) dataSummary?: DataSummary

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

@@ -127,6 +127,50 @@ const dataSet = {
       quota: 1,
       active: true
     },
+    {
+      name: '라디오',
+      description: '라디오 그룹',
+
+      group: '측정데이타',
+      sequence: 5,
+      tag: 'check1',
+      type: 'radio',
+      options: {
+        options: [
+          {
+            text: '예',
+            value: 'Y'
+          },
+          {
+            text: '아니오',
+            value: 'N'
+          }
+        ]
+      },
+      quota: 3,
+      active: true
+    },
+    {
+      name: '라디오2',
+      description: '라디오 그룹2',
+      sequence: 5,
+      tag: 'check2',
+      type: 'radio',
+      options: {
+        options: [
+          {
+            text: '예',
+            value: 'Y'
+          },
+          {
+            text: '아니오',
+            value: 'N'
+          }
+        ]
+      },
+      quota: 1,
+      active: true
+    },
     {
       name: '첨부파일',
       description: '참조 첨부 파일.',