@julianelda/domos 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button/button.svelte +1 -1
- package/dist/checkbox/checkbox.svelte +9 -1
- package/dist/checkbox/checkbox.types.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input.stories.svelte +38 -13
- package/dist/input-button/input-button.svelte +22 -24
- package/dist/input-field/input-field.types.d.ts +2 -2
- package/dist/input-label/input-label.svelte +8 -10
- package/dist/input-select/input-select.svelte +2 -2
- package/dist/select/select.svelte +16 -10
- package/dist/select-field/select-field.svelte +10 -3
- package/dist/select-field/select-field.types.d.ts +1 -0
- package/package.json +7 -24
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
class={[
|
|
19
19
|
"cursor-pointer appearance-none rounded-lg p-2 text-lg shadow-sm hover:border-primary-500 hover:bg-primary-500 focus:ring-primary-300 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary-300 active:bg-primary-700 dark:hover:bg-primary-500",
|
|
20
20
|
style === "primary"
|
|
21
|
-
? "border-primary-700 bg-primary-700 text-ink-white
|
|
21
|
+
? "border-primary-700 bg-primary-700 text-ink-white"
|
|
22
22
|
: "border border-ink-500 bg-card-background-light text-ink-black hover:text-white dark:bg-slate dark:text-ink-white",
|
|
23
23
|
]}>
|
|
24
24
|
{text}
|
|
@@ -3,7 +3,14 @@
|
|
|
3
3
|
|
|
4
4
|
import type { CheckboxProps } from "./checkbox.types.js";
|
|
5
5
|
|
|
6
|
-
const {
|
|
6
|
+
const {
|
|
7
|
+
disabled = false,
|
|
8
|
+
hideLabel,
|
|
9
|
+
id,
|
|
10
|
+
label,
|
|
11
|
+
onChange,
|
|
12
|
+
value,
|
|
13
|
+
}: CheckboxProps = $props();
|
|
7
14
|
</script>
|
|
8
15
|
|
|
9
16
|
<div class="relative flex items-start gap-1">
|
|
@@ -12,6 +19,7 @@
|
|
|
12
19
|
checked={value}
|
|
13
20
|
class="form-checkbox inline-block size-4 rounded-md border-0 bg-white p-1 text-primary-500 accent-primary-500 ring-1 ring-ink-500 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-ink-500"
|
|
14
21
|
data-testid={id}
|
|
22
|
+
{disabled}
|
|
15
23
|
{id}
|
|
16
24
|
name={id}
|
|
17
25
|
onchange={(event) => onChange((event.target as HTMLInputElement).checked)}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -2,17 +2,20 @@
|
|
|
2
2
|
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
3
|
import { fn } from "storybook/test";
|
|
4
4
|
|
|
5
|
+
import { inputProps1, inputProps2, inputProps3 } from "./input.mocks.js";
|
|
5
6
|
import Input from "./input.svelte";
|
|
6
7
|
|
|
7
8
|
const { Story } = defineMeta({
|
|
8
9
|
args: {
|
|
9
10
|
onChange: fn(),
|
|
11
|
+
onKeyDown: fn(),
|
|
10
12
|
},
|
|
11
13
|
argTypes: {
|
|
12
14
|
hideLabel: { control: "boolean" },
|
|
13
15
|
id: { control: "text" },
|
|
14
16
|
label: { control: "text" },
|
|
15
|
-
|
|
17
|
+
placeholder: { control: "text" },
|
|
18
|
+
value: { control: "text" },
|
|
16
19
|
},
|
|
17
20
|
component: Input,
|
|
18
21
|
title: "Input",
|
|
@@ -20,23 +23,45 @@
|
|
|
20
23
|
</script>
|
|
21
24
|
|
|
22
25
|
<Story
|
|
23
|
-
name="
|
|
26
|
+
name="Input type text"
|
|
24
27
|
args={{
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
...inputProps1,
|
|
29
|
+
hideLabel: false,
|
|
30
|
+
}} />
|
|
31
|
+
|
|
32
|
+
<Story
|
|
33
|
+
name="Input type number"
|
|
34
|
+
args={{
|
|
35
|
+
...inputProps2,
|
|
36
|
+
hideLabel: false,
|
|
37
|
+
}} />
|
|
38
|
+
|
|
39
|
+
<Story
|
|
40
|
+
name="Input type search"
|
|
41
|
+
args={{
|
|
42
|
+
...inputProps3,
|
|
43
|
+
hideLabel: false,
|
|
44
|
+
}} />
|
|
45
|
+
|
|
46
|
+
<Story
|
|
47
|
+
name="Input without label"
|
|
48
|
+
args={{
|
|
49
|
+
...inputProps1,
|
|
50
|
+
hideLabel: true,
|
|
51
|
+
}} />
|
|
52
|
+
|
|
53
|
+
<Story
|
|
54
|
+
name="Input with placeholder"
|
|
55
|
+
args={{
|
|
56
|
+
...inputProps1,
|
|
57
|
+
hideLabel: false,
|
|
58
|
+
placeholder: "Type here",
|
|
59
|
+
value: "",
|
|
30
60
|
}} />
|
|
31
61
|
|
|
32
62
|
<Story
|
|
33
63
|
name="Borderless"
|
|
34
64
|
args={{
|
|
35
|
-
|
|
36
|
-
type: "text",
|
|
37
|
-
label: "Input Label",
|
|
38
|
-
value: "Input Value",
|
|
39
|
-
placeholder: "Placeholder Text",
|
|
65
|
+
...inputProps1,
|
|
40
66
|
borderless: true,
|
|
41
|
-
hideLabel: true,
|
|
42
67
|
}} />
|
|
@@ -20,33 +20,31 @@
|
|
|
20
20
|
}: InputButtonProps = $props();
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
|
-
<div class="flex-1">
|
|
23
|
+
<div class="flex flex-1 flex-col gap-1">
|
|
24
24
|
<InputLabel
|
|
25
25
|
hideLabel={Boolean(hideLabel)}
|
|
26
26
|
{id}
|
|
27
27
|
{label} />
|
|
28
|
-
<div class="
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
withIconLeft={true} />
|
|
39
|
-
</div>
|
|
40
|
-
<button
|
|
41
|
-
aria-label={buttonAriaLabel}
|
|
42
|
-
class="relative -ml-px inline-flex cursor-pointer appearance-none items-center gap-x-1.5 rounded-r-md border border-l-0 border-ink-gray px-3 py-2 text-sm font-bold ring-inset hover:bg-primary-500 hover:text-ink-white focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset active:bg-primary-700"
|
|
43
|
-
data-testid={id + "-button"}
|
|
44
|
-
onclick={() => onButtonClick()}
|
|
45
|
-
type="button">
|
|
46
|
-
{#if icon}
|
|
47
|
-
{@const Component = icon}
|
|
48
|
-
<Component />
|
|
49
|
-
{/if}
|
|
50
|
-
</button>
|
|
28
|
+
<div class="relative flex grow items-stretch focus-within:z-10">
|
|
29
|
+
<InputField
|
|
30
|
+
{disabled}
|
|
31
|
+
{id}
|
|
32
|
+
onChange={(value) => onChange?.(value)}
|
|
33
|
+
onKeyDown={(value) => onKeyDown?.(value)}
|
|
34
|
+
{placeholder}
|
|
35
|
+
{type}
|
|
36
|
+
{value}
|
|
37
|
+
withIconLeft={true} />
|
|
51
38
|
</div>
|
|
39
|
+
<button
|
|
40
|
+
aria-label={buttonAriaLabel}
|
|
41
|
+
class="relative -ml-px inline-flex cursor-pointer appearance-none items-center gap-x-1.5 rounded-r-md border border-l-0 border-ink-gray px-3 py-2 text-sm font-bold ring-inset hover:bg-primary-500 hover:text-ink-white focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset active:bg-primary-700"
|
|
42
|
+
data-testid={id + "-button"}
|
|
43
|
+
onclick={() => onButtonClick()}
|
|
44
|
+
type="button">
|
|
45
|
+
{#if icon}
|
|
46
|
+
{@const Component = icon}
|
|
47
|
+
<Component />
|
|
48
|
+
{/if}
|
|
49
|
+
</button>
|
|
52
50
|
</div>
|
|
@@ -2,8 +2,8 @@ export interface InputFieldProps {
|
|
|
2
2
|
borderless?: boolean;
|
|
3
3
|
disabled?: boolean;
|
|
4
4
|
id: string;
|
|
5
|
-
onChange?: (value:
|
|
6
|
-
onKeyDown?: (value:
|
|
5
|
+
onChange?: (value: string) => void;
|
|
6
|
+
onKeyDown?: (value: string) => void;
|
|
7
7
|
placeholder?: string;
|
|
8
8
|
type: InputFieldTypes;
|
|
9
9
|
value: number | string;
|
|
@@ -9,13 +9,11 @@
|
|
|
9
9
|
}: InputLabelProps = $props();
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
</label>
|
|
21
|
-
</div>
|
|
12
|
+
<label
|
|
13
|
+
class={["font-heading mr-auto font-bold", hideLabel && "sr-only"]}
|
|
14
|
+
for={id}>
|
|
15
|
+
{label}
|
|
16
|
+
{#if value !== ""}
|
|
17
|
+
<span class="sr-only">{value}</span>
|
|
18
|
+
{/if}
|
|
19
|
+
</label>
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
}: InputSelectProps = $props();
|
|
24
24
|
</script>
|
|
25
25
|
|
|
26
|
-
<div class="flex-1">
|
|
26
|
+
<div class="flex flex-1 flex-col gap-1">
|
|
27
27
|
<InputLabel
|
|
28
28
|
{hideLabel}
|
|
29
29
|
id={inputId}
|
|
30
30
|
label={inputLabel} />
|
|
31
|
-
<div class="relative
|
|
31
|
+
<div class="relative rounded-md shadow-xs">
|
|
32
32
|
<InputField
|
|
33
33
|
disabled={inputDisabled}
|
|
34
34
|
id={inputId}
|
|
@@ -4,20 +4,26 @@
|
|
|
4
4
|
|
|
5
5
|
import type { SelectProps } from "./select.types.js";
|
|
6
6
|
|
|
7
|
-
const {
|
|
8
|
-
|
|
7
|
+
const {
|
|
8
|
+
borderless,
|
|
9
|
+
hideLabel,
|
|
10
|
+
id,
|
|
11
|
+
label,
|
|
12
|
+
onChange,
|
|
13
|
+
options,
|
|
14
|
+
value,
|
|
15
|
+
}: SelectProps = $props();
|
|
9
16
|
</script>
|
|
10
17
|
|
|
11
|
-
<div class="flex-1">
|
|
18
|
+
<div class="flex flex-1 flex-col gap-1">
|
|
12
19
|
<InputLabel
|
|
13
20
|
{hideLabel}
|
|
14
21
|
{id}
|
|
15
22
|
{label} />
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</div>
|
|
23
|
+
<SelectField
|
|
24
|
+
{borderless}
|
|
25
|
+
{id}
|
|
26
|
+
{onChange}
|
|
27
|
+
{options}
|
|
28
|
+
{value} />
|
|
23
29
|
</div>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import type { SelectFieldProps } from "./select-field.types.js";
|
|
3
3
|
|
|
4
4
|
const {
|
|
5
|
+
borderless = false,
|
|
5
6
|
id,
|
|
6
7
|
inInputField = false,
|
|
7
8
|
onChange,
|
|
@@ -12,9 +13,15 @@
|
|
|
12
13
|
|
|
13
14
|
<select
|
|
14
15
|
class={[
|
|
15
|
-
"form-select w-full appearance-none rounded-md
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
"form-select w-full appearance-none rounded-md text-ink-black dark:bg-slate dark:text-ink-white",
|
|
17
|
+
|
|
18
|
+
borderless === true
|
|
19
|
+
? "border-0 bg-transparent p-0 ring-0 outline-none focus:ring-0 focus:outline-none"
|
|
20
|
+
: "border border-ink-gray py-2 pr-8 pl-2 focus:ring-1 focus:ring-primary-300 focus:ring-inset",
|
|
21
|
+
|
|
22
|
+
inInputField === true
|
|
23
|
+
? "h-full rounded-l-none bg-transparent"
|
|
24
|
+
: "block pl-3",
|
|
18
25
|
]}
|
|
19
26
|
data-testid={id}
|
|
20
27
|
{id}
|
package/package.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@julianelda/domos",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"svelte"
|
|
6
6
|
],
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/JulianElda/arche",
|
|
10
|
+
"directory": "packages/domos"
|
|
11
|
+
},
|
|
7
12
|
"files": [
|
|
8
13
|
"dist",
|
|
9
14
|
"!dist/**/*.test.*",
|
|
@@ -32,10 +37,9 @@
|
|
|
32
37
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
33
38
|
"dev": "vite dev",
|
|
34
39
|
"format": "oxfmt",
|
|
35
|
-
"lint": "oxlint &&
|
|
40
|
+
"lint": "oxlint && eslint .",
|
|
36
41
|
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
37
42
|
"prepare": "svelte-kit sync || echo ''",
|
|
38
|
-
"prettier": "prettier --check **/*.svelte",
|
|
39
43
|
"preview": "vite preview",
|
|
40
44
|
"storybook": "storybook dev -p 6006 --no-open",
|
|
41
45
|
"test": "vitest"
|
|
@@ -46,43 +50,22 @@
|
|
|
46
50
|
},
|
|
47
51
|
"devDependencies": {
|
|
48
52
|
"@eslint/js": "^10.0.1",
|
|
49
|
-
"@julianelda/lexis": "^2.6.0",
|
|
50
53
|
"@lucide/svelte": "^1.16.0",
|
|
51
54
|
"@playwright/test": "^1.58.1",
|
|
52
|
-
"@prettier/plugin-oxc": "^0.1.3",
|
|
53
|
-
"@storybook/addon-a11y": "^10.2.7",
|
|
54
55
|
"@storybook/addon-svelte-csf": "^5.0.10",
|
|
55
|
-
"@storybook/addon-themes": "^10.2.7",
|
|
56
56
|
"@storybook/sveltekit": "^10.2.7",
|
|
57
57
|
"@sveltejs/kit": "^2.50.2",
|
|
58
58
|
"@sveltejs/package": "^2.5.7",
|
|
59
59
|
"@sveltejs/vite-plugin-svelte": "^7.1.2",
|
|
60
60
|
"@tailwindcss/forms": "^0.5.11",
|
|
61
61
|
"@tailwindcss/typography": "^0.5.19",
|
|
62
|
-
"@tailwindcss/vite": "^4.1.18",
|
|
63
|
-
"@types/node": "^24",
|
|
64
|
-
"@typescript/native-preview": "^7.0.0-dev.20260521.1",
|
|
65
|
-
"@vitest/browser-playwright": "^4.1.7",
|
|
66
62
|
"eslint": "^10.4.0",
|
|
67
63
|
"eslint-plugin-oxlint": "^1.66.0",
|
|
68
|
-
"eslint-plugin-perfectionist": "^5.9.0",
|
|
69
64
|
"eslint-plugin-svelte": "^3.14.0",
|
|
70
|
-
"globals": "^17.3.0",
|
|
71
|
-
"oxfmt": "^0.51.0",
|
|
72
|
-
"oxlint": "^1.66.0",
|
|
73
|
-
"oxlint-tsgolint": "^0.23.0",
|
|
74
|
-
"playwright": "^1.58.1",
|
|
75
|
-
"prettier": "^3.8.3",
|
|
76
|
-
"prettier-plugin-svelte": "3",
|
|
77
|
-
"prettier-plugin-tailwindcss": "^0.8.0",
|
|
78
65
|
"publint": "^0.3.17",
|
|
79
|
-
"storybook": "^10.2.7",
|
|
80
66
|
"svelte": "^5.55.9",
|
|
81
67
|
"svelte-check": "^4.3.6",
|
|
82
|
-
"tailwindcss": "^4.3.0",
|
|
83
68
|
"typescript-eslint": "^8.54.0",
|
|
84
|
-
"vite": "^8.0.14",
|
|
85
|
-
"vitest": "^4.1.7",
|
|
86
69
|
"vitest-browser-svelte": "^2.1.1"
|
|
87
70
|
},
|
|
88
71
|
"peerDependencies": {
|