uni-theme-select 1.0.2 → 1.0.3

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 (3) hide show
  1. package/dist/index.js +32 -8
  2. package/dist/index.mjs +32 -8
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -126,19 +126,19 @@ var colorFields = [
126
126
  { id: "bg-color", label: "Background Color", defaultValue: "#fff", type: "text", class: "radius-50" },
127
127
  { id: "primary-button-color", label: "Primary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
128
128
  { id: "primary-button-border-color", label: "Primary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
129
- { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
129
+ { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
130
130
  { id: "primary-button-text-color", label: "Primary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
131
131
  { id: "secondary-button-color", label: "Secondary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
132
132
  { id: "secondary-button-border-color", label: "Secondary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
133
- { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
133
+ { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
134
134
  { id: "secondary-button-text-color", label: "Secondary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
135
135
  { id: "font-family", label: "Font Family", defaultValue: "", type: "text" },
136
- { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
136
+ { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
137
137
  { id: "primary-font-color", label: "Primary Font Color", defaultValue: "#000", type: "text", class: "radius-50" },
138
- { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text" },
139
- { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
138
+ { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text", class: "uni-text-input" },
139
+ { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
140
140
  { id: "secondary-font-color", label: "Secondary Font Color", defaultValue: "#ccc", type: "text", class: "radius-50" },
141
- { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text" }
141
+ { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text", class: "uni-text-input" }
142
142
  ];
143
143
  function injectStyles() {
144
144
  if (document.getElementById("uni-theme-style")) return;
@@ -195,6 +195,8 @@ function injectStyles() {
195
195
 
196
196
  #uni-theme-root.opened #uni-theme-panel{
197
197
  right: 0;
198
+ overflow: scroll;
199
+ max-height: 600px;
198
200
  }
199
201
 
200
202
  #uni-theme-root.opened #uni-theme-toggle{
@@ -225,6 +227,7 @@ function injectStyles() {
225
227
  justify-content: space-between;
226
228
  margin-bottom: 14px;
227
229
  gap: 12px;
230
+ text-align: left;
228
231
  }
229
232
 
230
233
  .uni-input-group label {
@@ -234,12 +237,16 @@ function injectStyles() {
234
237
  }
235
238
 
236
239
  .uni-input {
237
- width: 36px;
238
- height: 36px;
240
+ width: 30px;
241
+ height: 30px;
239
242
  border: 2px solid #ddd;
240
243
  cursor: pointer;
241
244
  padding: 0;
242
245
  }
246
+ .uni-text-input{
247
+ width: 50px;
248
+ height: 19px;
249
+ }
243
250
  .radius-50{
244
251
  border-radius:50%
245
252
  }
@@ -277,7 +284,16 @@ function constructPanel(container) {
277
284
  panel.id = "uni-theme-panel";
278
285
  const title = document.createElement("h3");
279
286
  title.textContent = "Select Custom Theme";
287
+ const selectThemes = document.createElement("select");
288
+ selectThemes.id = "available-themes";
289
+ selectThemes.innerHTML = `
290
+ <option value="">Select theme</option>
291
+ <option value="beige">Beige</option>
292
+ <option value="dark">Dark</option>
293
+ <option value="light">Light</option>
294
+ `;
280
295
  panel.appendChild(title);
296
+ panel.appendChild(selectThemes);
281
297
  colorFields.forEach((field) => {
282
298
  const group = document.createElement("div");
283
299
  group.className = "uni-input-group";
@@ -293,6 +309,7 @@ function constructPanel(container) {
293
309
  group.appendChild(input);
294
310
  if (field.units && field.units.length > 0) {
295
311
  const inputUnits = document.createElement("select");
312
+ inputUnits.disabled = true;
296
313
  field.units.forEach((unit) => {
297
314
  const option = document.createElement("option");
298
315
  option.value = unit;
@@ -336,6 +353,13 @@ function initThemeElements() {
336
353
  setTheme(currentTheme.themeName, currentTheme.properties);
337
354
  });
338
355
  });
356
+ const availableThemes = document.getElementById("available-themes");
357
+ availableThemes == null ? void 0 : availableThemes.addEventListener("change", (e) => {
358
+ var _a;
359
+ const selectedTheme = (_a = e.target) == null ? void 0 : _a.value;
360
+ const props = themes.find((item) => item.name == selectedTheme);
361
+ setTheme(selectedTheme, props == null ? void 0 : props.properties);
362
+ });
339
363
  return { themeToggler, themePanel };
340
364
  }
341
365
 
package/dist/index.mjs CHANGED
@@ -86,19 +86,19 @@ var colorFields = [
86
86
  { id: "bg-color", label: "Background Color", defaultValue: "#fff", type: "text", class: "radius-50" },
87
87
  { id: "primary-button-color", label: "Primary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
88
88
  { id: "primary-button-border-color", label: "Primary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
89
- { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
89
+ { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
90
90
  { id: "primary-button-text-color", label: "Primary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
91
91
  { id: "secondary-button-color", label: "Secondary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
92
92
  { id: "secondary-button-border-color", label: "Secondary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
93
- { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "text", units: ["px", "%", "em"] },
93
+ { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
94
94
  { id: "secondary-button-text-color", label: "Secondary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
95
95
  { id: "font-family", label: "Font Family", defaultValue: "", type: "text" },
96
- { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
96
+ { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
97
97
  { id: "primary-font-color", label: "Primary Font Color", defaultValue: "#000", type: "text", class: "radius-50" },
98
- { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text" },
99
- { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "text", units: ["px", "%", "em"] },
98
+ { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text", class: "uni-text-input" },
99
+ { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
100
100
  { id: "secondary-font-color", label: "Secondary Font Color", defaultValue: "#ccc", type: "text", class: "radius-50" },
101
- { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text" }
101
+ { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text", class: "uni-text-input" }
102
102
  ];
103
103
  function injectStyles() {
104
104
  if (document.getElementById("uni-theme-style")) return;
@@ -155,6 +155,8 @@ function injectStyles() {
155
155
 
156
156
  #uni-theme-root.opened #uni-theme-panel{
157
157
  right: 0;
158
+ overflow: scroll;
159
+ max-height: 600px;
158
160
  }
159
161
 
160
162
  #uni-theme-root.opened #uni-theme-toggle{
@@ -185,6 +187,7 @@ function injectStyles() {
185
187
  justify-content: space-between;
186
188
  margin-bottom: 14px;
187
189
  gap: 12px;
190
+ text-align: left;
188
191
  }
189
192
 
190
193
  .uni-input-group label {
@@ -194,12 +197,16 @@ function injectStyles() {
194
197
  }
195
198
 
196
199
  .uni-input {
197
- width: 36px;
198
- height: 36px;
200
+ width: 30px;
201
+ height: 30px;
199
202
  border: 2px solid #ddd;
200
203
  cursor: pointer;
201
204
  padding: 0;
202
205
  }
206
+ .uni-text-input{
207
+ width: 50px;
208
+ height: 19px;
209
+ }
203
210
  .radius-50{
204
211
  border-radius:50%
205
212
  }
@@ -237,7 +244,16 @@ function constructPanel(container) {
237
244
  panel.id = "uni-theme-panel";
238
245
  const title = document.createElement("h3");
239
246
  title.textContent = "Select Custom Theme";
247
+ const selectThemes = document.createElement("select");
248
+ selectThemes.id = "available-themes";
249
+ selectThemes.innerHTML = `
250
+ <option value="">Select theme</option>
251
+ <option value="beige">Beige</option>
252
+ <option value="dark">Dark</option>
253
+ <option value="light">Light</option>
254
+ `;
240
255
  panel.appendChild(title);
256
+ panel.appendChild(selectThemes);
241
257
  colorFields.forEach((field) => {
242
258
  const group = document.createElement("div");
243
259
  group.className = "uni-input-group";
@@ -253,6 +269,7 @@ function constructPanel(container) {
253
269
  group.appendChild(input);
254
270
  if (field.units && field.units.length > 0) {
255
271
  const inputUnits = document.createElement("select");
272
+ inputUnits.disabled = true;
256
273
  field.units.forEach((unit) => {
257
274
  const option = document.createElement("option");
258
275
  option.value = unit;
@@ -296,6 +313,13 @@ function initThemeElements() {
296
313
  setTheme(currentTheme.themeName, currentTheme.properties);
297
314
  });
298
315
  });
316
+ const availableThemes = document.getElementById("available-themes");
317
+ availableThemes == null ? void 0 : availableThemes.addEventListener("change", (e) => {
318
+ var _a;
319
+ const selectedTheme = (_a = e.target) == null ? void 0 : _a.value;
320
+ const props = themes.find((item) => item.name == selectedTheme);
321
+ setTheme(selectedTheme, props == null ? void 0 : props.properties);
322
+ });
299
323
  return { themeToggler, themePanel };
300
324
  }
301
325
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uni-theme-select",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Framework-agnostic theme switcher",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",