wrec 0.16.6 → 0.16.7
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 +55 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -94,3 +94,58 @@ Here are the steps:
|
|
|
94
94
|
1. Browse localhost:5173.
|
|
95
95
|
|
|
96
96
|
1. Click the "-" and "+" buttons to verify that the component is working.
|
|
97
|
+
|
|
98
|
+
## Examples
|
|
99
|
+
|
|
100
|
+
To run the examples in the `src/examples` directory:
|
|
101
|
+
|
|
102
|
+
1. cd to the `wrec` project directory.
|
|
103
|
+
1. Enter `npm install`.
|
|
104
|
+
1. Enter `npm run dev`.
|
|
105
|
+
1. Browse `localhost:5173/examples/{name}.html` where `name`
|
|
106
|
+
is the name of one of the `.html` files in that directory.
|
|
107
|
+
|
|
108
|
+
`hello-world.html` demonstrates a basic Wrec component.
|
|
109
|
+
Try modifying the `name` attribute in DevTools
|
|
110
|
+
by changing the attribute and then the property.
|
|
111
|
+
This uses the `hello-world` component.
|
|
112
|
+
|
|
113
|
+
`counter-4.html` demonstrates a counter component that cannot go negative
|
|
114
|
+
and displays whether the count is a single or multi-digit number.
|
|
115
|
+
This uses the `counter-wrec` component.
|
|
116
|
+
|
|
117
|
+
`number-bind.html` demonstrates
|
|
118
|
+
This uses the `number-bind`, `number-input`, and `number-slider` components.
|
|
119
|
+
Changing the value in the `number-input` or `number-slider` component
|
|
120
|
+
updates the other component and also the number after "Your score is".
|
|
121
|
+
|
|
122
|
+
`rectangle-area.html` demonstrates using a computed property
|
|
123
|
+
with and without the `uses` property.
|
|
124
|
+
This uses the `rectangle-area` and `number-slider` components.
|
|
125
|
+
|
|
126
|
+
`reactive.css.html` demonstrates reactive CSS.
|
|
127
|
+
Drag the slider to change the size of the text.
|
|
128
|
+
This uses the `reactive-css` component.
|
|
129
|
+
|
|
130
|
+
`css-demo.html` demonstrates more reactive CSS.
|
|
131
|
+
The color name entered in the input is used in three places,
|
|
132
|
+
the color of the `p` element,
|
|
133
|
+
the background color of the `#swatch` element,
|
|
134
|
+
and the text inside the `#swatch` element.
|
|
135
|
+
This uses the `css-demo` component.
|
|
136
|
+
|
|
137
|
+
`color-demo.html` demonstrates more reactive CSS. Try dragging the slider.
|
|
138
|
+
Examine the generated CSS which adds a CSS variable.
|
|
139
|
+
This uses the `color-demo`, `color-picker`, and `number-slider` components.
|
|
140
|
+
|
|
141
|
+
`data-binding.html` demonstrates some extreme data binding where
|
|
142
|
+
a comma-separated list of colors is used to generate radio buttons and a select list.
|
|
143
|
+
Select a radio button or select list option updates the other.
|
|
144
|
+
It also updates the color and content of the text at the bottom.
|
|
145
|
+
The "Enable" toggle enables and disables all the form controls.
|
|
146
|
+
Try changing the list of colors and the selected values in DevTools
|
|
147
|
+
by modifying attribute values or property values.
|
|
148
|
+
This uses the `data-binding`, `number-slider`, `radio-group`,
|
|
149
|
+
`select-list`, and `toggle-switch` components.
|
|
150
|
+
|
|
151
|
+
`speedometer-demo.html` demonstrates fancy graphics.
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "wrec",
|
|
3
3
|
"description": "a small library that greatly simplifies building web components",
|
|
4
4
|
"author": "R. Mark Volkmann",
|
|
5
|
-
"version": "0.16.
|
|
5
|
+
"version": "0.16.7",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"unittest": "vitest"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@playwright/test": "^1.
|
|
36
|
-
"@types/node": "^
|
|
37
|
-
"oxlint": "^1.
|
|
38
|
-
"terser": "^5.
|
|
39
|
-
"typescript": "^5.
|
|
40
|
-
"vite": "^7.0
|
|
35
|
+
"@playwright/test": "^1.57.0",
|
|
36
|
+
"@types/node": "^25.0.3",
|
|
37
|
+
"oxlint": "^1.36.0",
|
|
38
|
+
"terser": "^5.44.1",
|
|
39
|
+
"typescript": "^5.9.3",
|
|
40
|
+
"vite": "^7.3.0"
|
|
41
41
|
}
|
|
42
42
|
}
|