Skip to content

Commit d5b4c2d

Browse files
kampsykampsy
authored
Merge pull request #36 from kampsy/dev
Dev
2 parents e97ae37 + 4e169e2 commit d5b4c2d

File tree

20 files changed

+546
-539
lines changed

20 files changed

+546
-539
lines changed

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,31 +51,31 @@
5151
"svelte": "^5.0.0-next.1"
5252
},
5353
"devDependencies": {
54-
"@playwright/test": "^1.50.1",
54+
"@playwright/test": "^1.51.1",
5555
"@semantic-release/exec": "^6.0.3",
5656
"@sveltejs/adapter-auto": "^3.3.1",
57-
"@sveltejs/kit": "^2.17.2",
57+
"@sveltejs/kit": "^2.20.2",
5858
"@sveltejs/package": "^2.3.10",
5959
"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
6060
"@types/eslint": "^8.56.12",
61-
"autoprefixer": "^10.4.20",
62-
"eslint": "^9.21.0",
61+
"autoprefixer": "^10.4.21",
62+
"eslint": "^9.23.0",
6363
"eslint-config-prettier": "^9.1.0",
6464
"eslint-plugin-svelte": "^2.46.1",
6565
"globals": "^15.15.0",
6666
"highlight.js": "^11.11.1",
6767
"postcss": "^8.5.3",
68-
"prettier": "^3.5.2",
68+
"prettier": "^3.5.3",
6969
"prettier-plugin-svelte": "^3.3.3",
7070
"publint": "^0.1.16",
7171
"semantic-release": "^24.2.3",
72-
"svelte": "^5.20.2",
73-
"svelte-check": "^4.1.4",
72+
"svelte": "^5.25.6",
73+
"svelte-check": "^4.1.5",
7474
"tailwindcss": "^3.4.17",
7575
"tslib": "^2.8.1",
76-
"typescript": "^5.7.3",
76+
"typescript": "^5.8.2",
7777
"typescript-eslint": "8.0.0-alpha.39",
78-
"vite": "^5.4.14",
78+
"vite": "^5.4.16",
7979
"vitest": "^1.6.1"
8080
},
8181
"svelte": "./dist/index.js",

‎pnpm-lock.yaml‎

Lines changed: 395 additions & 379 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/docs/data/input.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,20 @@ import { ArrowCircleUp } from 'kampsy-ui/icons'
1919
let value = $state('');
2020
2121
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
22-
<Input aria-labelledby="Demo" prefix={ArrowCircleUp} bind:value placeholder="default" />
22+
<Input aria-labelledby="Demo" contPrefix={ArrowCircleUp} bind:value placeholder="default" />
2323
</div>
2424
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
25-
<Input aria-labelledby="Demo" suffix={ArrowCircleUp} bind:value placeholder="default" />
25+
<Input aria-labelledby="Demo" contSuffix={ArrowCircleUp} bind:value placeholder="default" />
2626
</div>
2727
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
28-
<Input aria-labelledby="Demo" prefix="https://" suffix=".com" bind:value placeholder="default" />
28+
<Input aria-labelledby="Demo" contPrefix="https://" contSuffix=".com" bind:value placeholder="default" />
2929
</div>
3030
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
3131
<Input
3232
aria-labelledby="Demo"
33-
prefix={ArrowCircleUp}
33+
contPrefix={ArrowCircleUp}
3434
prefixStyling={false}
35-
suffix={ArrowCircleUp}
35+
contSuffix={ArrowCircleUp}
3636
suffixStyling={false}
3737
placeholder="default"
3838
/>
@@ -51,34 +51,34 @@ import { ArrowCircleUp } from 'kampsy-ui/icons'
5151
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
5252
<Input
5353
aria-labelledby="Demo"
54-
prefix={ArrowCircleUp}
54+
contPrefix={ArrowCircleUp}
5555
placeholder="Disabled with prefix"
5656
disabled
5757
/>
5858
</div>
5959
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
6060
<Input
6161
aria-labelledby="Demo"
62-
suffix={ArrowCircleUp}
62+
contSuffix={ArrowCircleUp}
6363
placeholder="Disabled with suffix"
6464
disabled
6565
/>
6666
</div>
6767
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
6868
<Input
6969
aria-labelledby="Demo"
70-
prefix="https://"
71-
suffix=".com"
70+
contPrefix="https://"
71+
contSuffix=".com"
7272
placeholder="Disabled with prefix and suffix"
7373
disabled
7474
/>
7575
</div>
7676
<div class="w-full grid grid-cols-1 lg:grid-cols-3">
7777
<Input
7878
aria-labelledby="Demo"
79-
prefix={ArrowCircleUp}
79+
contPrefix={ArrowCircleUp}
8080
prefixStyling={false}
81-
suffix={ArrowCircleUp}
81+
contSuffix={ArrowCircleUp}
8282
suffixStyling={false}
8383
placeholder="Disabled with prefix and suffix"
8484
disabled

‎src/docs/data/modal.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const modalDefault = `
2-
import { Modal } from 'kampsy-ui';
2+
import { Modal, Text } from 'kampsy-ui';
33
44
let active = $state(false);
55
@@ -15,7 +15,7 @@ let active = $state(false);
1515
then select the scope.
1616
</Modal.Subtitle>
1717
</Modal.Header>
18-
<Modal.Text>Some content contained within the modal.</Modal.Text>
18+
<Text size={14}>Some content contained within the modal.</Text>
1919
</Modal.Body>
2020
<Modal.Footer>
2121
<Button onclick={() => (active = false)} type="secondary">Cancel</Button>
@@ -26,7 +26,7 @@ let active = $state(false);
2626
</div>`;
2727

2828
export const modalSticky = `
29-
import { Modal } from 'kampsy-ui';
29+
import { Modal, Text } from 'kampsy-ui';
3030
import { ArrowLeft } from 'kampsy-ui/icons';
3131
3232
let active = $state(false);
@@ -40,7 +40,7 @@ let active = $state(false);
4040
<Modal.Title>Create Token</Modal.Title>
4141
</Modal.Header>
4242
{#each Array(40) as _, i}
43-
<Modal.Text>Some content contained within the modal.</Modal.Text>
43+
<Text size={14}>Some content contained within the modal.</Text>
4444
{/each}
4545
</Modal.Body>
4646
<Modal.Footer>
@@ -55,7 +55,7 @@ let active = $state(false);
5555
</div>`;
5656

5757
export const modalSingleButton = `
58-
import { Modal } from 'kampsy-ui';
58+
import { Modal, Text } from 'kampsy-ui';
5959
6060
let active = $state(false);
6161
@@ -67,7 +67,7 @@ let active = $state(false);
6767
<Modal.Header>
6868
<Modal.Title>Create Token</Modal.Title>
6969
</Modal.Header>
70-
<Modal.Text>Some content contained within the modal.</Modal.Text>
70+
<Text size={14}>Some content contained within the modal.</Text>
7171
</Modal.Body>
7272
<Modal.Footer>
7373
<Button onclick={() => (activeSingleButton = false)} type="secondary" class="w-full">
@@ -79,7 +79,7 @@ let active = $state(false);
7979
</div>`;
8080

8181
export const modalDisabkedActions = `
82-
import { Modal } from 'kampsy-ui';
82+
import { Modal, Text } from 'kampsy-ui';
8383
8484
let active = $state(false);
8585
@@ -92,12 +92,12 @@ let active = $state(false);
9292
<Modal.Title>Create Token</Modal.Title>
9393
<Modal.Subtitle>This is a modal.</Modal.Subtitle>
9494
</Modal.Header>
95-
<Modal.Text>Some content contained within the modal.</Modal.Text>
95+
<Text size={14}>Some content contained within the modal.</Text>
9696
</Modal.Body>
9797
<Modal.Footer>
9898
<Button onclick={() => (activeDisabled = false)} type="secondary">Cancel</Button>
9999
<Button disabled onclick={() => (activeDisabled = false)}>Submit</Button>
100100
</Modal.Footer>
101101
</Modal.Content>
102102
</Modal.Root>
103-
</div>`;
103+
</div>`;

‎src/lib/calendar/calendar.svelte‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import { clickOutside, componentPosition } from '$lib/utils/event.js';
3+
import { cubicOut } from 'svelte/easing';
34
import Calendar from '$lib/icons/calendar.svelte';
45
import { ChevronLeft } from '$lib/icons/index.js';
56
import { ChevronRight } from '$lib/icons/index.js';
@@ -113,8 +114,10 @@
113114
<!--Calendar content -->
114115
{#snippet calendarSnip()}
115116
<div
116-
class=" bg-kui-light-bg dark:bg-kui-dark-bg p-6 lg:p-3 rounded-t-[15px] lg:rounded-[6px] border-y lg:border
117-
border-kui-light-gray-200 dark:border-kui-dark-gray-200 lg:shadow-sm scroll-smooth overflow-y-auto"
117+
class="bg-kui-light-bg dark:bg-kui-dark-bg p-6 lg:p-3 rounded-t-[10px] lg:rounded-[6px]
118+
border-b border-b-kui-light-gray-200 dark:border-b-kui-dark-gray-200 border-t border-t-kui-light-gray-600
119+
dark:border-t-kui-dark-gray-500 lg:border lg:border-kui-light-gray-200 lg:dark:border-kui-dark-gray-200
120+
lg:shadow-sm scroll-smooth overflow-y-auto"
118121
>
119122
<div class="grid grid-cols-7 gap-y-[5px] items-center">
120123
<div>
@@ -201,9 +204,9 @@
201204
{#snippet mobileSnip()}
202205
{#if isActive}
203206
<div
204-
in:fly|local={{ y: '100vh', duration: 500, opacity: 1 }}
205-
out:fly|local={{ y: '100vh', duration: 500, opacity: 1 }}
206-
class="fixed bottom-0 left-0 w-full rounded-t-[15px] bg-kui-light-bg-secondary dark:bg-kui-dark-bg-secondary lg:bg-transparent z-[1001]"
207+
in:fly|local={{ y: '50vh', duration: 500, opacity: 1 }}
208+
out:fly|local={{ y: '100vh', duration: 600, easing: cubicOut, opacity: 1 }}
209+
class="fixed bottom-0 left-0 w-full rounded-t-[10px] bg-kui-light-bg-secondary dark:bg-kui-dark-bg-secondary lg:bg-transparent z-[1001]"
207210
>
208211
{@render calendarSnip()}
209212
</div>
@@ -227,7 +230,7 @@
227230
<div
228231
in:fade|local
229232
out:fade|local
230-
class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-[0.4] lg:hidden z-[1000]"
233+
class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-35 dark:bg-opacity-45 lg:hidden z-[1000]"
231234
></div>
232235
{/if}
233236

‎src/lib/input/input.svelte‎

Lines changed: 18 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,36 @@
44
import { randomString } from '$lib/utils/random.js';
55
import type { HTMLAttributes } from 'svelte/elements';
66
7-
interface Props {
8-
type?:
9-
| 'text'
10-
| 'number'
11-
| 'email'
12-
| 'password'
13-
| 'search'
14-
| 'time'
15-
| 'date'
16-
| 'datetime-local'
17-
| 'file'
18-
| 'image'
19-
| 'tel'
20-
| 'color'
21-
| 'url'
22-
| 'week'
23-
| 'month'
24-
| undefined;
7+
interface Props extends HTMLAttributes<HTMLInputElement> {
258
id?: string | undefined;
269
name?: string | undefined;
2710
value?: string | undefined;
2811
label?: string | undefined;
2912
error?: string | undefined;
30-
'aria-labelledby'?: string | undefined;
3113
size?: 'small' | 'medium' | 'large';
32-
prefix?: string | Component | undefined;
14+
contPrefix?: string | Component | undefined;
3315
prefixStyling?: boolean | undefined;
34-
suffix?: string | Component | undefined;
16+
contSuffix?: string | Component | undefined;
3517
suffixStyling?: boolean | undefined;
3618
spellcheck?: boolean | undefined;
3719
placeholder?: string | undefined;
3820
disabled?: boolean | undefined;
3921
};
4022
let {
41-
type = 'text',
4223
id = undefined,
4324
name = undefined,
4425
value = $bindable(''),
4526
label = undefined,
4627
error = undefined,
47-
'aria-labelledby': araiLabelledBy = undefined,
4828
size = 'medium',
49-
prefix = undefined,
29+
contPrefix = undefined,
5030
prefixStyling = true,
51-
suffix = undefined,
31+
contSuffix = undefined,
5232
suffixStyling = true,
5333
spellcheck = false,
5434
placeholder = undefined,
55-
disabled = false
35+
disabled = false,
36+
... rest
5637
}: Props = $props();
5738
5839
// The focus and blur state of the input
@@ -147,14 +128,14 @@
147128

148129
<!--Prefix snippet-->
149130
{#snippet prefixSnip()}
150-
{#if prefix}
131+
{#if contPrefix}
151132
<span
152133
class="h-full flex items-center px-3 text-kui-light-gray-700 dark:text-kui-dark-gray-700 {prefixClass}"
153134
>
154-
{#if typeof prefix === 'string'}
155-
{prefix}
156-
{:else if typeof prefix === 'function'}
157-
{@const PrefixIcon = prefix}
135+
{#if typeof contPrefix === 'string'}
136+
{contPrefix}
137+
{:else if typeof contPrefix === 'function'}
138+
{@const PrefixIcon = contPrefix}
158139
<div class="w-[16px] h-[16px]">
159140
<PrefixIcon />
160141
</div>
@@ -165,14 +146,14 @@
165146

166147
<!--Suffix snippet-->
167148
{#snippet suffixSnip()}
168-
{#if suffix}
149+
{#if contSuffix}
169150
<span
170151
class="h-full flex items-center px-3 text-kui-light-gray-700 dark:text-kui-dark-gray-700 {suffixClass}"
171152
>
172-
{#if typeof suffix === 'string'}
173-
{suffix}
174-
{:else if typeof suffix === 'function'}
175-
{@const SuffixIcon = suffix}
153+
{#if typeof contSuffix === 'string'}
154+
{contSuffix}
155+
{:else if typeof contSuffix === 'function'}
156+
{@const SuffixIcon = contSuffix}
176157
<div class="w-[16px] h-[16px]">
177158
<SuffixIcon />
178159
</div>
@@ -191,11 +172,9 @@
191172

192173
<div class="w-full h-full {inputContClass}">
193174
<input
194-
{type}
195175
bind:value
196176
id={inputID}
197177
{name}
198-
aria-labelledby={araiLabelledBy}
199178
{spellcheck}
200179
{placeholder}
201180
{disabled}
@@ -206,6 +185,7 @@
206185
hasRing = false;
207186
}}
208187
class="{inputClass} w-full h-full outline-none bg-transparent"
188+
{...rest}
209189
/>
210190
</div>
211191

‎src/lib/menu/content.svelte‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { getContext, type Snippet } from 'svelte';
33
import type { HTMLAttributes } from 'svelte/elements';
44
import { fly } from 'svelte/transition';
5+
import { cubicOut } from 'svelte/easing';
56
67
interface Props extends HTMLAttributes<HTMLDivElement> {
78
class?: string;
@@ -29,10 +30,12 @@
2930
3031
let content: HTMLDivElement = $state<any>();
3132
$effect(() => {
32-
if (rootState.getIsActive()) {
33-
content.setAttribute('aria-hidden', 'false');
34-
} else {
35-
content.setAttribute('aria-hidden', 'true');
33+
if (content) {
34+
if (rootState.getIsActive()) {
35+
content.setAttribute('aria-hidden', 'false');
36+
} else {
37+
content.setAttribute('aria-hidden', 'true');
38+
}
3639
}
3740
});
3841
</script>
@@ -41,14 +44,14 @@
4144
{#if rootState.getIsActive()}
4245
<div
4346
bind:this={content}
44-
in:fly|local={{ y: '100vh', duration: 500, opacity: 1 }}
45-
out:fly|local={{ y: '100vh', duration: 500, opacity: 1 }}
46-
class="fixed bottom-0 left-0 w-full rounded-t-[15px] bg-kui-light-bg-secondary dark:bg-kui-dark-bg-secondary lg:bg-transparent z-[1001]"
47+
in:fly|local={{ y: '50vh', duration: 500, opacity: 1 }}
48+
out:fly|local={{ y: '100vh', duration: 600, easing: cubicOut, opacity: 1 }}
49+
class="fixed bottom-0 left-0 w-full rounded-t-[10px] bg-kui-light-bg-secondary dark:bg-kui-dark-bg-secondary lg:bg-transparent z-[1001]"
4750
{...rest}
4851
>
4952
<div
50-
class="hide-scrollbar bg-kui-light-bg dark:bg-kui-dark-bg px-3 rounded-t-[15px] border-t
51-
border-kui-light-gray-200 dark:border-kui-dark-gray-200 scroll-smooth overflow-y-auto"
53+
class="hide-scrollbar bg-kui-light-bg dark:bg-kui-dark-bg px-3 rounded-t-[10px] border-t
54+
border-kui-light-gray-600 dark:border-kui-dark-gray-500 scroll-smooth overflow-y-auto"
5255
>
5356
{@render children()}
5457
</div>

0 commit comments

Comments
 (0)