@operato/data-grist 0.2.35 → 0.2.36

package/src/search-form/ox-number-field.ts

@@ -0,0 +1,113 @@
+import '@material/mwc-icon'
+
+import { css, CSSResult, html, TemplateResult } from 'lit'
+import { ifDefined } from 'lit-html/directives/if-defined.js'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OXNumberFieldProps } from '..'
+import { OXBasicField } from './ox-basic-field'
+
+@customElement('ox-number-field')
+export class OXNumberField extends OXBasicField {
+  @property({ type: Object }) field!: OXNumberFieldProps
+  @property({ type: Number }) value?: number
+
+  setDefaultValue(defaultValue: number): void {
+    this.value = defaultValue
+  }
+
+  static styles: CSSResult[] = [
+    css`
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+      }
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      span.input-wrapper {
+        display: inline-flex;
+      }
+
+      button {
+        padding: var(--padding-narrow);
+        height: 24px;
+        background-color: var(--theme-white-color);
+        border: 1px solid rgba(var(--primary-color-rgb), 0.5);
+        border-radius: 50%;
+        opacity: 0.6;
+        cursor: pointer;
+      }
+      button mwc-icon {
+        font-size: var(--fontsize-default, 16px);
+        color: var(--primary-text-color, #476172);
+      }
+      button:hover {
+        opacity: 1;
+      }
+      input {
+        border: none;
+        outline: none;
+        padding: 4px 9px;
+        text-align: center;
+        font-size: var(--fontsize-default, 14px);
+        color: var(--primary-text-color, #476172);
+      }
+    `
+  ]
+
+  render(): TemplateResult {
+    const { name, hidden, id, placeholder, min, max, step } = this.field
+
+    return html`
+      <span class="input-wrapper" ?hidden=${hidden}>
+        <button @click=${this.decrease.bind(this)}>
+          <mwc-icon>add</mwc-icon>
+        </button>
+        <input
+          id=${ifDefined(id)}
+          name=${name}
+          type="number"
+          placeholder=${ifDefined(placeholder)}
+          min=${ifDefined(min)}
+          max=${ifDefined(max)}
+          step=${ifDefined(step)}
+          .value=${String(this.value) || ''}
+          @change=${this.onChangeHandler.bind(this)}
+        />
+        <button @click=${this.increase.bind(this)}>
+          <mwc-icon>remove</mwc-icon>
+        </button>
+      </span>
+    `
+  }
+
+  decrease(): void {
+    let fractionDigits: number = 0
+    if (this.field.step) {
+      fractionDigits = String(this.field.step).split('.')[1].length
+    }
+
+    this.value = Number(((this.value ?? 0) - (this.field.step || 1)).toFixed(fractionDigits))
+  }
+
+  increase(): void {
+    let fractionDigits: number = 0
+    if (this.field.step) {
+      fractionDigits = String(this.field.step).split('.')[1].length
+    }
+
+    this.value = Number(((this.value ?? 0) + (this.field.step || 1)).toFixed(fractionDigits))
+  }
+
+  private onChangeHandler(): void {
+    if (this.input.value) {
+      this.value = Number(this.input.value)
+    } else {
+      this.value = undefined
+    }
+  }
+}

package/src/search-form/ox-search-form.ts

@@ -0,0 +1,71 @@
+import './ox-text-field'
+import './ox-checkbox-field'
+import './ox-select-field'
+import './ox-number-field'
+
+import { LitElement, TemplateResult, html } from 'lit'
+import {
+  OXCheckboxField,
+  OXCheckboxFieldProps,
+  OXNumberField,
+  OXNumberFieldProps,
+  OXSearchFieldProps,
+  OXSelectField,
+  OXSelectFieldProps,
+  OXTextField,
+  OXTextFieldProps
+} from '..'
+import { customElement, property, query, queryAll } from 'lit/decorators.js'
+
+export type OXSearchFieldTypes = OXTextField | OXNumberField | OXSelectField | OXCheckboxField
+
+@customElement('ox-search-form')
+export class OXSearchForm extends LitElement {
+  @property({ type: Array }) fields!: OXSearchFieldProps[]
+
+  @query('form') form!: HTMLFormElement
+
+  render(): TemplateResult {
+    return html`
+      <form @submit-field=${this._submitFieldHandler.bind(this)}>
+        <slot></slot>
+        ${this.fields.map(this.renderField)}
+      </form>
+    `
+  }
+
+  get searchFields(): OXSearchFieldTypes[] {
+    return Array.from(this.form.querySelectorAll('*'))
+  }
+
+  private renderField(field: OXSearchFieldProps): TemplateResult {
+    const { type } = field
+
+    switch (type) {
+      case 'text':
+        return html`<ox-text-field .field=${field as OXTextFieldProps}></ox-text-field>`
+
+      case 'number':
+        return html`<ox-number-field .field=${field as OXNumberFieldProps}></ox-number-field>`
+
+      case 'select':
+        return html`<ox-select-field .field=${field as OXSelectFieldProps}></ox-select-field>`
+
+      case 'checkbox':
+        return html`<ox-checkbox-field .field=${field as OXCheckboxFieldProps}></ox-checkbox-field>`
+
+      default:
+        return html`<ox-text-field .field=${field as OXTextFieldProps}></ox-text-field>`
+    }
+  }
+
+  _submitFieldHandler(): void {
+    this.dispatchEvent(
+      new CustomEvent('submit', {
+        composed: true,
+        bubbles: true,
+        cancelable: true
+      })
+    ) && this.form.submit()
+  }
+}

package/src/search-form/ox-select-field.ts

@@ -0,0 +1,188 @@
+import '@operato/popup'
+import '@material/mwc-icon'
+
+import { CSSResult, TemplateResult, css, html } from 'lit'
+import { OXFieldOptionProps, OXSelectFieldProps } from '..'
+import { customElement, property } from 'lit/decorators.js'
+
+import { OXBasicField } from './ox-basic-field'
+import { OxPopupList } from '@operato/popup'
+import { ifDefined } from 'lit-html/directives/if-defined.js'
+
+@customElement('ox-select-field')
+export class OXSelectField extends OXBasicField {
+  @property({ type: Object }) field!: OXSelectFieldProps
+  @property({ type: Boolean }) checked: boolean = false
+  @property({ type: String }) searchCondition: string = ''
+  @property({ type: String }) value: string = ''
+
+  static styles: CSSResult[] = [
+    css`
+      :host > label {
+        display: inline-flex;
+        flex-direction: column;
+        font-size: var(--fontsize-default, 14px);
+        color: var(--primary-text-color, #476172);
+      }
+      .input-wrapper {
+        display: inline-flex;
+      }
+      .input-wrapper mwc-icon {
+        opacity: 0.7;
+        font-size: var(--fontsize-default, 16px);
+        color: var(--primary-text-color, #476172);
+        line-height: 2;
+      }
+      input {
+        border: none;
+        outline: none;
+        padding: 4px 9px;
+        font-size: var(--fontsize-default, 14px);
+        color: var(--primary-text-color, #476172);
+      }
+      .search-input-wrapper {
+        display: inline-flex;
+        border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));
+      }
+      .search-input-wrapper mwc-icon {
+        opacity: 0.7;
+        font-size: 20px;
+        color: var(--primary-text-color, #476172);
+      }
+      label[option] {
+        display: inline-flex;
+        margin: 5px 0px;
+        gap: 5px;
+      }
+    `
+  ]
+
+  get input(): HTMLInputElement {
+    const input: HTMLInputElement | null = this.renderRoot.querySelector('input[readonly]')
+    if (!input) throw new Error('Failed to find input element')
+
+    return input
+  }
+
+  get checkedOption(): OXFieldOptionProps {
+    if (!this.value) throw new Error('Value is not defined yet')
+
+    const checkedOption: OXFieldOptionProps | undefined = this.field.options.find(
+      (option: OXFieldOptionProps) => option.value === this.value
+    )
+    if (!checkedOption) throw new Error('No checked option found')
+
+    return checkedOption
+  }
+
+  get displayValue(): string {
+    try {
+      return this.checkedOption.name || this.checkedOption.value
+    } catch (e) {
+      return ''
+    }
+  }
+
+  get searchInput(): HTMLInputElement {
+    const searchInput: HTMLInputElement | null = this.renderRoot.querySelector('input#search-input')
+    if (!searchInput) throw new Error('No search input found')
+
+    return searchInput
+  }
+
+  setDefaultValue(defaultValue: any): void {
+    const input: HTMLInputElement | null = this.renderRoot.querySelector(`input[value="${defaultValue}"]`)
+    if (!input) return
+    input.checked = true
+
+    const option: OXFieldOptionProps | undefined = this.field.options.find(
+      (option: OXFieldOptionProps) => option.value === defaultValue
+    )
+    if (!option) throw new Error('No matched option found')
+
+    this.value = option.name || option.value
+  }
+
+  render(): TemplateResult {
+    const { name, hidden, id, options, searchEnable = true, placeholder } = this.field
+
+    return html`
+      <span class="input-wrapper" ?hidden=${hidden} @click=${this.openPopup.bind(this)}>
+        <input
+          id=${ifDefined(id)}
+          name=${name}
+          readonly
+          placeholder=${ifDefined(placeholder)}
+          .value=${this.displayValue}
+        />
+        <mwc-icon>keyboard_arrow_down</mwc-icon>
+      </span>
+
+      <ox-popup-list id="popup-list" multiple>
+        ${searchEnable
+          ? html`
+              <div class="search-input-wrapper">
+                <input id="search-input" type="text" @input=${this.onSearchInputHandler.bind(this)} />
+                <mwc-icon>search</mwc-icon>
+              </div>
+            `
+          : ''}
+        ${options
+          .filter(
+            (option: OXFieldOptionProps) =>
+              option.value.indexOf(this.searchCondition) >= 0 ||
+              (option.name && option?.name.indexOf(this.searchCondition) >= 0)
+          )
+          .map(
+            (option: OXFieldOptionProps) => html`
+              <label option>
+                <input
+                  name=${name}
+                  type="checkbox"
+                  .value=${option.value}
+                  @change=${this.onValueChange.bind(this)}
+                  .checked=${this.value === option.value}
+                />
+                <span>${option.name || option.value}</span>
+              </label>
+            `
+          )}
+      </ox-popup-list>
+    `
+  }
+
+  openPopup(event: MouseEvent): void {
+    const popupList: OxPopupList | null = this.renderRoot.querySelector('#popup-list')
+    if (!popupList) throw new Error('Failed to find popup element')
+
+    const offsetHeight: number = this.input.offsetHeight
+    const { x, y } = this.input.getBoundingClientRect()
+
+    popupList.open({ left: x, top: y + offsetHeight })
+  }
+
+  onSearchInputHandler(): void {
+    this.searchCondition = this.searchInput.value
+  }
+
+  onValueChange(event: Event): void {
+    if (this.value) {
+      const prevCheckedInput: HTMLInputElement | null = this.renderRoot.querySelector(`input[value=${this.value}`)
+      if (prevCheckedInput) prevCheckedInput.checked = false
+    }
+
+    const checkedInput: HTMLInputElement | null = event.currentTarget as HTMLInputElement | null
+    if (!checkedInput) throw new Error('No checked input found')
+
+    if (checkedInput.value === this.value) {
+      this.value = ''
+    } else {
+      const foundOption: OXFieldOptionProps | undefined = this.field.options.find(
+        (option: OXFieldOptionProps) => option.value === checkedInput.value
+      )
+      if (!foundOption) throw new Error('No matched option found')
+
+      this.value = foundOption.value
+    }
+  }
+}

package/src/search-form/ox-text-field.ts

@@ -0,0 +1,55 @@
+import { css, html, TemplateResult } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { OXTextFieldProps } from '..'
+import { OXBasicField } from './ox-basic-field'
+
+@customElement('ox-text-field')
+export class OXTextField extends OXBasicField {
+  @property({ type: Object }) field!: OXTextFieldProps
+  @property({ type: String }) value: string = ''
+
+  static styles = [
+    ...OXBasicField.styles,
+    css`
+      label {
+        display: inline-flex;
+        flex-direction: column;
+      }
+      span.input-wrapper {
+        display: inline-flex;
+        border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));
+      }
+    `
+  ]
+
+  setDefaultValue(defaultValue: string) {
+    this.value = defaultValue
+  }
+
+  render(): TemplateResult {
+    if (!this.field) return html``
+
+    const { name, hidden, id, placeholder } = this.field
+
+    return html`
+      <label>
+        <span class="input-wrapper" ?hidden=${hidden}>
+          <input
+            id=${ifDefined(id)}
+            name=${name}
+            type="text"
+            placeholder=${ifDefined(placeholder)}
+            .value=${this.value}
+            @input=${this.onChangeHandler.bind(this)}
+          />
+        </span>
+      </label>
+    `
+  }
+
+  private onChangeHandler(): void {
+    this.value = this.input.value
+  }
+}

package/src/types.ts

@@ -1,3 +1,13 @@
+import { DataCardField } from './data-card/data-card-field'
+import { DataCardGutter } from './data-card/data-card-gutter'
+import { DataGridField } from './data-grid/data-grid-field'
+import { DataListField } from './data-list/data-list-field'
+import { DataListGutter } from './data-list/data-list-gutter'
+import { DataReportField } from './data-report/data-report-field'
+import { RecordCard } from './data-card/record-card'
+import { RecordPartial } from './data-list/record-partial'
+import { TemplateResult } from 'lit-html'
+
 export type GristConfig = {
   columns: ColumnConfig[]
   rows: RowsConfig
@@ -8,6 +18,7 @@ export type GristConfig = {
 
 export type SorterConfig = { name: string; desc?: boolean }
 export type SortersConfig = SorterConfig[]
+export type FilterConfig = { type: string; options?: { [key: string]: any } }
 
 export type PaginationConfig = {
   page?: number
@@ -39,6 +50,7 @@ export type ColumnConfig = {
   width?: number | string | ColumnWidthCallback
   forList?: boolean
   validation?: ValidationCallback
+  filter?: FilterConfig
   imex?: ImexConfig
   multiple?: boolean
 }
@@ -71,9 +83,22 @@ export type RecordConfig = {
   rowOptionField?: string
 }
 
-export type FieldRenderer = (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, owner: any) => any
-export type FieldEditor = (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, owner: any) => any
-export type FieldThumbnailRenderer = (record: GristRecord, rowIndex: number) => any
+export type FieldRenderer = (
+  value: any,
+  column: ColumnConfig,
+  record: GristRecord,
+  rowIndex: number,
+  owner: RecordCard | DataCardGutter | DataCardField | DataListGutter | DataListField | RecordPartial | DataReportField
+) => TemplateResult | string | void
+export type FieldEditor = (
+  value: any,
+  column: ColumnConfig,
+  record: GristRecord,
+  rowIndex: number,
+  field: DataGridField
+) => Element
+export type FieldThumbnailRenderer = (record: GristRecord, rowIndex: number) => TemplateResult | string | void
+export type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void
 
 export type GristEventHandlerSet = {
   click?: GristEventHandler