Skip to content

Commit 0f0d2bb

Browse files
kampsykampsy
authored
Merge pull request #30 from kampsy/dev
Dev
2 parents 6e3837d + a145632 commit 0f0d2bb

File tree

9 files changed

+192
-22
lines changed

9 files changed

+192
-22
lines changed

‎src/docs/data/showMore.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const showMoreDefault = `
2+
import { ShowMore } from 'kampsy-ui';
3+
4+
let isActive = $state(false);
5+
6+
<div class="w-full">
7+
<ShowMore bind:isActive />
8+
</div>`;

‎src/docs/utils/data.ts‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,14 @@ export const asideData: Array<AsideT> = [
1616
},
1717
{
1818
name: 'colors',
19-
url: '/colors',
20-
badge: {
21-
name: 'updated',
22-
variant: 'purple'
23-
}
19+
url: '/colors'
2420
}
2521
]
2622

2723
},
2824
{
2925
title: {
30-
name: 'components',
31-
badge: {
32-
name: 'alpha',
33-
variant: 'amber'
34-
}
26+
name: 'components'
3527
},
3628
ul: [
3729
{
@@ -53,11 +45,7 @@ export const asideData: Array<AsideT> = [
5345
},
5446
{
5547
name: 'checkbox',
56-
url: '/checkbox',
57-
badge: {
58-
name: 'new',
59-
variant: 'green'
60-
}
48+
url: '/checkbox'
6149
},
6250
{
6351
name: 'choicebox',
@@ -107,6 +95,14 @@ export const asideData: Array<AsideT> = [
10795
name: 'select',
10896
url: '/select'
10997
},
98+
{
99+
"name": 'show more',
100+
"url": '/show-more',
101+
badge: {
102+
name: 'new',
103+
variant: 'green'
104+
}
105+
},
110106
{
111107
name: 'spinner',
112108
url: '/spinner'

‎src/lib/button/button.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
110110
let loadingDisabledClass = $derived.by(() => {
111111
if (disabled || loading) {
112-
return 'cursor-not-allowed text-kui-light-gray-700 dark:text-kui-dark-gray-700 bg-kui-light-gray-100 dark:bg-kui-dark-gray-100 border border-kui-light-gray-200 dark:border-kui-dark-gray-400';
112+
return 'cursor-not-allowed text-kui-light-gray-700 dark:text-kui-dark-gray-700 bg-kui-light-gray-100 dark:bg-kui-dark-gray-100 border border-kui-light-gray-200 dark:border-kui-dark-gray-400';
113113
}
114114
return '';
115115
});
@@ -154,7 +154,7 @@
154154
{/snippet}
155155

156156
{#snippet mainButton()}
157-
<button aria-label={ariaLabel} {onclick} type="button" {disabled} class="{buttonClass} ">
157+
<button aria-label={ariaLabel} {onclick} type="button" {disabled} class="{buttonClass} transition duration-300">
158158
<div class="w-full h-full px-[6px] flex items-center justify-center gap-[8px]">
159159
{@render prefixSnip()}
160160
<span class="font-medium first-letter:capitalize">

‎src/lib/collapse/trigger.svelte‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,22 @@
5757
};
5858
</script>
5959

60-
<button {onclick} class="w-full flex items-center justify-between text-left bg-transparent {paddingClass} ">
60+
<button
61+
{onclick}
62+
class="w-full flex items-center justify-between text-left bg-transparent {paddingClass} "
63+
>
6164
{#if children}
6265
<span class="{textClass} text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 font-semibold"
6366
>{@render children()}</span
6467
>
6568
{/if}
6669
<div class="">
67-
<div class="w-[16px] h-[16px] {rotate} transform-gpu duration-200 text-kui-light-gray-1000 dark:text-kui-dark-gray-1000">
68-
<ChevronDownSmall />
70+
<div class="w-[16px] h-[16px] overflow-hidden">
71+
<div
72+
class="w-[16px] h-[16px] {rotate} transform-gpu duration-200 text-kui-light-gray-1000 dark:text-kui-dark-gray-1000"
73+
>
74+
<ChevronDownSmall />
75+
</div>
6976
</div>
7077
</div>
7178
</button>

‎src/lib/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ export { default as ProjectBanner } from './projectBanner/banner.svelte';
5959
// Select
6060
export * as Select from './select/index.js';
6161

62+
// Show more
63+
export { default as ShowMore } from './showMore/showMore.svelte';
64+
6265
// Spinner
6366
export { default as Spinner } from './spinner/spinner.svelte';
6467

‎src/lib/showMore/showMore.svelte‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script lang="ts">
2+
import { ChevronDownSmall } from '$lib/icons/index.js';
3+
4+
type propsT = {
5+
isActive: boolean;
6+
};
7+
8+
let { isActive = $bindable(false)}: propsT = $props();
9+
10+
const onclick = () => {
11+
isActive = !isActive;
12+
};
13+
14+
let rotate = $derived.by(() => {
15+
if (isActive) {
16+
return 'rotate-180';
17+
}
18+
return '';
19+
});
20+
21+
let ariaLabel = $derived.by(() => {
22+
if (isActive) {
23+
return 'Show less content';
24+
}
25+
return 'Show more content';
26+
});
27+
28+
let buttonText = $derived.by(() => {
29+
if (isActive) {
30+
return 'show less';
31+
}
32+
return 'Show more';
33+
});
34+
</script>
35+
36+
{#snippet suffixSnip()}
37+
<div class="w-4 h-4">
38+
<div
39+
class="rounded-full w-4 h-4 {rotate} transform-gpu duration-200 flex items-center justify-center"
40+
>
41+
<ChevronDownSmall />
42+
</div>
43+
</div>
44+
{/snippet}
45+
46+
<div class="w-full">
47+
<div class="flex items-center box-border">
48+
<div class="grow border-t border-kui-light-gray-400 dark:border-kui-dark-gray-400">
49+
<!--line-->
50+
</div>
51+
<div class="grow-0">
52+
<button
53+
{onclick}
54+
aria-label={ariaLabel}
55+
type="button"
56+
class="rounded-full p-1.5 border border-kui-light-gray-400 dark:border-kui-dark-gray-400
57+
hover:border-kui-light-gray-500 dark:hover:border-kui-dark-gray-500 hover:bg-kui-light-gray-200
58+
dark:hover:bg-kui-dark-gray-200 transition duration-300"
59+
>
60+
<div class="px-1.5 w-full flex items-center gap-1 justify-center">
61+
<div class="font-medium capitalize text-sm">{buttonText}</div>
62+
{@render suffixSnip()}
63+
</div>
64+
</button>
65+
</div>
66+
<div class="grow border-t border-kui-light-gray-400 dark:border-kui-dark-gray-400">
67+
<!--second line-->
68+
</div>
69+
</div>
70+
</div>

‎src/routes/select/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131
<Row bottomLine={false}>
132132
<Pagination
133133
previous={{ title: 'project banner', href: '/project-banner' }}
134-
next={{ title: 'spinner', href: '/spinner' }}
134+
next={{ title: 'show more', href: '/show-more' }}
135135
/>
136136
</Row>
137137
{/snippet}

‎src/routes/show-more/+page.svelte‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<script lang="ts">
2+
import Aside from '$lib/../docs/ui/aside.svelte';
3+
import Row from '$lib/../docs/ui/row.svelte';
4+
import Shell from '$lib/../docs/ui/shell.svelte';
5+
import { asideData } from '$lib/../docs/utils/data.js';
6+
import CollapseCode from '$lib/collapse/collapseCode.svelte';
7+
import type { Snippet } from 'svelte';
8+
import Pagination from '$lib/pagination/pagination.svelte';
9+
import { ShowMore } from '$lib/index.js';
10+
import { showMoreDefault } from '../../docs/data/showMore.js';
11+
12+
let isActive = $state(false);
13+
14+
$inspect(isActive);
15+
</script>
16+
17+
<svelte:head>
18+
<title>Show More</title>
19+
</svelte:head>
20+
21+
{#snippet error()}
22+
<Row>
23+
<h1
24+
class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] lg:text-[40px] font-semibold leading-[32px] lg:leading-[48px] tracking-[-0.96px] lg:tracking-[-2.4px] mb-3"
25+
>
26+
Show more
27+
</h1>
28+
<p
29+
class="first-letter:capitalize text-kui-light-gray-900 dark:text-kui-dark-gray-900 text-[16px] lg:text-[20px] font-normal leading-[24px] lg:leading-[30px] tracking-normal lg:tracking-[-0.33px]"
30+
>
31+
Styling component to show expanded or collapsed content.
32+
</p>
33+
</Row>
34+
{/snippet}
35+
36+
{#snippet demoAndCode(demo: Snippet, code: string)}
37+
<div
38+
class="bg-kui-light-bg dark:bg-kui-dark-bg border border-kui-light-gray-200 dark:border-kui-dark-gray-400 rounded-xl overflow-hidden"
39+
>
40+
<div class="w-full p-4 lg:p-6 overflow-x-auto">
41+
<div class="w-full flex flex-wrap gap-4">
42+
{@render demo()}
43+
</div>
44+
</div>
45+
<CollapseCode {code} />
46+
</div>
47+
{/snippet}
48+
49+
{#snippet defaultShowMore()}
50+
<Row>
51+
<h2
52+
class="first-letter:capitalize text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 text-[24px] font-semibold leading-[32px] tracking-[-0.96px] mb-3"
53+
>
54+
<a href="#default" id="default">default</a>
55+
</h2>
56+
<div class="mt-4 xl:mt-7">
57+
{#snippet demo()}
58+
<div class="w-full">
59+
<ShowMore bind:isActive />
60+
</div>
61+
{/snippet}
62+
{@render demoAndCode(demo, showMoreDefault)}
63+
</div>
64+
</Row>
65+
{/snippet}
66+
67+
{#snippet prevAndNext()}
68+
<Row bottomLine={false}>
69+
<Pagination
70+
previous={{ title: 'select', href: '/select' }}
71+
next={{ title: 'spinner', href: '/spinner' }}
72+
/>
73+
</Row>
74+
{/snippet}
75+
76+
{#snippet cont()}
77+
{@render error()}
78+
{@render defaultShowMore()}
79+
{@render prevAndNext()}
80+
{/snippet}
81+
82+
{#snippet aside()}
83+
<Aside asideDataList={asideData} />
84+
{/snippet}
85+
86+
<Shell asideSlot={aside} contSlot={cont} />

‎src/routes/spinner/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
{#snippet prevAndNext()}
8080
<Row bottomLine={false}>
8181
<Pagination
82-
previous={{ title: 'select', href: '/select' }}
82+
previous={{ title: 'show more', href: '/show-more' }}
8383
next={{ title: 'split button', href: '/split-button' }}
8484
/>
8585
</Row>

0 commit comments

Comments
 (0)