runeforge 0.0.8 → 0.0.10
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/README.md +20 -0
- package/dist/components/common/Header.svelte +1 -3
- package/dist/components/common/Header.svelte.d.ts +0 -1
- package/dist/components/crud/views/Create.svelte +0 -1
- package/dist/components/crud/views/List.svelte +0 -1
- package/dist/components/crud/views/Read.svelte +0 -1
- package/dist/components/crud/views/Update.svelte +0 -1
- package/dist/components/form/PasswordInput.svelte +10 -3
- package/dist/components/form/PasswordInput.svelte.d.ts +3 -0
- package/dist/components/navigation/Breadcrumbs.svelte +2 -3
- package/dist/components/navigation/Breadcrumbs.svelte.d.ts +0 -1
- package/dist/config/context.d.ts +5 -0
- package/dist/config/context.js +9 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/package.json +78 -80
package/README.md
CHANGED
|
@@ -23,6 +23,7 @@ A SvelteKit toolkit that forges forms, tables, actions, and CRUD workflows from
|
|
|
23
23
|
- [Theming](#theming)
|
|
24
24
|
- [Tailwind source scanning](#tailwind-source-scanning)
|
|
25
25
|
- [CSS variables](#css-variables)
|
|
26
|
+
- [Configuration](#configuration)
|
|
26
27
|
- [Basic Usage](#basic-usage)
|
|
27
28
|
- [1. Define your interface and metadata](#1-define-your-interface-and-metadata)
|
|
28
29
|
- [2. Create the model](#2-create-the-model)
|
|
@@ -136,6 +137,25 @@ Responsive overrides work too:
|
|
|
136
137
|
|
|
137
138
|
---
|
|
138
139
|
|
|
140
|
+
## Configuration
|
|
141
|
+
|
|
142
|
+
Global settings are applied once in your root layout via `setConfig`. This avoids passing the same prop to every CRUD component.
|
|
143
|
+
|
|
144
|
+
```svelte
|
|
145
|
+
<!-- +layout.svelte -->
|
|
146
|
+
<script>
|
|
147
|
+
import { setConfig } from 'runeforge';
|
|
148
|
+
|
|
149
|
+
setConfig({ homeHref: '/admin' });
|
|
150
|
+
</script>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
| Option | Default | Description |
|
|
154
|
+
| --- | --- | --- |
|
|
155
|
+
| `homeHref` | `'/'` | URL for the home crumb in every breadcrumb trail |
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
139
159
|
## Basic Usage
|
|
140
160
|
|
|
141
161
|
### 1. Define your interface and metadata
|
|
@@ -7,19 +7,17 @@
|
|
|
7
7
|
title,
|
|
8
8
|
breadcrumbs = [],
|
|
9
9
|
buttons,
|
|
10
|
-
admin = false,
|
|
11
10
|
}: {
|
|
12
11
|
title: string;
|
|
13
12
|
breadcrumbs?: BreadcrumbItem[];
|
|
14
13
|
buttons?: Snippet;
|
|
15
|
-
admin?: boolean;
|
|
16
14
|
} = $props();
|
|
17
15
|
</script>
|
|
18
16
|
|
|
19
17
|
<div class="header-root flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
20
18
|
<div class="flex flex-col gap-1 flex-1">
|
|
21
19
|
<h1>{title}</h1>
|
|
22
|
-
<Breadcrumbs items={breadcrumbs}
|
|
20
|
+
<Breadcrumbs items={breadcrumbs} />
|
|
23
21
|
</div>
|
|
24
22
|
|
|
25
23
|
{#if buttons}
|
|
@@ -13,6 +13,9 @@
|
|
|
13
13
|
required = true,
|
|
14
14
|
placeholder = '',
|
|
15
15
|
invalid = false,
|
|
16
|
+
labelClass,
|
|
17
|
+
inputClass,
|
|
18
|
+
buttonClass,
|
|
16
19
|
}: {
|
|
17
20
|
name?: string;
|
|
18
21
|
id?: string;
|
|
@@ -21,6 +24,9 @@
|
|
|
21
24
|
required?: boolean;
|
|
22
25
|
placeholder?: string;
|
|
23
26
|
invalid?: boolean;
|
|
27
|
+
labelClass?: string;
|
|
28
|
+
inputClass?: string;
|
|
29
|
+
buttonClass?: string;
|
|
24
30
|
} = $props();
|
|
25
31
|
|
|
26
32
|
const icons = $derived(getIconSet() ?? defaultIconSet);
|
|
@@ -30,7 +36,8 @@
|
|
|
30
36
|
<Label
|
|
31
37
|
class={[
|
|
32
38
|
'input input-bordered w-full',
|
|
33
|
-
{ 'input-error': invalid }
|
|
39
|
+
{ 'input-error': invalid },
|
|
40
|
+
labelClass
|
|
34
41
|
]}
|
|
35
42
|
>
|
|
36
43
|
<input
|
|
@@ -41,11 +48,11 @@
|
|
|
41
48
|
{value}
|
|
42
49
|
{autocomplete}
|
|
43
50
|
type={visible ? 'text' : 'password'}
|
|
44
|
-
class=
|
|
51
|
+
class={['grow', inputClass]}
|
|
45
52
|
/>
|
|
46
53
|
<Button
|
|
47
54
|
btn={false}
|
|
48
|
-
class=
|
|
55
|
+
class={['cursor-pointer opacity-60 hover:opacity-100', buttonClass].filter(Boolean).join(' ')}
|
|
49
56
|
aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
|
50
57
|
aria-pressed={visible}
|
|
51
58
|
onclick={() => (visible = !visible)}
|
|
@@ -7,6 +7,9 @@ type $$ComponentProps = {
|
|
|
7
7
|
required?: boolean;
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
invalid?: boolean;
|
|
10
|
+
labelClass?: string;
|
|
11
|
+
inputClass?: string;
|
|
12
|
+
buttonClass?: string;
|
|
10
13
|
};
|
|
11
14
|
declare const PasswordInput: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
12
15
|
type PasswordInput = ReturnType<typeof PasswordInput>;
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { getIconSet } from '../../icons/context.js';
|
|
3
3
|
import { defaultIconSet } from '../../icons/sets/default.js';
|
|
4
|
+
import { getConfig } from '../../config/context.js';
|
|
4
5
|
import type { BreadcrumbItem } from '../../types/breadcrumb.js';
|
|
5
6
|
|
|
6
7
|
let {
|
|
7
8
|
items = [],
|
|
8
|
-
admin = false,
|
|
9
9
|
homeHref,
|
|
10
10
|
}: {
|
|
11
11
|
items?: BreadcrumbItem[];
|
|
12
|
-
admin?: boolean;
|
|
13
12
|
homeHref?: string;
|
|
14
13
|
} = $props();
|
|
15
14
|
|
|
@@ -18,7 +17,7 @@
|
|
|
18
17
|
const home: BreadcrumbItem = $derived({
|
|
19
18
|
label: 'Inicio',
|
|
20
19
|
icon: icons.home,
|
|
21
|
-
link: { href: homeHref ?? (
|
|
20
|
+
link: { href: homeHref ?? getConfig().homeHref ?? '/' },
|
|
22
21
|
});
|
|
23
22
|
|
|
24
23
|
const allItems = $derived([home, ...items]);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { getContext, setContext } from 'svelte';
|
|
2
|
+
const KEY = Symbol('runeforge-config');
|
|
3
|
+
export function setConfig(config) {
|
|
4
|
+
const existing = getContext(KEY) ?? {};
|
|
5
|
+
setContext(KEY, { ...existing, ...config });
|
|
6
|
+
}
|
|
7
|
+
export function getConfig() {
|
|
8
|
+
return getContext(KEY) ?? {};
|
|
9
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,8 @@ export { AttributeType } from './types/attribute.js';
|
|
|
3
3
|
export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver } from './types/attribute.js';
|
|
4
4
|
export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry } from './types/table.js';
|
|
5
5
|
export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, RowAction } from './types/crud.js';
|
|
6
|
+
export type { RuneforgeConfig } from './config/context.js';
|
|
7
|
+
export { setConfig, getConfig } from './config/context.js';
|
|
6
8
|
export type { CRUDIconSet, IconComponent } from './icons/types.js';
|
|
7
9
|
export { setIconSet, getIconSet } from './icons/context.js';
|
|
8
10
|
export { defaultIconSet } from './icons/sets/default.js';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { AttributeType } from './types/attribute.js';
|
|
2
|
+
export { setConfig, getConfig } from './config/context.js';
|
|
2
3
|
export { setIconSet, getIconSet } from './icons/context.js';
|
|
3
4
|
export { defaultIconSet } from './icons/sets/default.js';
|
|
4
5
|
export { bootstrapIconSet } from './icons/sets/bootstrap.js';
|
package/package.json
CHANGED
|
@@ -1,81 +1,79 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
}
|
|
2
|
+
"name": "runeforge",
|
|
3
|
+
"version": "0.0.10",
|
|
4
|
+
"description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Ezequiel Puerta",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"svelte",
|
|
9
|
+
"sveltekit",
|
|
10
|
+
"crud",
|
|
11
|
+
"table",
|
|
12
|
+
"form",
|
|
13
|
+
"daisyui",
|
|
14
|
+
"tailwindcss",
|
|
15
|
+
"ui"
|
|
16
|
+
],
|
|
17
|
+
"files": [
|
|
18
|
+
"dist",
|
|
19
|
+
"!dist/**/*.test.*",
|
|
20
|
+
"!dist/**/*.spec.*"
|
|
21
|
+
],
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
25
|
+
"svelte": "./dist/index.js",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"type": "module",
|
|
28
|
+
"exports": {
|
|
29
|
+
".": {
|
|
30
|
+
"types": "./dist/index.d.ts",
|
|
31
|
+
"svelte": "./dist/index.js"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@sveltejs/kit": "^2.0.0",
|
|
36
|
+
"daisyui": "^5.0.0",
|
|
37
|
+
"svelte": "^5.0.0",
|
|
38
|
+
"tailwindcss": "^4.0.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@eslint/js": "^10.0.1",
|
|
42
|
+
"@playwright/test": "^1.60.0",
|
|
43
|
+
"@sveltejs/adapter-auto": "^7.0.1",
|
|
44
|
+
"@sveltejs/kit": "^2.63.0",
|
|
45
|
+
"@sveltejs/package": "^2.5.8",
|
|
46
|
+
"@sveltejs/vite-plugin-svelte": "^7.1.2",
|
|
47
|
+
"@tailwindcss/vite": "^4.3.1",
|
|
48
|
+
"@types/node": "^22",
|
|
49
|
+
"daisyui": "^5.5.23",
|
|
50
|
+
"eslint": "^10.4.1",
|
|
51
|
+
"eslint-config-prettier": "^10.1.8",
|
|
52
|
+
"eslint-plugin-svelte": "^3.19.0",
|
|
53
|
+
"globals": "^17.6.0",
|
|
54
|
+
"prettier": "^3.8.3",
|
|
55
|
+
"prettier-plugin-svelte": "^4.1.0",
|
|
56
|
+
"publint": "^0.3.21",
|
|
57
|
+
"svelte": "^5.56.1",
|
|
58
|
+
"svelte-bootstrap-icons": "^3.3.0",
|
|
59
|
+
"svelte-check": "^4.6.0",
|
|
60
|
+
"tailwindcss": "^4.3.1",
|
|
61
|
+
"typescript": "^6.0.3",
|
|
62
|
+
"typescript-eslint": "^8.60.1",
|
|
63
|
+
"vite": "^8.0.16",
|
|
64
|
+
"vitest": "^4.1.8"
|
|
65
|
+
},
|
|
66
|
+
"scripts": {
|
|
67
|
+
"dev": "vite dev",
|
|
68
|
+
"build": "vite build && npm run prepack",
|
|
69
|
+
"preview": "vite preview",
|
|
70
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
71
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
72
|
+
"test": "pnpm run test:unit && pnpm run test:e2e",
|
|
73
|
+
"test:unit": "vitest run",
|
|
74
|
+
"test:unit:watch": "vitest",
|
|
75
|
+
"test:e2e": "playwright test",
|
|
76
|
+
"lint": "prettier --check . && eslint .",
|
|
77
|
+
"format": "prettier --write ."
|
|
78
|
+
}
|
|
79
|
+
}
|