@domphy/ui 0.1.1 → 0.1.2
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 +69 -69
- package/dist/core-theme-ui.global.js +3 -3
- package/dist/core-theme-ui.global.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +46 -46
package/README.md
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
# @domphy/ui
|
|
2
|
-
|
|
3
|
-
~60 ready-to-use patches for Domphy — buttons, inputs, dialogs, tooltips, tabs, and more. Includes `@domphy/core` and `@domphy/theme`.
|
|
4
|
-
|
|
5
|
-
```bash
|
|
6
|
-
npm install @domphy/ui
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
## What is a Patch?
|
|
10
|
-
|
|
11
|
-
A Patch is a function that returns a partial element descriptor. It augments a native HTML element without wrapping or owning it. The element's own properties always win.
|
|
12
|
-
|
|
13
|
-
```ts
|
|
14
|
-
import { ElementNode } from "@domphy/core"
|
|
15
|
-
import { themeApply } from "@domphy/theme"
|
|
16
|
-
import { button, tooltip, tabs } from "@domphy/ui"
|
|
17
|
-
|
|
18
|
-
themeApply()
|
|
19
|
-
|
|
20
|
-
const App = {
|
|
21
|
-
div: [
|
|
22
|
-
{
|
|
23
|
-
button: "Save",
|
|
24
|
-
$: [button(), tooltip({ content: "Save changes" })]
|
|
25
|
-
}
|
|
26
|
-
],
|
|
27
|
-
dataTheme: "light"
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
new ElementNode(App).render(document.body)
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## Customization via ownership
|
|
34
|
-
|
|
35
|
-
Every patch ships as readable source. To fully customize, copy the patch into your project and modify it directly — no configuration API to work around.
|
|
36
|
-
|
|
37
|
-
```ts
|
|
38
|
-
import { toState, merge } from "@domphy/core"
|
|
39
|
-
import { themeColor, themeSpacing, themeSize } from "@domphy/theme"
|
|
40
|
-
|
|
41
|
-
// your own patch — full control
|
|
42
|
-
function myButton() {
|
|
43
|
-
return (base) => merge(base, {
|
|
44
|
-
style: {
|
|
45
|
-
fontSize: (l) => themeSize(l, "inherit"),
|
|
46
|
-
padding: `${themeSpacing(1)} ${themeSpacing(3)}`,
|
|
47
|
-
borderRadius: themeSpacing(2),
|
|
48
|
-
backgroundColor: (l) => themeColor(l, "inherit", "primary"),
|
|
49
|
-
color: (l) => themeColor(l, "shift-6", "primary"),
|
|
50
|
-
"&:hover": {
|
|
51
|
-
backgroundColor: (l) => themeColor(l, "increase-1", "primary"),
|
|
52
|
-
},
|
|
53
|
-
}
|
|
54
|
-
})
|
|
55
|
-
}
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## CDN
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<script src="https://unpkg.com/@domphy/ui/dist/core-theme-ui.global.js"></script>
|
|
62
|
-
<script>
|
|
63
|
-
const { core, theme, ui } = Domphy
|
|
64
|
-
</script>
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
---
|
|
68
|
-
|
|
69
|
-
**[Full documentation →](https://www.domphy.com/docs/ui/)**
|
|
1
|
+
# @domphy/ui
|
|
2
|
+
|
|
3
|
+
~60 ready-to-use patches for Domphy — buttons, inputs, dialogs, tooltips, tabs, and more. Includes `@domphy/core` and `@domphy/theme`.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @domphy/ui
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## What is a Patch?
|
|
10
|
+
|
|
11
|
+
A Patch is a function that returns a partial element descriptor. It augments a native HTML element without wrapping or owning it. The element's own properties always win.
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import { ElementNode } from "@domphy/core"
|
|
15
|
+
import { themeApply } from "@domphy/theme"
|
|
16
|
+
import { button, tooltip, tabs } from "@domphy/ui"
|
|
17
|
+
|
|
18
|
+
themeApply()
|
|
19
|
+
|
|
20
|
+
const App = {
|
|
21
|
+
div: [
|
|
22
|
+
{
|
|
23
|
+
button: "Save",
|
|
24
|
+
$: [button(), tooltip({ content: "Save changes" })]
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
dataTheme: "light"
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
new ElementNode(App).render(document.body)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Customization via ownership
|
|
34
|
+
|
|
35
|
+
Every patch ships as readable source. To fully customize, copy the patch into your project and modify it directly — no configuration API to work around.
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { toState, merge } from "@domphy/core"
|
|
39
|
+
import { themeColor, themeSpacing, themeSize } from "@domphy/theme"
|
|
40
|
+
|
|
41
|
+
// your own patch — full control
|
|
42
|
+
function myButton() {
|
|
43
|
+
return (base) => merge(base, {
|
|
44
|
+
style: {
|
|
45
|
+
fontSize: (l) => themeSize(l, "inherit"),
|
|
46
|
+
padding: `${themeSpacing(1)} ${themeSpacing(3)}`,
|
|
47
|
+
borderRadius: themeSpacing(2),
|
|
48
|
+
backgroundColor: (l) => themeColor(l, "inherit", "primary"),
|
|
49
|
+
color: (l) => themeColor(l, "shift-6", "primary"),
|
|
50
|
+
"&:hover": {
|
|
51
|
+
backgroundColor: (l) => themeColor(l, "increase-1", "primary"),
|
|
52
|
+
},
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## CDN
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<script src="https://unpkg.com/@domphy/ui/dist/core-theme-ui.global.js"></script>
|
|
62
|
+
<script>
|
|
63
|
+
const { core, theme, ui } = Domphy
|
|
64
|
+
</script>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
**[Full documentation →](https://www.domphy.com/docs/ui/)**
|