uni-textarea-field 1.0.0

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

@@ -0,0 +1,267 @@
+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=`
+<style>
+${_wccss}
+${_uniColorPalette}
+
+:host{position:relative;display:block;}
+
+/* force hide counter */
+:host([data-hide-counter]) {
+  .main .main__info__counter {
+    --counter-display: none;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* state */
+:host([stat=valid]) {
+  .main {
+    --border-color: var(--border-color-valid);
+    --message-color: var(--message-color-valid);
+  }
+}
+
+:host([stat=invalid]) {
+  .main {
+    --text-color: var(--text-color-invalid);
+    --border-color: var(--border-color-invalid);
+    --message-color: var(--message-color-invalid);
+  }
+}
+
+/* appearance */
+:host([appearance=outlined]) {
+  .main {
+    --border-color: var(--border-color-outline);
+    --background-color: transparent;
+  }
+}
+
+/* size */
+:host([size=large]) {
+  .main {
+    --border-radius: var(--large-border-radius);
+    --padding: var(--large-padding);
+  }
+}
+
+:host([size=medium]) {
+  .main {
+    --border-radius: var(--medium-border-radius);
+    --padding: var(--medium-padding);
+  }
+}
+
+:host([size=small]) {
+  .main {
+    --border-radius: var(--small-border-radius);
+    --padding: var(--small-padding);
+  }
+}
+
+: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]) {
+    .main {
+      --background-color: transparent;
+      --border-color: var(--border-color-readonly);
+    }
+  }
+
+  &:has([slot="textarea"][disabled],[slot="textarea"][inert]) {
+    .main {
+      --text-color: var(--text-color-disabled);
+    }
+
+    slot[name="textarea"] {
+      interactivity: inert;
+    }
+  }
+
+  @container style(--interactivity: inert) {
+    .main {
+      --text-color: var(--text-color-disabled);
+    }
+
+    slot[name="textarea"] {
+      interactivity: inert;
+    }
+  }
+}
+
+.main {
+  --border-color-normal: var(--uni-textarea-field-border-color-normal, transparent);
+  --border-color-readonly: var(--uni-textarea-field-border-color-readonly, var(--ct_input-general_main_stroke_default));
+  --border-color-disabled: var(--uni-textarea-field-border-color-disabled, var(--ct_input-general_dim_container_default));
+  --border-color-valid: var(--uni-textarea-field-border-color-valid, var(--ct_text_success_general));
+  --border-color-invalid: var(--uni-textarea-field-border-color-invalid, var(--ct_text_danger_general));
+  --border-color-outline: var(--uni-textarea-field-border-color-outline, var(--ct_input-general_main_stroke_default));
+  --border-color: var(--border-color-normal);
+
+  --background-color-normal: var(--uni-textarea-field-background-color-normal, var(--ct_input-general_dim_container_default));
+  --background-color-readonly: var(--uni-textarea-field-background-color-readonly, var(--ct_input-general_dim_container_default));
+  --background-color-disabled: var(--uni-textarea-field-background-color-disabled, var(--ct_input-general_dim_container_default));
+  --background-color: var(--background-color-normal);
+
+  --placeholder-color-normal: var(--uni-textarea-field-placeholder-color-normal, var(--ct_text_main_subtlest));
+  --placeholder-color-readonly: var(--uni-textarea-field-placeholder-color-readonly, var(--ct_text_main_subtlest));
+  --placeholder-color-disabled: var(--uni-textarea-field-placeholder-color-disabled, var(--ct_text_main_subtlest));
+  --placeholder-color: var(--placeholder-color-normal);
+
+  --text-color-normal: var(--uni-textarea-field-text-color-normal, var(--ct_text_main_general));
+  --text-color-readonly: var(--uni-textarea-field-text-color-readonly, var(--ct_text_main_general));
+  --text-color-disabled: var(--uni-textarea-field-text-color-disabled, var(--ct_text_main_pale));
+  --text-color-invalid: var(--uni-textarea-field-text-color-invalid, var(--ct_text_danger_general));
+  --text-color: var(--text-color-normal);
+
+  --message-color-normal: var(--uni-textarea-field-message-color-normal, var(--ct_text_main_subtle));
+  --message-color-valid: var(--uni-textarea-field-message-color-valid, var(--ct_text_success_general));
+  --message-color-invalid: var(--uni-textarea-field-message-color-invalid, var(--ct_text_danger_general));
+  --message-color: var(--message-color-normal);
+
+  --subject-color: var(--uni-textarea-field-subject-color, var(--ct_text_main_subtle));
+  --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));
+
+  --min-block-size: var(--uni-textarea-field-min-block-size, 100px);
+
+  /* size */
+  --large-border-radius: 24px;
+  --large-padding: 16px 12px 16px 16px;
+  --medium-border-radius: 24px;
+  --medium-padding: 8px 12px;
+  --small-border-radius: 24px;
+  --small-padding: 6.4px 4px 6.4px 12px;
+  
+  --border-radius: var(--medium-border-radius);
+  --padding: var(--medium-padding);
+
+  --counter-display: none;
+
+  inline-size: 100%;
+
+  .main__subject {
+    padding-block-end: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    &:has(.main__subject__span:empty) {
+      display: none;
+    }
+
+    .main__subject__span {
+      font-size: 12px;
+      color: var(--subject-color);
+      line-height: 1.667;
+    }
+
+    em {
+      inline-size: 15px;
+      block-size: 15px;
+      clip-path: path('M7.1,0C3.2,0,0,3.2,0,7.1s3.2,7.1,7.1,7.1,7.1-3.2,7.1-7.1S11.1,0,7.1,0ZM7.1,12.7c-3.1,0-5.6-2.5-5.6-5.5S4.1,1.6,7.1,1.6s5.5,2.5,5.5,5.6-2.5,5.5-5.5,5.5h0ZM7.9,6.3h-1.6v4.7h1.6v-4.7ZM7.9,3.6h-1.6v1.5h1.6v-1.5Z');
+      background-color: var(--subject-color);
+      display: block;
+    }
+  }
+
+  .main__info {
+    --justify-content: space-between;
+
+    padding: 4px 8px;
+    box-sizing: border-box;
+    display: flex;
+    gap: 16px;
+    justify-content: var(--justify-content);
+    align-items: center;
+
+    &:has(.main__info__message:empty) {
+      --justify-content: flex-end;
+    }
+
+    .main__info__message {
+      font-size: 11px;
+      color: var(--message-color);
+      line-height: 1.3;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    .main__info__counter {
+      flex-shrink: 0;
+      font-size: 12px;
+      color: var(--counter-color);
+      display: var(--counter-display);
+      
+      &::after {
+        content: ' / ' attr(data-maxlength);
+      }
+    }
+  }
+
+  slot[name=textarea] {
+    inline-size: 100%;
+    display: block;
+  }
+
+  /* textarea */
+  ::slotted(textarea) {
+    outline: 0 none;
+    resize: none;
+    appearance: none;
+    box-shadow: none;
+
+    display: block;
+
+    font-size: 16px;
+    line-height: 1.4;
+    color: var(--text-color);
+    inline-size: 100% !important;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    caret-color: var(--caret-color);
+
+    min-block-size: var(--min-block-size);
+    field-sizing: content;
+    border-radius: var(--border-radius);
+    padding: var(--padding) !important;
+
+    &::placeholder {
+      color: var(--placeholder-color);
+    }
+  }
+}
+</style>
+
+<div class="main" ontouchstart="" tabindex="0">
+  <p class="main__subject">
+    <em part="icon-subject"></em>
+    <span class="main__subject__span"></span>
+  </p>
+  <slot name="textarea"></slot>
+  <div class="main__info">
+    <p class="main__info__message"></p>
+    <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};

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "uni-textarea-field",
+  "version": "1.0.0",
+  "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"
+  ],
+  "homepage": "https://github.com/meistudioli/uni-textarea-field#readme",
+  "bugs": {
+    "url": "https://github.com/meistudioli/uni-textarea-field/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meistudioli/uni-textarea-field.git"
+  },
+  "license": "MIT",
+  "author": "Paul Li",
+  "type": "commonjs",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}