18/5/1404 2
This commit is contained in:
@@ -0,0 +1,349 @@
|
||||
import _extends from '@babel/runtime/helpers/esm/extends';
|
||||
import ResizeObserver$1 from 'resize-observer-polyfill';
|
||||
import { defineComponent, shallowRef, ref, watch, computed, createVNode, reactive, getCurrentInstance } from 'vue';
|
||||
import { P as PropTypes, a7 as findDOMNode } from './server.mjs';
|
||||
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
||||
|
||||
const ResizeObserver = defineComponent({
|
||||
compatConfig: {
|
||||
MODE: 3
|
||||
},
|
||||
name: "ResizeObserver",
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
onResize: Function
|
||||
},
|
||||
emits: ["resize"],
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
const state = reactive({
|
||||
width: 0,
|
||||
height: 0,
|
||||
offsetHeight: 0,
|
||||
offsetWidth: 0
|
||||
});
|
||||
let currentElement = null;
|
||||
let resizeObserver = null;
|
||||
const destroyObserver = () => {
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
resizeObserver = null;
|
||||
}
|
||||
};
|
||||
const onResize = (entries) => {
|
||||
const {
|
||||
onResize: onResize2
|
||||
} = props;
|
||||
const target = entries[0].target;
|
||||
const {
|
||||
width,
|
||||
height
|
||||
} = target.getBoundingClientRect();
|
||||
const {
|
||||
offsetWidth,
|
||||
offsetHeight
|
||||
} = target;
|
||||
const fixedWidth = Math.floor(width);
|
||||
const fixedHeight = Math.floor(height);
|
||||
if (state.width !== fixedWidth || state.height !== fixedHeight || state.offsetWidth !== offsetWidth || state.offsetHeight !== offsetHeight) {
|
||||
const size = {
|
||||
width: fixedWidth,
|
||||
height: fixedHeight,
|
||||
offsetWidth,
|
||||
offsetHeight
|
||||
};
|
||||
_extends(state, size);
|
||||
if (onResize2) {
|
||||
Promise.resolve().then(() => {
|
||||
onResize2(_extends(_extends({}, size), {
|
||||
offsetWidth,
|
||||
offsetHeight
|
||||
}), target);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const instance = getCurrentInstance();
|
||||
const registerObserver = () => {
|
||||
const {
|
||||
disabled
|
||||
} = props;
|
||||
if (disabled) {
|
||||
destroyObserver();
|
||||
return;
|
||||
}
|
||||
const element = findDOMNode(instance);
|
||||
const elementChanged = element !== currentElement;
|
||||
if (elementChanged) {
|
||||
destroyObserver();
|
||||
currentElement = element;
|
||||
}
|
||||
if (!resizeObserver && element) {
|
||||
resizeObserver = new ResizeObserver$1(onResize);
|
||||
resizeObserver.observe(element);
|
||||
}
|
||||
};
|
||||
watch(() => props.disabled, () => {
|
||||
registerObserver();
|
||||
}, {
|
||||
flush: "post"
|
||||
});
|
||||
return () => {
|
||||
var _a;
|
||||
return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0];
|
||||
};
|
||||
}
|
||||
});
|
||||
var __rest$1 = function(s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
const BaseInputInner = defineComponent({
|
||||
compatConfig: {
|
||||
MODE: 3
|
||||
},
|
||||
// inheritAttrs: false,
|
||||
props: {
|
||||
disabled: PropTypes.looseBool,
|
||||
type: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
tag: {
|
||||
type: String,
|
||||
default: "input"
|
||||
},
|
||||
size: PropTypes.string,
|
||||
onChange: Function,
|
||||
onInput: Function,
|
||||
onBlur: Function,
|
||||
onFocus: Function,
|
||||
onKeydown: Function,
|
||||
onCompositionstart: Function,
|
||||
onCompositionend: Function,
|
||||
onKeyup: Function,
|
||||
onPaste: Function,
|
||||
onMousedown: Function
|
||||
},
|
||||
emits: ["change", "input", "blur", "keydown", "focus", "compositionstart", "compositionend", "keyup", "paste", "mousedown"],
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
expose
|
||||
} = _ref;
|
||||
const inputRef = shallowRef(null);
|
||||
const focus = () => {
|
||||
if (inputRef.value) {
|
||||
inputRef.value.focus();
|
||||
}
|
||||
};
|
||||
const blur = () => {
|
||||
if (inputRef.value) {
|
||||
inputRef.value.blur();
|
||||
}
|
||||
};
|
||||
const setSelectionRange = (start, end, direction) => {
|
||||
var _a;
|
||||
(_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end, direction);
|
||||
};
|
||||
const select = () => {
|
||||
var _a;
|
||||
(_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.select();
|
||||
};
|
||||
expose({
|
||||
focus,
|
||||
blur,
|
||||
input: inputRef,
|
||||
setSelectionRange,
|
||||
select,
|
||||
getSelectionStart: () => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.selectionStart;
|
||||
},
|
||||
getSelectionEnd: () => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.selectionEnd;
|
||||
},
|
||||
getScrollTop: () => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.scrollTop;
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
const {
|
||||
tag: Tag,
|
||||
value
|
||||
} = props, restProps = __rest$1(props, ["tag", "value"]);
|
||||
return createVNode(Tag, _objectSpread(_objectSpread({}, restProps), {}, {
|
||||
"ref": inputRef,
|
||||
"value": value
|
||||
}), null);
|
||||
};
|
||||
}
|
||||
});
|
||||
function styleObjectToString(style) {
|
||||
return Object.keys(style).reduce((acc, name) => {
|
||||
const styleValue = style[name];
|
||||
if (typeof styleValue === "undefined" || styleValue === null) {
|
||||
return acc;
|
||||
}
|
||||
acc += `${name}: ${style[name]};`;
|
||||
return acc;
|
||||
}, "");
|
||||
}
|
||||
var __rest = function(s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
const BaseInput = defineComponent({
|
||||
compatConfig: {
|
||||
MODE: 3
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
disabled: PropTypes.looseBool,
|
||||
type: PropTypes.string,
|
||||
value: PropTypes.any,
|
||||
lazy: PropTypes.bool.def(true),
|
||||
tag: {
|
||||
type: String,
|
||||
default: "input"
|
||||
},
|
||||
size: PropTypes.string,
|
||||
style: PropTypes.oneOfType([String, Object]),
|
||||
class: PropTypes.string
|
||||
},
|
||||
emits: ["change", "input", "blur", "keydown", "focus", "compositionstart", "compositionend", "keyup", "paste", "mousedown"],
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
emit,
|
||||
attrs,
|
||||
expose
|
||||
} = _ref;
|
||||
const inputRef = shallowRef(null);
|
||||
const renderValue = ref();
|
||||
const isComposing = ref(false);
|
||||
watch([() => props.value, isComposing], () => {
|
||||
if (isComposing.value) return;
|
||||
renderValue.value = props.value;
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
const handleChange = (e) => {
|
||||
emit("change", e);
|
||||
};
|
||||
const onCompositionstart = (e) => {
|
||||
isComposing.value = true;
|
||||
e.target.composing = true;
|
||||
emit("compositionstart", e);
|
||||
};
|
||||
const onCompositionend = (e) => {
|
||||
isComposing.value = false;
|
||||
e.target.composing = false;
|
||||
emit("compositionend", e);
|
||||
const event = (void 0).createEvent("HTMLEvents");
|
||||
event.initEvent("input", true, true);
|
||||
e.target.dispatchEvent(event);
|
||||
handleChange(e);
|
||||
};
|
||||
const handleInput = (e) => {
|
||||
if (isComposing.value && props.lazy) {
|
||||
renderValue.value = e.target.value;
|
||||
return;
|
||||
}
|
||||
emit("input", e);
|
||||
};
|
||||
const handleBlur = (e) => {
|
||||
emit("blur", e);
|
||||
};
|
||||
const handleFocus = (e) => {
|
||||
emit("focus", e);
|
||||
};
|
||||
const focus = () => {
|
||||
if (inputRef.value) {
|
||||
inputRef.value.focus();
|
||||
}
|
||||
};
|
||||
const blur = () => {
|
||||
if (inputRef.value) {
|
||||
inputRef.value.blur();
|
||||
}
|
||||
};
|
||||
const handleKeyDown = (e) => {
|
||||
emit("keydown", e);
|
||||
};
|
||||
const handleKeyUp = (e) => {
|
||||
emit("keyup", e);
|
||||
};
|
||||
const setSelectionRange = (start, end, direction) => {
|
||||
var _a;
|
||||
(_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end, direction);
|
||||
};
|
||||
const select = () => {
|
||||
var _a;
|
||||
(_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.select();
|
||||
};
|
||||
expose({
|
||||
focus,
|
||||
blur,
|
||||
input: computed(() => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.input;
|
||||
}),
|
||||
setSelectionRange,
|
||||
select,
|
||||
getSelectionStart: () => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getSelectionStart();
|
||||
},
|
||||
getSelectionEnd: () => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getSelectionEnd();
|
||||
},
|
||||
getScrollTop: () => {
|
||||
var _a;
|
||||
return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getScrollTop();
|
||||
}
|
||||
});
|
||||
const handleMousedown = (e) => {
|
||||
emit("mousedown", e);
|
||||
};
|
||||
const handlePaste = (e) => {
|
||||
emit("paste", e);
|
||||
};
|
||||
const styleString = computed(() => {
|
||||
return props.style && typeof props.style !== "string" ? styleObjectToString(props.style) : props.style;
|
||||
});
|
||||
return () => {
|
||||
const {
|
||||
style,
|
||||
lazy
|
||||
} = props, restProps = __rest(props, ["style", "lazy"]);
|
||||
return createVNode(BaseInputInner, _objectSpread(_objectSpread(_objectSpread({}, restProps), attrs), {}, {
|
||||
"style": styleString.value,
|
||||
"onInput": handleInput,
|
||||
"onChange": handleChange,
|
||||
"onBlur": handleBlur,
|
||||
"onFocus": handleFocus,
|
||||
"ref": inputRef,
|
||||
"value": renderValue.value,
|
||||
"onCompositionstart": onCompositionstart,
|
||||
"onCompositionend": onCompositionend,
|
||||
"onKeyup": handleKeyUp,
|
||||
"onKeydown": handleKeyDown,
|
||||
"onPaste": handlePaste,
|
||||
"onMousedown": handleMousedown
|
||||
}), null);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export { BaseInput as B, ResizeObserver as R };
|
||||
//# sourceMappingURL=BaseInput-8pfzphkE.mjs.map
|
||||
Reference in New Issue
Block a user