@operato/input 2.0.0-beta.9 → 7.0.0-rc.0

package/package.json

@@ -2,10 +2,11 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-beta.9",
+  "version": "7.0.0-rc.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
+  "operato": true,
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -17,6 +18,7 @@
   },
   "exports": {
     ".": "./dist/src/index.js",
+    "./package.json": "./package.json",
     "./ox-form-field.js": "./dist/src/ox-form-field.js",
     "./ox-checkbox.js": "./dist/src/ox-checkbox.js",
     "./ox-buttons-radio.js": "./dist/src/ox-buttons-radio.js",
@@ -54,7 +56,8 @@
     "./ox-input-hashtags.js": "./dist/src/ox-input-hashtags.js",
     "./ox-input-mass-fraction.js": "./dist/src/ox-input-mass-fraction.js",
     "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js",
-    "./ox-input-direction.js": "./dist/src/ox-input-direction.js"
+    "./ox-input-direction.js": "./dist/src/ox-input-direction.js",
+    "./ox-input-table-column-config.js": "./dist/src/ox-input-table-column-config.js"
   },
   "typesVersions": {
     "*": {
@@ -171,6 +174,9 @@
       ],
       "./ox-input-direction.js": [
         "./dist/src/ox-input-direction.d.ts"
+      ],
+      "./ox-input-table-column-config.js": [
+        "./dist/src/ox-input-table-column-config.d.ts"
       ]
     }
   },
@@ -197,13 +203,14 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
+    "@ctrl/tinycolor": "^4.1.0",
     "@lit/localize": "^0.12.1",
-    "@material/web": "^1.4.0",
-    "@operato/color-picker": "^2.0.0-beta.0",
-    "@operato/i18n": "^2.0.0-beta.3",
-    "@operato/popup": "^2.0.0-beta.9",
-    "@operato/styles": "^2.0.0-beta.5",
-    "@operato/utils": "^2.0.0-beta.0",
+    "@material/web": "^1.5.0",
+    "@operato/color-picker": "^7.0.0-rc.0",
+    "@operato/i18n": "^7.0.0-rc.0",
+    "@operato/popup": "^7.0.0-rc.0",
+    "@operato/styles": "^7.0.0-rc.0",
+    "@operato/utils": "^7.0.0-rc.0",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -247,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "0f85bb778dec7b54fb2c7380e3da5146e170e131"
+  "gitHead": "6ea42336e40d8eae2c11a9ebdfc21dd1cbcefca1"
 }

package/src/index.ts

@@ -29,3 +29,4 @@ export * from './ox-input-quantifier.js'
 export * from './ox-input-select-buttons.js'
 export * from './ox-input-textarea.js'
 export * from './ox-input-direction.js'
+export * from './ox-input-table-column-config.js'

package/src/ox-checkbox.ts

@@ -39,12 +39,8 @@ export class OxCheckbox extends OxFormField {
         justify-content: center;
       }
 
-      :host([indeterminate]) .checkbox {
-        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));
-      }
-
       :host([checked]) .checkbox {
-        background-color: var(--ox-checkbox-checked-background-color, var(--md-ref-palette-primary60));
+        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));
       }
 
       path {
@@ -52,7 +48,6 @@ export class OxCheckbox extends OxFormField {
       }
 
       :host([indeterminate]) line {
-        fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));
         stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
       }
 
@@ -66,11 +61,12 @@ export class OxCheckbox extends OxFormField {
       }
 
       .label {
-        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));
-        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));
+        font-size: var(--md-sys-typescale-label-medium-size, 1rem);
         line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
       }
       :host([checked]) .label {
+        color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));
         font-weight: 700;
       }
     `

package/src/ox-input-multiple-colors.ts

@@ -7,6 +7,7 @@ import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
+import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputColor } from './ox-input-color.js'
@@ -38,29 +39,32 @@ export class OxInputMultipleColors extends OxFormField {
       grid-gap: var(--spacing-medium);
       align-items: center;
       justify-content: left;
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-tiny, 2px);
     }
 
     ox-input-color {
       width: 100%;
     }
 
+    md-icon {
+      pointer-events: none;
+    }
+
     button {
       height: 100%;
       border: var(--button-border);
-      border-radius: var(--border-radius);
-      background-color: var(--button-background-color);
+      border-radius: 0;
+      background-color: transparent;
       line-height: 0.8;
-      color: var(--button-color);
+      color: var(--md-sys-color-on-surface);
       cursor: pointer;
     }
 
-    button:focus,
     button:hover,
     button:active {
       border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--md-sys-color-primary-container);
+      background-color: var(--md-sys-color-on-primary);
+      color: var(--md-sys-color-primary);
     }
   `
 
@@ -79,7 +83,7 @@ export class OxInputMultipleColors extends OxFormField {
         ${(this.value || []).map(
           (item, index) => html`
             <div>
-              <button @click=${() => this._appendEditorColor()} data-index=${index} ?disabled=${this.disabled}>
+              <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
                 <md-icon>add</md-icon>
               </button>
               <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
@@ -87,7 +91,7 @@ export class OxInputMultipleColors extends OxFormField {
               ${(this.value || []).length > 1
                 ? html`
                     <button
-                      @click=${(e: Event) => this._removeEditorColor(e)}
+                      @tap=${(e: Event) => this._removeEditorColor(e)}
                       data-index=${index}
                       ?disabled=${this.disabled}
                     >
@@ -106,8 +110,11 @@ export class OxInputMultipleColors extends OxFormField {
     this.value = Array.from(this.colors).map(color => color.value!)
   }
 
-  _appendEditorColor() {
-    this.value = [...this.value, 'black']
+  _appendEditorColor(e: Event) {
+    const idx = Number((e.target as HTMLElement).getAttribute('data-index'))
+    const hue = this.value[idx] || '#fff'
+    this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())
+    this.value = [...this.value]
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
@@ -115,8 +122,11 @@ export class OxInputMultipleColors extends OxFormField {
   _removeEditorColor(e: Event) {
     var values = []
     for (var i = 0; i < this.value.length; i++) {
-      if (i == Number((e.target as HTMLElement).dataset.index)) continue
-      else values.push(this.value[i])
+      if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {
+        continue
+      } else {
+        values.push(this.value[i])
+      }
     }
 
     this.value = values

package/src/ox-input-table-column-config.ts

@@ -0,0 +1,211 @@
+import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { OxFormField } from './ox-form-field'
+import '@material/web/icon/icon.js'
+
+export interface ColumnConfig {
+  name: string
+  label: string
+  visible: boolean
+  width: number
+  order: number
+}
+
+@customElement('ox-input-table-column-config')
+export class OxInputTableColumnConfig extends OxFormField {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding: 4px;
+        border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
+        background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));
+        color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));
+      }
+
+      table {
+        width: auto;
+        border-collapse: collapse;
+        font-size: 12px;
+        border: 0;
+      }
+
+      tr {
+        border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
+      }
+
+      th,
+      td {
+        padding: 0 var(--spacing-small, 2px);
+        text-align: left;
+      }
+
+      th {
+        text-transform: capitalize;
+        text-align: center;
+        background-color: var(
+          --ox-input-table-column-config-header-background-color,
+          var(--md-sys-color-secondary-container)
+        );
+        color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));
+        white-space: nowrap;
+      }
+
+      th *,
+      td * {
+        vertical-align: middle;
+      }
+
+      td[width] {
+        width: 60px;
+        text-align: right;
+      }
+
+      input {
+        font-size: 12px;
+        padding: 0;
+        margin: 0;
+        border: none;
+        width: 100%;
+        box-sizing: border-box;
+        outline: none;
+        background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));
+        color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));
+      }
+
+      input[type='number'] {
+        text-align: right;
+      }
+
+      md-icon {
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: none;
+
+        --md-icon-size: 16px;
+      }
+
+      md-icon[disabled] {
+        cursor: not-allowed;
+        color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));
+      }
+    `
+  ]
+
+  @property({ type: Array }) value: ColumnConfig[] = []
+
+  render() {
+    console.log('this.value', this.value)
+    return html`
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>name</th>
+            <th>label</th>
+            <th>width</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          ${(this.value || []).map(
+            (col, index) => html`
+              <tr name=${col.name}>
+                <td>
+                  <input
+                    type="checkbox"
+                    .checked=${col.visible}
+                    @change=${(e: Event) => this._updateVisibility(e, index)}
+                  />
+                </td>
+                <td name>${col.name}</td>
+                <td>
+                  <input type="text" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />
+                </td>
+                <td width>
+                  <input
+                    type="number"
+                    .value=${String(col.width)}
+                    @input=${(e: Event) => this._updateWidth(e, index)}
+                  />
+                </td>
+                <td buttons>
+                  <md-icon class="icon-button" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>
+                    arrow_upward
+                  </md-icon>
+                  <md-icon
+                    class="icon-button"
+                    @click=${() => this._moveDown(index)}
+                    ?disabled=${index === this.value.length - 1}
+                  >
+                    arrow_downward
+                  </md-icon>
+                </td>
+              </tr>
+            `
+          )}
+        </tbody>
+      </table>
+    `
+  }
+
+  private _updateVisibility(event: Event, index: number) {
+    const target = event.target as HTMLInputElement
+    this.value[index].visible = target.checked
+    this.requestUpdate()
+    this._notifyChange()
+  }
+
+  private _updateLabel(event: Event, index: number) {
+    const target = event.target as HTMLInputElement
+    this.value[index].label = target.value
+    this.requestUpdate()
+    this._notifyChange()
+  }
+
+  private _updateWidth(event: Event, index: number) {
+    const target = event.target as HTMLInputElement
+    this.value[index].width = target.valueAsNumber
+    this.requestUpdate()
+    this._notifyChange()
+  }
+
+  private _moveUp(index: number) {
+    if (index === 0) return
+    const temp = this.value[index]
+    this.value[index] = this.value[index - 1]
+    this.value[index - 1] = temp
+    this._updateOrder()
+    this.requestUpdate()
+    this._notifyChange()
+  }
+
+  private _moveDown(index: number) {
+    if (index === this.value.length - 1) return
+    const temp = this.value[index]
+    this.value[index] = this.value[index + 1]
+    this.value[index + 1] = temp
+    this._updateOrder()
+    this.requestUpdate()
+    this._notifyChange()
+  }
+
+  private _updateOrder() {
+    this.value = this.value.map((col, index) => ({
+      ...col,
+      order: index + 1
+    }))
+  }
+
+  private _notifyChange() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.value,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+}

package/src/ox-select.ts

@@ -11,22 +11,9 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
-import { detectOverflow } from '@operato/utils'
 
 import { OxFormField } from './ox-form-field.js'
 
-function onmouseover(e: Event) {
-  const element = e.target as HTMLSpanElement
-  if (detectOverflow(element)) {
-    element.setAttribute('data-tooltip', element.textContent!)
-  }
-}
-
-function onmouseout(e: Event) {
-  const element = e.target as HTMLSpanElement
-  element.removeAttribute('data-tooltip')
-}
-
 @customElement('ox-select')
 export class OxSelect extends OxFormField {
   static styles = [
@@ -98,7 +85,7 @@ export class OxSelect extends OxFormField {
 
     return html`
       <div @click=${this.expand}>
-        <span @mouseover=${onmouseover} @mouseout=${onmouseout}>${label}</span>
+        <span data-reactive-tooltip>${label}</span>
         <md-icon>expand_more</md-icon>
       </div>
 

package/stories/ox-input-table-column-config.stories.ts

@@ -0,0 +1,120 @@
+import '../src/ox-input-table-column-config.js'
+
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+export default {
+  title: 'ox-input-table-column-config',
+  component: 'ox-input-table-column-config',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  disabled?: boolean
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({
+  name = 'table-column-config',
+  value = {},
+  disabled,
+  theme = 'light'
+}: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.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"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-table-column-config
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-table-column-config>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'table-column-config',
+  value: [
+    {
+      name: 'section',
+      label: 'Section',
+      visible: true,
+      width: 100,
+      order: 1
+    },
+    {
+      name: 'title',
+      label: 'Title',
+      visible: true,
+      width: 110,
+      order: 2
+    },
+    {
+      name: 'startDate',
+      label: 'Start Date',
+      visible: true,
+      width: 150,
+      order: 3
+    },
+    {
+      name: 'endDate',
+      label: 'End Date',
+      visible: true,
+      width: 200,
+      order: 4
+    }
+  ]
+}

package/themes/grist-theme.css

@@ -48,11 +48,9 @@ body {
   --grid-record-wide-fontsize: var(--md-sys-typescale-label-medium-size);
   --grid-record-selected-background-color: var(--md-sys-color-primary-container);
   --grid-record-selected-color: var(--md-sys-color-primary);
-  --grid-record-focused-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-border: 1px solid var(--md-sys-color-outline-variant);
   --grid-record-focused-cell-background-color: var(--md-sys-color-secondary-container);
   --grid-record-focused-cell-border: 1px dashed var(--md-sys-color-outline);
-  --grid-record-focused-color: var(--md-sys-color-secondary);
   --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
   --grid-record-emphasized-background-color: var(--md-sys-color-tertiary-container);
   --grid-record-emphasized-color: var(--md-sys-color-tertiary);