From 43cb5a985e6bd1e63fa07045b7159e03998959eb Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Mon, 31 Jul 2023 17:56:38 +0200 Subject: [PATCH] feat(frontend): App carousel (#1956) * feat(frontend): app carousel * carousel wip * feat(frontend): add carousel component * feat(frontend): add slide handler * feat(frontend): Fix styling issues * feat(frontend): Update subgrid focus on page change * feat(frontend): fix subgrid issues + add carousel list * feat(frontend): fix carousel width issues * feat(frontend): fix build * feat(frontend): fix build * feat(frontend): revert changes * feat(frontend): add missing tooltips * feat(frontend): remove autoplay * feat(frontend): add missing tooltip + add select for timings * feat(frontend): simplify carousel * feat(frontend): fix render when data changes --------- Co-authored-by: Ruben Fiszel --- frontend/package-lock.json | 67 +++++++ frontend/package.json | 1 + .../components/display/AppCarouselList.svelte | 176 ++++++++++++++++++ .../apps/editor/component/Component.svelte | 10 + .../apps/editor/component/components.ts | 32 ++++ .../components/apps/editor/component/sets.ts | 3 +- .../componentsPanel/quickStyleProperties.ts | 3 + .../apps/editor/settingsPanel/GridTab.svelte | 2 +- frontend/src/lib/components/apps/utils.ts | 2 - 9 files changed, 292 insertions(+), 4 deletions(-) create mode 100644 frontend/src/lib/components/apps/components/display/AppCarouselList.svelte diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 394f301f0b..75c1929210 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -33,6 +33,7 @@ "openai": "^4.0.0-beta.4", "quill": "^1.3.7", "svelte-autosize": "^1.0.1", + "svelte-carousel": "^1.0.25", "svelte-chartjs": "^3.1.0", "svelte-dnd-action": "^0.9.22", "svelte-exmarkdown": "^2.1.0", @@ -3497,6 +3498,16 @@ "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==", "dev": true }, + "node_modules/easy-reactive": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/easy-reactive/-/easy-reactive-1.0.4.tgz", + "integrity": "sha512-dFVouegPctMf6XT5si+sRByBWUQE30n99TW0Y45Y7mccmNsbSl4uXA2sBGI8zCDZqXjhb8ouA3wVVhSSGpXk5Q==", + "dependencies": { + "lodash.clonedeep": "^4.5.0", + "lodash.get": "^4.4.2", + "lodash.isequal": "^4.5.0" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.348", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.348.tgz", @@ -5136,11 +5147,26 @@ "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", "dev": true }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "node_modules/lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==" + }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.isplainobject": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", @@ -8656,6 +8682,14 @@ "colord": "^2.9.3" } }, + "node_modules/svelte-carousel": { + "version": "1.0.25", + "resolved": "https://registry.npmjs.org/svelte-carousel/-/svelte-carousel-1.0.25.tgz", + "integrity": "sha512-vR/AbGYwlh3fgWaB5PJg+iqZFvoVCJq4JWdmlXvPtdG9TLlKJWBcoiKlMZt3MnFF7AqNW46tOH/O+uVMWQzyWQ==", + "dependencies": { + "easy-reactive": "1.0.4" + } + }, "node_modules/svelte-chartjs": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/svelte-chartjs/-/svelte-chartjs-3.1.2.tgz", @@ -12305,6 +12339,16 @@ "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==", "dev": true }, + "easy-reactive": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/easy-reactive/-/easy-reactive-1.0.4.tgz", + "integrity": "sha512-dFVouegPctMf6XT5si+sRByBWUQE30n99TW0Y45Y7mccmNsbSl4uXA2sBGI8zCDZqXjhb8ouA3wVVhSSGpXk5Q==", + "requires": { + "lodash.clonedeep": "^4.5.0", + "lodash.get": "^4.4.2", + "lodash.isequal": "^4.5.0" + } + }, "electron-to-chromium": { "version": "1.4.348", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.348.tgz", @@ -13532,11 +13576,26 @@ "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", "dev": true }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==" + }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "lodash.isplainobject": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", @@ -15964,6 +16023,14 @@ "colord": "^2.9.3" } }, + "svelte-carousel": { + "version": "1.0.25", + "resolved": "https://registry.npmjs.org/svelte-carousel/-/svelte-carousel-1.0.25.tgz", + "integrity": "sha512-vR/AbGYwlh3fgWaB5PJg+iqZFvoVCJq4JWdmlXvPtdG9TLlKJWBcoiKlMZt3MnFF7AqNW46tOH/O+uVMWQzyWQ==", + "requires": { + "easy-reactive": "1.0.4" + } + }, "svelte-chartjs": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/svelte-chartjs/-/svelte-chartjs-3.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8c3617424b..7774e08318 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -96,6 +96,7 @@ "openai": "^4.0.0-beta.4", "quill": "^1.3.7", "svelte-autosize": "^1.0.1", + "svelte-carousel": "^1.0.25", "svelte-chartjs": "^3.1.0", "svelte-dnd-action": "^0.9.22", "svelte-exmarkdown": "^2.1.0", diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte new file mode 100644 index 0000000000..6ce4a5658b --- /dev/null +++ b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte @@ -0,0 +1,176 @@ + + +{#each Object.keys(components['carousellistcomponent'].initialData.configuration) as key (key)} + +{/each} + + + + +
+ {#if $app.subgrids?.[`${id}-0`]} + {#if Array.isArray(result) && result.length > 0} + {#key result} + { + $focusedGrid = { + parentComponentId: id, + subGridIndex: event.detail + } + }} + > +
+
+ +
+
+
+
+ +
+
+ {#each result ?? [] as value, index} +
+ { + outputs?.inputs.set(inputs, true) + }} + bind:inputs + {value} + {index} + > + { + if (!$connectingInput.opened) { + $selectedComponent = [id] + } + onFocus() + }} + /> + +
+ {/each} + + {/key} + {:else} + + + + {#if !Array.isArray(result)} +
Input data is not an array
+ {/if} + {/if} + {/if} +
+ diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte index c69e9935c9..7587d4e502 100644 --- a/frontend/src/lib/components/apps/editor/component/Component.svelte +++ b/frontend/src/lib/components/apps/editor/component/Component.svelte @@ -54,6 +54,7 @@ import AppList from '../../components/layout/AppList.svelte' import AppJobIdLogComponent from '../../components/display/AppJobIdLogComponent.svelte' import AppJobIdFlowStatus from '../../components/display/AppJobIdFlowStatus.svelte' + import AppCarouselList from '../../components/display/AppCarouselList.svelte' export let component: AppComponent export let selected: boolean @@ -600,6 +601,15 @@ componentInput={component.componentInput} {render} /> + {:else if component.type === 'carousellistcomponent'} + {/if} diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 0a0e66db63..63a5a8b4e5 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -137,6 +137,8 @@ export type Schemaformcomponent = BaseComponent<'schemaformcomponent'> export type SelectTabComponent = BaseComponent<'selecttabcomponent'> export type SelectStepComponent = BaseComponent<'selectstepcomponent'> +export type CarouselListComponent = BaseComponent<'carousellistcomponent'> + export type TypedComponent = | DisplayComponent | LogComponent @@ -192,6 +194,7 @@ export type TypedComponent = | SelectStepComponent | DownloadComponent | ChartJsComponent + | CarouselListComponent export type AppComponent = BaseAppComponent & TypedComponent @@ -281,6 +284,7 @@ export const selectOptions = { 'radar', 'scatter' ] as ChartType[], + animationTimingFunctionOptions: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'], prose: ['sm', 'Default', 'lg', 'xl', '2xl'] } const labels = { @@ -1920,6 +1924,34 @@ This is a paragraph. tabs: ['First', 'Second'] as string[] } }, + carousellistcomponent: { + name: 'Carousel List', + icon: ListIcon, + documentationLink: `${documentationBaseUrl}#list`, + dims: '3:8-12:8' as AppComponentDimensions, + customCss: { + container: { class: '', style: '' } + }, + initialData: { + configuration: { + timingFunction: { + fieldType: 'select', + type: 'static', + onlyStatic: true, + selectOptions: selectOptions.animationTimingFunctionOptions, + value: 'linear', + tooltip: 'See https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function' + } + }, + componentInput: { + type: 'static', + fieldType: 'array', + subFieldType: 'object', + value: [{ foo: 1 }, { foo: 2 }, { foo: 3 }] as object[] + }, + numberOfSubgrids: 1 + } + }, iconcomponent: { name: 'Icon', icon: Smile, diff --git a/frontend/src/lib/components/apps/editor/component/sets.ts b/frontend/src/lib/components/apps/editor/component/sets.ts index 5658ba591b..389062f156 100644 --- a/frontend/src/lib/components/apps/editor/component/sets.ts +++ b/frontend/src/lib/components/apps/editor/component/sets.ts @@ -17,7 +17,8 @@ const layout: ComponentSet = { 'verticalsplitpanescomponent', 'horizontalsplitpanescomponent', 'modalcomponent', - 'steppercomponent' + 'steppercomponent', + 'carousellistcomponent' ] } as const diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts b/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts index 8925dbdeb3..7db75c9a27 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts +++ b/frontend/src/lib/components/apps/editor/componentsPanel/quickStyleProperties.ts @@ -643,6 +643,9 @@ export const quickStyleProperties: Record< header: [...containerDefaultProps, typographyGrouping], container: containerDefaultProps }, + carousellistcomponent: { + container: containerDefaultProps + }, flowstatuscomponent: { header: [...containerDefaultProps, typographyGrouping], container: containerDefaultProps diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte index d0fcadaa17..dd3c223eba 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte @@ -18,7 +18,7 @@ export let canDisableTabs: boolean = false // Migration code - $: if (tabs.length !== disabledTabs?.length && canDisableTabs) { + $: if (tabs?.length !== disabledTabs?.length && canDisableTabs) { disabledTabs = Array(tabs.length).fill({ type: 'static', value: false, diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index f6858e3b7d..0b15043007 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -247,8 +247,6 @@ export function concatCustomCss>( const compStyle = v?.style?.trim() || '' const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';' - console.log(key, v) - return [ key, {