@rettangoli/ui 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/form/form.handlers.js

@@ -26,27 +26,6 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
         }
       }
     }
-    if (field.inputType === 'select' && field.placeholder) {
-      if (ref.placeholder !== field.placeholder) {
-        ref.placeholder = field.placeholder;
-      }
-    }
-    if (field.inputType === 'select') {
-      if (field.placeholder !== ref.getAttribute('placeholder')) {
-        if (field.placeholder !== undefined) {
-          ref.setAttribute('placeholder', field.placeholder)
-        } else {
-          ref.removeAttribute('placeholder');
-        }
-        ref.render();
-      }
-
-      const defaultValue = defaultValues[field.name]
-      if (defaultValue !== ref.selectedValue) {
-        ref.selectedValue = defaultValue;
-        ref.render();
-      }
-    }
   })
 }
 

package/src/components/form/form.store.js

@@ -113,6 +113,12 @@ export const selectViewData = ({ state, props, attrs }) => {
     if (["read-only-text"].includes(field.inputType)) {
       field.defaultValue = defaultValue
     }
+    if (["select"].includes(field.inputType)) {
+      const defaultValues = props?.defaultValues;
+      if (defaultValues && defaultValues[field.name] !== undefined) {
+        field.selectedValue = defaultValues[field.name];
+      }
+    }
     if (field.inputType === "image") {
       const src = field.src;
       // Only set imageSrc if src exists and is not empty

package/src/components/form/form.view.yaml

@@ -310,12 +310,15 @@ template:
       - rtgl-view g=lg w=f:
           - $for field, i in fields:
               - rtgl-view g=md w=f:
-                  - rtgl-view g=sm:
-                      - rtgl-view d=h g=md av=c:
-                          - rtgl-text: ${field.label}
-                          - $if field.tooltip:
-                              - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
-                      - rtgl-text s=sm c=mu-fg: ${field.description}
+                  - $if field.label || field.description:
+                      - rtgl-view g=sm:
+                          - rtgl-view d=h g=md av=c:
+                              - $if field.label:
+                                  - rtgl-text: ${field.label}
+                              - $if field.label && field.tooltip:
+                                  - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
+                          - $if field.description:
+                              - rtgl-text s=sm c=mu-fg: ${field.description}
                   - $if field.inputType == "read-only-text":
                       - rtgl-text s=sm: ${field.defaultValue}
                   - $if field.inputType == "inputText" || field.inputType == 'input-text':
@@ -327,7 +330,7 @@ template:
                   - $if field.inputType == "popover-input":
                       - rtgl-popover-input#field-${field.name} label="${field.label}":
                   - $if field.inputType == "select":
-                      - rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption:
+                      - rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption .selectedValue=#{field.selectedValue} .placeholder=#{field.placeholder}:
                   - $if field.inputType == "colorPicker":
                       - rtgl-color-picker#field-${field.name} key=${key}:
                   - $if field.inputType == "slider":

package/src/components/select/select.store.js

@@ -42,7 +42,7 @@ export const selectViewData = ({ state, props, attrs }) => {
   const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
 
   // Calculate display label from value
-  let displayLabel = attrs.placeholder || 'Select an option';
+  let displayLabel = props.placeholder || attrs.placeholder || 'Select an option';
   let isPlaceholderLabel = true;
 
   const options = props.options || [];

package/src/components/select/select.view.yaml

@@ -12,6 +12,8 @@ attrsSchema:
 propsSchema:
   type: object
   properties:
+    placeholder:
+      type: string
     options:
       type: array
       items:

package/src/entry-iife-layout.js

@@ -6,7 +6,10 @@ import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
 import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
+import RettangoliColorPicker from './primitives/colorPicker.js';
+import RettangoliSlider from './primitives/slider.js';
 import RettangoliDialog from './primitives/dialog.js';
+import RettangoliPopover from './primitives/popover.js';
 
 
 customElements.define("rtgl-button", RettangoliButton({}));
@@ -17,4 +20,7 @@ customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
 customElements.define("rtgl-input-number", RettangoliInputNumber({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
+customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
+customElements.define("rtgl-slider", RettangoliSlider({}));
 customElements.define("rtgl-dialog", RettangoliDialog({}));
+customElements.define("rtgl-popover", RettangoliPopover({}));

package/src/index.js

@@ -8,6 +8,8 @@ import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliDialog from './primitives/dialog.js';
 import RettangoliPopover from './primitives/popover.js';
+import RettangoliColorPicker from './primitives/colorPicker.js';
+import RettangoliSlider from './primitives/slider.js';
 import createGlobalUI from './deps/createGlobalUI.js';
 
 export {
@@ -21,5 +23,7 @@ export {
     RettangoliTextArea,
     RettangoliDialog,
     RettangoliPopover,
+    RettangoliColorPicker,
+    RettangoliSlider,
     createGlobalUI,
 }