@operato/form 8.0.0-alpha.6 → 8.0.0-beta.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/form",
   "description": "WebApplication form supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-alpha.6",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -62,25 +62,25 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.4",
-    "@operato/p13n": "^8.0.0-alpha.4",
-    "@operato/time-calculator": "^8.0.0-alpha.6",
-    "@operato/utils": "^8.0.0-alpha.0",
+    "@operato/graphql": "^8.0.0-beta.1",
+    "@operato/input": "^8.0.0-beta.1",
+    "@operato/p13n": "^8.0.0-beta.1",
+    "@operato/time-calculator": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "lit": "^3.1.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.9.2",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
     "@hatiolab/prettier-config": "^1.0.0",
     "@open-wc/eslint-config": "^12.0.3",
-    "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "@web/dev-server": "^0.3.0",
+    "@open-wc/testing": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@web/dev-server": "^0.4.0",
     "@web/dev-server-storybook": "^2.0.1",
-    "@web/test-runner": "^0.18.0",
-    "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
+    "@web/test-runner": "^0.19.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "husky": "^9.0.11",
     "json5": "^2.2.0",
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f0c1979adcf64df1f543f383ae7385a56df1e57a"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -35,6 +36,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);

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/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 = []
-  }
-}