|
| 1 | +<script lang="ts"> |
| 2 | + import { fade } from 'svelte/transition'; |
| 3 | +
|
| 4 | + import type { NeoListItem, NeoListProps } from '~/list/neo-list.model.js'; |
| 5 | +
|
| 6 | + import NeoButton from '~/buttons/NeoButton.svelte'; |
| 7 | + import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte'; |
| 8 | + import NeoCard from '~/cards/NeoCard.svelte'; |
| 9 | + import IconCircleLoading from '~/icons/IconCircleLoading.svelte'; |
| 10 | + import NeoList from '~/list/NeoList.svelte'; |
| 11 | + import { Colors } from '~/utils/colors.utils'; |
| 12 | + import { enterTransitionProps } from '~/utils/transition.utils'; |
| 13 | +
|
| 14 | + const options = $state<NeoListProps>({ |
| 15 | + loading: false, |
| 16 | + skeleton: false, |
| 17 | + shadow: false, |
| 18 | + }); |
| 19 | +
|
| 20 | + const list: NeoListItem[] = $state([ |
| 21 | + { value: 'Line item label 1', id: crypto.randomUUID() }, |
| 22 | + { value: 'Line item with longer label 2', id: crypto.randomUUID() }, |
| 23 | + { value: 'Line item error', color: Colors.Error, id: crypto.randomUUID() }, |
| 24 | + { value: 'Line item warning', color: Colors.Warning, id: crypto.randomUUID() }, |
| 25 | + { value: 'Line item success', color: Colors.Success, id: crypto.randomUUID() }, |
| 26 | + { value: 'Line item primary', color: Colors.Primary, id: crypto.randomUUID() }, |
| 27 | + { value: 'Line item secondary', color: Colors.Secondary, id: crypto.randomUUID() }, |
| 28 | + ]); |
| 29 | +
|
| 30 | + let isEmpty = $state(false); |
| 31 | + const items = $derived(isEmpty ? [] : list); |
| 32 | +
|
| 33 | + const onAdd = () => { |
| 34 | + list.push({ value: `Line item ${list.length + 1}`, id: crypto.randomUUID() }); |
| 35 | + }; |
| 36 | +
|
| 37 | + const onRemove = () => { |
| 38 | + // remove a random element form the list |
| 39 | + list.splice(Math.floor(Math.random() * list.length), 1); |
| 40 | + }; |
| 41 | +</script> |
| 42 | + |
| 43 | +<div class="row"> |
| 44 | + <NeoButtonGroup rounded={options.rounded}> |
| 45 | + <NeoButton toggle bind:checked={isEmpty}>Empty</NeoButton> |
| 46 | + <NeoButton toggle bind:checked={options.shadow}>Shadow</NeoButton> |
| 47 | + <NeoButton toggle bind:checked={options.loading}>Loading</NeoButton> |
| 48 | + <NeoButton toggle bind:checked={options.skeleton}>Skeleton</NeoButton> |
| 49 | + <NeoButton onclick={onAdd}>Add</NeoButton> |
| 50 | + <NeoButton onclick={onRemove}>Remove</NeoButton> |
| 51 | + </NeoButtonGroup> |
| 52 | +</div> |
| 53 | + |
| 54 | +<div class="row"> |
| 55 | + <div class="column content"> |
| 56 | + <span class="label">Card List</span> |
| 57 | + <NeoCard rounded elevation="0" hover="-2" flex="1 0 100%" width="min(80vw, 18rem)"> |
| 58 | + <NeoList {items} {...options} /> |
| 59 | + </NeoCard> |
| 60 | + </div> |
| 61 | + |
| 62 | + <div class="column content"> |
| 63 | + <span class="label">Multi-line loader</span> |
| 64 | + <NeoList {items} {...options} loading={options.loading ? 10 : false} /> |
| 65 | + </div> |
| 66 | + |
| 67 | + <div class="column content"> |
| 68 | + <span class="label">Custom loader</span> |
| 69 | + <NeoList {items} {...options}> |
| 70 | + {#snippet loader()} |
| 71 | + <div class="custom-list-loader"> |
| 72 | + <IconCircleLoading size="2rem" /> |
| 73 | + </div> |
| 74 | + {/snippet} |
| 75 | + </NeoList> |
| 76 | + </div> |
| 77 | + |
| 78 | + <div class="column content"> |
| 79 | + <span class="label">Custom Empty</span> |
| 80 | + <NeoList {items} {...options}> |
| 81 | + {#snippet empty()} |
| 82 | + <div class="custom-list-loader" in:fade={enterTransitionProps}> |
| 83 | + <span> Custom empty snippet</span> |
| 84 | + </div> |
| 85 | + {/snippet} |
| 86 | + </NeoList> |
| 87 | + </div> |
| 88 | + |
| 89 | + <!-- custom item--> |
| 90 | + |
| 91 | + <!-- custom empty--> |
| 92 | + |
| 93 | + <!-- buttons item --> |
| 94 | + |
| 95 | + <!-- tooltip item (menu drawer) --> |
| 96 | + |
| 97 | + <!-- select items --> |
| 98 | + |
| 99 | + <!-- multi select items --> |
| 100 | + |
| 101 | + <!-- search items --> |
| 102 | + |
| 103 | + <!-- custom filter snippet --> |
| 104 | +</div> |
| 105 | + |
| 106 | +<style lang="scss"> |
| 107 | + @use 'src/lib/styles/common/flex' as flex; |
| 108 | +
|
| 109 | + .label { |
| 110 | + max-width: 80vw; |
| 111 | + white-space: pre-line; |
| 112 | + text-align: center; |
| 113 | + word-break: break-all; |
| 114 | + } |
| 115 | +
|
| 116 | + .custom-list-loader { |
| 117 | + display: flex; |
| 118 | + justify-content: center; |
| 119 | + padding: 0.5rem; |
| 120 | + } |
| 121 | +
|
| 122 | + .column { |
| 123 | + @include flex.column($gap: var(--neo-gap-lg), $flex: 0 1 auto); |
| 124 | +
|
| 125 | + &.content { |
| 126 | + width: min(80vw, 18rem); |
| 127 | + min-width: fit-content; |
| 128 | + height: min(80vh, 20rem); |
| 129 | + } |
| 130 | + } |
| 131 | +
|
| 132 | + .row { |
| 133 | + @include flex.row($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto); |
| 134 | +
|
| 135 | + min-width: 80vw; |
| 136 | + margin: 2rem 0; |
| 137 | + } |
| 138 | +</style> |
0 commit comments