easy-component-ui 2.0.4 → 2.1.0

package/components/ea-textarea/index.scss

@@ -0,0 +1,48 @@
+@import "../ea-ui-base-style.scss";
+
+.ea-textarea_wrap {
+  position: relative;
+  width: 100%;
+
+  .ea-textarea_inner {
+    box-sizing: border-box;
+    box-shadow: none;
+    resize: vertical;
+    min-height: 1.75rem;
+
+    border: 1px solid $color-border;
+    outline: 0;
+    transition: border 0.2s;
+    border-radius: 3px;
+
+    padding: 0.5rem;
+
+    line-height: 0.8;
+    font-size: 0.8rem;
+    scrollbar-width: none;
+
+    &:focus {
+      border-color: $color-primary-border;
+    }
+
+    &::placeholder {
+      color: $color-disabled-text;
+    }
+
+    &:disabled {
+      background-color: $color-disabled-btn-bgc;
+      color: $color-disabled-text;
+    }
+
+    &:invalid {
+      border-color: $color-danger-border;
+    }
+  }
+
+  .ea-input_word-limit {
+    position: absolute;
+    font-size: 0.75rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
+  }
+}

package/components/ea-textarea/src/style/stylesheet.js

@@ -1 +1,39 @@
-export const stylesheet="\n.ea-textarea_wrap {\n  position: relative;\n  width: 100%;\n}\n.ea-textarea_wrap .ea-textarea_inner {\n  box-sizing: border-box;\n  box-shadow: none;\n  resize: vertical;\n  min-height: 1.75rem;\n  border: 1px solid #dcdfe6;\n  outline: 0;\n  transition: border 0.2s;\n  border-radius: 3px;\n  padding: 0.5rem;\n  line-height: 0.8;\n  font-size: 0.8rem;\n  scrollbar-width: none;\n}\n.ea-textarea_wrap .ea-textarea_inner:focus {\n  border-color: #409eff;\n}\n.ea-textarea_wrap .ea-textarea_inner::placeholder {\n  color: #c0c4cc;\n}\n.ea-textarea_wrap .ea-textarea_inner:disabled {\n  background-color: #eeeeee;\n  color: #c0c4cc;\n}\n.ea-textarea_wrap .ea-textarea_inner:invalid {\n  border-color: #f56c6c;\n}\n.ea-textarea_wrap .ea-input_word-limit {\n  position: absolute;\n  font-size: 0.75rem;\n  bottom: 0.5rem;\n  right: 0.5rem;\n}\n";
+export const stylesheet = `
+.ea-textarea_wrap {
+  position: relative;
+  width: 100%;
+}
+.ea-textarea_wrap .ea-textarea_inner {
+  box-sizing: border-box;
+  box-shadow: none;
+  resize: vertical;
+  min-height: 1.75rem;
+  border: 1px solid #dcdfe6;
+  outline: 0;
+  transition: border 0.2s;
+  border-radius: 3px;
+  padding: 0.5rem;
+  line-height: 0.8;
+  font-size: 0.8rem;
+  scrollbar-width: none;
+}
+.ea-textarea_wrap .ea-textarea_inner:focus {
+  border-color: #409eff;
+}
+.ea-textarea_wrap .ea-textarea_inner::placeholder {
+  color: #c0c4cc;
+}
+.ea-textarea_wrap .ea-textarea_inner:disabled {
+  background-color: #eeeeee;
+  color: #c0c4cc;
+}
+.ea-textarea_wrap .ea-textarea_inner:invalid {
+  border-color: #f56c6c;
+}
+.ea-textarea_wrap .ea-input_word-limit {
+  position: absolute;
+  font-size: 0.75rem;
+  bottom: 0.5rem;
+  right: 0.5rem;
+}
+`;

package/components/ea-time-picker/index.css

@@ -0,0 +1,82 @@
+.ea-time-picker_wrap {
+  position: relative;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap {
+  position: absolute;
+  bottom: -12px;
+  left: 0;
+  transform-origin: center top;
+  transform: translateY(100%) scaleY(0);
+  box-sizing: border-box;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 2;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0.5rem;
+  border: 0.5rem solid transparent;
+  border-bottom-color: #fff;
+  transform: translateY(-100%);
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap {
+  display: flex;
+  position: relative;
+  margin: 1rem 0;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::before, .ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::before {
+  top: calc(50% - 16px);
+  border-bottom: 1px solid #e4e7ed;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap::after {
+  top: calc(50% + 16px);
+  border-bottom: 1px solid #e4e7ed;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner {
+  flex: 1;
+  max-height: 190px;
+  box-sizing: border-box;
+  padding: 5rem 0;
+  text-align: center;
+  overflow: auto;
+  scrollbar-width: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0px;
+  list-style-type: none;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item {
+  height: 32px;
+  line-height: 32px;
+  font-size: 12px;
+  color: #606266;
+  transition: color 0.3s;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item.is-active {
+  color: #409eff;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-inner-wrap .ea-time-picker_dropdown-inner .ea-time-picker_dropdown-item.is-disabled {
+  color: #c0c4cc;
+}
+.ea-time-picker_wrap .ea-time-picker_dropdown-wrap .ea-time-picker_dropdown-button-group {
+  text-align: right;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.ea-time-picker_wrap.is-open .ea-time-picker_dropdown-wrap {
+  transform: translateY(100%) scaleY(1);
+}
+.ea-time-picker_wrap.with-transition .ea-time-picker_dropdown-wrap {
+  transition: transform 0.3s ease-in-out;
+}

package/components/ea-time-picker/index.js

@@ -1 +1,379 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{createElement}from"../../utils/createElement.js";import{timeout}from"../../utils/timeout.js";import{stylesheet}from"./src/style/stylesheet.js";import"../ea-input/index.js";import"../ea-button/index.js";export class EaTimePicker extends Base{#e;#t;#i;#n;#r;#s;#a=!1;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-time-picker_wrap' part='container'>\n                <ea-input part='input' autocomplete=\"off\" readonly prefix-icon=\"icon-clock\"></ea-input>\n                <div class=\"ea-time-picker_dropdown-wrap\" part='dropdown-wrap'>\n                    <div class=\"ea-time-picker_dropdown-inner-wrap\" part='dropdown-inner-wrap'>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-hour\" part='dropdown-time'>\n                        </ul>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-minute\" part='dropdown-time'>\n                        </ul>\n                        <ul class=\"ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-second\" part='dropdown-time'>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        ",this.#e=e.querySelector(".ea-time-picker_wrap"),this.#t=e.querySelector("ea-input"),this.#i=e.querySelector(".ea-time-picker_dropdown-wrap"),this.#n=e.querySelector(".ea-time-picker_dropdown-inner-hour"),this.#r=e.querySelector(".ea-time-picker_dropdown-inner-minute"),this.#s=e.querySelector(".ea-time-picker_dropdown-inner-second"),this.build(e,stylesheet)}get width(){return this.getAttribute("width")||"200px"}set width(e){this.setAttribute("width",e),this.#e.style.width=e}get time(){return this.getAttribute("time")||"00:00:00"}set time(e){this.setAttribute("time",e);const[t,i,n]=e.split(":");this.hour=t,this.minute=i,this.second=n}get name(){return this.getAttribute("name")||"timePicker"}set name(e){this.setAttribute("name",e)}get hour(){const e=this.getAttrNumber("hour");return this.#o(e)}set hour(e){this.setAttribute("hour",e),this.#h(this.#n,e)}get minute(){const e=this.getAttrNumber("minute");return this.#o(e)}set minute(e){this.setAttribute("minute",e),this.#h(this.#r,e)}get second(){const e=this.getAttrNumber("second");return this.#o(e)}set second(e){this.setAttribute("second",e),this.#h(this.#s,e)}get value(){return this.time}set value(e){this.time=e}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.setAttribute("disabled",e),this.#t.disabled=e}get align(){return this.getAttribute("align")||"left"}set align(e){this.setAttribute("align",e),this.#t.shadowRoot.querySelector("input").style.textAlign=e}get limitRangeStart(){if(this.getAttribute("limit-range-start")){const[e,t,i]=this.getAttribute("limit-range-start")?.split(":");return`${this.#o(e)}:${this.#o(t)}:${this.#o(i)}`}return"00:00:00"}set limitRangeStart(e){this.setAttribute("limit-range-start",e)}get limitRangeEnd(){if(this.getAttribute("limit-range-end")){const[e,t,i]=this.getAttribute("limit-range-end")?.split(":");return`${this.#o(e)}:${this.#o(t)}:${this.#o(i)}`}return"23:59:59"}set limitRangeEnd(e){this.setAttribute("limit-range-end",e)}#o(e,t="00"){return(e=Number(e))<10?`0${e}`:e||t}#h(e,t){e.querySelectorAll("li").forEach((e=>{Number(e.innerText)===Number(this.#o(t))&&e.click()}))}#d(){this.#i.style.width=this.#t.getBoundingClientRect().width+"px",timeout((()=>{this.#e.classList.add("with-transition")}),50)}#l(e,t,i,n){e.addEventListener("click",(()=>{i.querySelectorAll("li").forEach((e=>{e.classList.remove("is-active")})),e.classList.add("is-active");const r=this.#o(t);switch(n){case"hour":this.hour=r;break;case"minute":this.minute=r;break;case"second":this.second=r}this.#a&&this.dispatchEvent(new CustomEvent("change",{detail:{time:this.time}})),this.#t.value=`${this.hour}:${this.minute}:${this.second}`,this.time=`${this.hour}:${this.minute}:${this.second}`;const s=e.getBoundingClientRect().height*t;i.scrollTo({top:s,behavior:"smooth"})}))}#c(e){e.addEventListener("wheel",(()=>{timeout((()=>{const t=e.querySelectorAll("li"),i=t[0].getBoundingClientRect().height,{scrollTop:n}=e,r=Math.floor(n/i);t[r]&&t[r].click()}),100)}))}#m(){const[e,t,i]=this.limitRangeStart.split(":"),[n,r,s]=this.limitRangeEnd.split(":"),a=new Date;if(new Date(a.getFullYear(),a.getMonth(),a.getDate(),e,t,i)>new Date(a.getFullYear(),a.getMonth(),a.getDate(),n,r,s))throw new Error("limit-range-start must be less than limit-range-end");const o=(t,i,r,s)=>{t=Number(t),i=Number(i);let a=0,o=0;if("hour"===s)a=0,o=23;else a=0,o=59,String(t).localeCompare(i)||e===n||(i=0===i?59:i);for(let e=a;e<=o;e++){const n=createElement("li","ea-time-picker_dropdown-item");n.innerText=this.#o(e),r.appendChild(n),e>=t&&e<=i?this.#l(n,e,r,s):n.classList.add("is-disabled")}};o(e,n,this.#n,"hour"),o(t,r,this.#r,"minute"),o(i,s,this.#s,"second"),this.#c(this.#n),this.#c(this.#r),this.#c(this.#s)}#u(){let e=!1;const t=()=>{this.time=this.time,e=!0,this.#a=!0,this.#i.removeEventListener("transitionend",t)};this.#t.addEventListener("focus",(()=>{this.#e.classList.add("is-open"),e||this.#i.addEventListener("transitionend",t)})),window.addEventListener("click",(e=>{this.contains(e.target)?this.#t.shadowRoot.querySelector(".ea-input_inner").focus():this.#e.classList.remove("is-open")}))}connectedCallback(){this.setAttribute("data-ea-component",!0),this.name=this.name,this.width=this.width,this.disabled=this.disabled,this.align=this.align,this.limitRangeStart=this.limitRangeStart,this.limitRangeEnd=this.limitRangeEnd,this.#d(),this.#m(),this.time=this.time,this.#t.value=`${this.hour}:${this.minute}:${this.second}`,this.#u()}}customElements.get("ea-time-picker")||customElements.define("ea-time-picker",EaTimePicker);
+// @ts-nocheck
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+import { createElement } from '../../utils/createElement.js';
+import { timeout } from '../../utils/timeout.js';
+import { stylesheet } from './src/style/stylesheet.js';
+
+import "../ea-input/index.js"
+import '../ea-button/index.js'
+
+export class EaTimePicker extends Base {
+    #container;
+    #timePickerInput;
+
+    #dropdownWrap;
+    #timePickerHourWrap;
+    #timePickerMinuteWrap;
+    #timePickerSecondWrap;
+
+    #timePickerIsInit = false;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class='ea-time-picker_wrap' part='container'>
+                <ea-input part='input' autocomplete="off" readonly prefix-icon="icon-clock"></ea-input>
+                <div class="ea-time-picker_dropdown-wrap" part='dropdown-wrap'>
+                    <div class="ea-time-picker_dropdown-inner-wrap" part='dropdown-inner-wrap'>
+                        <ul class="ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-hour" part='dropdown-time'>
+                        </ul>
+                        <ul class="ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-minute" part='dropdown-time'>
+                        </ul>
+                        <ul class="ea-time-picker_dropdown-inner ea-time-picker_dropdown-inner-second" part='dropdown-time'>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.#container = shadowRoot.querySelector('.ea-time-picker_wrap');
+        this.#timePickerInput = shadowRoot.querySelector('ea-input');
+
+        this.#dropdownWrap = shadowRoot.querySelector('.ea-time-picker_dropdown-wrap');
+        this.#timePickerHourWrap = shadowRoot.querySelector('.ea-time-picker_dropdown-inner-hour');
+        this.#timePickerMinuteWrap = shadowRoot.querySelector('.ea-time-picker_dropdown-inner-minute');
+        this.#timePickerSecondWrap = shadowRoot.querySelector('.ea-time-picker_dropdown-inner-second');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- width 宽度 -------
+    // #region
+    get width() {
+        return this.getAttribute('width') || "200px";
+    }
+
+    set width(value) {
+        this.setAttribute('width', value);
+
+        this.#container.style.width = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- time 时间 -------
+    // #region
+    get time() {
+        return this.getAttribute('time') || '00:00:00';
+    }
+
+    set time(value) {
+        this.setAttribute('time', value);
+
+        const [hour, minute, second] = value.split(':');
+
+        this.hour = hour;
+        this.minute = minute;
+        this.second = second;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- name 属性 -------
+    // #region
+    get name() {
+        return this.getAttribute('name') || 'timePicker';
+    }
+
+    set name(value) {
+        this.setAttribute('name', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- hour 小时 -------
+    // #region
+    get hour() {
+        const attr = this.getAttrNumber('hour');
+        return this.#handleLessThanTen(attr);
+    }
+
+    set hour(value) {
+        this.setAttribute('hour', value);
+
+        this.#handleTimeItemPicker(this.#timePickerHourWrap, value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- minute 分钟 -------
+    // #region
+    get minute() {
+        const attr = this.getAttrNumber('minute');
+        return this.#handleLessThanTen(attr);
+    }
+
+    set minute(value) {
+        this.setAttribute('minute', value);
+
+        this.#handleTimeItemPicker(this.#timePickerMinuteWrap, value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- second 秒 -------
+    // #region
+    get second() {
+        const attr = this.getAttrNumber('second');
+        return this.#handleLessThanTen(attr);
+    }
+
+    set second(value) {
+        this.setAttribute('second', value);
+
+        this.#handleTimeItemPicker(this.#timePickerSecondWrap, value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- value 时间 -------
+    // #region
+    get value() {
+        return this.time;
+    }
+
+    set value(value) {
+        this.time = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled') || false;
+    }
+
+    set disabled(value) {
+        this.setAttribute('disabled', value);
+
+        this.#timePickerInput.disabled = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- align 对齐方式 -------
+    // #region
+    get align() {
+        return this.getAttribute('align') || 'left';
+    }
+
+    set align(value) {
+        this.setAttribute('align', value);
+
+        this.#timePickerInput.shadowRoot.querySelector('input').style.textAlign = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- limit-range-start 限制起始时间 -------
+    // #region
+    get limitRangeStart() {
+        const attr = this.getAttribute('limit-range-start');
+        if (!attr) return "00:00:00";
+        else {
+            const [hour, minute, second] = this.getAttribute('limit-range-start')?.split(':');
+            return `${this.#handleLessThanTen(hour)}:${this.#handleLessThanTen(minute)}:${this.#handleLessThanTen(second)}`;
+        }
+    }
+
+    set limitRangeStart(value) {
+        this.setAttribute('limit-range-start', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- limit-range-end 限制结束时间 -------
+    // #region
+    get limitRangeEnd() {
+        const attr = this.getAttribute('limit-range-end');
+        if (!attr) return "23:59:59"
+        else {
+            const [hour, minute, second] = this.getAttribute('limit-range-end')?.split(':');
+            return `${this.#handleLessThanTen(hour)}:${this.#handleLessThanTen(minute)}:${this.#handleLessThanTen(second)}`;
+        }
+    }
+
+    set limitRangeEnd(value) {
+        this.setAttribute('limit-range-end', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleLessThanTen(num, defaultNum = '00') {
+        num = Number(num);
+        return num < 10 ? `0${num}` : (num || defaultNum);
+    }
+
+    #handleTimeItemPicker(wrap, value) {
+        wrap.querySelectorAll('li').forEach(li => {
+            if (Number(li.innerText) === Number(this.#handleLessThanTen(value))) li.click();
+        });
+    }
+
+    #initElementsStyle() {
+        this.#dropdownWrap.style.width = this.#timePickerInput.getBoundingClientRect().width + "px";
+
+        timeout(() => {
+            this.#container.classList.add('with-transition');
+        }, 50);
+    }
+
+    #handleTimeItemClickEvent(li, index, timeItemWrap, type) {
+        li.addEventListener('click', () => {
+            const lis = timeItemWrap.querySelectorAll('li');
+            lis.forEach(li => {
+                li.classList.remove('is-active');
+            });
+            li.classList.add('is-active');
+
+            const value = this.#handleLessThanTen(index);
+            switch (type) {
+                case 'hour':
+                    this.hour = value;
+                    break;
+                case 'minute':
+                    this.minute = value;
+                    break;
+                case 'second':
+                    this.second = value;
+                    break;
+            }
+
+            if (this.#timePickerIsInit) this.dispatchEvent(new CustomEvent('change', { detail: { time: this.time } }));
+
+            this.#timePickerInput.value = `${this.hour}:${this.minute}:${this.second}`;
+            this.time = `${this.hour}:${this.minute}:${this.second}`;
+
+            const top = li.getBoundingClientRect().height * index;
+            timeItemWrap.scrollTo({
+                top,
+                behavior: 'smooth',
+            });
+        });
+    }
+
+    #handleTimeWrapScroll(wrap) {
+        wrap.addEventListener('wheel', () => {
+            timeout(() => {
+                const lis = wrap.querySelectorAll('li');
+                const height = lis[0].getBoundingClientRect().height;
+                const { scrollTop } = wrap
+                const index = Math.floor(scrollTop / height);
+
+                if (lis[index]) lis[index].click();
+            }, 100);
+        });
+    }
+
+    #initTimerPickerTimeItem() {
+        const [startHour, startMinute, startSecond] = this.limitRangeStart.split(':');
+        const [endHour, endMinute, endSecond] = this.limitRangeEnd.split(':');
+
+        const todayDate = new Date();
+        const startDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate(), startHour, startMinute, startSecond);
+        const endDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate(), endHour, endMinute, endSecond);
+        if (startDate > endDate) throw new Error('limit-range-start must be less than limit-range-end');
+
+        const initTimeItem = (startTime, endTime, wrap, type) => {
+            startTime = Number(startTime);
+            endTime = Number(endTime);
+            let start = 0;
+            let end = 0;
+
+            switch (type) {
+                case 'hour':
+                    start = 0;
+                    end = 23;
+                    break;
+                default:
+                    start = 0;
+                    end = 59;
+                    if (!String(startTime).localeCompare(endTime) && (startHour !== endHour)) endTime = endTime === 0 ? 59 : endTime;
+            }
+
+            for (let i = start; i <= end; i++) {
+                const li = createElement('li', 'ea-time-picker_dropdown-item');
+                li.innerText = this.#handleLessThanTen(i);
+                wrap.appendChild(li);
+
+                if (i >= startTime && i <= endTime) this.#handleTimeItemClickEvent(li, i, wrap, type);
+                else li.classList.add('is-disabled');
+            }
+        }
+
+        initTimeItem(startHour, endHour, this.#timePickerHourWrap, 'hour');
+        initTimeItem(startMinute, endMinute, this.#timePickerMinuteWrap, 'minute');
+        initTimeItem(startSecond, endSecond, this.#timePickerSecondWrap, 'second');
+
+        this.#handleTimeWrapScroll(this.#timePickerHourWrap);
+        this.#handleTimeWrapScroll(this.#timePickerMinuteWrap);
+        this.#handleTimeWrapScroll(this.#timePickerSecondWrap);
+    }
+
+    #initToggleDropdownWrapShow() {
+        let timePickerIsInit = false;
+
+        const dropdownWrapInitCallback = () => {
+            this.time = this.time;
+            timePickerIsInit = true;
+            this.#timePickerIsInit = true;
+            this.#dropdownWrap.removeEventListener('transitionend', dropdownWrapInitCallback);
+        }
+        this.#timePickerInput.addEventListener('focus', () => {
+            this.#container.classList.add('is-open');
+
+            if (!timePickerIsInit) this.#dropdownWrap.addEventListener('transitionend', dropdownWrapInitCallback);
+        });
+
+        window.addEventListener('click', (e) => {
+            if (!this.contains(e.target)) {
+                this.#container.classList.remove('is-open');
+            } else {
+                this.#timePickerInput.shadowRoot.querySelector('.ea-input_inner').focus();
+            }
+        });
+    }
+
+    connectedCallback() {
+        this.setAttribute('data-ea-component', true);
+
+        this.name = this.name;
+
+        this.width = this.width;
+
+        this.disabled = this.disabled;
+
+        this.align = this.align;
+
+        this.limitRangeStart = this.limitRangeStart;
+        this.limitRangeEnd = this.limitRangeEnd;
+
+        this.#initElementsStyle();
+        this.#initTimerPickerTimeItem();
+
+        this.time = this.time;
+        this.#timePickerInput.value = `${this.hour}:${this.minute}:${this.second}`;
+
+        this.#initToggleDropdownWrapShow();
+    }
+}
+
+if (!customElements.get('ea-time-picker')) {
+    customElements.define('ea-time-picker', EaTimePicker);
+}

package/components/ea-time-picker/index.scss

@@ -0,0 +1,110 @@
+.ea-time-picker_wrap {
+  position: relative;
+
+  .ea-time-picker_dropdown-wrap {
+    position: absolute;
+    bottom: -12px;
+    left: 0;
+    transform-origin: center top;
+    transform: translateY(100%) scaleY(0);
+
+    box-sizing: border-box;
+
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+    z-index: 2;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0.5rem;
+      border: 0.5rem solid transparent;
+      border-bottom-color: #fff;
+
+      transform: translateY(-100%);
+    }
+
+    .ea-time-picker_dropdown-inner-wrap {
+      display: flex;
+      position: relative;
+      margin: 1rem 0;
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+
+        transform: translateY(-50%);
+
+        width: 100%;
+      }
+
+      &::before {
+        top: calc(50% - 16px);
+        border-bottom: 1px solid #e4e7ed;
+      }
+
+      &::after {
+        top: calc(50% + 16px);
+        border-bottom: 1px solid #e4e7ed;
+      }
+
+      .ea-time-picker_dropdown-inner {
+        flex: 1;
+        max-height: 190px;
+
+        box-sizing: border-box;
+        padding: 5rem 0;
+
+        text-align: center;
+
+        overflow: auto;
+        scrollbar-width: none;
+
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+        padding-inline-start: 0px;
+        list-style-type: none;
+
+        .ea-time-picker_dropdown-item {
+          height: 32px;
+          line-height: 32px;
+          font-size: 12px;
+          color: #606266;
+          transition: color 0.3s;
+
+          &.is-active {
+            color: #409eff;
+          }
+
+          &.is-disabled {
+            color: #c0c4cc;
+          }
+        }
+      }
+    }
+
+    .ea-time-picker_dropdown-button-group {
+      text-align: right;
+      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+      border-top: 1px solid rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &.is-open {
+    .ea-time-picker_dropdown-wrap {
+      transform: translateY(100%) scaleY(1);
+    }
+  }
+
+  &.with-transition {
+    .ea-time-picker_dropdown-wrap {
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+}