@operato/form 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,160 +0,0 @@
-import { css } from 'lit'
-
-export const SearchFormStyles = css`
-  :host {
-    overflow: auto;
-    background-color: var(--search-form-background-color, var(--md-sys-color-surface));
-    padding: var(--spacing-medium);
-  }
-
-  .search-form {
-    position: relative;
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    grid-gap: var(--form-grid-gap, var(--spacing-medium));
-    grid-auto-rows: minmax(24px, auto);
-  }
-  .search-form label {
-    grid-column: span 3;
-    text-align: right;
-    align-self: center;
-    text-transform: capitalize;
-
-    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-    color: var(--md-sys-color-on-primary-container);
-  }
-
-  .search-form input,
-  .search-form select {
-    grid-column: span 9;
-
-    border: var(--input-field-border);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: var(--input-field-border-radius);
-    padding: var(--input-field-padding, var(--spacing-tiny));
-    font: var(--input-field-font);
-    max-width: 85%;
-    color: var(--input-field-color, var(--md-sys-color-on-surface-variant));
-    background-color: var(--md-sys-color-surface-container-lowest);
-  }
-
-  .search-form select {
-    min-height: 25px;
-    max-width: calc(85% + 18px);
-  }
-
-  .search-form input[type='checkbox'],
-  .search-form input[type='radio'] {
-    justify-self: end;
-    align-self: center;
-    grid-column: span 3 / auto;
-    position: relative;
-    left: 17px;
-  }
-
-  .search-form input[type='checkbox'] + label,
-  .search-form input[type='radio'] + label {
-    padding-left: 17px;
-    text-align: left;
-    align-self: center;
-    grid-column: span 9 / auto;
-
-    font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color, var(--md-sys-color-secondary));
-  }
-
-  input:focus {
-    outline: none;
-  }
-
-  input[type='checkbox'] {
-    margin: 0;
-  }
-
-  [search] {
-    position: absolute;
-    right: var(--spacing-small);
-    bottom: var(--spacing-none);
-    color: var(--search-form-icon-color, var(--md-sys-color-primary));
-  }
-
-  input[readonly],
-  select[readonly] {
-    background-color: #f0f0f0;
-  }
-
-  @media screen and (max-width: 460px) {
-    .search-form {
-      grid-template-columns: repeat(12, 1fr);
-      grid-gap: var(--spacing-medium) var(--spacing-medium);
-
-      max-height: 100%;
-      overflow-y: auto;
-    }
-    .search-form label {
-      grid-column: span 3;
-      padding-right: 5px;
-      align-self: center;
-      color: var(--md-sys-color-on-surface);
-    }
-    .search-form input,
-    .search-form select {
-      grid-column: span 8;
-      max-width: 100%;
-      color: var(--md-sys-color-on-surface);
-    }
-    .search-form input[type='checkbox'],
-    .search-form input[type='radio'] {
-      justify-self: end;
-      align-self: center;
-      grid-column: span 3 / auto;
-    }
-
-    .search-form input[type='checkbox'] + label,
-    .search-form input[type='radio'] + label {
-      grid-column: span 8 / auto;
-      align-self: center;
-      position: relative;
-      left: 5px;
-      color: var(--md-sys-color-on-surface);
-    }
-
-    [search] {
-      right: var(--spacing-tiny);
-      color: var(--md-sys-color-on-surface);
-    }
-  }
-  @media (min-width: 461px) and (max-width: 1024px) {
-    .search-form select {
-      max-width: calc(85% + 10px);
-    }
-  }
-  @media screen and (min-width: 1201px) and (max-width: 2000px) {
-    .search-form {
-      grid-template-columns: repeat(36, 1fr);
-    }
-    .search-form input,
-    .search-form select {
-      max-width: 90%;
-    }
-    .search-form select {
-      max-width: calc(90% + 18px);
-    }
-  }
-
-  @media screen and (min-width: 2001px) {
-    .search-form {
-      grid-template-columns: repeat(48, 1fr);
-    }
-    .search-form input,
-    .search-form select {
-      max-width: 90%;
-    }
-    .search-form select {
-      max-width: calc(90% + 18px);
-    }
-    [search] {
-      right: 0.8%;
-    }
-  }
-`

package/src/styles/single-column-form-styles.ts

@@ -1,114 +0,0 @@
-import { css } from 'lit'
-
-export const SingleColumnFormStyles = css`
-  :host {
-    overflow: auto;
-    padding: var(--form-container-padding);
-  }
-
-  .single-column-form {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-gap: var(--form-grid-gap);
-    grid-auto-rows: minmax(24px, auto);
-    max-width: var(--form-max-width);
-    margin: var(--form-margin);
-  }
-  .single-column-form fieldset {
-    display: contents;
-  }
-  .single-column-form legend {
-    grid-column: span 12;
-    text-transform: capitalize;
-
-    padding: var(--legend-padding);
-    font: var(--legend-font);
-    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
-    border-bottom: var(--legend-border-bottom);
-  }
-
-  .single-column-form label {
-    grid-column: span 3;
-    text-align: right;
-    text-transform: capitalize;
-
-    color: var(--label-color, var(--md-sys-color-on-surface));
-    font: var(--label-font);
-  }
-
-  .single-column-form input,
-  .single-column-form table,
-  .single-column-form select,
-  .single-column-form textarea,
-  .single-column-form [custom-input] {
-    grid-column: span 8;
-
-    border: var(--input-field-border);
-    border-radius: var(--input-field-border-radius);
-    padding: var(--input-field-padding);
-    font: var(--input-field-font);
-  }
-
-  .single-column-form input[type='checkbox'],
-  .single-column-form input[type='radio'] {
-    justify-self: end;
-    align-self: start;
-    grid-column: span 3 / auto;
-    position: relative;
-    left: 17px;
-  }
-
-  .single-column-form input[type='checkbox'] + label,
-  .single-column-form input[type='radio'] + label {
-    padding-left: 17px;
-    text-align: left;
-    grid-column: span 9 / auto;
-
-    font: var(--form-sublabel-font);
-    color: var(--form-sublabel-color, var(--md-sys-color-secondary));
-  }
-
-  input:focus {
-    outline: none;
-    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
-  }
-  input[type='checkbox'] {
-    margin: 0;
-  }
-
-  @media screen and (max-width: 460px) {
-    .single-column-form {
-      max-width: 90%;
-      grid-gap: 5px;
-    }
-    .single-column-form label {
-      grid-column: span 12;
-      text-align: left;
-      align-self: end;
-    }
-    .single-column-form input,
-    .single-column-form table,
-    .single-column-form select,
-    .single-column-form textarea,
-    .single-column-form [custom-input] {
-      grid-column: span 12;
-
-      padding: var(--padding-default, var(--spacing-medium));
-      font: normal 15px var(--theme-font);
-    }
-    .single-column-form input[type='checkbox'],
-    .single-column-form input[type='radio'] {
-      justify-self: start;
-      align-self: center;
-      grid-column: span 1 / auto;
-      zoom: 1.4;
-    }
-
-    .single-column-form input[type='checkbox'] + label,
-    .single-column-form input[type='radio'] + label {
-      grid-column: span 11 / auto;
-      align-self: center;
-    }
-  }
-`

package/src/types.ts

@@ -1,106 +0,0 @@
-import { TemplateResult } from 'lit-html'
-import { OxFiltersFormBase } from './filters/ox-filters-form-base'
-import { OxSearchForm } from './components/ox-search-form'
-
-export type FilterOperator =
-  | 'search'
-  | 'eq'
-  | 'between'
-  | 'gte'
-  | 'lte'
-  | 'is_not_true'
-  | 'in'
-  | 'like'
-  | 'i_like'
-  | 'noteq'
-  | 'is_empty_num_id'
-  | 'is_blank'
-  | 'is_present'
-  | 'is_not_false'
-  | 'is_true'
-  | 'is_false'
-  | 'is_not_null'
-  | 'is_null'
-  | 'notin_with_null'
-  | 'notin'
-  | 'gt'
-  | 'lt'
-  | 'i_nlike'
-  | 'nlike'
-
-export type SelectOptionObject =
-  | {
-      name: string
-      display?: never
-      value: string
-    }
-  | {
-      display: string
-      name?: never
-      value: string
-    }
-
-export type SelectOption = SelectOptionObject | string
-
-export type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean | Promise<boolean>
-
-export type FilterConfig = {
-  name: string
-  label: string
-  type: string
-  operator?: FilterOperator
-  options?:
-    | { [key: string]: any }
-    | SelectOption[]
-    | ((form: OxFiltersFormBase) => SelectOption[] | Promise<SelectOption[]>)
-  value?:
-    | string
-    | number
-    | boolean
-    | { name: string; [params: string]: any }
-    | string[]
-    | number[]
-    | { name: string; [params: string]: any }[]
-    | undefined
-  boundTo?: string[]
-  hidden?: boolean
-  readonly?: boolean
-  onchange?: FilterChangedCallback
-}
-
-export type FilterValue = {
-  name: string
-  operator: FilterOperator
-  value: string | number | boolean | string[] | number[] | undefined
-}
-
-export type FilterSelectRenderer = (
-  filter: FilterConfig,
-  value: string | number | boolean | string[] | number[] | any | undefined,
-  owner: Element
-) => TemplateResult | string | void
-
-export type SearchFilterChangedCallback = (value: any, form: OxSearchForm) => boolean | Promise<boolean>
-
-export type SearchFormField = {
-  type: string
-  hidden?: boolean
-  name?: string
-  id?: string
-  label?: string
-  placeholder?: string
-  value?: any
-  field?: string
-  queryName?: string
-  props?: { [prop: string]: string }
-  attrs?: string[]
-  options?: SelectOption[] | ((form: OxSearchForm) => SelectOption[] | Promise<SelectOption[]>)
-  boundTo?: string[]
-  readonly?: boolean
-  handlers?: { [event: string]: EventListener }
-  onchange?: SearchFilterChangedCallback
-}
-
-export type PersonalFilterPreference = {
-  filters?: Partial<FilterConfig>[]
-}

package/stories/ox-filters-form-barcode.stories.ts

@@ -1,140 +0,0 @@
-import { CommonHeaderStyles } from '@operato/styles'
-import '../src/filters/ox-filters-form-base.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-filters-form-barcode',
-  component: 'ox-filters-form-base',
-  argTypes: {
-    value: { control: 'object' },
-    filters: { control: 'object' },
-    urlParamsSensitive: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  value?: object
-  filters?: object
-  urlParamsSensitive: boolean
-}
-
-const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: 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="/themes/form-theme.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>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-small) var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="header">
-    <div class="filters">
-      <ox-filters-form-base
-        .value=${value}
-        .filters=${filters}
-        ?url-params-sensitive=${urlParamsSensitive}
-        @filters-change=${(e: CustomEvent) => {
-          console.log('filters changed', e.detail)
-        }}
-      >
-      </ox-filters-form-base>
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  filters: [
-    {
-      name: 'test',
-      type: 'barcode',
-      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'
-    }
-  ]
-}