diff --git a/bugs.md b/bugs.md deleted file mode 100644 index e69de29..0000000 diff --git a/src/documentations/external/skeleton.md b/src/documentations/external/skeleton.md new file mode 100644 index 0000000..97ced30 --- /dev/null +++ b/src/documentations/external/skeleton.md @@ -0,0 +1,180 @@ +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/examples/Form.svelte b/src/lib/components/examples/Form.svelte index e92815d..ad26853 100644 --- a/src/lib/components/examples/Form.svelte +++ b/src/lib/components/examples/Form.svelte @@ -3,8 +3,19 @@ import { UserSchema } from '$lib/types/UserSchema'; import { afterUpdate } from 'svelte'; import { writable } from 'svelte/store'; + import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton'; - const initialFormData = { name: '', email: '' }; + const initialFormData = { + name: '', + email: '', + about: '', + age: '', + favoriteFood: '', + slider: 0, + toggle: false + }; + + const fields = ['name', 'email', 'about', 'age', 'favoriteFood', 'slider', 'toggle']; const { form, errors, validate, constraints, capture, restore } = superForm(initialFormData, { validators: UserSchema, @@ -50,7 +61,7 @@ }); -
+
{#if $successMessage} {:else}
-
- {#if $errors.name} - {$errors.name} - {:else} - - {/if} + {#each fields as field} +
+ {#if $errors[field]} + {$errors[field]} + {:else} + + {/if} - -
- -
- {#if $errors.email} - {$errors.email} - {:else} - - {/if} - - -
+ {#if field === 'about'} +