@jsenv/navi 0.5.2 → 0.5.4

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.
Files changed (5) hide show
  1. package/dist/jsenv_navi.js +11 -7
  2. package/package.json +1 -1
  3. package/src/components/field/button.jsx +0 -1
  4. package/src/components/props_composition/demos/demo_with_props_style.html +29 -84
  5. package/src/components/props_composition/with_props_style.js +11 -6
package/dist/jsenv_navi.js CHANGED
@@ -20636,12 +20636,17 @@ const parseStyleString = (styleString) => {
20636
20636
  const value = declaration.slice(colonIndex + 1).trim();
20637
20637
 
20638
20638
  if (property && value) {
20639
- // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
20640
- const camelCaseProperty = property.replace(/-([a-z])/g, (match, letter) =>
20641
- letter.toUpperCase(),
20642
- );
20643
-
20644
- style[camelCaseProperty] = value;
20639
+ // CSS custom properties (starting with --) should NOT be converted to camelCase
20640
+ if (property.startsWith("--")) {
20641
+ style[property] = value;
20642
+ } else {
20643
+ // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
20644
+ const camelCaseProperty = property.replace(
20645
+ /-([a-z])/g,
20646
+ (match, letter) => letter.toUpperCase(),
20647
+ );
20648
+ style[camelCaseProperty] = value;
20649
+ }
20645
20650
  }
20646
20651
  }
20647
20652
 
@@ -21396,7 +21401,6 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
21396
21401
  /* Active */
21397
21402
  .navi_button[data-active] .navi_button_content {
21398
21403
  --outline-color: var(--border-color-active);
21399
- --background-color: none;
21400
21404
  transform: scale(0.9);
21401
21405
  }
21402
21406
  .navi_button[data-active] .navi_button_shadow {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/navi",
3
- "version": "0.5.2",
3
+ "version": "0.5.4",
4
4
  "description": "Library of components including navigation to create frontend applications",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/field/button.jsx CHANGED
@@ -125,7 +125,6 @@ import.meta.css = /* css */ `
125
125
  /* Active */
126
126
  .navi_button[data-active] .navi_button_content {
127
127
  --outline-color: var(--border-color-active);
128
- --background-color: none;
129
128
  transform: scale(0.9);
130
129
  }
131
130
  .navi_button[data-active] .navi_button_shadow {
package/src/components/props_composition/demos/demo_with_props_style.html CHANGED
@@ -2,7 +2,16 @@
2
2
  <html>
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <title>withPropsStyle Demo - Simple</title>
5
+ <title>withPropsStyle Demo - Minimalist</title>
6
+ <style>
7
+ button {
8
+ padding: 12px 20px;
9
+ font-family: system-ui, sans-serif;
10
+ border: 1px solid #ccc;
11
+ border-radius: 4px;
12
+ cursor: pointer;
13
+ }
14
+ </style>
6
15
  </head>
7
16
  <body>
8
17
  <div id="app"></div>
@@ -11,17 +20,11 @@
11
20
  import { render } from "preact";
12
21
  import { withPropsStyle } from "../with_props_style.js";
13
22
 
14
- // Simple button component
15
23
  const Button = ({ style, children, ...rest }) => (
16
24
  <button
17
25
  style={withPropsStyle(
18
26
  {
19
- padding: "12px 20px",
20
- borderRadius: "4px",
21
- border: "1px solid #ccc",
22
- backgroundColor: "#f8f9fa",
23
- cursor: "pointer",
24
- fontFamily: "system-ui, sans-serif",
27
+ backgroundColor: "var(--background-color, #f8f9fa)",
25
28
  },
26
29
  style,
27
30
  )}
@@ -31,99 +34,41 @@
31
34
  </button>
32
35
  );
33
36
 
34
- // Component using CSS variables
35
- const ThemedBox = ({ style, children, ...rest }) => (
36
- <div
37
- style={withPropsStyle(
38
- {
39
- padding: "20px",
40
- borderRadius: "8px",
41
- backgroundColor: "var(--box-color, #e3f2fd)",
42
- border: "2px solid var(--border-color, #90caf9)",
43
- color: "var(--text-color, #1565c0)",
44
- },
45
- style,
46
- )}
47
- {...rest}
48
- >
49
- {children}
50
- </div>
51
- );
52
-
53
37
  const Demo = () => {
54
38
  return (
55
- <div
56
- style={{
57
- padding: "20px",
58
- fontFamily: "system-ui, sans-serif",
59
- maxWidth: "600px",
60
- }}
61
- >
39
+ <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
62
40
  <h1>withPropsStyle Demo</h1>
63
41
 
64
42
  <section style={{ marginBottom: "30px" }}>
65
- <h2>Background Color Control</h2>
43
+ <h2>1. Default Button</h2>
44
+ <div>
45
+ <Button>Default</Button>
46
+ </div>
47
+ </section>
66
48
 
49
+ <section style={{ marginBottom: "30px" }}>
50
+ <h2>2. Override via style + background-color</h2>
67
51
  <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
68
- <Button>Default Button</Button>
69
-
70
52
  <Button style={{ backgroundColor: "#007bff" }}>
71
- Object: Blue
53
+ Object notation
72
54
  </Button>
73
55
 
74
56
  <Button style="background-color: #28a745;">
75
- String: Green
76
- </Button>
77
-
78
- <Button style={{ backgroundColor: "#dc3545", color: "white" }}>
79
- Object: Red + White Text
80
- </Button>
81
-
82
- <Button style="background-color: #ffc107; color: black;">
83
- String: Yellow + Black Text
57
+ String notation
84
58
  </Button>
85
59
  </div>
86
60
  </section>
87
61
 
88
62
  <section>
89
- <h2>CSS Variables Control</h2>
90
-
91
- <div
92
- style={{
93
- display: "flex",
94
- flexDirection: "column",
95
- gap: "15px",
96
- }}
97
- >
98
- <ThemedBox>Default themed box with CSS variables</ThemedBox>
99
-
100
- <ThemedBox
101
- style={{
102
- "--box-color": "#ffebee",
103
- "--border-color": "#f44336",
104
- "--text-color": "#c62828",
105
- }}
106
- >
107
- Object: Red theme via CSS variables
108
- </ThemedBox>
109
-
110
- <ThemedBox style="--box-color: #e8f5e8; --border-color: #4caf50; --text-color: #2e7d32;">
111
- String: Green theme via CSS variables
112
- </ThemedBox>
113
-
114
- <ThemedBox
115
- style={{
116
- "--box-color": "#fff3e0",
117
- "--border-color": "#ff9800",
118
- "padding": "30px",
119
- }}
120
- >
121
- Object: Orange theme + custom padding override
122
- </ThemedBox>
63
+ <h2>3. Override via style + CSS var</h2>
64
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
65
+ <Button style={{ "--background-color": "#dc3545" }}>
66
+ Object notation
67
+ </Button>
123
68
 
124
- <ThemedBox style="--box-color: #f3e5f5; --border-color: #9c27b0; --text-color: #6a1b9a; border-radius: 16px;">
125
- String: Purple theme + border-radius override
126
- </ThemedBox>
69
+ <Button style="--background-color: #ffc107;">
70
+ String notation
71
+ </Button>
127
72
  </div>
128
73
  </section>
129
74
  </div>
package/src/components/props_composition/with_props_style.js CHANGED
@@ -68,12 +68,17 @@ const parseStyleString = (styleString) => {
68
68
  const value = declaration.slice(colonIndex + 1).trim();
69
69
 
70
70
  if (property && value) {
71
- // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
72
- const camelCaseProperty = property.replace(/-([a-z])/g, (match, letter) =>
73
- letter.toUpperCase(),
74
- );
75
-
76
- style[camelCaseProperty] = value;
71
+ // CSS custom properties (starting with --) should NOT be converted to camelCase
72
+ if (property.startsWith("--")) {
73
+ style[property] = value;
74
+ } else {
75
+ // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
76
+ const camelCaseProperty = property.replace(
77
+ /-([a-z])/g,
78
+ (match, letter) => letter.toUpperCase(),
79
+ );
80
+ style[camelCaseProperty] = value;
81
+ }
77
82
  }
78
83
  }
79
84