@operato/form 7.1.30 → 7.1.32

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/form",
   "description": "WebApplication form supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "7.1.30",
+  "version": "7.1.32",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -62,11 +62,11 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^7.1.1",
-    "@operato/input": "^7.1.30",
-    "@operato/p13n": "^7.1.30",
-    "@operato/time-calculator": "^7.1.1",
-    "@operato/utils": "^7.1.1",
+    "@operato/graphql": "^7.1.32",
+    "@operato/input": "^7.1.32",
+    "@operato/p13n": "^7.1.32",
+    "@operato/time-calculator": "^7.1.32",
+    "@operato/utils": "^7.1.32",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "863eb4937334eb66a3cd0e5dbea5c77bc1afc472"
+  "gitHead": "c4f5ed0b63d49d02c5a155b592c0ecf681c92cf7"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,110 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-
-    <style>
-      body {
-        background: #fafafa;
-        --ox-checkbox-size: 12px;
-      }
-
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" 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"
-    />
-
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/form-theme.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '@material/web/icon/icon.js'
-      import '../dist/src/filters/ox-filters-form-base.js'
-
-      const form = document.querySelector('#demo')
-
-      const filters = [
-        {
-          name: 'test',
-          type: 'string',
-          label: 'name',
-          operator: 'eq'
-        },
-        {
-          name: 'active',
-          type: 'boolean',
-          label: 'active',
-          operator: 'eq'
-        },
-        {
-          name: 'sss',
-          type: 'select',
-          label: 'sss',
-          operator: 'eq',
-          options: () => {
-            return [
-              {
-                display: '',
-                value: ''
-              },
-              {
-                display: 'ABC',
-                value: 'ABC'
-              },
-              {
-                display: 'DEF',
-                value: 'DEF'
-              }
-            ]
-          }
-        },
-        {
-          name: 'range',
-          type: 'number',
-          label: 'range',
-          operator: 'between'
-        },
-        {
-          name: 'date-range',
-          type: 'datetime',
-          label: 'date',
-          operator: 'between'
-        }
-      ]
-
-      render(
-        html`
-          <ox-filters-form-base
-            .filters=${filters}
-            @filters-change=${e => {
-              console.log('filters changed', e.detail)
-            }}
-            url-params-sensitive
-          ></ox-filters-form-base>
-        `,
-        form
-      )
-    </script>
-  </body>
-</html>

package/src/components/ox-custom-input.ts

@@ -1,102 +0,0 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-@customElement('ox-custom-input')
-export class CustomInput extends LitElement {
-  static styles = css`
-    input {
-      margin: auto 0;
-      border: 1px solid var(--md-sys-color-outline);
-      padding: 0 var(--spacing-small);
-      min-width: var(--form-input-width, 300px);
-      max-width: var(--form-input-width, 300px);
-      height: var(--form-element-height-medium);
-      outline: var(--form-input-outline, none);
-      color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
-      background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
-    }
-  `
-
-  @property({ type: String }) name?: string
-  @property({ type: String }) placeholder?: string
-  @property({ type: String }) type?: string
-  @property({ type: Object }) props: any
-  @property({ type: Array }) attrs: any
-  @property({ type: String }) valueField?: string
-  @property({ type: Object }) value: any
-  @property({ type: Boolean }) autofocus: boolean = false
-
-  @query('input') input!: HTMLInputElement
-
-  render() {
-    return html`
-      <input
-        name=${this.name}
-        placeholder=${this.placeholder}
-        type=${this.type || 'text'}
-        value=${this.value || ''}
-        @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}
-        ?autofocus=${this.autofocus}
-      />
-    `
-  }
-
-  get checked() {
-    return this.input.checked
-  }
-
-  set checked(checked) {
-    this.input.checked = checked
-  }
-
-  firstUpdated() {
-    this.dispatchEvent(new CustomEvent('load'))
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('props')) {
-      if (this._isObject(this.props)) {
-        for (let prop in this.props) {
-          if (this.props[prop]) {
-            this.input.setAttribute(prop, this.props[prop])
-            this.setAttribute(prop, this.props[prop])
-          }
-        }
-      }
-    }
-
-    if (changes.has('attrs')) {
-      if (this.attrs && Array.isArray(this.attrs)) {
-        this.attrs.forEach(attr => {
-          this.input.setAttribute(attr, '')
-          this.setAttribute(attr, '')
-        })
-      }
-    }
-
-    if (changes.has('value') && this._isObject(this.value)) {
-      let value = this.value
-      this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]
-    }
-  }
-
-  _isObject(v: any) {
-    return v instanceof Object && !Array.isArray(v)
-  }
-
-  focus() {
-    this.input.focus()
-  }
-
-  select() {
-    this.input.select()
-  }
-
-  blur() {
-    this.input.blur()
-  }
-
-  checkValidity() {
-    return this.input.checkValidity()
-  }
-}

package/src/components/ox-custom-select.ts

@@ -1,91 +0,0 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('ox-custom-select')
-export class CustomSelect extends LitElement {
-  static styles = css`
-    select {
-      margin: auto 0;
-      border-style: var(--form-input-border-style, solid);
-      border-width: var(--form-input-border-width, 1px);
-      border-color: var(--form-input-border-color, #c4c5c6);
-      padding: var(--form-input-padding, 5px);
-      outline: var(--form-input-outline, none);
-      color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
-      background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
-      min-width: calc(
-        var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
-      );
-      max-width: calc(
-        var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)
-      );
-      -webkit-appearance: none;
-      -webkit-border-radius: 0px;
-    }
-  `
-
-  @property({ type: String }) name?: string
-  @property({ type: Array }) options?: { name: string; value: any }[]
-  @property({ type: Object }) props: any
-  @property({ type: Array }) attrs: any
-  @property({ type: String }) value: any
-  @property({ type: Boolean }) autofocus: boolean = false
-
-  @query('select') select!: HTMLInputElement
-
-  render() {
-    return html`
-      <select
-        name=${this.name}
-        ?autofocus=${this.autofocus}
-        @change=${(e: Event) => (this.value = (e.currentTarget as HTMLSelectElement).value)}
-      >
-        ${(this.options || []).map(
-          option => html`
-            <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>
-          `
-        )}
-      </select>
-    `
-  }
-
-  firstUpdated() {
-    this.dispatchEvent(new CustomEvent('load'))
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('props') && this._isObject(this.props)) {
-      for (let prop in this.props) {
-        if (this.props[prop]) {
-          this.select.setAttribute(prop, this.props[prop])
-          this.setAttribute(prop, this.props[prop])
-        }
-      }
-    }
-
-    if (changes.has('attrs')) {
-      if (this.attrs && Array.isArray(this.attrs)) {
-        this.attrs.forEach(attr => {
-          this.select.setAttribute(attr, '')
-          this.setAttribute(attr, '')
-        })
-      }
-    }
-  }
-
-  _isObject(v: any) {
-    return v instanceof Object && !Array.isArray(v)
-  }
-
-  focus() {
-    this.select.focus()
-  }
-
-  blur() {
-    this.select.blur()
-  }
-
-  checkValidity() {
-    return this.select.checkValidity()
-  }
-}

package/src/components/ox-file-uploader.ts

@@ -1,164 +0,0 @@
-import { LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { FileDropHelper } from '@operato/utils'
-
-@customElement('ox-file-uploader')
-export class FileUploader extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        border-radius: var(--border-radius);
-        text-align: center;
-        padding-bottom: 5px !important;
-        text-transform: capitalize;
-
-        border: var(--file-uploader-border);
-        background-color: var(--md-sys-color-background);
-        font: var(--file-uploader-font) !important;
-        color: var(--file-uploader-color);
-      }
-      :host > md-icon {
-        color: var(--file-uploader-icon-color);
-      }
-
-      :host(.candrop) {
-        background-color: var(--file-uploader-candrop-background-color);
-      }
-
-      #input-file {
-        display: none;
-      }
-
-      label {
-        position: relative;
-        width: auto;
-        border: none;
-        text-transform: capitalize;
-
-        padding: var(--file-uploader-label-padding);
-        border-radius: var(--file-uploader-label-border-radius);
-        background-color: var(--file-uploader-label-background-color);
-        color: var(--file-uploader-label-color);
-        font: var(--file-uploader-label-font) !important;
-      }
-
-      ul {
-        max-width: 500px;
-        list-style: none;
-        padding: 0;
-      }
-      li {
-        text-align: left;
-
-        padding: var(--file-uploader-li-padding);
-        border-bottom: var(--file-uploader-li-border-bottom);
-        display: flex;
-        align-items: center;
-      }
-      li md-icon {
-        cursor: pointer;
-        font: var(--file-uploader-li-icon-font);
-        margin-left: auto;
-      }
-      li md-icon:hover,
-      li md-icon:active {
-        color: var(--file-uploader-li-icon-focus-color);
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) multiple: boolean = false
-  @property({ type: String }) accept: string = '*/*'
-  @property({ type: String }) label?: string
-
-  @property({ type: Array }) _files: File[] = []
-
-  @query('#input-file') fileInput!: HTMLInputElement
-
-  render() {
-    return html`
-      <md-icon>post_add</md-icon>
-      <span>add file or drop files here!</span>
-      <input
-        id="input-file"
-        type="file"
-        accept=${this.accept}
-        ?multiple=${this.multiple}
-        hidden
-        @change=${(e: Event) => {
-          const fileInput = e.currentTarget as HTMLInputElement
-          const files = fileInput.files as FileList
-          //// Temporary Validation preventing file size more than 10mb to be uploaded
-          for (let index = 0; index < files.length; index++) {
-            if (files[index].size > 9999999) {
-              document.dispatchEvent(
-                new CustomEvent('notify', {
-                  detail: {
-                    type: 'error',
-                    message: 'File size must be less than 10 MB.'
-                  }
-                })
-              )
-              throw new Error('File size must be less than 10 MB.')
-            }
-          }
-
-          this._files = [...this._files, ...Array.from(files)]
-
-          this.dispatchEvent(
-            new CustomEvent('files-change', {
-              bubbles: true,
-              composed: true,
-              detail: {
-                files: files
-              }
-            })
-          )
-
-          fileInput.value = ''
-        }}
-      />
-      <label for="input-file">${this.label || 'select file'}</label>
-
-      ${this._files?.length
-        ? html` <ul>
-            ${this._files.map(
-              file => html`
-                <li>
-                  - ${file.name}
-                  <md-icon
-                    @click=${(e: Event) => {
-                      this._files.splice(this._files.indexOf(file), 1)
-                      this.requestUpdate()
-                    }}
-                    >delete_outline</md-icon
-                  >
-                </li>
-              `
-            )}
-          </ul>`
-        : ''}
-    `
-  }
-
-  firstUpdated() {
-    FileDropHelper.set(this)
-
-    this.addEventListener('file-drop', (e: Event) => {
-      const de = e as any
-      this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : []
-    })
-  }
-
-  get files() {
-    return this._files
-  }
-
-  reset() {
-    this.fileInput.value = ''
-    this._files = []
-  }
-}