uni-textarea-field 1.0.0 → 1.0.2

package/index.html

@@ -40,10 +40,8 @@ body{position:relative;inline-size:100vw;block-size:100vh;margin:0;}
 }
 
 uni-textarea-field {
-  inline-size: 300px;
-
   &::part(icon-subject) {
-    /*background-color: red;*/
+    /* style icon here */
   }
 
   &[data-hide-icon]::part(icon-subject) {
@@ -415,29 +413,21 @@ const handler = (evt) => {
       } else {
         textarea.removeAttribute('maxlength');
       }
-
-      uniTextareaField.refresh();
       break;
     }
 
     case 'required': {
       textarea.required = fd['required'] === 'y';
-
-      uniTextareaField.refresh();
       break;
     }
 
     case 'disabled': {
       textarea.disabled = fd['disabled'] === 'y';
-
-      uniTextareaField.refresh();
       break;
     }
 
     case 'readonly': {
       textarea.readOnly = fd['readonly'] === 'y';
-
-      uniTextareaField.refresh();
       break;
     }
 

package/mjs/wc-uni-textarea-field.js

@@ -82,34 +82,15 @@ ${_uniColorPalette}
 }
 
 :host {
-  &:has([slot="textarea"][required]) {
-    .main__subject__span::after {
-      content: '*';
-      color: var(--ct_icon_moderate_strong);
-      margin-inline-start: 4px;
-    }
-  }
-
-  &:has([slot="textarea"][maxlength]) {
-    .main {
-      --counter-display: block;
-    }
-  }
-
-  &:has([slot="textarea"][readonly]) {
+  @container style(--show-required-sign: 'true') {
     .main {
-      --background-color: transparent;
-      --border-color: var(--border-color-readonly);
+      --required-sign-display: inline;
     }
   }
 
-  &:has([slot="textarea"][disabled],[slot="textarea"][inert]) {
+  @container style(--show-counter: 'true') {
     .main {
-      --text-color: var(--text-color-disabled);
-    }
-
-    slot[name="textarea"] {
-      interactivity: inert;
+      --counter-display: block;
     }
   }
 
@@ -158,6 +139,7 @@ ${_uniColorPalette}
   --counter-color: var(--uni-textarea-field-counter-color, var(--ct_text_main_subtle));
   --caret-color: var(--uni-textarea-field-caret-color, var(--ct_input-caret_main_general));
 
+  --required-sign-display: none;
   --min-block-size: var(--uni-textarea-field-min-block-size, 100px);
 
   /* size */
@@ -189,6 +171,13 @@ ${_uniColorPalette}
       font-size: 12px;
       color: var(--subject-color);
       line-height: 1.667;
+
+      &::after {
+        content: '*';
+        color: var(--ct_icon_moderate_strong);
+        margin-inline-start: 4px;
+        display: var(--required-sign-display);
+      }
     }
 
     em {
@@ -269,6 +258,15 @@ ${_uniColorPalette}
       color: var(--placeholder-color);
     }
   }
+
+  ::slotted(textarea[readonly]) {
+    --background-color: transparent;
+    --border-color: var(--border-color-readonly);
+  }
+
+  ::slotted(textarea:is([disabled],[inert])) {
+    --text-color: var(--text-color-disabled);
+  }
 }
 </style>
 
@@ -285,6 +283,40 @@ ${_uniColorPalette}
 </div>
 `;
 
+/* style injection */
+const styleInjection = `
+uni-textarea-field {
+  --show-required-sign: 'false';
+  --show-counter: 'false';
+
+  &:has(textarea[required]) {
+    --show-required-sign: 'true';
+  }
+
+  &:not([data-hide-counter]):has(textarea[maxlength]) {
+    --show-counter: 'true';
+  }
+}
+
+[inert] uni-textarea-field {
+  --interactivity: inert;
+}
+`;
+
+const INJECT_KEY = Symbol.for('uni.textarea.field.ui.injected');
+const uiInit = () => {
+  if (window[INJECT_KEY]) {
+    return;
+  }
+
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(styleInjection);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+
+  window[INJECT_KEY] = true;
+};
+uiInit();
+
 export class UniTextareaField extends HTMLElement {
   #data;
   #nodes;
@@ -299,7 +331,8 @@ export class UniTextareaField extends HTMLElement {
 
     // data
     this.#data = {
-      controller: ''
+      controller: '',
+      elementController: ''
     };
 
     // nodes
@@ -309,6 +342,7 @@ export class UniTextareaField extends HTMLElement {
       subject: this.shadowRoot.querySelector('.main__subject__span'),
       message: this.shadowRoot.querySelector('.main__info__message'),
       counter: this.shadowRoot.querySelector('.main__info__counter'),
+      slot: this.shadowRoot.querySelector('slot[name=textarea]'),
     };
 
     // config
@@ -320,11 +354,12 @@ export class UniTextareaField extends HTMLElement {
     // evts
     this._onInput = this._onInput.bind(this);
     this._onKeydown = this._onKeydown.bind(this);
+    this._onSlotchange = this._onSlotchange.bind(this);
   }
 
   async connectedCallback() {
     const { config, error } = await _wcl.getWCConfig(this);
-    const { textarea } = this.#nodes;
+    const { slot } = this.#nodes;
 
     if (error) {
       console.warn(`${_wcl.classToTagName(this.constructor.name)}: ${error}`);
@@ -343,17 +378,14 @@ export class UniTextareaField extends HTMLElement {
     // evts
     this.#data.controller = new AbortController();
     const signal = this.#data.controller.signal;
-    textarea.addEventListener('input', this._onInput, { signal });
-    textarea.addEventListener('keydown', this._onKeydown, { signal });
-
-    // init
-    this._onInput();
+    slot.addEventListener('slotchange', this._onSlotchange, { signal });
+    
+    this.#setupEventListeners();
   }
 
   disconnectedCallback() {
-    if (this.#data?.controller) {
-      this.#data.controller.abort();
-    }
+    this.#data.controller.abort?.();
+    this.#data.elementController.abort?.();
   }
 
   #format(attrName, oldValue, newValue) {
@@ -444,6 +476,22 @@ export class UniTextareaField extends HTMLElement {
     }
   }
 
+  #setupEventListeners() {
+    this.#data.elementController.abort?.();
+
+    this.#nodes.textarea = this.querySelector('[slot=textarea]');
+
+    if (this.#nodes.textarea) {
+      this.#data.elementController = new AbortController();
+      const signal = this.#data.elementController.signal;
+      
+      this.#nodes.textarea.addEventListener('input', this._onInput, { signal });
+      this.#nodes.textarea.addEventListener('keydown', this._onKeydown, { signal });
+
+      this._onInput();
+    }
+  }
+
   set subject(value) {
     if (value) {
       this.setAttribute('subject', value);
@@ -523,6 +571,10 @@ export class UniTextareaField extends HTMLElement {
     }
   }
 
+  _onSlotchange() {
+    this.#setupEventListeners();
+  }
+
   refresh() {
     this.hidden = true;
     this.offsetHeight;

package/mjs/wc-uni-textarea-field.min.js

@@ -1,4 +1,4 @@
-import{_wcl}from"./common-lib.js";import{_wccss}from"./common-css.js";import{colorPalette as _uniColorPalette}from"https://unpkg.com/uni-input-field/mjs/uni-css.js";const defaults={subject:"",message:"",stat:"",appearance:"filled",size:"medium"},booleanAttrs=[],objectAttrs=[],custumEvents={},template=document.createElement("template");template.innerHTML=`
+import{_wcl}from"./common-lib.js";import{_wccss}from"./common-css.js";import{colorPalette as _uniColorPalette}from"https://unpkg.com/uni-input-field/mjs/uni-css.js";const defaults={subject:"",message:"",stat:"",appearance:"filled",size:"medium"},booleanAttrs=[],objectAttrs=[],custumEvents={},template=document.createElement("template"),styleInjection=(template.innerHTML=`
 <style>
 ${_wccss}
 ${_uniColorPalette}
@@ -63,34 +63,15 @@ ${_uniColorPalette}
 }
 
 :host {
-  &:has([slot="textarea"][required]) {
-    .main__subject__span::after {
-      content: '*';
-      color: var(--ct_icon_moderate_strong);
-      margin-inline-start: 4px;
-    }
-  }
-
-  &:has([slot="textarea"][maxlength]) {
-    .main {
-      --counter-display: block;
-    }
-  }
-
-  &:has([slot="textarea"][readonly]) {
+  @container style(--show-required-sign: 'true') {
     .main {
-      --background-color: transparent;
-      --border-color: var(--border-color-readonly);
+      --required-sign-display: inline;
     }
   }
 
-  &:has([slot="textarea"][disabled],[slot="textarea"][inert]) {
+  @container style(--show-counter: 'true') {
     .main {
-      --text-color: var(--text-color-disabled);
-    }
-
-    slot[name="textarea"] {
-      interactivity: inert;
+      --counter-display: block;
     }
   }
 
@@ -139,6 +120,7 @@ ${_uniColorPalette}
   --counter-color: var(--uni-textarea-field-counter-color, var(--ct_text_main_subtle));
   --caret-color: var(--uni-textarea-field-caret-color, var(--ct_input-caret_main_general));
 
+  --required-sign-display: none;
   --min-block-size: var(--uni-textarea-field-min-block-size, 100px);
 
   /* size */
@@ -170,6 +152,13 @@ ${_uniColorPalette}
       font-size: 12px;
       color: var(--subject-color);
       line-height: 1.667;
+
+      &::after {
+        content: '*';
+        color: var(--ct_icon_moderate_strong);
+        margin-inline-start: 4px;
+        display: var(--required-sign-display);
+      }
     }
 
     em {
@@ -250,6 +239,15 @@ ${_uniColorPalette}
       color: var(--placeholder-color);
     }
   }
+
+  ::slotted(textarea[readonly]) {
+    --background-color: transparent;
+    --border-color: var(--border-color-readonly);
+  }
+
+  ::slotted(textarea:is([disabled],[inert])) {
+    --text-color: var(--text-color-disabled);
+  }
 }
 </style>
 
@@ -264,4 +262,21 @@ ${_uniColorPalette}
     <p class="main__info__counter" data-maxlength="?">0</p>
   </div>
 </div>
-`;class UniTextareaField extends HTMLElement{#data;#nodes;#config;constructor(e){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.appendChild(template.content.cloneNode(!0)),this.#data={controller:""},this.#nodes={styleSheet:this.shadowRoot.querySelector("style"),textarea:this.querySelector("[slot=textarea]"),subject:this.shadowRoot.querySelector(".main__subject__span"),message:this.shadowRoot.querySelector(".main__info__message"),counter:this.shadowRoot.querySelector(".main__info__counter")},this.#config={...defaults,...e},this._onInput=this._onInput.bind(this),this._onKeydown=this._onKeydown.bind(this)}async connectedCallback(){var{config:e,error:t}=await _wcl.getWCConfig(this),a=this.#nodes["textarea"];t?(console.warn(_wcl.classToTagName(this.constructor.name)+": "+t),this.remove()):(this.#config={...this.#config,...e},Object.keys(defaults).forEach(e=>this.#upgradeProperty(e)),this.#data.controller=new AbortController,t=this.#data.controller.signal,a.addEventListener("input",this._onInput,{signal:t}),a.addEventListener("keydown",this._onKeydown,{signal:t}),this._onInput())}disconnectedCallback(){this.#data?.controller&&this.#data.controller.abort()}#format(e,t,a){if(null!==a)switch(e){case"subject":case"message":this.#config[e]=a;break;case"stat":this.#config[e]=["","valid","invalid"].includes(a)?a:defaults.state;break;case"appearance":this.#config[e]=["filled","outlined"].includes(a)?a:defaults.appearance;break;case"size":this.#config[e]=["large","medium","small"].includes(a)?a:defaults.size}else booleanAttrs.includes(e)?this.#config[e]=!1:this.#config[e]=defaults[e]}attributeChangedCallback(e,t,a){if(UniTextareaField.observedAttributes.includes(e))switch(this.#format(e,t,a),e){case"subject":this.#nodes.subject.textContent=this.subject;break;case"message":this.#nodes.message.textContent=this.message}}static get observedAttributes(){return Object.keys(defaults)}static get supportedEvents(){return Object.keys(custumEvents).map(e=>custumEvents[e])}#upgradeProperty(e){let t;UniTextareaField.observedAttributes.includes(e)&&(Object.prototype.hasOwnProperty.call(this,e)?(t=this[e],delete this[e]):t=booleanAttrs.includes(e)?!(!this.hasAttribute(e)&&!this.#config[e]):objectAttrs.includes(e)?this.hasAttribute(e)?this.getAttribute(e):JSON.stringify(this.#config[e]):this.hasAttribute(e)?this.getAttribute(e):this.#config[e],this[e]=t)}set subject(e){e?this.setAttribute("subject",e):this.removeAttribute("subject")}get subject(){return this.#config.subject}set message(e){e?this.setAttribute("message",e):this.removeAttribute("message")}get message(){return this.#config.message}set stat(e){e?this.setAttribute("stat",e):this.removeAttribute("stat")}get stat(){return this.#config.stat}set appearance(e){e?this.setAttribute("appearance",e):this.removeAttribute("appearance")}get appearance(){return this.#config.appearance}set size(e){e?this.setAttribute("size",e):this.removeAttribute("size")}get size(){return this.#config.size}_onInput(e){var{textarea:t,counter:a}=this.#nodes;a.dataset.maxlength=t.maxLength,a.textContent=t.value.length,e&&"invalid"===this.stat&&(this.stat="")}_onKeydown(e){var{key:e,isComposing:t}=e;"Enter"===e&&t&&event.preventDefault()}refresh(){this.hidden=!0,this.offsetHeight,this.hidden=!1}}const S=_wcl.supports(),T=_wcl.classToTagName("UniTextareaField");S.customElements&&S.shadowDOM&&S.template&&!window.customElements.get(T)&&window.customElements.define(_wcl.classToTagName("UniTextareaField"),UniTextareaField);export{UniTextareaField};
+`,`
+uni-textarea-field {
+  --show-required-sign: 'false';
+  --show-counter: 'false';
+
+  &:has(textarea[required]) {
+    --show-required-sign: 'true';
+  }
+
+  &:not([data-hide-counter]):has(textarea[maxlength]) {
+    --show-counter: 'true';
+  }
+}
+
+[inert] uni-textarea-field {
+  --interactivity: inert;
+}
+`),INJECT_KEY=Symbol.for("uni.textarea.field.ui.injected"),uiInit=()=>{var e;window[INJECT_KEY]||((e=new CSSStyleSheet).replaceSync(styleInjection),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e],window[INJECT_KEY]=!0)};uiInit();class UniTextareaField extends HTMLElement{#data;#nodes;#config;constructor(e){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.appendChild(template.content.cloneNode(!0)),this.#data={controller:"",elementController:""},this.#nodes={styleSheet:this.shadowRoot.querySelector("style"),textarea:this.querySelector("[slot=textarea]"),subject:this.shadowRoot.querySelector(".main__subject__span"),message:this.shadowRoot.querySelector(".main__info__message"),counter:this.shadowRoot.querySelector(".main__info__counter"),slot:this.shadowRoot.querySelector("slot[name=textarea]")},this.#config={...defaults,...e},this._onInput=this._onInput.bind(this),this._onKeydown=this._onKeydown.bind(this),this._onSlotchange=this._onSlotchange.bind(this)}async connectedCallback(){var{config:e,error:t}=await _wcl.getWCConfig(this),a=this.#nodes["slot"];t?(console.warn(_wcl.classToTagName(this.constructor.name)+": "+t),this.remove()):(this.#config={...this.#config,...e},Object.keys(defaults).forEach(e=>this.#upgradeProperty(e)),this.#data.controller=new AbortController,t=this.#data.controller.signal,a.addEventListener("slotchange",this._onSlotchange,{signal:t}),this.#setupEventListeners())}disconnectedCallback(){this.#data.controller.abort?.(),this.#data.elementController.abort?.()}#format(e,t,a){if(null!==a)switch(e){case"subject":case"message":this.#config[e]=a;break;case"stat":this.#config[e]=["","valid","invalid"].includes(a)?a:defaults.state;break;case"appearance":this.#config[e]=["filled","outlined"].includes(a)?a:defaults.appearance;break;case"size":this.#config[e]=["large","medium","small"].includes(a)?a:defaults.size}else booleanAttrs.includes(e)?this.#config[e]=!1:this.#config[e]=defaults[e]}attributeChangedCallback(e,t,a){if(UniTextareaField.observedAttributes.includes(e))switch(this.#format(e,t,a),e){case"subject":this.#nodes.subject.textContent=this.subject;break;case"message":this.#nodes.message.textContent=this.message}}static get observedAttributes(){return Object.keys(defaults)}static get supportedEvents(){return Object.keys(custumEvents).map(e=>custumEvents[e])}#upgradeProperty(e){let t;UniTextareaField.observedAttributes.includes(e)&&(Object.prototype.hasOwnProperty.call(this,e)?(t=this[e],delete this[e]):t=booleanAttrs.includes(e)?!(!this.hasAttribute(e)&&!this.#config[e]):objectAttrs.includes(e)?this.hasAttribute(e)?this.getAttribute(e):JSON.stringify(this.#config[e]):this.hasAttribute(e)?this.getAttribute(e):this.#config[e],this[e]=t)}#setupEventListeners(){var e;this.#data.elementController.abort?.(),this.#nodes.textarea=this.querySelector("[slot=textarea]"),this.#nodes.textarea&&(this.#data.elementController=new AbortController,e=this.#data.elementController.signal,this.#nodes.textarea.addEventListener("input",this._onInput,{signal:e}),this.#nodes.textarea.addEventListener("keydown",this._onKeydown,{signal:e}),this._onInput())}set subject(e){e?this.setAttribute("subject",e):this.removeAttribute("subject")}get subject(){return this.#config.subject}set message(e){e?this.setAttribute("message",e):this.removeAttribute("message")}get message(){return this.#config.message}set stat(e){e?this.setAttribute("stat",e):this.removeAttribute("stat")}get stat(){return this.#config.stat}set appearance(e){e?this.setAttribute("appearance",e):this.removeAttribute("appearance")}get appearance(){return this.#config.appearance}set size(e){e?this.setAttribute("size",e):this.removeAttribute("size")}get size(){return this.#config.size}_onInput(e){var{textarea:t,counter:a}=this.#nodes;a.dataset.maxlength=t.maxLength,a.textContent=t.value.length,e&&"invalid"===this.stat&&(this.stat="")}_onKeydown(e){var{key:e,isComposing:t}=e;"Enter"===e&&t&&event.preventDefault()}_onSlotchange(){this.#setupEventListeners()}refresh(){this.hidden=!0,this.offsetHeight,this.hidden=!1}}const S=_wcl.supports(),T=_wcl.classToTagName("UniTextareaField");S.customElements&&S.shadowDOM&&S.template&&!window.customElements.get(T)&&window.customElements.define(_wcl.classToTagName("UniTextareaField"),UniTextareaField);export{UniTextareaField};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-textarea-field",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "<uni-textarea-field /> is an encapsulated Web Component built upon the foundation of the uniopen design language. Implementation is straightforward: simply slot a standard textarea element inside <uni-textarea-field />. The component instantly applies a user interface that aligns seamlessly with the uniopen design language guidelines. Furthermore, its visual styles can be dynamically adapted via native HTML attributes or JavaScript properties. The component also exposes comprehensive character count and textarea length metadata, providing users with a clear and intuitive understanding of predefined character constraints.",
   "keywords": [
     "web"