@operato/form 2.0.0-alpha.146 → 2.0.0-alpha.148
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/dist/src/components/ox-custom-input.js +3 -4
- package/dist/src/components/ox-custom-input.js.map +1 -1
- package/dist/src/components/ox-file-uploader.js +1 -1
- package/dist/src/components/ox-file-uploader.js.map +1 -1
- package/dist/src/components/ox-search-form.js +25 -32
- package/dist/src/components/ox-search-form.js.map +1 -1
- package/dist/src/filters/filter-input-barcode.js +1 -0
- package/dist/src/filters/filter-input-barcode.js.map +1 -1
- package/dist/src/filters/filter-styles.js +31 -17
- package/dist/src/filters/filter-styles.js.map +1 -1
- package/dist/src/filters/ox-filters-form-base.js +6 -2
- package/dist/src/filters/ox-filters-form-base.js.map +1 -1
- package/dist/src/styles/multi-column-form-styles.js +6 -6
- package/dist/src/styles/multi-column-form-styles.js.map +1 -1
- package/dist/src/styles/search-form-styles.js +17 -18
- package/dist/src/styles/search-form-styles.js.map +1 -1
- package/dist/src/styles/single-column-form-styles.js +5 -5
- package/dist/src/styles/single-column-form-styles.js.map +1 -1
- package/dist/stories/ox-filters-form-barcode.stories.d.ts +5 -0
- package/dist/stories/ox-filters-form-barcode.stories.js +31 -5
- package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-bounded.stories.d.ts +5 -0
- package/dist/stories/ox-filters-form-base-bounded.stories.js +28 -23
- package/dist/stories/ox-filters-form-base-bounded.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-change-handler.stories.d.ts +5 -0
- package/dist/stories/ox-filters-form-base-change-handler.stories.js +28 -23
- package/dist/stories/ox-filters-form-base-change-handler.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base.stories.d.ts +5 -0
- package/dist/stories/ox-filters-form-base.stories.js +26 -23
- package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
- package/dist/stories/ox-search-form.stories.d.ts +5 -0
- package/dist/stories/ox-search-form.stories.js +28 -23
- package/dist/stories/ox-search-form.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/components/ox-custom-input.ts +3 -4
- package/src/components/ox-file-uploader.ts +1 -1
- package/src/components/ox-search-form.ts +25 -40
- package/src/filters/filter-input-barcode.ts +1 -0
- package/src/filters/filter-styles.ts +31 -17
- package/src/filters/ox-filters-form-base.ts +6 -2
- package/src/styles/multi-column-form-styles.ts +6 -6
- package/src/styles/search-form-styles.ts +17 -18
- package/src/styles/single-column-form-styles.ts +5 -5
- package/stories/ox-filters-form-barcode.stories.ts +32 -5
- package/stories/ox-filters-form-base-bounded.stories.ts +32 -25
- package/stories/ox-filters-form-base-change-handler.stories.ts +32 -25
- package/stories/ox-filters-form-base.stories.ts +30 -25
- package/stories/ox-search-form.stories.ts +32 -25
- package/themes/dark-hc.css +151 -0
- package/themes/dark-mc.css +151 -0
- package/themes/dark.css +151 -0
- package/themes/grist-theme.css +169 -0
- package/themes/light-hc.css +151 -0
- package/themes/light-mc.css +151 -0
- package/themes/light.css +151 -0
- package/themes/md-typescale-styles.css +100 -0
- package/themes/spacing.css +43 -0
- package/themes/state-color.css +6 -0
- package/themes/app-theme.css +0 -145
- package/themes/form-theme.css +0 -75
- package/themes/input-theme.css +0 -32
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\nimport { PagePreferenceProvider } from '@operato/p13n'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue, PersonalFilterPreference } from '../types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\n@customElement('ox-filters-form-base')\nexport class OxFiltersFormBase extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: flex;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n gap: var(--input-intra-gap, 7px);\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n form {\n flex-direction: column;\n flex-flow: column;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Array }) filters: FilterConfig[] = []\n @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n @property({ type: Object }) personalConfigProvider?: PagePreferenceProvider\n\n @state() personalConfig?: PersonalFilterPreference\n @state() personalFilters?: FilterConfig[]\n\n @queryAsync('form') form!: HTMLFormElement\n\n private _popstateEventHandler?: EventListener\n private _filtersChangeHandler?: EventListener\n private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n const { target, detail: value } = e as CustomEvent\n const name = (target as HTMLInputElement).name\n const {\n label,\n type,\n operator,\n value: defaultValue,\n onchange\n } = (this.personalFilters || []).find(filter => filter.name == name) || {}\n\n if (this.autoUpdateTargetsOnChange[name]) {\n /* \n 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함.\n */\n ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {\n const target = this.renderRoot.querySelector(`[name='${name}']`)\n if (target) {\n ;(target as HTMLInputElement).value = ''\n }\n })\n\n this.requestUpdate()\n }\n\n const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n this.value = await this.getQueryFilters()\n\n keepGoing &&\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: this.value,\n from: 'filters-form'\n }\n })\n )\n })\n }\n\n buildDefaultValue(operator: FilterOperator, defaultValue: any) {\n if (defaultValue === undefined) {\n return\n }\n if (operator == 'between') {\n return defaultValue instanceof Array && (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n } else {\n return getDefaultValue(defaultValue, this)\n }\n }\n\n render(): TemplateResult {\n return html`\n <form\n @submit=${(e: Event) => {\n e.preventDefault()\n }}\n >\n ${(this.personalFilters || [])\n .filter(filter => !filter.hidden)\n .map((filter: FilterConfig) => {\n const { name, label, type, operator, value: defaultValue } = filter\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n\n const value =\n this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)\n\n if (!renderer) {\n return nothing\n }\n\n return type === 'search'\n ? html`<ox-input-search name=\"search\" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`\n : type === 'boolean' || type === 'checkbox'\n ? renderer(filter, value, this)\n : type !== 'select'\n ? html`\n <label filter-title ?between=${operator == 'between'}\n ><span>${label}</span> ${renderer(filter, value, this)}\n </label>\n `\n : this.renderSelect(filter, value, renderer)\n })}\n </form>\n\n <slot name=\"setting\"></slot>\n `\n }\n\n renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {\n const { name, label, operator, value: defaultValue } = filter\n\n return operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value ?? defaultValue}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(filter, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value ?? defaultValue}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n </ox-select>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('urlParamsSensitive')) {\n if (this.urlParamsSensitive) {\n this._popstateEventHandler = () => {\n const queryString = window.location.search\n const urlParams = new URLSearchParams(queryString)\n var filters = urlParams.get('filters')\n\n if (filters) {\n try {\n this.value = json5.parse(filters)\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: json5.parse(filters),\n from: 'url-parameter'\n }\n })\n )\n } catch (e) {\n console.error(`invalid filters params on URL query string : ${e}`)\n }\n }\n }\n\n //@ts-ignore\n this._popstateEventHandler() // call for the first time\n\n window.addEventListener('popstate', this._popstateEventHandler)\n\n this._filtersChangeHandler = (e: Event) => {\n const urlParams = new URLSearchParams(window.location.search)\n const { filters, from } = (e as CustomEvent).detail || {}\n\n if (from === 'url-parameter') {\n return\n }\n\n if (filters.length > 0) {\n urlParams.set('filters', json5.stringify(filters))\n } else {\n urlParams.delete('filters')\n }\n const queryString = String(urlParams)\n const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n history.pushState({}, document.title, url)\n }\n\n this.addEventListener('filters-change', this._filtersChangeHandler)\n } else {\n if (this._popstateEventHandler) {\n window.removeEventListener('popstate', this._popstateEventHandler)\n }\n if (this._filtersChangeHandler) {\n this.removeEventListener('popstate', this._filtersChangeHandler)\n }\n }\n }\n\n if (changes.has('personalConfigProvider') && this.personalConfigProvider) {\n this.personalConfig = await this.personalConfigProvider.load()\n } else if (changes.has('filters') || changes.has('personalConfig')) {\n this.applyUpdatedConfiguration()\n }\n }\n\n async applyUpdatedConfiguration() {\n if (!this.filters) {\n return\n }\n\n if (!this.personalConfig) {\n this.personalFilters = [...this.filters]\n } else {\n const { filters: personalFilters } = this.personalConfig\n\n if (personalFilters) {\n const xfilters = this.filters.map((filter: Partial<FilterConfig>) => {\n const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name)\n return personalFilter ? { ...filter, ...personalFilter } : filter\n })\n\n function reorderList(a: Partial<FilterConfig>[], b: Partial<FilterConfig>[]): Partial<FilterConfig>[] {\n // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움\n const result = new Array(a.length)\n\n // b 배열에 없는 아이템은 원래 위치로 채움\n a.forEach((item, index) => {\n if (!item.name || !b.find(bi => bi.name == item.name)) {\n result[index] = item\n }\n })\n\n b.forEach(item => {\n const ai = a.find(ai => ai.name == item.name)\n if (ai) {\n result[result.findIndex(slot => slot === undefined)] = ai\n }\n })\n\n return result\n }\n\n // 배열 재정렬 실행\n this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterConfig[]\n }\n }\n\n this.autoUpdateTargetsOnChange = {}\n\n this.personalFilters\n ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)\n .map(({ name, boundTo }) => {\n boundTo!.forEach(to => {\n const origin = this.autoUpdateTargetsOnChange[to] || []\n if (name && !origin.includes(name)) {\n this.autoUpdateTargetsOnChange[to] = [...origin, name]\n }\n })\n })\n\n if (!this.urlParamsSensitive) {\n this.value = await this.getQueryFilters()\n }\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n async getQueryFilters(): Promise<FilterValue[]> {\n const formData = new FormData(await this.form)\n\n var filters = (this.personalFilters || [])\n .map((filter: FilterConfig) => {\n const { name, type, operator } = filter\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as FilterValue[]\n\n return filters\n }\n\n reset() {\n this.form\n .then((form: HTMLFormElement) => {\n form.reset()\n })\n .catch((error: any) => {\n console.error('Error resetting the form:', error)\n })\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { getDefaultValue } from '@operato/time-calculator'\nimport { PagePreferenceProvider } from '@operato/p13n'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterSelectRenderer, FilterValue, PersonalFilterPreference } from '../types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\n@customElement('ox-filters-form-base')\nexport class OxFiltersFormBase extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n FilterStyles,\n css`\n :host {\n display: flex;\n padding: var(--spacing-small);\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--spacing-medium) var(--spacing-large);\n }\n\n form > * {\n display: flex;\n align-items: center;\n gap: var(--spacing-small, 4px);\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n form {\n flex-direction: column;\n flex-flow: column;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Array }) filters: FilterConfig[] = []\n @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n @property({ type: Object }) personalConfigProvider?: PagePreferenceProvider\n\n @state() personalConfig?: PersonalFilterPreference\n @state() personalFilters?: FilterConfig[]\n\n @queryAsync('form') form!: HTMLFormElement\n\n private _popstateEventHandler?: EventListener\n private _filtersChangeHandler?: EventListener\n private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n const { target, detail: value } = e as CustomEvent\n const name = (target as HTMLInputElement).name\n const {\n label,\n type,\n operator,\n value: defaultValue,\n onchange\n } = (this.personalFilters || []).find(filter => filter.name == name) || {}\n\n if (this.autoUpdateTargetsOnChange[name]) {\n /* \n 일단은 심플하게, boundTo로 연결된 필터값이 바뀌면, 폼 전체를 update하도록 함.\n */\n ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {\n const target = this.renderRoot.querySelector(`[name='${name}']`)\n if (target) {\n ;(target as HTMLInputElement).value = ''\n }\n })\n\n this.requestUpdate()\n }\n\n const keepGoing = onchange ? await onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n this.value = await this.getQueryFilters()\n\n keepGoing &&\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: this.value,\n from: 'filters-form'\n }\n })\n )\n })\n }\n\n buildDefaultValue(operator: FilterOperator, defaultValue: any) {\n if (defaultValue === undefined) {\n return\n }\n if (operator == 'between') {\n return defaultValue instanceof Array && (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n } else {\n return getDefaultValue(defaultValue, this)\n }\n }\n\n render(): TemplateResult {\n return html`\n <form\n class=\"md-typescale-body-medium-prominent\"\n @submit=${(e: Event) => {\n e.preventDefault()\n }}\n >\n ${(this.personalFilters || [])\n .filter(filter => !filter.hidden)\n .map((filter: FilterConfig) => {\n const { name, label, type, operator, value: defaultValue } = filter\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n\n const value =\n this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)\n\n if (!renderer) {\n return nothing\n }\n\n return type === 'search'\n ? html`<ox-input-search name=\"search\" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`\n : type === 'boolean' || type === 'checkbox'\n ? renderer(filter, value, this)\n : type !== 'select'\n ? html`\n <label filter-title ?between=${operator == 'between'}\n ><span>${label}</span> ${renderer(filter, value, this)}\n </label>\n `\n : this.renderSelect(filter, value, renderer)\n })}\n </form>\n\n <slot name=\"setting\"></slot>\n `\n }\n\n renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {\n const { name, label, operator, value: defaultValue } = filter\n\n return operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value ?? defaultValue}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(filter, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value ?? defaultValue}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n </ox-select>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('urlParamsSensitive')) {\n if (this.urlParamsSensitive) {\n this._popstateEventHandler = () => {\n const queryString = window.location.search\n const urlParams = new URLSearchParams(queryString)\n var filters = urlParams.get('filters')\n\n if (filters) {\n try {\n this.value = json5.parse(filters)\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: json5.parse(filters),\n from: 'url-parameter'\n }\n })\n )\n } catch (e) {\n console.error(`invalid filters params on URL query string : ${e}`)\n }\n }\n }\n\n //@ts-ignore\n this._popstateEventHandler() // call for the first time\n\n window.addEventListener('popstate', this._popstateEventHandler)\n\n this._filtersChangeHandler = (e: Event) => {\n const urlParams = new URLSearchParams(window.location.search)\n const { filters, from } = (e as CustomEvent).detail || {}\n\n if (from === 'url-parameter') {\n return\n }\n\n if (filters.length > 0) {\n urlParams.set('filters', json5.stringify(filters))\n } else {\n urlParams.delete('filters')\n }\n const queryString = String(urlParams)\n const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n history.pushState({}, document.title, url)\n }\n\n this.addEventListener('filters-change', this._filtersChangeHandler)\n } else {\n if (this._popstateEventHandler) {\n window.removeEventListener('popstate', this._popstateEventHandler)\n }\n if (this._filtersChangeHandler) {\n this.removeEventListener('popstate', this._filtersChangeHandler)\n }\n }\n }\n\n if (changes.has('personalConfigProvider') && this.personalConfigProvider) {\n this.personalConfig = await this.personalConfigProvider.load()\n } else if (changes.has('filters') || changes.has('personalConfig')) {\n this.applyUpdatedConfiguration()\n }\n }\n\n async applyUpdatedConfiguration() {\n if (!this.filters) {\n return\n }\n\n if (!this.personalConfig) {\n this.personalFilters = [...this.filters]\n } else {\n const { filters: personalFilters } = this.personalConfig\n\n if (personalFilters) {\n const xfilters = this.filters.map((filter: Partial<FilterConfig>) => {\n const personalFilter = personalFilters.find(pFilter => pFilter.name == filter.name)\n return personalFilter ? { ...filter, ...personalFilter } : filter\n })\n\n function reorderList(a: Partial<FilterConfig>[], b: Partial<FilterConfig>[]): Partial<FilterConfig>[] {\n // 결과 배열 초기화, a 배열 길이만큼 undefined로 채움\n const result = new Array(a.length)\n\n // b 배열에 없는 아이템은 원래 위치로 채움\n a.forEach((item, index) => {\n if (!item.name || !b.find(bi => bi.name == item.name)) {\n result[index] = item\n }\n })\n\n b.forEach(item => {\n const ai = a.find(ai => ai.name == item.name)\n if (ai) {\n result[result.findIndex(slot => slot === undefined)] = ai\n }\n })\n\n return result\n }\n\n // 배열 재정렬 실행\n this.personalFilters = reorderList(xfilters as any, personalFilters as any) as FilterConfig[]\n }\n }\n\n this.autoUpdateTargetsOnChange = {}\n\n this.personalFilters\n ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)\n .map(({ name, boundTo }) => {\n boundTo!.forEach(to => {\n const origin = this.autoUpdateTargetsOnChange[to] || []\n if (name && !origin.includes(name)) {\n this.autoUpdateTargetsOnChange[to] = [...origin, name]\n }\n })\n })\n\n if (!this.urlParamsSensitive) {\n this.value = await this.getQueryFilters()\n }\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n async getQueryFilters(): Promise<FilterValue[]> {\n const formData = new FormData(await this.form)\n\n var filters = (this.personalFilters || [])\n .map((filter: FilterConfig) => {\n const { name, type, operator } = filter\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as FilterValue[]\n\n return filters\n }\n\n reset() {\n this.form\n .then((form: HTMLFormElement) => {\n form.reset()\n })\n .catch((error: any) => {\n console.error('Error resetting the form:', error)\n })\n }\n}\n"]}
|
|
@@ -22,7 +22,7 @@ export const MultiColumnFormStyles = css `
|
|
|
22
22
|
|
|
23
23
|
padding: var(--legend-padding);
|
|
24
24
|
font: var(--legend-font);
|
|
25
|
-
color: var(--legend-text-color);
|
|
25
|
+
color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
|
|
26
26
|
border-bottom: var(--legend-border-bottom);
|
|
27
27
|
}
|
|
28
28
|
|
|
@@ -32,7 +32,7 @@ export const MultiColumnFormStyles = css `
|
|
|
32
32
|
text-transform: capitalize;
|
|
33
33
|
align-self: center;
|
|
34
34
|
|
|
35
|
-
color: var(--label-color);
|
|
35
|
+
color: var(--label-color, var(--md-sys-color-on-surface));
|
|
36
36
|
font: var(--label-font);
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -71,7 +71,7 @@ export const MultiColumnFormStyles = css `
|
|
|
71
71
|
grid-column: span 9 / auto;
|
|
72
72
|
|
|
73
73
|
font: var(--form-sublabel-font);
|
|
74
|
-
color: var(--form-sublabel-color);
|
|
74
|
+
color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
|
|
75
75
|
}
|
|
76
76
|
.multi-column-form [options-wrap] {
|
|
77
77
|
grid-column: span 21 / auto;
|
|
@@ -79,7 +79,7 @@ export const MultiColumnFormStyles = css `
|
|
|
79
79
|
|
|
80
80
|
input:focus {
|
|
81
81
|
outline: none;
|
|
82
|
-
border: 1px solid var(--focus-background-color);
|
|
82
|
+
border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
|
|
83
83
|
}
|
|
84
84
|
input[type='checkbox'] {
|
|
85
85
|
margin: 0;
|
|
@@ -108,7 +108,7 @@ export const MultiColumnFormStyles = css `
|
|
|
108
108
|
.multi-column-form [custom-input] {
|
|
109
109
|
grid-column: span 8 / auto;
|
|
110
110
|
max-width: initial;
|
|
111
|
-
padding: var(--padding-default);
|
|
111
|
+
padding: var(--padding-default, var(--spacing-medium));
|
|
112
112
|
font: normal 15px var(--theme-font);
|
|
113
113
|
}
|
|
114
114
|
.multi-column-form input[type='checkbox'],
|
|
@@ -130,7 +130,7 @@ export const MultiColumnFormStyles = css `
|
|
|
130
130
|
.multi-column-form [options-wrap] {
|
|
131
131
|
grid-column: span 12 / auto;
|
|
132
132
|
display: grid;
|
|
133
|
-
grid-gap: var(--padding-default) var(--padding-narrow);
|
|
133
|
+
grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));
|
|
134
134
|
grid-template-columns: repeat(12, 1fr);
|
|
135
135
|
}
|
|
136
136
|
.multi-column-form [options-wrap] input[type='checkbox'] + label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n :host {\n overflow: auto;\n padding: var(--form-container-padding);\n }\n\n .multi-column-form {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: var(--form-grid-gap);\n grid-auto-rows: minmax(24px, auto);\n max-width: var(--form-multi-column-max-width);\n margin: var(--form-margin);\n }\n .multi-column-form fieldset {\n display: contents;\n }\n .multi-column-form legend {\n grid-column: span 24;\n text-transform: capitalize;\n\n padding: var(--legend-padding);\n font: var(--legend-font);\n color: var(--legend-text-color);\n border-bottom: var(--legend-border-bottom);\n }\n\n .multi-column-form label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n align-self: center;\n\n color: var(--label-color);\n font: var(--label-font);\n }\n\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n grid-column: span 9;\n\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n max-width: 85%;\n }\n .multi-column-form select {\n min-height: 25px;\n max-width: calc(85% + 18px);\n }\n\n .multi-column-form input[type='checkbox'],\n .multi-column-form input[type='radio'] {\n justify-self: end;\n align-self: center;\n grid-column: span 3 / auto;\n position: relative;\n left: 17px;\n }\n\n .multi-column-form input[type='checkbox'] + label,\n .multi-column-form input[type='radio'] + label {\n padding-left: 17px;\n text-align: left;\n align-self: center;\n grid-column: span 9 / auto;\n\n font: var(--form-sublabel-font);\n color: var(--form-sublabel-color);\n }\n .multi-column-form [options-wrap] {\n grid-column: span 21 / auto;\n }\n\n input:focus {\n outline: none;\n border: 1px solid var(--focus-background-color);\n }\n input[type='checkbox'] {\n margin: 0;\n }\n\n @media screen and (max-width: 460px) {\n .multi-column-form {\n max-width: 100%;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 5px;\n }\n .multi-column-form legend {\n grid-column: span 12;\n }\n .multi-column-form label {\n grid-column: span 4 / auto;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n grid-column: span 8 / auto;\n max-width: initial;\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n }\n .multi-column-form input[type='checkbox'],\n .multi-column-form input[type='radio'] {\n justify-self: left;\n align-self: center;\n grid-column: span 1 / auto;\n left: 0;\n zoom: 1.4;\n }\n\n .multi-column-form input[type='checkbox'] + label,\n .multi-column-form input[type='radio'] + label {\n grid-column: span 11 / auto;\n align-self: center;\n position: relative;\n left: -25px;\n }\n .multi-column-form [options-wrap] {\n grid-column: span 12 / auto;\n display: grid;\n grid-gap: var(--padding-default) var(--padding-narrow);\n grid-template-columns: repeat(12, 1fr);\n }\n .multi-column-form [options-wrap] input[type='checkbox'] + label,\n .multi-column-form [options-wrap] input[type='radio'] + label {\n grid-column: span 5 / auto;\n align-self: left;\n left: -4%;\n margin-right: 0;\n }\n }\n @media (min-width: 481px) and (max-width: 1024px) {\n .multi-column-form select {\n max-width: calc(85% + 10px);\n }\n }\n @media screen and (min-width: 1201px) and (max-width: 2000px) {\n .multi-column-form {\n grid-template-columns: repeat(36, 1fr);\n }\n .multi-column-form legend {\n grid-column: span 36;\n }\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n max-width: 90%;\n }\n .multi-column-form select {\n max-width: calc(90% + 18px);\n }\n .multi-column-form [options-wrap] {\n grid-column: span 33 / auto;\n }\n }\n @media screen and (min-width: 2001px) {\n .multi-column-form {\n grid-template-columns: repeat(48, 1fr);\n }\n .multi-column-form legend {\n grid-column: span 48;\n }\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n max-width: 90%;\n }\n .multi-column-form select {\n max-width: calc(90% + 18px);\n }\n .multi-column-form [options-wrap] {\n grid-column: span 45 / auto;\n }\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n :host {\n overflow: auto;\n padding: var(--form-container-padding);\n }\n\n .multi-column-form {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: var(--form-grid-gap);\n grid-auto-rows: minmax(24px, auto);\n max-width: var(--form-multi-column-max-width);\n margin: var(--form-margin);\n }\n .multi-column-form fieldset {\n display: contents;\n }\n .multi-column-form legend {\n grid-column: span 24;\n text-transform: capitalize;\n\n padding: var(--legend-padding);\n font: var(--legend-font);\n color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));\n border-bottom: var(--legend-border-bottom);\n }\n\n .multi-column-form label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n align-self: center;\n\n color: var(--label-color, var(--md-sys-color-on-surface));\n font: var(--label-font);\n }\n\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n grid-column: span 9;\n\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n max-width: 85%;\n }\n .multi-column-form select {\n min-height: 25px;\n max-width: calc(85% + 18px);\n }\n\n .multi-column-form input[type='checkbox'],\n .multi-column-form input[type='radio'] {\n justify-self: end;\n align-self: center;\n grid-column: span 3 / auto;\n position: relative;\n left: 17px;\n }\n\n .multi-column-form input[type='checkbox'] + label,\n .multi-column-form input[type='radio'] + label {\n padding-left: 17px;\n text-align: left;\n align-self: center;\n grid-column: span 9 / auto;\n\n font: var(--form-sublabel-font);\n color: var(--form-sublabel-color, var(--md-sys-color-on-surface));\n }\n .multi-column-form [options-wrap] {\n grid-column: span 21 / auto;\n }\n\n input:focus {\n outline: none;\n border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));\n }\n input[type='checkbox'] {\n margin: 0;\n }\n\n @media screen and (max-width: 460px) {\n .multi-column-form {\n max-width: 100%;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: 5px;\n }\n .multi-column-form legend {\n grid-column: span 12;\n }\n .multi-column-form label {\n grid-column: span 4 / auto;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n grid-column: span 8 / auto;\n max-width: initial;\n padding: var(--padding-default, var(--spacing-medium));\n font: normal 15px var(--theme-font);\n }\n .multi-column-form input[type='checkbox'],\n .multi-column-form input[type='radio'] {\n justify-self: left;\n align-self: center;\n grid-column: span 1 / auto;\n left: 0;\n zoom: 1.4;\n }\n\n .multi-column-form input[type='checkbox'] + label,\n .multi-column-form input[type='radio'] + label {\n grid-column: span 11 / auto;\n align-self: center;\n position: relative;\n left: -25px;\n }\n .multi-column-form [options-wrap] {\n grid-column: span 12 / auto;\n display: grid;\n grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));\n grid-template-columns: repeat(12, 1fr);\n }\n .multi-column-form [options-wrap] input[type='checkbox'] + label,\n .multi-column-form [options-wrap] input[type='radio'] + label {\n grid-column: span 5 / auto;\n align-self: left;\n left: -4%;\n margin-right: 0;\n }\n }\n @media (min-width: 481px) and (max-width: 1024px) {\n .multi-column-form select {\n max-width: calc(85% + 10px);\n }\n }\n @media screen and (min-width: 1201px) and (max-width: 2000px) {\n .multi-column-form {\n grid-template-columns: repeat(36, 1fr);\n }\n .multi-column-form legend {\n grid-column: span 36;\n }\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n max-width: 90%;\n }\n .multi-column-form select {\n max-width: calc(90% + 18px);\n }\n .multi-column-form [options-wrap] {\n grid-column: span 33 / auto;\n }\n }\n @media screen and (min-width: 2001px) {\n .multi-column-form {\n grid-template-columns: repeat(48, 1fr);\n }\n .multi-column-form legend {\n grid-column: span 48;\n }\n .multi-column-form input,\n .multi-column-form table,\n .multi-column-form select,\n .multi-column-form textarea,\n .multi-column-form [custom-input] {\n max-width: 90%;\n }\n .multi-column-form select {\n max-width: calc(90% + 18px);\n }\n .multi-column-form [options-wrap] {\n grid-column: span 45 / auto;\n }\n }\n`\n"]}
|
|
@@ -2,17 +2,15 @@ import { css } from 'lit';
|
|
|
2
2
|
export const SearchFormStyles = css `
|
|
3
3
|
:host {
|
|
4
4
|
overflow: auto;
|
|
5
|
-
background-color:
|
|
5
|
+
background-color: transparent;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.search-form {
|
|
9
9
|
position: relative;
|
|
10
10
|
display: grid;
|
|
11
11
|
grid-template-columns: repeat(24, 1fr);
|
|
12
|
-
grid-gap: var(--form-grid-gap);
|
|
12
|
+
grid-gap: var(--form-grid-gap, var(--spacing-medium));
|
|
13
13
|
grid-auto-rows: minmax(24px, auto);
|
|
14
|
-
padding: var(--search-form-box-padding);
|
|
15
|
-
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
16
14
|
}
|
|
17
15
|
.search-form label {
|
|
18
16
|
grid-column: span 3;
|
|
@@ -20,8 +18,8 @@ export const SearchFormStyles = css `
|
|
|
20
18
|
align-self: center;
|
|
21
19
|
text-transform: capitalize;
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
font-size:var(--md-sys-typescale-label-medium-size);
|
|
22
|
+
color: var(--md-sys-color-on-primary-container);
|
|
25
23
|
}
|
|
26
24
|
|
|
27
25
|
.search-form input,
|
|
@@ -29,12 +27,13 @@ export const SearchFormStyles = css `
|
|
|
29
27
|
grid-column: span 9;
|
|
30
28
|
|
|
31
29
|
border: var(--input-field-border);
|
|
30
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
32
31
|
border-radius: var(--input-field-border-radius);
|
|
33
|
-
padding: var(--input-field-padding);
|
|
32
|
+
padding: var(--input-field-padding, var(--spacing-tiny));
|
|
34
33
|
font: var(--input-field-font);
|
|
35
34
|
max-width: 85%;
|
|
36
|
-
color: var(--input-field-color);
|
|
37
|
-
background-color:
|
|
35
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
36
|
+
background-color: transparent;
|
|
38
37
|
}
|
|
39
38
|
|
|
40
39
|
.search-form select {
|
|
@@ -59,13 +58,13 @@ export const SearchFormStyles = css `
|
|
|
59
58
|
grid-column: span 9 / auto;
|
|
60
59
|
|
|
61
60
|
font: var(--form-sublabel-font);
|
|
62
|
-
color: var(--form-sublabel-color);
|
|
61
|
+
color: var(--form-sublabel-color, var(--md-sys-color-on-surface-variant));
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
input:focus {
|
|
66
65
|
outline: none;
|
|
67
|
-
border: 1px solid var(--focus-background-color);
|
|
68
66
|
}
|
|
67
|
+
|
|
69
68
|
input[type='checkbox'] {
|
|
70
69
|
margin: 0;
|
|
71
70
|
}
|
|
@@ -74,14 +73,14 @@ export const SearchFormStyles = css `
|
|
|
74
73
|
position: absolute;
|
|
75
74
|
right: 1%;
|
|
76
75
|
bottom: 15px;
|
|
77
|
-
color: var(--search-form-icon-color);
|
|
76
|
+
color: var(--search-form-icon-color, var(--md-sys-color-on-surface));
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
@media screen and (max-width: 460px) {
|
|
81
80
|
.search-form {
|
|
82
81
|
grid-template-columns: repeat(12, 1fr);
|
|
83
|
-
grid-gap:
|
|
84
|
-
background-color:
|
|
82
|
+
grid-gap: var(--spacing-medium) var(--spacing-medium);
|
|
83
|
+
background-color: transparent
|
|
85
84
|
|
|
86
85
|
max-height: 100%;
|
|
87
86
|
overflow-y: auto;
|
|
@@ -90,13 +89,13 @@ export const SearchFormStyles = css `
|
|
|
90
89
|
grid-column: span 3;
|
|
91
90
|
padding-right: 5px;
|
|
92
91
|
align-self: center;
|
|
93
|
-
color: var(--search-form-narrow-text-color);
|
|
92
|
+
color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
|
|
94
93
|
}
|
|
95
94
|
.search-form input,
|
|
96
95
|
.search-form select {
|
|
97
96
|
grid-column: span 8;
|
|
98
97
|
max-width: 100%;
|
|
99
|
-
color: var(--
|
|
98
|
+
color: var(--md-sys-color-surface, var(--md-sys-color-on-surface));
|
|
100
99
|
}
|
|
101
100
|
.search-form input[type='checkbox'],
|
|
102
101
|
.search-form input[type='radio'] {
|
|
@@ -111,12 +110,12 @@ export const SearchFormStyles = css `
|
|
|
111
110
|
align-self: center;
|
|
112
111
|
position: relative;
|
|
113
112
|
left: 5px;
|
|
114
|
-
color: var(--search-form-narrow-text-color);
|
|
113
|
+
color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
|
|
115
114
|
}
|
|
116
115
|
|
|
117
116
|
[search] {
|
|
118
117
|
right: 3%;
|
|
119
|
-
color: var(--search-form-narrow-text-color);
|
|
118
|
+
color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));
|
|
120
119
|
}
|
|
121
120
|
}
|
|
122
121
|
@media (min-width: 461px) and (max-width: 1024px) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SearchFormStyles = css`\n :host {\n overflow: auto;\n background-color: transparent;\n }\n\n .search-form {\n position: relative;\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: var(--form-grid-gap, var(--spacing-medium));\n grid-auto-rows: minmax(24px, auto);\n }\n .search-form label {\n grid-column: span 3;\n text-align: right;\n align-self: center;\n text-transform: capitalize;\n\n font-size:var(--md-sys-typescale-label-medium-size);\n color: var(--md-sys-color-on-primary-container);\n }\n\n .search-form input,\n .search-form select {\n grid-column: span 9;\n\n border: var(--input-field-border);\n border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding, var(--spacing-tiny));\n font: var(--input-field-font);\n max-width: 85%;\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n background-color: transparent;\n }\n\n .search-form select {\n min-height: 25px;\n max-width: calc(85% + 18px);\n }\n\n .search-form input[type='checkbox'],\n .search-form input[type='radio'] {\n justify-self: end;\n align-self: center;\n grid-column: span 3 / auto;\n position: relative;\n left: 17px;\n }\n\n .search-form input[type='checkbox'] + label,\n .search-form input[type='radio'] + label {\n padding-left: 17px;\n text-align: left;\n align-self: center;\n grid-column: span 9 / auto;\n\n font: var(--form-sublabel-font);\n color: var(--form-sublabel-color, var(--md-sys-color-on-surface-variant));\n }\n\n input:focus {\n outline: none;\n }\n\n input[type='checkbox'] {\n margin: 0;\n }\n\n [search] {\n position: absolute;\n right: 1%;\n bottom: 15px;\n color: var(--search-form-icon-color, var(--md-sys-color-on-surface));\n }\n\n @media screen and (max-width: 460px) {\n .search-form {\n grid-template-columns: repeat(12, 1fr);\n grid-gap: var(--spacing-medium) var(--spacing-medium);\n background-color: transparent\n\n max-height: 100%;\n overflow-y: auto;\n }\n .search-form label {\n grid-column: span 3;\n padding-right: 5px;\n align-self: center;\n color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));\n }\n .search-form input,\n .search-form select {\n grid-column: span 8;\n max-width: 100%;\n color: var(--md-sys-color-surface, var(--md-sys-color-on-surface));\n }\n .search-form input[type='checkbox'],\n .search-form input[type='radio'] {\n justify-self: end;\n align-self: center;\n grid-column: span 3 / auto;\n }\n\n .search-form input[type='checkbox'] + label,\n .search-form input[type='radio'] + label {\n grid-column: span 8 / auto;\n align-self: center;\n position: relative;\n left: 5px;\n color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));\n }\n\n [search] {\n right: 3%;\n color: var(--search-form-narrow-text-color, var(--md-sys-color-on-surface));\n }\n }\n @media (min-width: 461px) and (max-width: 1024px) {\n .search-form select {\n max-width: calc(85% + 10px);\n }\n }\n @media screen and (min-width: 1201px) and (max-width: 2000px) {\n .search-form {\n grid-template-columns: repeat(36, 1fr);\n }\n .search-form input,\n .search-form select {\n max-width: 90%;\n }\n .search-form select {\n max-width: calc(90% + 18px);\n }\n }\n\n @media screen and (min-width: 2001px) {\n .search-form {\n grid-template-columns: repeat(48, 1fr);\n }\n .search-form input,\n .search-form select {\n max-width: 90%;\n }\n .search-form select {\n max-width: calc(90% + 18px);\n }\n [search] {\n right: 0.8%;\n }\n }\n`\n"]}
|
|
@@ -23,7 +23,7 @@ export const SingleColumnFormStyles = css `
|
|
|
23
23
|
|
|
24
24
|
padding: var(--legend-padding);
|
|
25
25
|
font: var(--legend-font);
|
|
26
|
-
color: var(--legend-text-color);
|
|
26
|
+
color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));
|
|
27
27
|
border-bottom: var(--legend-border-bottom);
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -32,7 +32,7 @@ export const SingleColumnFormStyles = css `
|
|
|
32
32
|
text-align: right;
|
|
33
33
|
text-transform: capitalize;
|
|
34
34
|
|
|
35
|
-
color: var(--label-color);
|
|
35
|
+
color: var(--label-color, var(--md-sys-color-on-surface));
|
|
36
36
|
font: var(--label-font);
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -65,12 +65,12 @@ export const SingleColumnFormStyles = css `
|
|
|
65
65
|
grid-column: span 9 / auto;
|
|
66
66
|
|
|
67
67
|
font: var(--form-sublabel-font);
|
|
68
|
-
color: var(--form-sublabel-color);
|
|
68
|
+
color: var(--form-sublabel-color, var(--md-sys-color-on-surface));
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
input:focus {
|
|
72
72
|
outline: none;
|
|
73
|
-
border: 1px solid var(--focus-background-color);
|
|
73
|
+
border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));
|
|
74
74
|
}
|
|
75
75
|
input[type='checkbox'] {
|
|
76
76
|
margin: 0;
|
|
@@ -93,7 +93,7 @@ export const SingleColumnFormStyles = css `
|
|
|
93
93
|
.single-column-form [custom-input] {
|
|
94
94
|
grid-column: span 12;
|
|
95
95
|
|
|
96
|
-
padding: var(--padding-default);
|
|
96
|
+
padding: var(--padding-default, var(--spacing-medium));
|
|
97
97
|
font: normal 15px var(--theme-font);
|
|
98
98
|
}
|
|
99
99
|
.single-column-form input[type='checkbox'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/single-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SingleColumnFormStyles = css`\n :host {\n overflow: auto;\n padding: var(--form-container-padding);\n }\n\n .single-column-form {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: var(--form-grid-gap);\n grid-auto-rows: minmax(24px, auto);\n max-width: var(--form-max-width);\n margin: var(--form-margin);\n }\n .single-column-form fieldset {\n display: contents;\n }\n .single-column-form legend {\n grid-column: span 12;\n text-transform: capitalize;\n\n padding: var(--legend-padding);\n font: var(--legend-font);\n color: var(--legend-text-color);\n border-bottom: var(--legend-border-bottom);\n }\n\n .single-column-form label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n\n color: var(--label-color);\n font: var(--label-font);\n }\n\n .single-column-form input,\n .single-column-form table,\n .single-column-form select,\n .single-column-form textarea,\n .single-column-form [custom-input] {\n grid-column: span 8;\n\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n .single-column-form input[type='checkbox'],\n .single-column-form input[type='radio'] {\n justify-self: end;\n align-self: start;\n grid-column: span 3 / auto;\n position: relative;\n left: 17px;\n }\n\n .single-column-form input[type='checkbox'] + label,\n .single-column-form input[type='radio'] + label {\n padding-left: 17px;\n text-align: left;\n grid-column: span 9 / auto;\n\n font: var(--form-sublabel-font);\n color: var(--form-sublabel-color);\n }\n\n input:focus {\n outline: none;\n border: 1px solid var(--focus-background-color);\n }\n input[type='checkbox'] {\n margin: 0;\n }\n\n @media screen and (max-width: 460px) {\n .single-column-form {\n max-width: 90%;\n grid-gap: 5px;\n }\n .single-column-form label {\n grid-column: span 12;\n text-align: left;\n align-self: end;\n }\n .single-column-form input,\n .single-column-form table,\n .single-column-form select,\n .single-column-form textarea,\n .single-column-form [custom-input] {\n grid-column: span 12;\n\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n }\n .single-column-form input[type='checkbox'],\n .single-column-form input[type='radio'] {\n justify-self: start;\n align-self: center;\n grid-column: span 1 / auto;\n zoom: 1.4;\n }\n\n .single-column-form input[type='checkbox'] + label,\n .single-column-form input[type='radio'] + label {\n grid-column: span 11 / auto;\n align-self: center;\n }\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"single-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/single-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SingleColumnFormStyles = css`\n :host {\n overflow: auto;\n padding: var(--form-container-padding);\n }\n\n .single-column-form {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-gap: var(--form-grid-gap);\n grid-auto-rows: minmax(24px, auto);\n max-width: var(--form-max-width);\n margin: var(--form-margin);\n }\n .single-column-form fieldset {\n display: contents;\n }\n .single-column-form legend {\n grid-column: span 12;\n text-transform: capitalize;\n\n padding: var(--legend-padding);\n font: var(--legend-font);\n color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));\n border-bottom: var(--legend-border-bottom);\n }\n\n .single-column-form label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n\n color: var(--label-color, var(--md-sys-color-on-surface));\n font: var(--label-font);\n }\n\n .single-column-form input,\n .single-column-form table,\n .single-column-form select,\n .single-column-form textarea,\n .single-column-form [custom-input] {\n grid-column: span 8;\n\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n .single-column-form input[type='checkbox'],\n .single-column-form input[type='radio'] {\n justify-self: end;\n align-self: start;\n grid-column: span 3 / auto;\n position: relative;\n left: 17px;\n }\n\n .single-column-form input[type='checkbox'] + label,\n .single-column-form input[type='radio'] + label {\n padding-left: 17px;\n text-align: left;\n grid-column: span 9 / auto;\n\n font: var(--form-sublabel-font);\n color: var(--form-sublabel-color, var(--md-sys-color-on-surface));\n }\n\n input:focus {\n outline: none;\n border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));\n }\n input[type='checkbox'] {\n margin: 0;\n }\n\n @media screen and (max-width: 460px) {\n .single-column-form {\n max-width: 90%;\n grid-gap: 5px;\n }\n .single-column-form label {\n grid-column: span 12;\n text-align: left;\n align-self: end;\n }\n .single-column-form input,\n .single-column-form table,\n .single-column-form select,\n .single-column-form textarea,\n .single-column-form [custom-input] {\n grid-column: span 12;\n\n padding: var(--padding-default, var(--spacing-medium));\n font: normal 15px var(--theme-font);\n }\n .single-column-form input[type='checkbox'],\n .single-column-form input[type='radio'] {\n justify-self: start;\n align-self: center;\n grid-column: span 1 / auto;\n zoom: 1.4;\n }\n\n .single-column-form input[type='checkbox'] + label,\n .single-column-form input[type='radio'] + label {\n grid-column: span 11 / auto;\n align-self: center;\n }\n }\n`\n"]}
|
|
@@ -13,6 +13,10 @@ declare const _default: {
|
|
|
13
13
|
urlParamsSensitive: {
|
|
14
14
|
control: string;
|
|
15
15
|
};
|
|
16
|
+
theme: {
|
|
17
|
+
control: string;
|
|
18
|
+
options: string[];
|
|
19
|
+
};
|
|
16
20
|
};
|
|
17
21
|
};
|
|
18
22
|
export default _default;
|
|
@@ -25,5 +29,6 @@ interface ArgTypes {
|
|
|
25
29
|
value?: object;
|
|
26
30
|
filters?: object;
|
|
27
31
|
urlParamsSensitive: boolean;
|
|
32
|
+
theme: 'light' | 'dark';
|
|
28
33
|
}
|
|
29
34
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import { CommonHeaderStyles } from '@operato/styles';
|
|
2
2
|
import '../src/filters/ox-filters-form-base.js';
|
|
3
3
|
import { html } from 'lit';
|
|
4
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'ox-filters-form-barcode',
|
|
6
7
|
component: 'ox-filters-form-base',
|
|
7
8
|
argTypes: {
|
|
8
9
|
value: { control: 'object' },
|
|
9
10
|
filters: { control: 'object' },
|
|
10
|
-
urlParamsSensitive: { control: 'boolean' }
|
|
11
|
+
urlParamsSensitive: { control: 'boolean' },
|
|
12
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
11
13
|
}
|
|
12
14
|
};
|
|
13
|
-
const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
14
|
-
<link href="/
|
|
15
|
-
|
|
15
|
+
const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => html `
|
|
16
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
17
|
+
|
|
18
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
19
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
20
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
16
21
|
|
|
17
22
|
<link
|
|
18
23
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -27,14 +32,35 @@ const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
|
27
32
|
rel="stylesheet"
|
|
28
33
|
/>
|
|
29
34
|
|
|
35
|
+
<style>
|
|
36
|
+
${MDTypeScaleStyles.cssText}
|
|
37
|
+
</style>
|
|
38
|
+
|
|
39
|
+
<style>
|
|
40
|
+
${CommonHeaderStyles.cssText}
|
|
41
|
+
</style>
|
|
42
|
+
|
|
30
43
|
<style>
|
|
31
44
|
body {
|
|
45
|
+
width: 100%;
|
|
32
46
|
height: 500px;
|
|
47
|
+
text-align: center;
|
|
48
|
+
|
|
49
|
+
background-color: var(--md-sys-color-background);
|
|
50
|
+
color: var(--md-sys-color-on-background);
|
|
33
51
|
}
|
|
34
52
|
|
|
35
|
-
|
|
53
|
+
.header {
|
|
54
|
+
padding: var(--spacing-small) var(--spacing-medium);
|
|
55
|
+
background-color: var(--md-sys-color-primary-container);
|
|
56
|
+
color: var(--md-sys-color-on-primary-container);
|
|
57
|
+
}
|
|
36
58
|
</style>
|
|
37
59
|
|
|
60
|
+
<script>
|
|
61
|
+
document.body.classList.add('${theme}')
|
|
62
|
+
</script>
|
|
63
|
+
|
|
38
64
|
<div class="header">
|
|
39
65
|
<div class="filters">
|
|
40
66
|
<ox-filters-form-base
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBvG,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;iBAMvB,KAAK;mBACH,OAAO;gCACM,kBAAkB;0BACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;iBACF,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAA","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-filters-form-barcode',\n component: 'ox-filters-form-base',\n argTypes: {\n value: { control: 'object' },\n filters: { control: 'object' },\n urlParamsSensitive: { control: 'boolean' },\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: object\n filters?: object\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n ${CommonHeaderStyles.cssText}\n </style>\n\n <style>\n body {\n width: 100%;\n height: 500px;\n text-align: center;\n\n background-color: var(--md-sys-color-background);\n color: var(--md-sys-color-on-background);\n }\n\n .header {\n padding: var(--spacing-small) var(--spacing-medium);\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n\n <div class=\"header\">\n <div class=\"filters\">\n <ox-filters-form-base\n .value=${value}\n .filters=${filters}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: CustomEvent) => {\n console.log('filters changed', e.detail)\n }}\n >\n </ox-filters-form-base>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n filters: [\n {\n name: 'test',\n type: 'barcode',\n label: 'name',\n operator: 'eq'\n },\n {\n name: 'active',\n type: 'boolean',\n label: 'active',\n operator: 'eq'\n },\n {\n name: 'sss',\n type: 'select',\n label: 'sss',\n operator: 'eq',\n options: () => {\n return [\n {\n display: '',\n value: ''\n },\n {\n display: 'ABC',\n value: 'ABC'\n },\n {\n display: 'DEF',\n value: 'DEF'\n }\n ]\n }\n },\n {\n name: 'range',\n type: 'number',\n label: 'range',\n operator: 'between'\n },\n {\n name: 'date-range',\n type: 'datetime',\n label: 'date',\n operator: 'between'\n }\n ]\n}\n"]}
|
|
@@ -14,6 +14,10 @@ declare const _default: {
|
|
|
14
14
|
urlParamsSensitive: {
|
|
15
15
|
control: string;
|
|
16
16
|
};
|
|
17
|
+
theme: {
|
|
18
|
+
control: string;
|
|
19
|
+
options: string[];
|
|
20
|
+
};
|
|
17
21
|
};
|
|
18
22
|
};
|
|
19
23
|
export default _default;
|
|
@@ -26,5 +30,6 @@ interface ArgTypes {
|
|
|
26
30
|
value?: FilterValue[];
|
|
27
31
|
filters?: FilterConfig[];
|
|
28
32
|
urlParamsSensitive: boolean;
|
|
33
|
+
theme: 'light' | 'dark';
|
|
29
34
|
}
|
|
30
35
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -2,19 +2,23 @@ import { CommonHeaderStyles } from '@operato/styles';
|
|
|
2
2
|
import { sleep } from '@operato/utils';
|
|
3
3
|
import '../src/filters/ox-filters-form-base.js';
|
|
4
4
|
import { html } from 'lit';
|
|
5
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
5
6
|
export default {
|
|
6
7
|
title: 'ox-filters-form-base bounded',
|
|
7
8
|
component: 'ox-filters-form-base',
|
|
8
9
|
argTypes: {
|
|
9
10
|
value: { control: 'object' },
|
|
10
11
|
filters: { control: 'object' },
|
|
11
|
-
urlParamsSensitive: { control: 'boolean' }
|
|
12
|
+
urlParamsSensitive: { control: 'boolean' },
|
|
13
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
12
14
|
}
|
|
13
15
|
};
|
|
14
|
-
const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
15
|
-
<link href="/
|
|
16
|
-
|
|
17
|
-
<link href="/themes/
|
|
16
|
+
const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => html `
|
|
17
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
18
|
+
|
|
19
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
20
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
21
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
18
22
|
|
|
19
23
|
<link
|
|
20
24
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -30,33 +34,34 @@ const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
|
30
34
|
/>
|
|
31
35
|
|
|
32
36
|
<style>
|
|
33
|
-
|
|
34
|
-
height: 500px;
|
|
35
|
-
}
|
|
37
|
+
${MDTypeScaleStyles.cssText}
|
|
36
38
|
</style>
|
|
37
39
|
|
|
38
40
|
<style>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
--input-gap-horizontal: 16px;
|
|
42
|
-
|
|
43
|
-
--ox-filters-input-placeholder-color: var(--primary-color);
|
|
41
|
+
${CommonHeaderStyles.cssText}
|
|
42
|
+
</style>
|
|
44
43
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
--ox-filters-label-font: normal 14px var(--theme-font);
|
|
51
|
-
--ox-filters-label-color: var(--primary-text-color);
|
|
44
|
+
<style>
|
|
45
|
+
body {
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 500px;
|
|
48
|
+
text-align: center;
|
|
52
49
|
|
|
53
|
-
|
|
54
|
-
--
|
|
50
|
+
background-color: var(--md-sys-color-background);
|
|
51
|
+
color: var(--md-sys-color-on-background);
|
|
55
52
|
}
|
|
56
53
|
|
|
57
|
-
|
|
54
|
+
.header {
|
|
55
|
+
padding: var(--spacing-medium);
|
|
56
|
+
background-color: var(--md-sys-color-primary-container);
|
|
57
|
+
color: var(--md-sys-color-on-primary-container);
|
|
58
|
+
}
|
|
58
59
|
</style>
|
|
59
60
|
|
|
61
|
+
<script>
|
|
62
|
+
document.body.classList.add('${theme}')
|
|
63
|
+
</script>
|
|
64
|
+
|
|
60
65
|
<div class="header">
|
|
61
66
|
<div class="filters">
|
|
62
67
|
<ox-filters-form-base
|