diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e542549a27..79710b2f4f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -30,7 +30,7 @@ "svelte-autosize": "^1.0.1", "svelte-chartjs": "^3.1.0", "svelte-portal": "^2.2.0", - "svelte-select": "^5.0.2", + "svelte-select": "^5.3.1", "tailwind-merge": "^1.9.1", "vscode-ws-jsonrpc": "^2.0.1" }, @@ -604,16 +604,16 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz", - "integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz", + "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==" }, "node_modules/@floating-ui/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz", + "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==", "dependencies": { - "@floating-ui/core": "^1.0.5" + "@floating-ui/core": "^1.2.1" } }, "node_modules/@fortawesome/fontawesome-common-types": { @@ -2458,7 +2458,8 @@ "node_modules/dedent-js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz", - "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==" + "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==", + "dev": true }, "node_modules/deep-extend": { "version": "0.6.0", @@ -3873,6 +3874,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, "dependencies": { "tslib": "^2.0.3" } @@ -4268,6 +4270,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, "dependencies": { "lower-case": "^2.0.2", "tslib": "^2.0.3" @@ -4502,6 +4505,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" @@ -6206,25 +6210,12 @@ } }, "node_modules/svelte-floating-ui": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.1.6.tgz", - "integrity": "sha512-lJfrc34+xSxKs+5AtnYj32uRIjaxGjhT92cOiNL3zEqaJ755JxUqXCf6tk+9G1wkCuqkK9A8tscVBsyY3iLmVQ==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz", + "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==", "dependencies": { - "@floating-ui/dom": "^1.0.4", - "svelte2tsx": "^0.5.11" - } - }, - "node_modules/svelte-floating-ui/node_modules/svelte2tsx": { - "version": "0.5.23", - "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.5.23.tgz", - "integrity": "sha512-jYFnugTQRFmUpvLXPQrKzVYcW5ErT+0QCxg027Zx9BuvYefMZFuoBSTDYe7viPEFGrPPiLgT2m7f5n9khE7f7Q==", - "dependencies": { - "dedent-js": "^1.0.1", - "pascal-case": "^3.1.1" - }, - "peerDependencies": { - "svelte": "^3.24", - "typescript": "^4.1.2" + "@floating-ui/core": "^1.1.0", + "@floating-ui/dom": "^1.1.0" } }, "node_modules/svelte-highlight": { @@ -6348,12 +6339,12 @@ "dev": true }, "node_modules/svelte-select": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.0.2.tgz", - "integrity": "sha512-SsyIwcRVl38041xk7HoPCAew8D6ypTrMvoNcwOgAEWz9Yycgd/uZ58gMSubxSDtkW/ohuYmmHf5OlGCKIqn9Cw==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.3.1.tgz", + "integrity": "sha512-TKlH22FEOr/KYNX4dzBJntNzeI0v0eZYU3VEo2uz/gar6xZdhQ3KT81hvD595GfSB7wiFdYc9SO42wrcgm9W4Q==", "dependencies": { - "@floating-ui/dom": "^1.0.10", - "svelte-floating-ui": "1.1.6" + "@floating-ui/dom": "^1.2.1", + "svelte-floating-ui": "1.2.8" } }, "node_modules/svelte-splitpanes": { @@ -6691,6 +6682,7 @@ "version": "4.9.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -7486,16 +7478,16 @@ } }, "@floating-ui/core": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz", - "integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz", + "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==" }, "@floating-ui/dom": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz", - "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz", + "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==", "requires": { - "@floating-ui/core": "^1.0.5" + "@floating-ui/core": "^1.2.1" } }, "@fortawesome/fontawesome-common-types": { @@ -8781,7 +8773,8 @@ "dedent-js": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz", - "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==" + "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==", + "dev": true }, "deep-extend": { "version": "0.6.0", @@ -9869,6 +9862,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, "requires": { "tslib": "^2.0.3" } @@ -10173,6 +10167,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, "requires": { "lower-case": "^2.0.2", "tslib": "^2.0.3" @@ -10344,6 +10339,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, "requires": { "no-case": "^3.0.4", "tslib": "^2.0.3" @@ -11539,23 +11535,12 @@ } }, "svelte-floating-ui": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.1.6.tgz", - "integrity": "sha512-lJfrc34+xSxKs+5AtnYj32uRIjaxGjhT92cOiNL3zEqaJ755JxUqXCf6tk+9G1wkCuqkK9A8tscVBsyY3iLmVQ==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz", + "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==", "requires": { - "@floating-ui/dom": "^1.0.4", - "svelte2tsx": "^0.5.11" - }, - "dependencies": { - "svelte2tsx": { - "version": "0.5.23", - "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.5.23.tgz", - "integrity": "sha512-jYFnugTQRFmUpvLXPQrKzVYcW5ErT+0QCxg027Zx9BuvYefMZFuoBSTDYe7viPEFGrPPiLgT2m7f5n9khE7f7Q==", - "requires": { - "dedent-js": "^1.0.1", - "pascal-case": "^3.1.1" - } - } + "@floating-ui/core": "^1.1.0", + "@floating-ui/dom": "^1.1.0" } }, "svelte-highlight": { @@ -11621,12 +11606,12 @@ "dev": true }, "svelte-select": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.0.2.tgz", - "integrity": "sha512-SsyIwcRVl38041xk7HoPCAew8D6ypTrMvoNcwOgAEWz9Yycgd/uZ58gMSubxSDtkW/ohuYmmHf5OlGCKIqn9Cw==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.3.1.tgz", + "integrity": "sha512-TKlH22FEOr/KYNX4dzBJntNzeI0v0eZYU3VEo2uz/gar6xZdhQ3KT81hvD595GfSB7wiFdYc9SO42wrcgm9W4Q==", "requires": { - "@floating-ui/dom": "^1.0.10", - "svelte-floating-ui": "1.1.6" + "@floating-ui/dom": "^1.2.1", + "svelte-floating-ui": "1.2.8" } }, "svelte-splitpanes": { @@ -11877,7 +11862,8 @@ "typescript": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", - "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==" + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true }, "uglify-js": { "version": "3.16.3", diff --git a/frontend/package.json b/frontend/package.json index 90e68a8c3e..9b75d8317e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -82,7 +82,7 @@ "svelte-autosize": "^1.0.1", "svelte-chartjs": "^3.1.0", "svelte-portal": "^2.2.0", - "svelte-select": "^5.0.2", + "svelte-select": "^5.3.1", "tailwind-merge": "^1.9.1", "vscode-ws-jsonrpc": "^2.0.1" }, diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte index dee6cdc9bc..18feb0a280 100644 --- a/frontend/src/lib/components/ResourcePicker.svelte +++ b/frontend/src/lib/components/ResourcePicker.svelte @@ -8,6 +8,7 @@ import Select from 'svelte-select' import AppConnect from './AppConnect.svelte' import ResourceEditor from './ResourceEditor.svelte' + import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults' const dispatch = createEventDispatcher() let resources: Resource[] = [] @@ -59,12 +60,13 @@
{ diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte index 2a19e212de..6dd38ce948 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte @@ -2,7 +2,8 @@ import { getContext } from 'svelte' import type { AppInput } from '../../inputType' import type { Output } from '../../rx' - import type { AppEditorContext } from '../../types' + import type { AppEditorContext, ComponentCustomCSS } from '../../types' + import { concatCustomCss } from '../../utils' import AlignWrapper from '../helpers/AlignWrapper.svelte' import InputDefaultValue from '../helpers/InputDefaultValue.svelte' import InputValue from '../helpers/InputValue.svelte' @@ -12,8 +13,9 @@ export let inputType = 'text' export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined export const staticOutputs: string[] = ['result'] + export let customCss: ComponentCustomCSS<'input'> | undefined = undefined - const { worldStore } = getContext('AppEditorContext') + const { app, worldStore } = getContext('AppEditorContext') let input: HTMLInputElement let placeholder: string | undefined = undefined @@ -28,6 +30,8 @@ } $: input && handleInput() + + $: css = concatCustomCss($app.css?.textinputcomponent, customCss) @@ -36,7 +40,8 @@ { e?.stopPropagation() window.dispatchEvent(new Event('pointerup')) diff --git a/frontend/src/lib/components/apps/components/inputs/index.ts b/frontend/src/lib/components/apps/components/inputs/index.ts index be223f8d8b..3108059108 100644 --- a/frontend/src/lib/components/apps/components/inputs/index.ts +++ b/frontend/src/lib/components/apps/components/inputs/index.ts @@ -6,4 +6,4 @@ export { default as AppNumberInput } from './AppNumberInput.svelte' export { default as AppRangeInput } from './AppRangeInput.svelte' export { default as AppSelect } from './AppSelect.svelte' export { default as AppSliderInputs } from './AppSliderInputs.svelte' -export { default as AppTextInput } from './AppTextInput.svelte' \ No newline at end of file +export { default as AppTextInput } from './AppTextInput.svelte' diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte index aee860292e..6ece31ca0a 100644 --- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte @@ -2,12 +2,14 @@ import { getContext } from 'svelte' import SubGridEditor from '../../editor/SubGridEditor.svelte' import type { AppInput } from '../../inputType' - import type { AppEditorContext, GridItem } from '../../types' + import type { AppEditorContext, ComponentCustomCSS, GridItem } from '../../types' + import { concatCustomCss } from '../../utils' import InputValue from '../helpers/InputValue.svelte' export let id: string export let configuration: Record export let componentContainerHeight: number + export let customCss: ComponentCustomCSS<'container'> | undefined = undefined let noPadding: boolean | undefined = undefined @@ -24,6 +26,8 @@ } $: $selectedComponent === id && onFocus() + + $: css = concatCustomCss($app.css?.containercomponent, customCss) @@ -32,6 +36,8 @@ {#if $app.subgrids?.[`${id}-0`]} { diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index f542af2238..2dd886f756 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -2,12 +2,16 @@ import { classNames } from '$lib/utils' import { createEventDispatcher, getContext } from 'svelte' import Grid from '@windmill-labs/svelte-grid' + import { twMerge } from 'tailwind-merge' import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils' import type { AppEditorContext, GridItem } from '../types' import Component from './component/Component.svelte' import { findGridItem } from './appUtils' export let containerHeight: number + let classes = '' + export { classes as class } + export let style = '' export let noPadding = false //export let id: string export let subGrid: GridItem[] = [] @@ -64,12 +68,11 @@ bind:this={container} >
= { onlyStatic: true } }, + customCss: { + container: { class: '', style: '' } + } as const, componentInput: undefined, card: false, numberOfSubgrids: 1 @@ -336,7 +339,10 @@ export const components: Record = { value: '' } }, - customCss: {}, + customCss: { + container: { class: '', style: '' }, + button: { class: '', style: '' } + } as const, card: true } }, @@ -377,7 +383,10 @@ export const components: Record = { optionValuesKey: 'buttonSizeOptions' } }, - customCss: {}, + customCss: { + button: { class: '', style: '' }, + popup: { class: '', style: '' } + } as const, card: true } }, @@ -408,7 +417,9 @@ export const components: Record = { fieldType: 'object', value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] } }, - customCss: {}, + customCss: { + container: { class: '', style: '' } + } as const, card: true } }, @@ -439,7 +450,9 @@ export const components: Record = { fieldType: 'object', value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] } }, - customCss: {}, + customCss: { + container: { class: '', style: '' } + } as const, card: true } }, @@ -462,7 +475,9 @@ Hello \${ctx.username} ` }, configuration: {}, - customCss: {}, + customCss: { + container: { class: '', style: '' } + } as const, card: false } }, @@ -604,7 +619,9 @@ Hello \${ctx.username} } ] }, - customCss: {}, + customCss: { + container: { class: '', style: '' } + } as const, card: true } }, @@ -654,7 +671,9 @@ Hello \${ctx.username} } ] }, - customCss: {}, + customCss: { + container: { class: '', style: '' } + } as const, card: true } }, @@ -691,7 +710,12 @@ Hello \${ctx.username} } ] }, - customCss: {}, + customCss: { + container: { class: '', style: '' }, + tableHeader: { class: '', style: '' }, + tableBody: { class: '', style: '' }, + tableFooter: { class: '', style: '' } + } as const, card: true, actionButtons: [] } @@ -747,7 +771,7 @@ Hello \${ctx.username} ] }, customCss: {}, - card: true, + card: true } }, checkboxcomponent: { @@ -772,7 +796,9 @@ Hello \${ctx.username} fieldType: 'boolean' } }, - customCss: {}, + customCss: { + text: { class: '', style: '' } + } as const, card: false } }, @@ -799,7 +825,9 @@ Hello \${ctx.username} fieldType: 'text' } }, - customCss: {}, + customCss: { + input: { class: '', style: '' } + } as const, card: false } }, @@ -835,7 +863,9 @@ Hello \${ctx.username} onlyStatic: true } }, - customCss: {}, + customCss: { + input: { style: '' } + } as const, card: false, softWrap: true } @@ -865,17 +895,17 @@ Hello \${ctx.username} min: { type: 'static', value: undefined, - fieldType: 'number', + fieldType: 'number' }, max: { type: 'static', value: undefined, - fieldType: 'number', + fieldType: 'number' }, step: { type: 'static', value: 1, - fieldType: 'number', + fieldType: 'number' } }, customCss: {}, @@ -943,17 +973,17 @@ Hello \${ctx.username} max: { type: 'static', value: 42, - fieldType: 'number', + fieldType: 'number' }, defaultValue: { type: 'static', value: 20, - fieldType: 'number', + fieldType: 'number' }, step: { type: 'static', value: 1, - fieldType: 'number', + fieldType: 'number' } }, customCss: {}, @@ -974,27 +1004,27 @@ Hello \${ctx.username} min: { type: 'static', value: 0, - fieldType: 'number', + fieldType: 'number' }, max: { type: 'static', value: 42, - fieldType: 'number', + fieldType: 'number' }, defaultLow: { type: 'static', value: 10, - fieldType: 'number', + fieldType: 'number' }, defaultHigh: { type: 'static', value: 20, - fieldType: 'number', + fieldType: 'number' }, step: { type: 'static', value: 1, - fieldType: 'number', + fieldType: 'number' } }, customCss: {}, diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte index 98abbb9bbc..3dcdc4e82e 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte @@ -1,34 +1,59 @@
- {name} + {addWhitespaceBeforeCapitals(name)}
{#if value}
- - + {#if value.style !== undefined} + + {/if} + {#if value.class !== undefined} + + {/if}
-{/if} \ No newline at end of file +{/if} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte index 04cc8ccc2b..2c04a03f8d 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte @@ -9,15 +9,21 @@ import { isOpenStore } from './store' import CssProperty from './CssProperty.svelte' import { components, type AppComponent } from '../component' + import { slide } from 'svelte/transition' + + const STATIC_ELEMENTS = ['app'] as const + const TITLE_PREFIX = 'Css.' as const + const SHOW_UNUSED_ID = 'Setting.ShowUnused' as const + + type CustomCSSType = (typeof STATIC_ELEMENTS)[number] | AppComponent['type'] interface CustomCSSEntry { - type: 'app' | AppComponent['type']; - name: string; - icon: any; - ids: string[]; + type: CustomCSSType + name: string + icon: any + ids: string[] } - const TITLE_PREFIX = 'Css.' as const const { app } = getContext('AppEditorContext') let rawCode = '' @@ -51,7 +57,7 @@ icon: LayoutDashboardIcon, ids: ['viewer', 'grid', 'component'] }, - ...Object.values(components).map(({ name, icon, data: { type, customCss }}) => ({ + ...Object.values(components).map(({ name, icon, data: { type, customCss } }) => ({ type, name, icon, @@ -70,7 +76,7 @@ } e.ids.forEach((id) => { if (!newCss[e.type][id]) { - newCss[e.type][id] = { style: '', class: '' } + newCss[e.type][id] = components?.[e.type]?.data?.customCss?.[id] ?? { class: '', style: '' } } }) e.ids @@ -84,20 +90,32 @@ //@ts-ignore $app.css = newCss + $: staticComponents = entries.filter(({ type }) => STATIC_ELEMENTS.includes(type as any)) + $: usedComponents = Object.keys( + $app.grid.reduce((acc, { data }) => { + acc[data.type] = true + return acc + }, {}) + ) + .map((type) => entries.find((entry) => entry.type === type)) + .filter(Boolean) as CustomCSSEntry[] + $: unusedComponents = entries.filter(({ type }) => { + return ( + !STATIC_ELEMENTS.includes(type as any) && !usedComponents.find((entry) => entry.type === type) + ) + }) + onMount(() => { isOpenStore.addItems( - [{ name: 'App' }, ...Object.values(components)].map(component => { + [{ name: 'App' }, ...Object.values(components)].map((component) => { return { [TITLE_PREFIX + component.name]: false } }) ) + isOpenStore.addItems([{ [SHOW_UNUSED_ID]: false }]) }) - switchTab(e.detail === 'json')} - class="relative" -> + switchTab(e.detail === 'json')} class="relative">
@@ -112,7 +130,7 @@
- {#each entries as { type, name, icon, ids }} + {#each [...staticComponents, ...usedComponents] as { type, name, icon, ids }} {#if ids.length > 0}
@@ -137,6 +155,44 @@ {/if} {/each} +
+ +
+ {#if $isOpenStore[SHOW_UNUSED_ID]} +
+ {#each unusedComponents as { type, name, icon, ids }} + {#if ids.length > 0} + +
+ + + {name} + +
+
+ {#each ids as id} +
+ {#if $app?.css?.[type][id]} + {JSON.stringify($app.css[type][id])} + (isCustom[type] = true)} + /> + {/if} +
+ {/each} +
+ + {/if} + {/each} +
+ {/if} {#if !emptyString(jsonError)} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte index f3cd7aa75a..bfb139b329 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte @@ -10,7 +10,7 @@ $: isOpen = $isOpenStore[storeTitle] -
+