uni-select-field 1.0.0

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

@@ -0,0 +1,258 @@
+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;}
+
+: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-inline: var(--large-padding-inline);
+    --block-size: var(--large-block-size);
+  }
+}
+
+:host([size=medium]) {
+  .main {
+    --border-radius: var(--medium-border-radius);
+    --padding-inline: var(--medium-padding-inline);
+    --block-size: var(--medium-block-size);
+  }
+}
+
+:host([size=small]) {
+  .main {
+    --border-radius: var(--small-border-radius);
+    --padding-inline: var(--small-padding-inline);
+    --block-size: var(--small-block-size);
+  }
+}
+
+:host {
+  &:has([slot="select"][required]) {
+    .main__subject__span::after {
+      content: '*';
+      color: var(--ct_icon_moderate_strong);
+      margin-inline-start: 4px;
+    }
+  }
+
+  &:has([slot="select"][disabled],[slot="select"][inert]) {
+    .main {
+      --text-color: var(--text-color-disabled);
+      --caret-color: var(--caret-color-disabled);
+    }
+
+    slot[name="select"] {
+      interactivity: inert;
+    }
+  }
+
+  @container style(--interactivity: inert) {
+    .main {
+      --text-color: var(--text-color-disabled);
+    }
+
+    slot[name="select"] {
+      interactivity: inert;
+    }
+  }
+}
+
+.main {
+  --border-color-normal: var(--uni-select-field-border-color-normal, transparent);
+  --border-color-disabled: var(--uni-select-field-border-color-disabled, var(--ct_input-general_dim_container_default));
+  --border-color-valid: var(--uni-select-field-border-color-valid, var(--ct_text_success_general));
+  --border-color-invalid: var(--uni-select-field-border-color-invalid, var(--ct_text_danger_general));
+  --border-color-outline: var(--uni-select-field-border-color-outline, var(--ct_input-general_main_stroke_default));
+  --border-color: var(--border-color-normal);
+
+  --background-color-normal: var(--uni-select-field-background-color-normal, var(--ct_input-general_dim_container_default));
+  --background-color-readonly: var(--uni-select-field-background-color-readonly, var(--ct_input-general_dim_container_default));
+  --background-color-disabled: var(--uni-select-field-background-color-disabled, var(--ct_input-general_dim_container_default));
+  --background-color: var(--background-color-normal);
+
+  --text-color-normal: var(--uni-select-field-text-color-normal, var(--ct_text_main_general));
+  --text-color-readonly: var(--uni-select-field-text-color-readonly, var(--ct_text_main_general));
+  --text-color-disabled: var(--uni-select-field-text-color-disabled, var(--ct_text_main_pale));
+  --text-color-invalid: var(--uni-select-field-text-color-invalid, var(--ct_text_danger_general));
+  --text-color: var(--text-color-normal);
+
+  --message-color-normal: var(--uni-select-field-message-color-normal, var(--ct_text_main_subtle));
+  --message-color-valid: var(--uni-select-field-message-color-valid, var(--ct_text_success_general));
+  --message-color-invalid: var(--uni-select-field-message-color-invalid, var(--ct_text_danger_general));
+  --message-color: var(--message-color-normal);
+
+  --caret-color-normal: var(--uni-select-field-caret-color-normal, var(--ct_icon_main_subtle)); 
+  --caret-color-disabled: var(--uni-select-field-caret-color-disabled, var(--ct_icon_main_pale));
+  --caret-color: var(--caret-color-normal);
+
+  --subject-color: var(--uni-select-field-subject-color, var(--ct_text_main_subtle));
+  --caret-size: 20px;
+
+  /* size */
+  --basis-padding: 12px;
+  --large-border-radius: 24px;
+  --large-padding-inline: var(--basis-padding) 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));
+  --medium-block-size: 44px;
+  --small-border-radius: 32px;
+  --small-padding-inline: var(--basis-padding) calc(var(--basis-padding) * 2 + var(--basis-padding));
+  --small-block-size: 32px;
+
+  --border-radius: var(--medium-border-radius);
+  --padding-inline: var(--medium-padding-inline);
+  --block-size: var(--medium-block-size);
+
+  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=select] {
+    position: relative;
+    inline-size: 100%;
+    inline-size: fit-content;
+    display: block;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      margin-block: auto;
+      margin-inline: auto var(--basis-padding);
+      inline-size: var(--caret-size);
+      aspect-ratio: 1/1;
+      background-color: var(--caret-color);
+      clip-path: path(evenodd, 'M10.7854 13.4895C10.3514 13.9235 9.64792 13.9235 9.21401 13.4895L3.75879 8.03433L5.173 6.62012L9.99968 11.4468L14.8264 6.62012L16.2406 8.03433L10.7854 13.4895Z');
+      pointer-events: none;
+    }
+  }
+
+  /* select */
+  ::slotted(select) {
+    outline: 0 none;
+    resize: none;
+    appearance: none;
+    box-shadow: none;
+
+    display: inline-flex;
+    align-items: center;
+
+    font-size: 16px;
+    line-height: 1.4;
+    color: var(--text-color);
+    max-inline-size: 100%;
+    field-sizing: content;
+    block-size: var(--block-size);
+    box-sizing: border-box;
+    padding-inline: var(--padding-inline) !important;
+    text-overflow: ellipsis;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+  }
+}
+</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="select"></slot>
+  <div class="main__info">
+    <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};

package/package.json

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