@operato/data-grist 0.3.4 → 0.3.13

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

@@ -1,189 +0,0 @@
-import '@operato/popup/ox-popup-list.js'
-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 { OxPopupList } from '@operato/popup'
-
-import { OXFieldOptionProps, OXSelectFieldProps } from '../index.js'
-import { OXBasicField } from './ox-basic-field.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

@@ -1,55 +0,0 @@
-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
-  }
-}