uni-select-field 1.0.0

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

@@ -0,0 +1,496 @@
+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: '', // valid, invalid
+  appearance: 'filled', // filled, outlined
+  size: 'medium' // large, medium, small
+};
+
+const booleanAttrs = [];
+const objectAttrs = [];
+const custumEvents = {};
+
+const 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>
+`;
+
+export class UniSelectField extends HTMLElement {
+  #data;
+  #nodes;
+  #config;
+
+  constructor(config) {
+    super();
+
+    // template
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // data
+    this.#data = {
+      controller: ''
+    };
+
+    // nodes
+    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'),
+    };
+
+    // config
+    this.#config = {
+      ...defaults,
+      ...config // new UniSelectField(config)
+    };
+  }
+
+  async connectedCallback() {
+    const { config, error } = await _wcl.getWCConfig(this);
+
+    if (error) {
+      console.warn(`${_wcl.classToTagName(this.constructor.name)}: ${error}`);
+      this.remove();
+      return;
+    } else {
+      this.#config = {
+        ...this.#config,
+        ...config
+      };
+    }
+
+    // upgradeProperty
+    Object.keys(defaults).forEach((key) => this.#upgradeProperty(key));
+  }
+
+  disconnectedCallback() {
+    if (this.#data?.controller) {
+      this.#data.controller.abort();
+    }
+  }
+
+  #format(attrName, oldValue, newValue) {
+    const hasValue = newValue !== null;
+
+    if (!hasValue) {
+      if (booleanAttrs.includes(attrName)) {
+        this.#config[attrName] = false;
+      } else {
+        this.#config[attrName] = defaults[attrName];
+      }
+    } else {
+      switch (attrName) {
+        case 'subject':
+        case 'message': {
+          this.#config[attrName] = newValue;
+          break;
+        }
+
+        case 'stat': {
+          this.#config[attrName] = ['', 'valid', 'invalid'].includes(newValue) ? newValue : defaults.state;
+          break;
+        }
+
+        case 'appearance': {
+          this.#config[attrName] = ['filled', 'outlined'].includes(newValue) ? newValue : defaults.appearance;
+          break;
+        }
+
+        case 'size': {
+          this.#config[attrName] = ['large', 'medium', 'small'].includes(newValue) ? newValue : defaults.size;
+          break;
+        }
+      }
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (!UniSelectField.observedAttributes.includes(attrName)) {
+      return;
+    }
+
+    this.#format(attrName, oldValue, newValue);
+
+    switch (attrName) {
+      case 'subject': {
+        this.#nodes.subject.textContent = this.subject;
+        break;
+      }
+
+      case 'message': {
+        this.#nodes.message.textContent = this.message;
+        break;
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return Object.keys(defaults); // UniSelectField.observedAttributes
+  }
+
+  static get supportedEvents() {
+    return Object.keys(custumEvents).map(
+      (key) => {
+        return custumEvents[key];
+      }
+    );
+  }
+
+  #upgradeProperty(prop) {
+    let value;
+
+    if (UniSelectField.observedAttributes.includes(prop)) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        value = this[prop];
+        delete this[prop];
+      } else {
+        if (booleanAttrs.includes(prop)) {
+          value = (this.hasAttribute(prop) || this.#config[prop]) ? true : false;
+        } else if (objectAttrs.includes(prop)) {
+          value = this.hasAttribute(prop) ? this.getAttribute(prop) : JSON.stringify(this.#config[prop]);
+        } else {
+          value = this.hasAttribute(prop) ? this.getAttribute(prop) : this.#config[prop];
+        }
+      }
+
+      this[prop] = value;
+    }
+  }
+
+  set subject(value) {
+    if (value) {
+      this.setAttribute('subject', value);
+    } else {
+      this.removeAttribute('subject');
+    }
+  }
+
+  get subject() {
+    return this.#config.subject;
+  }
+
+  set message(value) {
+    if (value) {
+      this.setAttribute('message', value);
+    } else {
+      this.removeAttribute('message');
+    }
+  }
+
+  get message() {
+    return this.#config.message;
+  }
+
+  set stat(value) {
+    if (value) {
+      this.setAttribute('stat', value);
+    } else {
+      this.removeAttribute('stat');
+    }
+  }
+
+  get stat() {
+    return this.#config.stat;
+  }
+
+  set appearance(value) {
+    if (value) {
+      this.setAttribute('appearance', value);
+    } else {
+      this.removeAttribute('appearance');
+    }
+  }
+
+  get appearance() {
+    return this.#config.appearance;
+  }
+
+  set size(value) {
+    if (value) {
+      this.setAttribute('size', value);
+    } else {
+      this.removeAttribute('size');
+    }
+  }
+
+  get size() {
+    return this.#config.size;
+  }
+
+  refresh() {
+    this.hidden = true;
+    this.offsetHeight;
+    this.hidden = false;
+  }
+}
+
+// define web component
+const S = _wcl.supports();
+const T = _wcl.classToTagName('UniSelectField');
+if (S.customElements && S.shadowDOM && S.template && !window.customElements.get(T)) {
+  window.customElements.define(_wcl.classToTagName('UniSelectField'), UniSelectField);
+}