@operato/attribute 2.0.0-alpha.13 → 2.0.0-alpha.131

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/attribute",
   "description": "WebApplication attribute supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.131",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -55,37 +55,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.131",
+    "@operato/graphql": "^2.0.0-alpha.111",
+    "@operato/grist-editor": "^2.0.0-alpha.131",
+    "@operato/i18n": "^2.0.0-alpha.111",
+    "@operato/input": "^2.0.0-alpha.129",
+    "@operato/popup": "^2.0.0-alpha.129",
+    "@operato/property-editor": "^2.0.0-alpha.131",
+    "@operato/shell": "^2.0.0-alpha.129",
+    "@operato/styles": "^2.0.0-alpha.129",
+    "@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"
   },
@@ -102,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "112ec6a672e96837e01ffe55048f543fffa19e02"
+  "gitHead": "48271ff32be26111347ce27d120b238ae14e15ae"
 }

package/src/grist-editor/ox-popup-attributes.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../ox-attribute-form.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 { AttributeSet } from '../types.js'
 
 @customElement('ox-popup-attributes')
 export class OxPopupAttributes extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -39,11 +41,6 @@ export class OxPopupAttributes extends LitElement {
 
         color: var(--primary-color);
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -59,8 +56,10 @@ export class OxPopupAttributes extends LitElement {
       </ox-attribute-form>
 
       <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-attribute-form.ts

@@ -74,7 +74,7 @@ export class OxAttributeForm extends LitElement {
       vertical-align: middle;
     }
 
-    div[description] mwc-icon {
+    div[description] md-icon {
       margin-top: -3px;
       font-size: 0.9rem;
     }
@@ -192,7 +192,7 @@ export class OxAttributeForm extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info_outline</md-icon> ${description}</div>
         <div elements>${element}</div>
       </label>`
     })
@@ -201,14 +201,17 @@ export class OxAttributeForm extends LitElement {
   private buildValue() {
     const items = this.attributeSet!.items
 
-    return (items || []).reduce((sum, item) => {
-      const { tag, type } = item
+    return (items || []).reduce(
+      (sum, item) => {
+        const { tag, type } = item
 
-      const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement
+        const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement
 
-      sum[tag] = type === 'boolean' ? editor.checked : editor.value
+        sum[tag] = type === 'boolean' ? editor.checked : editor.value
 
-      return sum
-    }, {} as { [tag: string]: any })
+        return sum
+      },
+      {} as { [tag: string]: any }
+    )
   }
 }

package/src/ox-attribute-view.ts

@@ -81,7 +81,7 @@ export class OxAttributeView extends LitElement {
         vertical-align: middle;
       }
 
-      div[description] mwc-icon {
+      div[description] md-icon {
         margin-top: -3px;
         font-size: 0.9rem;
       }
@@ -181,7 +181,7 @@ export class OxAttributeView extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}</div>
-        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
+        <div description><md-icon>info_outline</md-icon> ${description}</div>
         <div elements>${element}</div>
       </label>`
     })

package/stories/ox-attribute-form.stories.ts

@@ -1,6 +1,6 @@
+import '@material/web/icon/icon.js'
 import '@operato/i18n'
 import '../src/ox-attribute-form.js'
-import '@material/mwc-icon'
 
 import { html, TemplateResult } from 'lit'
 
@@ -71,24 +71,35 @@ var value = {
   credit: '최우수'
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      body {
-      }
-    </style>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <ox-attribute-form
-      .attributeSet=${attributeSet}
-      .value=${value}
-      @change=${(e: CustomEvent) => {
-        value = e.detail
-        console.log('change', value)
-      }}
-    ></ox-attribute-form>
-  `
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-attribute-form
+    .attributeSet=${attributeSet}
+    .value=${value}
+    @change=${(e: CustomEvent) => {
+      value = e.detail
+      console.log('change', value)
+    }}
+  ></ox-attribute-form>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-attribute-view.stories.ts

@@ -1,6 +1,6 @@
 import '@operato/i18n'
 import '../src/ox-attribute-view.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -71,17 +71,28 @@ var value = {
   credit: '최우수'
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      body {
-      }
-    </style>
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <ox-attribute-view .attributeSet=${attributeSet} .value=${value}></ox-attribute-view>
-  `
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-attribute-view .attributeSet=${attributeSet} .value=${value}></ox-attribute-view>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-grist-editor-attributes.stories.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/md-icon'
 import '@operato/property-editor/ox-property-editor-checkbox.js'
 import '@operato/property-editor/ox-property-editor-number.js'
 import '@operato/property-editor/ox-property-editor-string.js'
@@ -235,9 +235,9 @@ class GristDemo extends LitElement {
 
         <div slot="headroom" id="headroom">
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -261,67 +261,78 @@ interface Story<T> {
 
 interface ArgTypes {}
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
-    <style>
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
 
-        --mdc-icon-size: 24px;
-      }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
+  <style>
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
 
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
+      --md-icon-size: 24px;
+    }
+    #sorters md-icon,
+    #modes md-icon {
+      --md-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--margin-default);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--secondary-color);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
 
-      #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
 
-      #filters * {
-        margin-right: var(--margin-default);
-      }
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
+    #filters * {
+      margin-right: var(--margin-default);
+    }
 
-        #modes {
-          display: none;
-        }
+    @media only screen and (max-width: 460px) {
+      #filters {
+        flex-direction: column;
+      }
+
+      #modes {
+        display: none;
       }
-    </style>
+    }
+  </style>
 
-    <ox-attributes mode="LIST"></ox-attributes>
-  `
+  <ox-attributes mode="LIST"></ox-attributes>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/themes/grist-theme.css

@@ -35,6 +35,8 @@ body {
   --grid-header-filter-title-font: normal 12px var(--theme-font);
   --grid-header-filter-title-icon-color: var(--primary-color);
 
+  --grid-body-bottom-border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
+
   --grid-record-background-color: var(--theme-white-color);
   --grid-record-odd-background-color: #f9f7f5;
   --grid-record-padding: 0 5px 0 5px;