diff --git a/src/documentations/external/skeleton.md b/src/documentations/external/skeleton.md deleted file mode 100644 index 97ced30..0000000 --- a/src/documentations/external/skeleton.md +++ /dev/null @@ -1,180 +0,0 @@ -TYPESCRIPT -Copy -import { RangeSlider } from '@skeletonlabs/skeleton'; -Source -Page Source -WAI-ARIA -Usage -Props -Slots -Events -Keyboard -Demo - - -Combines a native range input with datalist ticks to create a powerful range slider element. - -Labeled - -TYPESCRIPT -Copy -let value = 15; -let max = 25; -HTML -Copy - -
-
Label
-
{value} / {max}
-
-
- -This component implements restProps. This passes all extra attributes to the component's input elements. - -Name Type Value Description -name string - Required. Set a unique name for the input. -id string - Provide a unique input id. Auto-generated by default -value number 0 Set the input value. -min number 0 Set the input minimum range. -max number 100 Set the input maximum range. -step number 1 Set the input step offset. -ticked boolean false Enables tick marks. See browser support below. -accent string 'accent-surface-900 dark:accent-surface-50' Provide classes to set the input accent color. -label string - A semantic ARIA label. - -Usage -Props -Slots -Events -Keyboard -Name Default Fallback Description -default ✓ - - -trail - - A label slot directly below the range slider. - - -Source -Page Source -WAI-ARIA -Usage -Props -Slots -Events -Keyboard -Name Type Element Response Description -on:click forwarded - - -on:change forwarded - - -on:blur forwarded - - - - - -Source -Page Source -WAI-ARIA -Usage -Props -Slots -Events -Keyboard -Keys Description -Right Arrow or Up Arrow Increase the value of the slider by one step. -Left Arrow or Down Arrow Decrease the value of the slider by one step. -Home Set the slider to the first allowed value in its range. -End Set the slider to the last allowed value in its range. -Page Up Increase the slider value by a large amount. -Page Down Decrease the slider value by a large amount. - - -Slide Toggles -A sliding toggle element that can capture input from a user. - -TYPESCRIPT -Copy -import { SlideToggle } from '@skeletonlabs/skeleton'; -Source -Page Source -WAI-ARIA -Usage -Props -Slots -Events -Demo - -TYPESCRIPT -Copy -let value: boolean = false; -HTML -Copy - -This component provides an alternative UI for a checkbox input element. - -Labeled - -HTML -Copy -(label) -Customized -Slide toggles styles and colors can be easily customized with the active and size properties. - - -HTML -Copy - -Checkbox Attributes -This component supports Svelte's $$restProps, which allows for required, disabled, and any other valid checkbox input attributes. - -HTML -Copy - - -Usage -Props -Slots -Events -This component implements restProps. This passes all extra attributes to the component's input elements. - -Name Type Value Description -name string - Required. Set a unique name for the input. -checked boolean false The checked state of the input element. -size 'sm' | 'md' | 'lg' 'md' Sets the size of the component. -background string 'bg-surface-400 dark:bg-surface-700' Provide classes to set the inactive state background color. -active string 'bg-surface-900 dark:bg-surface-300' Provide classes to set the active state background color. -border string - Provide classes to set the border styles. -rounded string 'rounded-full' Provide classes to set border radius styles. -label string - Provide a semantic label. - - -TYPESCRIPT -Copy -import { SlideToggle } from '@skeletonlabs/skeleton'; -Source -Page Source -WAI-ARIA -Usage -Props -Slots -Events -Name Default Fallback Description -default ✓ - - - -Slide Toggles -A sliding toggle element that can capture input from a user. - -TYPESCRIPT -Copy -import { SlideToggle } from '@skeletonlabs/skeleton'; -Source -Page Source -WAI-ARIA -Usage -Props -Slots -Events -Name Type Element Response Description -on:keyup dispatched - { event } Fires when the component is focused and key is pressed. -on:click forwarded - - -on:keydown forwarded - - -on:keypress forwarded - - -on:mouseover forwarded - - -on:change forwarded - - -on:focus forwarded - - -on:blur forwarded - - diff --git a/src/lib/components/refactor/ComposerAlice.svelte b/src/lib/components/refactor/ComposerAlice.svelte new file mode 100644 index 0000000..63848e7 --- /dev/null +++ b/src/lib/components/refactor/ComposerAlice.svelte @@ -0,0 +1,27 @@ + + +
+ I am the parent, this is my state: {$store.machine.state} +
+
diff --git a/src/lib/components/refactor/ComposerBob.svelte b/src/lib/components/refactor/ComposerBob.svelte new file mode 100644 index 0000000..5bdcb25 --- /dev/null +++ b/src/lib/components/refactor/ComposerBob.svelte @@ -0,0 +1,18 @@ + + +
+ i am the child and this is my state: {$store.machine.state} + +
diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/refactor/Composer.svelte new file mode 100644 index 0000000..27f2c92 --- /dev/null +++ b/src/lib/core/refactor/Composer.svelte @@ -0,0 +1,252 @@ + + +
+ {#if composer?.servicesLoaded} + {#await loadComponentAndService(composer) then Component} + + {/await} + {/if} + {#if composer?.children} + {#each composer.children as child (child.id)} +
+ {#if child.servicesLoaded} + {#await loadComponentAndService(child) then ChildComponent} + + {#if child.children && child.children.length} + + {/if} + {/await} + {/if} +
+ {/each} + {/if} +
diff --git a/src/lib/core/refactor/FallBack.svelte b/src/lib/core/refactor/FallBack.svelte new file mode 100644 index 0000000..c4fb85e --- /dev/null +++ b/src/lib/core/refactor/FallBack.svelte @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/src/lib/core/refactor/composerStores.ts b/src/lib/core/refactor/composerStores.ts new file mode 100644 index 0000000..2dea321 --- /dev/null +++ b/src/lib/core/refactor/composerStores.ts @@ -0,0 +1,16 @@ +import { writable } from 'svelte/store'; + +const composerStores = new Map(); + +// Create or retrieve a composer store +export function createComposerStore(composerId: string, initialState = {}) { + if (!composerStores.has(composerId)) { + composerStores.set(composerId, writable(initialState)); + } + return composerStores.get(composerId); +} + +// Get composer store or create a default empty one if not exists +export function getComposerStore(composerId: string) { + return composerStores.get(composerId) || createComposerStore(composerId); +} \ No newline at end of file diff --git a/src/lib/core/refactor/coreServices.ts b/src/lib/core/refactor/coreServices.ts new file mode 100644 index 0000000..532725d --- /dev/null +++ b/src/lib/core/refactor/coreServices.ts @@ -0,0 +1,23 @@ +// coreServices.ts +import { getComposerStore } from './composerStores'; + +export const coreServices = { + updateComposer: (mappings: Record) => { + for (const [mappingString, value] of Object.entries(mappings)) { + const [storeID, key] = mappingString.replace('@', '').split(':'); + const store = getComposerStore(storeID); + store.update(storeData => { + storeData[key] = value; + return storeData; + }); + } + }, + subscribeComposer: (mappingString: string) => { + const [storeID] = mappingString.replace('@', '').split(':'); + const store = getComposerStore(storeID); + return store; + }, + testAlert: () => { + alert("core service alert") + } +}; \ No newline at end of file diff --git a/src/routes/composer/+page.svelte b/src/routes/composer/+page.svelte new file mode 100644 index 0000000..03bc9ca --- /dev/null +++ b/src/routes/composer/+page.svelte @@ -0,0 +1,59 @@ + + +