dv-web-components 1.0.7 → 1.0.10

package/dist/types/select-component/index.d.ts

@@ -4,8 +4,8 @@ export class AppSelect extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    set value(val: any);
-    get value(): any;
+    set value(val: string);
+    get value(): string;
     set options(val: any);
     get options(): any;
     set name(val: string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dv-web-components",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "description": "Librería de Web Components nativos y accesibles",
   "type": "module",
   "main": "./index.js",

package/select-component/index.js

@@ -68,7 +68,6 @@ template.innerHTML = `
       justify-content: center;
     }
 
-    /* Ocultamos el slot de opciones del light DOM para no duplicar la visualización */
     ::slotted(option) {
       display: none;
     }
@@ -100,7 +99,6 @@ template.innerHTML = `
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
       </span>
-      <!-- Slot para capturar las etiquetas <option> que pase el usuario -->
       <slot style="display: none;"></slot>
     </div>
   </div>
@@ -116,6 +114,7 @@ export class AppSelect extends HTMLElement {
   #observer = null;
   #initialValue = '';
   #optionsData = null;
+  #value = '';
 
   static get observedAttributes() {
     return ['value', 'name', 'disabled', 'required', 'placeholder', 'label'];
@@ -134,13 +133,16 @@ export class AppSelect extends HTMLElement {
 
   connectedCallback() {
     this.#initialValue = this.getAttribute('value') || '';
+    if (!this.#value) {
+      this.#value = this.#initialValue;
+    }
+
     this.#syncOptions();
     this.#updateState();
 
     this.#selectElement.addEventListener('change', this.#handleChange);
     this.#slotElement?.addEventListener('slotchange', this.#syncOptions);
 
-    // Observar inserción dinámica de <option> en el Light DOM
     this.#observer = new MutationObserver(() => this.#syncOptions());
     this.#observer.observe(this, { childList: true, subtree: true, characterData: true });
   }
@@ -153,19 +155,23 @@ export class AppSelect extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
+
+    if (name === 'value') {
+      this.#value = newValue ?? '';
+    }
+
     this.#updateState();
+    this.#syncOptions();
   }
 
   #syncOptions = () => {
     if (!this.#selectElement) return;
 
-    // Si las opciones vinieron por propiedad JS (array)
     if (Array.isArray(this.#optionsData)) {
       this.#renderOptionsFromArray(this.#optionsData);
       return;
     }
 
-    // Si las opciones vienen por Light DOM (<option> hijos)
     const options = Array.from(this.querySelectorAll('option'));
     this.#selectElement.innerHTML = '';
 
@@ -175,7 +181,7 @@ export class AppSelect extends HTMLElement {
       phOption.value = '';
       phOption.textContent = placeholder;
       phOption.disabled = true;
-      phOption.selected = !this.value;
+      phOption.selected = !this.#value;
       this.#selectElement.appendChild(phOption);
     }
 
@@ -184,17 +190,21 @@ export class AppSelect extends HTMLElement {
       clone.value = opt.value;
       clone.textContent = opt.textContent;
       clone.disabled = opt.disabled;
-      if (opt.value === this.value) {
+
+      if (opt.value === this.#value) {
         clone.selected = true;
       }
+
       this.#selectElement.appendChild(clone);
     });
 
-    if (this.value) {
-      this.#selectElement.value = this.value;
+    if (this.#value) {
+      this.#selectElement.value = this.#value;
     } else if (this.#selectElement.value) {
-      this.#internals.setFormValue(this.#selectElement.value);
+      this.#value = this.#selectElement.value;
     }
+
+    this.#internals.setFormValue(this.#value);
   };
 
   #renderOptionsFromArray(items) {
@@ -206,7 +216,7 @@ export class AppSelect extends HTMLElement {
       phOption.value = '';
       phOption.textContent = placeholder;
       phOption.disabled = true;
-      phOption.selected = !this.value;
+      phOption.selected = !this.#value;
       this.#selectElement.appendChild(phOption);
     }
 
@@ -220,25 +230,30 @@ export class AppSelect extends HTMLElement {
         opt.textContent = item.label ?? item.value;
         opt.disabled = Boolean(item.disabled);
       }
-      if (opt.value === this.value) {
+
+      if (opt.value === this.#value) {
         opt.selected = true;
       }
+
       this.#selectElement.appendChild(opt);
     });
 
-    if (this.value) {
-      this.#selectElement.value = this.value;
+    if (this.#value) {
+      this.#selectElement.value = this.#value;
+    } else if (this.#selectElement.value) {
+      this.#value = this.#selectElement.value;
     }
+
+    this.#internals.setFormValue(this.#value);
   }
 
   #updateState() {
     if (!this.#selectElement) return;
 
-    const val = this.getAttribute('value') || '';
-    if (val && this.#selectElement.value !== val) {
-      this.#selectElement.value = val;
+    if (this.#value && this.#selectElement.value !== this.#value) {
+      this.#selectElement.value = this.#value;
     }
-    this.#internals.setFormValue(this.#selectElement.value || val);
+    this.#internals.setFormValue(this.#value);
 
     this.#selectElement.disabled = this.hasAttribute('disabled');
     this.#selectElement.required = this.hasAttribute('required');
@@ -259,6 +274,7 @@ export class AppSelect extends HTMLElement {
   #handleChange = (event) => {
     event.stopPropagation();
     const val = this.#selectElement.value;
+    this.#value = val;
     this.#internals.setFormValue(val);
 
     this.dispatchEvent(
@@ -277,16 +293,21 @@ export class AppSelect extends HTMLElement {
     );
   };
 
-  // Getters & Setters
   get value() {
-    return this.#selectElement ? this.#selectElement.value : this.getAttribute('value') || '';
+    return this.#value;
   }
 
   set value(val) {
     const stringVal = val == null ? '' : String(val);
+    this.#value = stringVal;
+
     if (this.#selectElement) {
       this.#selectElement.value = stringVal;
+      Array.from(this.#selectElement.options).forEach((opt) => {
+        opt.selected = opt.value === stringVal;
+      });
     }
+
     this.#internals.setFormValue(stringVal);
   }
 
@@ -335,7 +356,6 @@ export class AppSelect extends HTMLElement {
     else this.removeAttribute('label');
   }
 
-  // Soporte nativo de formularios
   formResetCallback() {
     this.value = this.#initialValue;
   }
@@ -371,4 +391,4 @@ export class AppSelect extends HTMLElement {
 
 if (!customElements.get('app-select')) {
   customElements.define('app-select', AppSelect);
-}
+}