ranui
Version:
UI Component library based on `Web Component`
495 lines (494 loc) • 20.9 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { c as createCustomError, H as HTMLElementSSR, i as isDisabled, f as falseList } from "./index-9tJmVuyv.js";
import "./index-CwCtKHVs.js";
const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:var(--ran-input-host-position, relative);display:var(--ran-input-host-display, block);box-sizing:var(--ran-input-host-box-sizing, border-box)}:host([placeholder]) .ran-input-label{transform:var(--ran-input-label-placeholder-transform, translateY( calc(-50% - .43em) ) scale(.8));top:var(--ran-input-label-placeholder-top, 0)}:host .ran-input-label{transform:var(--ran-input-label-transform, translateY(-50%));top:var(--ran-input-label-top, 50%);transition:var(--ran-input-label-transition, all .3s)}.ran-input{box-sizing:var(--ran-input-box-sizing, border-box);position:var(--ran-input-position, relative);display:var(--ran-input-display, flex);width:var(--ran-input-width, 100%);height:var(--ran-input-height, 100%);min-width:var(--ran-input-min-width, 0);padding:var(--ran-input-padding, 0px 0px 0px 4px);color:var(--ran-input-color, #000000d9);font-size:var(--ran-input-font-size, 12px);line-height:var(--ran-input-line-height, 1.5715);background-color:var(--ran-input-background-color, #fff);background-image:var(--ran-input-background-image, none);border:var(--ran-input-border, 1px solid #d9d9d9);border-radius:var(--ran-input-border-radius, 2px);transition:var(--ran-input-transition, all .3s);min-height:var(--ran-input-min-height, 32px)}.ran-input .ran-icon{display:var(--ran-input-icon-display, flex);align-items:var(--ran-input-icon-align-items, center);justify-content:var(--ran-input-icon-justify-content, center)}.ran-input:active{border-color:var(--ran-input-active-border-color, #40a9ff);box-shadow:var(--ran-input-active-box-shadow, 0 0 0 2px rgba(24, 144, 255, .2));border-right-width:var(--ran-input-active-border-right-width, 1px);outline:var(--ran-input-active-outline, 0)}.ran-input:hover{border-color:var(--ran-input-hover-border-color, #40a9ff);border-right-width:var(--ran-input-hover-border-right-width, 1px)}.ran-input>.ran-input-content:hover~.ran-input-label{color:var(--ran-input-label-hover-color, #40a9ff)}.ran-input[value]>.ran-input-label{transform:var(--ran-input-label-value-transform, translateY( calc(-50% - .43em) ) scale(.8));color:var(--ran-input-label-value-color, #00000040)}.ran-input[status=error]{border-color:var(--ran-input-status-error-border-color, #ff4d4f)}.ran-input[status=error]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-status-error-color, #ff4d4f)}.ran-input[status=warning]{border-color:var(--ran-input-status-warning-border-color, #ff7875)}.ran-input[status=warning]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-status-warning-color, #ff7875)}.ran-input[disabled]{color:var(--ran-input-disabled-color, #00000040);background-color:var(--ran-input-disabled-background-color, #f5f5f5);border-color:var(--ran-input-disabled-border-color, #d9d9d9);box-shadow:var(--ran-input-disabled-box-shadow, none);cursor:var(--ran-input-disabled-cursor, not-allowed);opacity:var(--ran-input-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content{color:var(--ran-input-content-disabled-color, #00000040);background-color:var(--ran-input-content-disabled-background-color, #f5f5f5);border-color:var(--ran-input-content-disabled-border-color, #d9d9d9);box-shadow:var(--ran-input-content-disabled-box-shadow, none);cursor:var(--ran-input-content-disabled-cursor, not-allowed);opacity:var(--ran-input-content-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content~.ran-input-label{color:var(--ran-input-label-disabled-color, #00000040);background-color:var(--ran-input-label-disabled-background-color, #f5f5f5)}.ran-input[disabled]>.ran-input-label{color:#999;border-color:var(--ran-input-label-disabled-border-color, #d9d9d9);box-shadow:var(--ran-input-label-disabled-box-shadow, none);cursor:var(--ran-input-label-disabled-cursor, not-allowed)}.ran-input-content{writing-mode:var(--ran-input-content-writing-mode, horizontal-tb);text-rendering:var(--ran-input-content-text-rendering, auto);letter-spacing:var(--ran-input-content-letter-spacing, normal);word-spacing:var(--ran-input-content-word-spacing, normal);text-transform:var(--ran-input-content-text-transform, none);text-indent:var(--ran-input-content-text-indent, 0px);text-shadow:var(--ran-input-content-text-shadow, none);text-align:var(--ran-input-content-text-align, start);cursor:var(--ran-input-content-cursor, text);touch-action:var(--ran-input-content-touch-action, manipulation);-webkit-appearance:var(--ran-input-content--webkit-appearance, none);text-overflow:var(--ran-input-content-text-overflow, ellipsis);box-sizing:var(--ran-input-content-box-sizing, border-box);margin:var(--ran-input-content-margin, 0);font-variant:var(--ran-input-content-font-variant, tabular-nums);list-style:var(--ran-input-content-list-style, none);font-feature-settings:var(--ran-input-content-font-feature-settings, "tnum");position:var(--ran-input-content-position, relative);border:var(--ran-input-content-border, none);width:var(--ran-input-content-width, 100%);height:var(--ran-input-content-height, 100%);min-height:var(--ran-input-content-min-height, 30px);min-width:var(--ran-input-content-min-width, 0);color:var(--ran-input-content-color, #000000d9);font-size:var(--ran-input-content-font-size, 14px);line-height:var(--ran-input-content-line-height, 1.48);background-color:var(--ran-input-content-background-color, #fff);background-image:var(--ran-input-content-background-image, none);transition:var(--ran-input-content-transition, all .3s);outline:var(--ran-input-content-outline, none);border-radius:var(--ran-input-content-border-radius, 2px);padding:var(--ran-input-content-padding, 0 0 0 2px);font-weight:var(--ran-input-content-font-weight, 400)}.ran-input-content:focus,.ran-input-content:hover{border:var(--ran-input-content-hover-border, none);outline:var(--ran-input-content-hover-outline, 0)}.ran-input-content::placeholder{color:var(--ran-input-content-placeholder-color, #999)}.ran-input-content:placeholder-shown~.ran-input-label{transform:var(--ran-input-content-placeholder-label-transform, translateY( calc(-50% - .43em) ) scale(.8))}.ran-input-content:focus~.ran-input-label{transform:var(--ran-input-content-focus-label-transform, translateY( calc(-50% - .43em) ) scale(.8));top:var(--ran-input-content-focus-label-top, 0px)}.ran-input-content::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-input-label{box-sizing:var(--ran-input-label-box-sizing, border-box);pointer-events:var(--ran-input-label-pointer-events, none);position:var(--ran-input-label-position, absolute);font-size:var(--ran-input-label-font-size, 14px);left:var(--ran-input-label-left, 8px);transition:var(--ran-input-label-transition, transform .3s, color .3s, background-color .3s, backdrop-filter .3s);transform-origin:var(--ran-input-label-transform-origin, left);padding:var(--ran-input-label-padding, 0 0);color:var(--ran-input-label-color, #999);background:var(--ran-input-label-background, #fff);opacity:var(--ran-input-label-opacity, .9);transition:var(--ran-input-label-transition, all .3s)}';
class Input extends HTMLElementSSR() {
constructor() {
super();
__publicField(this, "_input");
__publicField(this, "_label");
__publicField(this, "_inputContent");
__publicField(this, "_icon");
/**
* @description: 原生的 input 方法
* @param {Event} event
*/
__publicField(this, "customInput", (event) => {
event.stopPropagation();
event.preventDefault();
const { target, data = "" } = event;
this.value = (target == null ? void 0 : target.value) || data || "";
this.customChange();
this.dispatchEvent(
new CustomEvent("input", {
detail: {
value: this.value
}
})
);
});
/**
* @description: 增加 change 方法，同时兼容大小写的情况
*/
__publicField(this, "customChange", () => {
this.dispatchEvent(
new CustomEvent("change", {
detail: {
value: this.value
}
})
);
});
/**
* @description: 监听 placeholder 属性函数
* @param {string} name
* @param {string} value
*/
__publicField(this, "listenPlaceholder", (name, value) => {
if (name === "placeholder" && this._inputContent) {
if (value != null) {
this._inputContent.setAttribute("placeholder", value);
} else {
this._inputContent.removeAttribute("placeholder");
}
}
});
/**
* @description: 监听 label 属性函数
* @param {string} name
* @param {string} value
*/
__publicField(this, "listenLabel", (name, value) => {
if (name === "label" && this._inputContent) {
if (value != null) {
if (this._label) {
this._label.innerHTML = value;
} else {
this._label = document.createElement("label");
this._label.innerHTML = value;
this._label.setAttribute("class", "ran-input-label");
this._label.setAttribute("part", "ran-input-label");
this._input.appendChild(this._label);
}
} else {
this._input.removeAttribute("label");
if (this._label) {
this._input.removeChild(this._label);
this._label = void 0;
}
}
}
});
/**
* @description: 监听 type 属性
* @param {string} name
* @param {string} value
*/
__publicField(this, "listenType", (name, value) => {
if (name === "type" && this._inputContent) {
if (value) {
this._inputContent.setAttribute("type", value);
} else {
this._inputContent.removeAttribute("type");
this._inputContent.removeAttribute("min");
this._inputContent.removeAttribute("max");
this._inputContent.removeAttribute("step");
}
}
});
/**
* @description: 监听 status 属性
* @param {string} name
* @param {string} value
*/
__publicField(this, "listenStatus", (name, value) => {
if (name === "status" && this._input) {
if (value) {
this._input.setAttribute("status", value);
} else {
this._input.removeAttribute("status");
}
}
});
/**
* @description: 监听 disabled 属性
* @param {string} name
* @param {string} value
*/
__publicField(this, "listenDisabled", (name, value) => {
if (name === "disabled" && this._input) {
if (falseList.includes(value)) {
this._input.removeAttribute("disabled");
} else {
this._input.setAttribute("disabled", "");
this._inputContent.setAttribute("disabled", "");
}
}
});
/**
* @description: 监听 icon 属性
* @param {string} name
* @param {string} value
*/
__publicField(this, "listenIcon", (name, value, oldValue) => {
if (name === "icon" && value && value !== oldValue) {
this.removeAttribute("label");
this.setAttribute("icon", value);
this.dealIcon();
}
});
/**
* @description: 处理 icon 属性的问题
*/
__publicField(this, "dealIcon", () => {
if (!this._icon) {
this._icon = document.createElement("r-icon");
this._icon.setAttribute("class", "ran-icon");
this._inputContent.insertAdjacentElement("beforebegin", this._icon);
}
this.icon && this._icon.setAttribute("name", this.icon);
});
/**
* @description: 聚合监听事件
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
*/
__publicField(this, "listenEvent", (name, oldValue, newValue) => {
this.listenPlaceholder(name, newValue);
this.listenLabel(name, newValue);
this.listenStatus(name, newValue);
this.listenDisabled(name, newValue);
this.listenIcon(name, newValue, oldValue);
if (name === "value" && oldValue !== newValue) {
this._inputContent.value = newValue;
this._input.setAttribute("value", newValue);
}
});
const shadowRoot = this.attachShadow({ mode: "closed" });
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
this._input = document.createElement("div");
this._input.setAttribute("class", "ran-input");
this._input.setAttribute("part", "ran-input");
this._inputContent = document.createElement("input");
this._inputContent.setAttribute("class", "ran-input-content");
this._inputContent.setAttribute("part", "ran-input-content");
this._input.appendChild(this._inputContent);
shadowRoot.appendChild(this._input);
}
static get observedAttributes() {
return [
"label",
"disabled",
"name",
"placeholder",
"type",
"icon",
"value",
"status",
// error warning normal
"prefix",
// 前缀
"suffix",
// 后缀
"allowclear",
// 清除 icon
"count",
// 计算输入的数量
"maxlength",
"showcount",
"onPressEnter",
// 按下回车的回调
"variant",
// filled borderless
"minrows",
// 当 type 等于 TextArea 时
"maxrows"
];
}
/**
* @description: 获取 input 的值
* @return {String}
*/
get value() {
return this.getAttribute("value") || "";
}
/**
* @description: 设置 input 的值
* @param {String} value
*/
set value(value) {
if (!isDisabled(this) && value) {
this.setAttribute("value", value);
this._input.setAttribute("value", value);
} else {
this.removeAttribute("value");
this._input.removeAttribute("value");
}
}
/**
* @description: 获取 input 的占位字符
* @return {String}
*/
get placeholder() {
return this.getAttribute("placeholder") || "";
}
/**
* @description: 设置 input 的占位字符
* @param {String} value
*/
set placeholder(value) {
if (value) {
this.setAttribute("placeholder", value);
} else {
this.removeAttribute("placeholder");
}
}
/**
* @description: input 是否为必选
* @return {String}
*/
get required() {
return this.getAttribute("required") || "";
}
/**
* @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
* @param {*} value
*/
set required(value) {
if (!value || value === "false") {
this.removeAttribute("required");
} else {
this.setAttribute("required", "");
}
}
/**
* @description: 获取 input 上 disabled 属性
* @return {String | null}
*/
get disabled() {
return `${isDisabled(this)}`;
}
/**
* @description: 设置 input 的 disabled 属性
* @param {String} value
*/
set disabled(value) {
if (falseList.includes(value)) {
this.removeAttribute("disabled");
this._input.removeAttribute("disabled");
this._inputContent.removeAttribute("disabled");
} else {
this.setAttribute("disabled", "");
this._input.setAttribute("disabled", "");
this._inputContent.setAttribute("disabled", "");
}
}
/**
* @description: 获取类似于 Metiral Design 的输入体验。
*/
get label() {
return this.getAttribute("label") || "";
}
/**
* @description: 设置类似于 Metiral Design 的输入体验。
*/
set label(value) {
this.setAttribute("label", value);
}
/**
* @description: 获取 input 框的状态
*/
get status() {
return this.getAttribute("status") || "";
}
/**
* @description: 设置 input 框的状态
*/
set status(value) {
if (value) {
this.setAttribute("status", value);
this._input.setAttribute("status", value);
} else {
this.removeAttribute("status");
this._input.removeAttribute("status");
}
}
/**
* @description: 与 form 组件联动时，收集的属性名
* @return {String}
*/
get name() {
return this.getAttribute("name") || "";
}
/**
* @description: 设置 name 属性
* @param {string} value
*/
set name(value) {
this.setAttribute("name", value);
}
/**
* @description: 当 input 类型为 number 类型时，可以获取 min 属性
* @return {String}
*/
get min() {
return this.getAttribute("min") || "";
}
/**
* @description: 当 input 类型为 number 类型时，设置 min 属性
* @param {string} value
*/
set min(value) {
if (this.type === "number") this.setAttribute("min", value);
}
/**
* @description: 当 input 类型为 number 类型时，可以获取 max 属性
* @return {String}
*/
get max() {
return this.getAttribute("max") || "";
}
/**
* @description: 当 input 类型为 number 类型时，设置 max 属性
* @param {string} value
*/
set max(value) {
if (this.type === "number") this.setAttribute("max", value);
}
/**
* @description: 当 input 类型为 number 类型时，可以获取 step 属性
* @return {String}
*/
get step() {
return this.getAttribute("step") || "";
}
/**
* @description: 当 input 类型为 number 类型时，设置 step 属性
* @param {string} value
*/
set step(value) {
if (this.type === "number") this.setAttribute("step", value);
}
/**
* @description: 获取一个 icon
* @return {String}
*/
get icon() {
return this.getAttribute("icon") || "";
}
/**
* @description: 设置 icon 来表示标识
* @param {string|null} value
*/
set icon(value) {
if (value) {
this.setAttribute("icon", value);
} else {
this.removeAttribute("icon");
}
}
/**
* @description: 获取前面的 icon
* @return {String}
*/
get prefix() {
return this.getAttribute("prefix") || "";
}
/**
* @description: 设置前面的 icon 来表示标识
* @param {string|null} value
*/
set prefix(value) {
if (value) {
this.setAttribute("prefix", value);
} else {
this.removeAttribute("prefix");
}
}
/**
* @description: 获取后面的 icon
* @return {String}
*/
get suffix() {
return this.getAttribute("suffix") || "";
}
/**
* @description: 设置后面的 icon 来表示标识
* @param {string|null} value
*/
set suffix(value) {
if (value) {
this.setAttribute("suffix", value);
} else {
this.removeAttribute("suffix");
}
}
/**
* @description: 获取 input 的类型
* @return {string|null}
*/
get type() {
return this.getAttribute("type") || "";
}
/**
* @description: 设置 input 的类型
* @param {string|null} value
*/
set type(value) {
if (value) {
this.setAttribute("type", value);
} else {
this.removeAttribute("type");
}
}
connectedCallback() {
if (this.value) {
this._inputContent.value = this.value;
this._input.setAttribute("value", this.value);
}
if (this.status) {
this._input.setAttribute("status", this.status);
}
if (isDisabled(this)) {
this._input.setAttribute("disabled", "");
this._inputContent.setAttribute("disabled", "");
}
if (this.type) {
this._inputContent.setAttribute("type", this.type);
}
this._inputContent.addEventListener("input", this.customInput);
if (document.readyState === "complete") {
this.dealIcon();
}
}
disconnectCallback() {
this._inputContent.removeEventListener("input", this.customInput);
}
attributeChangedCallback(name, oldValue, newValue) {
this.listenEvent(name, oldValue, newValue);
}
}
function Custom() {
if (typeof window !== "undefined" && !customElements.get("r-input")) {
customElements.define("r-input", Input);
return Input;
} else {
return createCustomError("document is undefined or r-input is exist");
}
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
Input,
default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
Input as I,
index as a,
index$1 as i
};