ddu_components
Version:
27 lines (25 loc) • 2.39 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(`.ddu_input_group{position:relative;margin-top:20px}.ddu_input_group .input{font-size:16px;padding:10px 10px 10px 5px;display:block;width:200px;border:none;border-bottom:1px solid #515151;background:transparent}.ddu_input_group .input:focus{outline:none}.ddu_input_group label{color:#999;font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.ddu_input_group .input:focus~label,.ddu_input_group .input:valid~label{top:-20px;font-size:14px;color:#5264ae}.ddu_input_group .bar{position:relative;display:block;width:200px}.ddu_input_group .bar:before,.ddu_input_group .bar:after{content:"";height:2px;width:0;bottom:1px;position:absolute;background:#5264ae;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.ddu_input_group .bar:before{left:50%}.ddu_input_group .bar:after{right:50%}.ddu_input_group .input:focus~.bar:before,.ddu_input_group .input:focus~.bar:after{width:50%}.ddu_input_group .highlight{position:absolute;height:60%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.ddu_input_group .input:focus~.highlight{animation:inputHighlighter .3s ease}@keyframes inputHighlighter{0%{background:#5264ae}to{width:0;background:transparent}}
.theme-light .ddu_input_group input{border-bottom:1px solid #515151}.theme-dark .ddu_input_group input{border-bottom:1px solid red}.theme-custom .ddu_input_group input{border-bottom:1px solid yellow}`)),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
import { openBlock as l, createElementBlock as n, createElementVNode as e } from "vue";
/* empty css */
const o = { class: "ddu_input_group" }, a = ["value"], c = /* @__PURE__ */ e("span", { class: "highlight" }, null, -1), u = /* @__PURE__ */ e("span", { class: "bar" }, null, -1), _ = /* @__PURE__ */ e("label", null, "Name", -1), m = {
__name: "index",
props: ["value"],
setup(t) {
const s = t;
return (i, p) => (l(), n("div", o, [
e("input", {
required: "",
type: "text",
class: "input",
value: s.value
}, null, 8, a),
c,
u,
_
]));
}
};
export {
m as default
};