uni-select-field 1.0.0 → 1.0.1

package/index.html

@@ -38,17 +38,13 @@ body{position:relative;inline-size:100vw;block-size:100vh;margin:0;}
 
 uni-select-field {
   &::part(icon-subject) {
-    /*background-color: red;*/
+    /* style icon here */
   }
 
   &[data-hide-icon]::part(icon-subject) {
     display: none;
   }
 }
-
-[inert] uni-select-field {
-  --interactivity: inert;
-}
 </style>
 </head>
 
@@ -355,15 +351,11 @@ const handler = (evt) => {
 
     case 'required': {
       select.required = fd['required'] === 'y';
-
-      uniSelectField.refresh();
       break;
     }
 
     case 'disabled': {
       select.disabled = fd['disabled'] === 'y';
-
-      uniSelectField.refresh();
       break;
     }
 

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

@@ -78,15 +78,13 @@ ${_uniColorPalette}
 }
 
 :host {
-  &:has([slot="select"][required]) {
-    .main__subject__span::after {
-      content: '*';
-      color: var(--ct_icon_moderate_strong);
-      margin-inline-start: 4px;
+  @container style(--show-required-sign: 'true') {
+    .main {
+      --required-sign-display: inline;
     }
   }
 
-  &:has([slot="select"][disabled],[slot="select"][inert]) {
+  @container style(--is-select-inert: 'true') {
     .main {
       --text-color: var(--text-color-disabled);
       --caret-color: var(--caret-color-disabled);
@@ -94,16 +92,7 @@ ${_uniColorPalette}
 
     slot[name="select"] {
       interactivity: inert;
-    }
-  }
-
-  @container style(--interactivity: inert) {
-    .main {
-      --text-color: var(--text-color-disabled);
-    }
 
-    slot[name="select"] {
-      interactivity: inert;
     }
   }
 }
@@ -139,10 +128,12 @@ ${_uniColorPalette}
   --subject-color: var(--uni-select-field-subject-color, var(--ct_text_main_subtle));
   --caret-size: 20px;
 
+  --required-sign-display: none;
+
   /* size */
   --basis-padding: 12px;
   --large-border-radius: 24px;
-  --large-padding-inline: var(--basis-padding) calc(var(--basis-padding) * 2 + var(--basis-padding));
+  --large-padding-inline: 16px calc(var(--basis-padding) * 2 + var(--basis-padding));
   --large-block-size: 56px;
   --medium-border-radius: 44px;
   --medium-padding-inline: var(--basis-padding) calc(var(--basis-padding) * 2 + var(--basis-padding));
@@ -171,6 +162,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 {
@@ -276,6 +274,40 @@ ${_uniColorPalette}
 </div>
 `;
 
+/* style injection */
+const styleInjection = `
+uni-select-field {
+  --show-required-sign: 'false';
+  --is-select-inert: 'false';
+
+  &:has(select[required]) {
+    --show-required-sign: 'true';
+  }
+
+  &:has(select:is([disabled],[inert])) {
+    --is-select-inert: 'true';
+  }
+}
+
+[inert] uni-select-field {
+  --is-select-inert: 'true';
+}
+`;
+
+const INJECT_KEY = Symbol.for('uni.select.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 UniSelectField extends HTMLElement {
   #data;
   #nodes;

package/mjs/wc-uni-select-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}
@@ -59,15 +59,13 @@ ${_uniColorPalette}
 }
 
 :host {
-  &:has([slot="select"][required]) {
-    .main__subject__span::after {
-      content: '*';
-      color: var(--ct_icon_moderate_strong);
-      margin-inline-start: 4px;
+  @container style(--show-required-sign: 'true') {
+    .main {
+      --required-sign-display: inline;
     }
   }
 
-  &:has([slot="select"][disabled],[slot="select"][inert]) {
+  @container style(--is-select-inert: 'true') {
     .main {
       --text-color: var(--text-color-disabled);
       --caret-color: var(--caret-color-disabled);
@@ -75,16 +73,7 @@ ${_uniColorPalette}
 
     slot[name="select"] {
       interactivity: inert;
-    }
-  }
-
-  @container style(--interactivity: inert) {
-    .main {
-      --text-color: var(--text-color-disabled);
-    }
 
-    slot[name="select"] {
-      interactivity: inert;
     }
   }
 }
@@ -120,10 +109,12 @@ ${_uniColorPalette}
   --subject-color: var(--uni-select-field-subject-color, var(--ct_text_main_subtle));
   --caret-size: 20px;
 
+  --required-sign-display: none;
+
   /* size */
   --basis-padding: 12px;
   --large-border-radius: 24px;
-  --large-padding-inline: var(--basis-padding) calc(var(--basis-padding) * 2 + var(--basis-padding));
+  --large-padding-inline: 16px calc(var(--basis-padding) * 2 + var(--basis-padding));
   --large-block-size: 56px;
   --medium-border-radius: 44px;
   --medium-padding-inline: var(--basis-padding) calc(var(--basis-padding) * 2 + var(--basis-padding));
@@ -152,6 +143,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 {
@@ -255,4 +253,21 @@ ${_uniColorPalette}
     <p class="main__info__message"></p>
   </div>
 </div>
-`;class UniSelectField 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"),select:this.querySelector("[slot=select]"),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}}async connectedCallback(){var{config:e,error:t}=await _wcl.getWCConfig(this);t?(console.warn(_wcl.classToTagName(this.constructor.name)+": "+t),this.remove()):(this.#config={...this.#config,...e},Object.keys(defaults).forEach(e=>this.#upgradeProperty(e)))}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(UniSelectField.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;UniSelectField.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}refresh(){this.hidden=!0,this.offsetHeight,this.hidden=!1}}const S=_wcl.supports(),T=_wcl.classToTagName("UniSelectField");S.customElements&&S.shadowDOM&&S.template&&!window.customElements.get(T)&&window.customElements.define(_wcl.classToTagName("UniSelectField"),UniSelectField);export{UniSelectField};
+`,`
+uni-select-field {
+  --show-required-sign: 'false';
+  --is-select-inert: 'false';
+
+  &:has(select[required]) {
+    --show-required-sign: 'true';
+  }
+
+  &:has(select:is([disabled],[inert])) {
+    --is-select-inert: 'true';
+  }
+}
+
+[inert] uni-select-field {
+  --is-select-inert: 'true';
+}
+`),INJECT_KEY=Symbol.for("uni.select.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 UniSelectField 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"),select:this.querySelector("[slot=select]"),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}}async connectedCallback(){var{config:e,error:t}=await _wcl.getWCConfig(this);t?(console.warn(_wcl.classToTagName(this.constructor.name)+": "+t),this.remove()):(this.#config={...this.#config,...e},Object.keys(defaults).forEach(e=>this.#upgradeProperty(e)))}disconnectedCallback(){this.#data?.controller&&this.#data.controller.abort()}#format(e,t,i){if(null!==i)switch(e){case"subject":case"message":this.#config[e]=i;break;case"stat":this.#config[e]=["","valid","invalid"].includes(i)?i:defaults.state;break;case"appearance":this.#config[e]=["filled","outlined"].includes(i)?i:defaults.appearance;break;case"size":this.#config[e]=["large","medium","small"].includes(i)?i:defaults.size}else booleanAttrs.includes(e)?this.#config[e]=!1:this.#config[e]=defaults[e]}attributeChangedCallback(e,t,i){if(UniSelectField.observedAttributes.includes(e))switch(this.#format(e,t,i),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;UniSelectField.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}refresh(){this.hidden=!0,this.offsetHeight,this.hidden=!1}}const S=_wcl.supports(),T=_wcl.classToTagName("UniSelectField");S.customElements&&S.shadowDOM&&S.template&&!window.customElements.get(T)&&window.customElements.define(_wcl.classToTagName("UniSelectField"),UniSelectField);export{UniSelectField};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-select-field",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "<uni-select-field /> is an encapsulated Web Component built upon the foundation of the uniopen design language. Implementation is straightforward: simply slot a standard select element inside <uni-select-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.",
   "keywords": [
     "web"