Bilibili-Evolved/min/v-dropdown.vue.min.js
2020-01-31 11:09:46 +08:00

1 line
2.0 KiB
JavaScript

(()=>{return(o,e)=>{const r=`<div class=v-dropdown @click=toggleDropdown() :class={round}><span class=selected>{{ value }}</span><ul class=dropdown-menu :class="{ opened: dropdownOpen }"><li v-for="item in items":key=item :data-value=item @click=select(item)>{{ item }}</li></ul><i class="mdi mdi-chevron-down"></i></div>`;e.applyStyleFromText(`.v-dropdown{--background-color:#eee;position:relative;background-color:var(--background-color);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-width:100px;border-radius:var(--corner-radius)}body.dark .v-dropdown{--background-color:#333}.v-dropdown.round{border-radius:14px;padding:0 4px}.v-dropdown .dropdown-menu{transform-origin:top;transform:translateY(-4px) translateX(-50%);pointer-events:none;opacity:0;position:absolute;top:calc(100% + 2px);left:50%;background-color:var(--background-color);z-index:1;transition:.2s ease-out;box-shadow:rgba(0,0,0,.2) 0 4px 8px 0;border-radius:var(--corner-radius)}.v-dropdown .dropdown-menu.opened{transform:translateY(0) translateX(-50%);pointer-events:initial;opacity:1}.v-dropdown .dropdown-menu li{padding:4px 16px;box-sizing:content-box;white-space:nowrap;min-width:64px;text-align:center;cursor:pointer;color:inherit;background-color:transparent;border-radius:var(--corner-radius)}.v-dropdown .dropdown-menu li:hover{background-color:rgba(0,0,0,.16)}.v-dropdown .mdi-chevron-down{font-size:16pt;line-height:1;transform:rotate(0)}.v-dropdown .dropdown-menu.opened~.mdi-chevron-down{transform:rotate(180deg)}.v-dropdown .selected{user-select:none;padding:4px 8px}`,"v-dropdown-style");return{export:Object.assign({template:r},{props:["items","value","round"],data(){return{dropdownOpen:false}},methods:{toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;if(this.dropdownOpen){document.addEventListener("click",o=>{const e=o.target;if(e===this.$el||this.$el.contains(e)){return}this.dropdownOpen=false},{once:true,capture:true})}},select(o){if(o!==this.value){this.$emit("update:value",o);this.$emit("change",o)}}}})}}})();