lawn-ui
Version:
A Vue.js UI Toolkit for Mobile Web
936 lines (935 loc) • 35.1 kB
JavaScript
var __defProp = Object.defineProperty;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
var __assign = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
import {defineComponent, computed, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, renderSlot, createCommentVNode, watch, resolveComponent, createTextVNode, toDisplayString, render, ref, withModifiers, Fragment, renderList, onMounted, withDirectives, vShow, resolveDirective} from "vue";
var _public = "div,\nspan,\np,\ninput,\nimg {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n.lawn-overflow-hidden {\n overflow: hidden !important;\n}\n@-webkit-keyframes topToBottom {\n from {\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n }\n to {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n@keyframes topToBottom {\n from {\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n }\n to {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n}\n@-webkit-keyframes bottomToTop {\n from {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n to {\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n }\n}\n@keyframes bottomToTop {\n from {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n to {\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n }\n}\n@-webkit-keyframes leftToRight {\n from {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n to {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n}\n@keyframes leftToRight {\n from {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n to {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n}\n@-webkit-keyframes rightToLeft {\n from {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n to {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@keyframes rightToLeft {\n from {\n -webkit-transform: translateX(100%);\n transform: translateX(100%);\n }\n to {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n@-webkit-keyframes openToClose {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@keyframes openToClose {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n@-webkit-keyframes closeToOpen {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes closeToOpen {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.lawnVertical-enter-active,\n.lawnVertical-leave-active {\n -webkit-animation: topToBottom 300ms;\n animation: topToBottom 300ms;\n}\n.lawnVertical-enter-from,\n.lawnVertical-leave-to {\n -webkit-animation: bottomToTop 300ms;\n animation: bottomToTop 300ms;\n}\n.lawnHorizontal-enter-active,\n.lawnHorizontal-leave-active {\n -webkit-animation: rightToLeft 300ms;\n animation: rightToLeft 300ms;\n}\n.lawnHorizontal-enter-from,\n.lawnHorizontal-leave-to {\n -webkit-animation: leftToRight 300ms;\n animation: leftToRight 300ms;\n}\n";
var _var = ":root {\n --font-size-xs: 10px;\n --font-size-sm: 12px;\n --font-size-md: 14px;\n --font-size-lg: 16px;\n --color-primary: #2979ff;\n --color-info: #00bcd4;\n --color-success: #4caf50;\n --color-warning: #ff9800;\n --color-danger: #f44336;\n --color-disabled: #e0e0e0;\n --color-black: #000000;\n --color-white: #ffffff;\n --border-color: #dddddd;\n --border-radius: 4px;\n --content-border-radius: 16px;\n --content-padding: 10px;\n --content-margin: 10px;\n --bangs-padding-bottom: 24px;\n}\n";
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function(obj2) {
return typeof obj2;
};
} else {
_typeof = function(obj2) {
return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
};
}
return _typeof(obj);
}
function _classCallCheck(instance2, Constructor) {
if (!(instance2 instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor)
descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps)
_defineProperties(Constructor.prototype, protoProps);
if (staticProps)
_defineProperties(Constructor, staticProps);
return Constructor;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++)
arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]")
return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function processOptions(value) {
var options;
if (typeof value === "function") {
options = {
callback: value
};
} else {
options = value;
}
return options;
}
function throttle(callback, delay) {
var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
var timeout;
var lastState;
var currentArgs;
var throttled = function throttled2(state) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
currentArgs = args;
if (timeout && state === lastState)
return;
var leading = options.leading;
if (typeof leading === "function") {
leading = leading(state, lastState);
}
if ((!timeout || state !== lastState) && leading) {
callback.apply(void 0, [state].concat(_toConsumableArray(currentArgs)));
}
lastState = state;
clearTimeout(timeout);
timeout = setTimeout(function() {
callback.apply(void 0, [state].concat(_toConsumableArray(currentArgs)));
timeout = 0;
}, delay);
};
throttled._clear = function() {
clearTimeout(timeout);
timeout = null;
};
return throttled;
}
function deepEqual(val1, val2) {
if (val1 === val2)
return true;
if (_typeof(val1) === "object") {
for (var key in val1) {
if (!deepEqual(val1[key], val2[key])) {
return false;
}
}
return true;
}
return false;
}
var VisibilityState = /* @__PURE__ */ function() {
function VisibilityState2(el, options, vnode2) {
_classCallCheck(this, VisibilityState2);
this.el = el;
this.observer = null;
this.frozen = false;
this.createObserver(options, vnode2);
}
_createClass(VisibilityState2, [{
key: "createObserver",
value: function createObserver(options, vnode2) {
var _this = this;
if (this.observer) {
this.destroyObserver();
}
if (this.frozen)
return;
this.options = processOptions(options);
this.callback = function(result, entry) {
_this.options.callback(result, entry);
if (result && _this.options.once) {
_this.frozen = true;
_this.destroyObserver();
}
};
if (this.callback && this.options.throttle) {
var _ref = this.options.throttleOptions || {}, _leading = _ref.leading;
this.callback = throttle(this.callback, this.options.throttle, {
leading: function leading(state) {
return _leading === "both" || _leading === "visible" && state || _leading === "hidden" && !state;
}
});
}
this.oldResult = void 0;
this.observer = new IntersectionObserver(function(entries) {
var entry = entries[0];
if (entries.length > 1) {
var intersectingEntry = entries.find(function(e) {
return e.isIntersecting;
});
if (intersectingEntry) {
entry = intersectingEntry;
}
}
if (_this.callback) {
var result = entry.isIntersecting && entry.intersectionRatio >= _this.threshold;
if (result === _this.oldResult)
return;
_this.oldResult = result;
_this.callback(result, entry);
}
}, this.options.intersection);
vnode2.context.$nextTick(function() {
if (_this.observer) {
_this.observer.observe(_this.el);
}
});
}
}, {
key: "destroyObserver",
value: function destroyObserver() {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
}
if (this.callback && this.callback._clear) {
this.callback._clear();
this.callback = null;
}
}
}, {
key: "threshold",
get: function get() {
return this.options.intersection && typeof this.options.intersection.threshold === "number" ? this.options.intersection.threshold : 0;
}
}]);
return VisibilityState2;
}();
function bind(el, _ref2, vnode2) {
var value = _ref2.value;
if (!value)
return;
if (typeof IntersectionObserver === "undefined") {
console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");
} else {
var state = new VisibilityState(el, value, vnode2);
el._vue_visibilityState = state;
}
}
function update(el, _ref3, vnode2) {
var value = _ref3.value, oldValue = _ref3.oldValue;
if (deepEqual(value, oldValue))
return;
var state = el._vue_visibilityState;
if (!value) {
unbind(el);
return;
}
if (state) {
state.createObserver(value, vnode2);
} else {
bind(el, {
value
}, vnode2);
}
}
function unbind(el) {
var state = el._vue_visibilityState;
if (state) {
state.destroyObserver();
delete el._vue_visibilityState;
}
}
var ObserveVisibility = {
bind,
update,
unbind
};
function install$1(Vue) {
Vue.directive("observe-visibility", ObserveVisibility);
}
var plugin = {
version: "1.0.0",
install: install$1
};
var GlobalVue = null;
if (typeof window !== "undefined") {
GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
const CLSNAME = "lawn-overflow-hidden";
let defaultZIndex = 2e3;
const useLockScroll = () => {
const lock = () => {
document.body.classList.add(CLSNAME);
};
const unlock = () => {
document.body.classList.remove(CLSNAME);
};
return [lock, unlock];
};
const useBangsIphone = () => {
return /iphone/gi.test(navigator.userAgent) && (screen.height >= 812 && screen.width >= 375);
};
const useZIndex = () => {
return defaultZIndex++;
};
var index_vue_vue_type_style_index_0_lang$6 = ".ln-popup {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n -webkit-overflow-scrolling: touch;\n background-color: rgba(0, 0, 0, 0.7);\n}\n.ln-popup-content {\n pointer-events: auto;\n}\n.lawnPopuopShow-enter-active,\n.lawnPopuopShow-leave-active {\n -webkit-transition: opacity 0.5s;\n transition: opacity 0.5s;\n}\n.lawnPopuopShow-enter-from,\n.lawnPopuopShow-leave-to {\n -webkit-transition: opacity 1;\n transition: opacity 1;\n opacity: 0;\n}\n";
const _sfc_main$6 = defineComponent({
name: "ln-popup",
props: {
show: {
type: Boolean,
default: false
},
transitionName: {
type: String,
default: "lawnPopuopShow"
},
customStyle: {
type: Object,
default: () => {
}
},
customClass: {
type: String,
default: ""
},
luckScroll: {
type: Boolean,
default: false
},
teleportDom: {
type: String,
default: "body"
},
canPointBg: {
type: Boolean,
default: true
}
},
emits: [
"update:show",
"clickPopup",
"beforeEnter",
"beforeLeave",
"aftereEnter",
"afterLeave"
],
setup(props, {emit}) {
const zIndex = computed(() => {
return useZIndex();
});
const [lockScroll, unlockScroll] = useLockScroll();
const clickPopupHandle = (e) => {
emit("clickPopup", e);
};
const onBeforeEnter = (e) => {
if (props.luckScroll) {
lockScroll();
}
emit("beforeEnter", e);
};
const onBeforeLeave = (e) => {
emit("beforeLeave", e);
};
const onAfterEnter = (e) => {
emit("aftereEnter", e);
};
const onAfterLeave = (e) => {
emit("afterLeave", e);
unlockScroll();
};
const controlStyle = {
"pointer-events": props.canPointBg ? "auto" : "none"
};
return {
zIndex,
onBeforeEnter,
onBeforeLeave,
onAfterEnter,
onAfterLeave,
clickPopupHandle,
controlStyle
};
}
});
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(Teleport, {to: _ctx.teleportDom}, [
createVNode(Transition, {
name: _ctx.transitionName,
onBeforeEnter: _ctx.onBeforeEnter,
onBeforeLeave: _ctx.onBeforeLeave,
onAfterEnter: _ctx.onAfterEnter,
onAfterLeave: _ctx.onAfterLeave
}, {
default: withCtx(() => [
_ctx.show ? (openBlock(), createBlock("div", {
key: 0,
class: ["ln-popup", _ctx.customClass],
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.clickPopupHandle && _ctx.clickPopupHandle(...args)),
style: __assign(__assign({"z-index": _ctx.zIndex}, _ctx.customStyle), _ctx.controlStyle)
}, [
createVNode("div", {
class: "ln-popup-content",
style: {"z-index": _ctx.zIndex + 1}
}, [
renderSlot(_ctx.$slots, "default")
], 4)
], 6)) : createCommentVNode("", true)
]),
_: 3
}, 8, ["name", "onBeforeEnter", "onBeforeLeave", "onAfterEnter", "onAfterLeave"])
], 8, ["to"]);
}
_sfc_main$6.render = _sfc_render$6;
var index_vue_vue_type_style_index_0_lang$5 = ".ln-toast {\n position: fixed;\n min-height: 30px;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n min-width: 50px;\n background-color: rgba(0, 0, 0, 0.7);\n color: #fff;\n font-size: var(--font-size-md);\n border-radius: var(--border-radius);\n padding: var(--content-padding);\n}\n.ln-toast_center {\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.ln-toast_top {\n top: 10vh;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n}\n.ln-toast_bottom {\n bottom: 10vh;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n}\n";
const _sfc_main$5 = defineComponent({
name: "ln-toast",
components: {
lnPopup: _sfc_main$6
},
props: {
show: {
type: Boolean,
default: false
},
duration: {
type: Number,
default: 2e3
},
position: {
type: String,
default: "center"
},
canPointBg: {
type: Boolean,
default: false
},
instanceText: {
type: String,
default: ""
}
},
emits: ["update:show", "closeToask", "close"],
setup(props, {emit}) {
const toastPopupStyle = {
"background-color": "transparent"
};
const toastPosition = {
top: "ln-toast_top",
center: "ln-toast_center",
bottom: "ln-toast_bottom"
};
const openToask = () => {
emit("update:show", true);
};
const closeToask = () => {
emit("update:show", false);
};
watch(() => props.show, () => {
if (props.duration !== 0) {
let timer = setTimeout(() => {
emit("update:show", false);
clearTimeout(timer);
}, props.duration);
}
});
return {
toastPopupStyle,
toastPosition: toastPosition[props.position],
openToask,
closeToask
};
}
});
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ln_popup = resolveComponent("ln-popup");
return openBlock(), createBlock(_component_ln_popup, {
show: _ctx.show,
"onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.show = $event),
customStyle: _ctx.toastPopupStyle,
canPointBg: _ctx.canPointBg
}, {
default: withCtx(() => [
createVNode("div", {
class: ["ln-toast", _ctx.toastPosition]
}, [
createTextVNode(toDisplayString(_ctx.instanceText), 1),
renderSlot(_ctx.$slots, "default")
], 2)
]),
_: 3
}, 8, ["show", "customStyle", "canPointBg"]);
}
_sfc_main$5.render = _sfc_render$5;
const container = document.documentElement;
const vnode = createVNode(_sfc_main$5);
render(vnode, container);
const instance = vnode.component;
const Toast = (option) => {
if (typeof option === "string") {
instance.props.instanceText = option;
} else if (typeof option === "object") {
instance.props.instanceText = option.msg;
instance.props.duration = option.duration || 2e3;
} else {
return new TypeError("Toast Option TypeError");
}
instance.props.show = true;
setTimeout(() => {
instance.props.show = false;
}, instance.props.duration);
};
var index_vue_vue_type_style_index_0_lang$4 = ".ln-dialog {\n position: fixed;\n top: 50%;\n left: 50%;\n width: 300px;\n overflow: hidden;\n font-size: 16px;\n background-color: #fff;\n border-radius: 16px;\n -webkit-transform: translate3d(-50%, -50%, 0);\n transform: translate3d(-50%, -50%, 0);\n}\n.ln-dialog-header {\n padding: var(--content-padding);\n max-height: 20px;\n text-align: center;\n font-size: var(--font-size-lg);\n}\n.ln-dialog-main {\n padding: var(--content-padding);\n font-size: var(--font-size-md);\n}\n.ln-dialog-footer {\n font-size: var(--font-size-lg);\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n text-align: center;\n height: 40px;\n line-height: 40px;\n}\n.ln-dialog-footer-btn {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n -ms-flex: 1;\n flex: 1;\n position: relative;\n}\n.ln-dialog-footer-btn::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 200%;\n height: 200%;\n -webkit-transform: scale(0.5);\n transform: scale(0.5);\n -webkit-transform-origin: left top;\n transform-origin: left top;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-top: 1px solid var(--border-color);\n border-right: 1px solid var(--border-color);\n}\n.ln-dialog-footer-btn:last-child::after {\n border-right: none;\n}\n";
const _sfc_main$4 = defineComponent({
name: "ln-dialog",
components: {
lnPopup: _sfc_main$6
},
props: {
show: {
type: Boolean,
default: false
},
canPointBg: {
type: Boolean,
default: true
},
headerText: {
type: String,
default: "\u6807\u9898"
},
autoClose: {
type: Boolean,
default: true
},
leftBtnText: {
type: String,
default: "\u53D6\u6D88"
},
centerBtnText: {
type: String,
default: ""
},
rightBtnText: {
type: String,
default: "\u786E\u5B9A"
},
customStyle: {
type: Object,
default: () => {
}
},
customClass: {
type: String,
default: ""
}
},
emits: ["update:show", "clickBtnHandle"],
setup(props, {emit}) {
const clickHandle = (val) => {
emit("clickBtnHandle", val);
if (val === "left" && props.autoClose) {
emit("update:show", false);
}
};
return {
clickHandle
};
}
});
const _hoisted_1$3 = {
key: 0,
class: "ln-dialog-header"
};
const _hoisted_2$2 = {class: "ln-dialog-main"};
const _hoisted_3 = {class: "ln-dialog-footer"};
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ln_popup = resolveComponent("ln-popup");
return openBlock(), createBlock(_component_ln_popup, {
show: _ctx.show,
"onUpdate:show": _cache[4] || (_cache[4] = ($event) => _ctx.show = $event),
luckScroll: true,
canPointBg: _ctx.canPointBg
}, {
default: withCtx(() => [
createVNode("div", {
class: ["ln-dialog", _ctx.customClass],
style: _ctx.customStyle
}, [
_ctx.headerText !== "" ? (openBlock(), createBlock("header", _hoisted_1$3, toDisplayString(_ctx.headerText), 1)) : createCommentVNode("", true),
createVNode("main", _hoisted_2$2, [
renderSlot(_ctx.$slots, "default")
]),
createVNode("footer", _hoisted_3, [
_ctx.leftBtnText !== "" ? (openBlock(), createBlock("div", {
key: 0,
class: "ln-dialog-footer-btn",
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.clickHandle("left"))
}, toDisplayString(_ctx.leftBtnText), 1)) : createCommentVNode("", true),
_ctx.centerBtnText !== "" ? (openBlock(), createBlock("div", {
key: 1,
class: "ln-dialog-footer-btn",
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.clickHandle("center"))
}, toDisplayString(_ctx.centerBtnText), 1)) : createCommentVNode("", true),
_ctx.rightBtnText !== "" ? (openBlock(), createBlock("div", {
key: 2,
class: "ln-dialog-footer-btn",
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.clickHandle("right"))
}, toDisplayString(_ctx.rightBtnText), 1)) : createCommentVNode("", true)
])
], 6)
]),
_: 3
}, 8, ["show", "canPointBg"]);
}
_sfc_main$4.render = _sfc_render$4;
var index_vue_vue_type_style_index_0_lang$3 = ".ln-action-sheet {\n position: fixed;\n width: 100%;\n min-height: 90px;\n bottom: 0;\n left: 0;\n background-color: var(--color-white);\n border-radius: var(--content-border-radius) var(--content-border-radius) 0 0;\n color: var(--color-black);\n}\n.ln-action-sheet-item {\n height: 45px;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ln-action-sheet-bangs {\n padding-bottom: var(--bangs-padding-bottom);\n}\n";
const _sfc_main$3 = defineComponent({
name: "ln-action-sheet",
components: {
lnPopup: _sfc_main$6
},
props: {
show: {
type: Boolean,
default: false
},
canPointBg: {
type: Boolean,
default: true
},
transitionName: {
type: String,
default: "lawnVertical"
},
clickOverlayClose: {
type: Boolean,
default: true
},
sheetList: {
type: [Array, Object],
default: () => {
return [];
}
},
clickItemClose: {
type: Boolean,
default: true
},
sheetTitle: {
type: String,
default: "\u6807\u9898"
}
},
emits: ["update:show", "clickContent", "clickOverlay", "selectItem"],
setup(props, {emit}) {
let showAction = ref(false);
const clickPopupHandle = () => {
if (props.clickOverlayClose) {
showAction.value = false;
setTimeout(() => {
emit("update:show", false);
}, 100);
}
emit("clickOverlay");
};
const clickActionSheet = () => {
emit("clickContent");
};
const selectActionHandle = (item, index) => {
if (props.clickItemClose) {
showAction.value = false;
setTimeout(() => {
emit("update:show", false);
}, 100);
}
emit("selectItem", item, index);
};
watch(() => props.show, () => {
setTimeout(() => {
showAction.value = props.show;
}, 0);
});
const isBangs = useBangsIphone();
return {
clickPopupHandle,
clickActionSheet,
selectActionHandle,
showAction,
isBangs
};
}
});
const _hoisted_1$2 = {
key: 0,
class: "ln-action-sheet-item"
};
const _hoisted_2$1 = {
key: 1,
class: "ln-action-sheet-list"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ln_popup = resolveComponent("ln-popup");
return openBlock(), createBlock(_component_ln_popup, {
show: _ctx.show,
"onUpdate:show": _cache[2] || (_cache[2] = ($event) => _ctx.show = $event),
luckScroll: true,
canPointBg: _ctx.canPointBg,
onClickPopup: _ctx.clickPopupHandle
}, {
default: withCtx(() => [
createVNode(Transition, {name: "lawnVertical"}, {
default: withCtx(() => [
_ctx.showAction ? (openBlock(), createBlock("div", {
key: 0,
class: ["ln-action-sheet", _ctx.isBangs ? "ln-action-sheet-bangs" : ""],
onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.clickActionSheet && _ctx.clickActionSheet(...args), ["stop"]))
}, [
_ctx.sheetTitle ? (openBlock(), createBlock("div", _hoisted_1$2, toDisplayString(_ctx.sheetTitle), 1)) : createCommentVNode("", true),
_ctx.sheetList.length > 0 ? (openBlock(), createBlock("div", _hoisted_2$1, [
(openBlock(true), createBlock(Fragment, null, renderList(_ctx.sheetList, (item, index) => {
return openBlock(), createBlock("div", {
class: "ln-action-sheet-item",
key: index,
onClick: ($event) => _ctx.selectActionHandle(item, index)
}, [
createVNode("div", {
innerHTML: item.label
}, null, 8, ["innerHTML"])
], 8, ["onClick"]);
}), 128))
])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default")
], 2)) : createCommentVNode("", true)
]),
_: 3
})
]),
_: 1
}, 8, ["show", "canPointBg", "onClickPopup"]);
}
_sfc_main$3.render = _sfc_render$3;
var index_vue_vue_type_style_index_0_lang$2 = ".ln-pull-refresh-container {\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n}\n.ln-pull-refresh-end {\n -webkit-transition: -webkit-transform 500ms ease 0s;\n transition: -webkit-transform 500ms ease 0s;\n transition: transform 500ms ease 0s;\n transition: transform 500ms ease 0s, -webkit-transform 500ms ease 0s;\n}\n";
const _sfc_main$2 = defineComponent({
name: "ln-pull-refresh",
data() {
return {};
},
props: {
isLoading: {
type: Boolean,
default: false
},
maxDistance: {
type: Number,
default: 200
},
triggerDistance: {
type: Number,
default: 200
}
},
emits: ["refresh"],
setup(props, {emit}) {
onMounted(() => {
});
const startLocation = ref(0);
const isRefresh = ref(false);
const moveDistance = ref(0);
const scrollContainer = ref(null);
const isCanLoading = ref(false);
const handlerTouchStart = (e) => {
startLocation.value = e.touches[0].pageY;
isRefresh.value = true;
};
const handlerTouchMove = (e) => {
const touchPageY = Math.floor(e.touches[0].pageY - startLocation.value);
moveDistance.value = touchPageY;
scrollContainer.value.style.transform = `translateY(${moveDistance.value / 2}px)`;
};
const handlerTouchEnd = (e) => {
if (Math.abs(moveDistance.value) < props.triggerDistance) {
isRefresh.value = false;
resetTouch();
} else {
isCanLoading.value = true;
isRefresh.value = false;
scrollContainer.value.style.transform = `translateY(${moveDistance.value / 2}px)`;
emit("refresh");
moveDistance.value = 0;
}
};
const resetTouch = () => {
isCanLoading.value = false;
scrollContainer.value.style.transform = "translateY(0px)";
};
watch(() => props.isLoading, () => {
if (!props.isLoading) {
resetTouch();
}
});
return {
handlerTouchStart,
handlerTouchMove,
handlerTouchEnd,
startLocation,
isRefresh,
moveDistance,
scrollContainer,
isCanLoading
};
}
});
const _hoisted_1$1 = {class: "ln-pull-refresh"};
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock("div", _hoisted_1$1, [
createVNode("div", {
class: ["ln-pull-refresh-container", _ctx.isCanLoading ? "ln-pull-refresh-end" : ""],
onTouchstart: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handlerTouchStart && _ctx.handlerTouchStart(...args), ["stop"])),
onTouchmove: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handlerTouchMove && _ctx.handlerTouchMove(...args), ["stop"])),
onTouchend: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handlerTouchEnd && _ctx.handlerTouchEnd(...args), ["stop"])),
ref: "scrollContainer"
}, [
withDirectives(createVNode("div", null, "\u677E\u624B\u5F00\u59CB\u5237\u65B0", 512), [
[vShow, _ctx.isRefresh]
]),
withDirectives(createVNode("div", null, "\u52A0\u8F7D\u4E2D", 512), [
[vShow, _ctx.isCanLoading]
]),
renderSlot(_ctx.$slots, "default")
], 34)
]);
}
_sfc_main$2.render = _sfc_render$2;
var index_vue_vue_type_style_index_0_lang$1 = ".ln-infinite-scroll {\n width: 100%;\n height: 100%;\n overflow: scroll;\n}\n.ln-infinite-scroll_observe {\n width: 1px;\n height: 1px;\n}\n";
const _sfc_main$1 = defineComponent({
name: "ln-infinite-scroll",
props: {
isFinish: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
setup(props, {emit}) {
const visibilityChanged = (isVisible) => {
if (!isVisible || props.isFinish || props.isLoading) {
return;
}
console.log("isVisible", isVisible);
emit("onLoading");
};
return {
visibilityChanged
};
},
emits: ["onLoading"]
});
const _hoisted_1 = {class: "ln-infinite-scroll"};
const _hoisted_2 = {
key: 0,
class: "ln-infinite-scroll_observe"
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_observe_visibility = resolveDirective("observe-visibility");
return openBlock(), createBlock("main", _hoisted_1, [
renderSlot(_ctx.$slots, "default"),
!_ctx.isFinish ? withDirectives((openBlock(), createBlock("footer", _hoisted_2, null, 512)), [
[_directive_observe_visibility, _ctx.visibilityChanged]
]) : createCommentVNode("", true)
]);
}
_sfc_main$1.render = _sfc_render$1;
var index_vue_vue_type_style_index_0_lang = "";
const _sfc_main = defineComponent({
name: "ln-lazy-img",
props: {
src: {
type: String,
default: ""
},
defaultSrc: {
type: String,
default: ""
},
errorUrl: {
type: String,
default: ""
},
alt: {
type: String,
default: ""
},
customClass: {
type: String,
default: ""
},
customStyle: {
type: Object,
default: () => {
}
}
},
emits: ["imgError"],
setup(props, {emit}) {
const imgSrc = ref("");
imgSrc.value = props.defaultSrc;
const imgLoadingHandle = (e) => {
};
const imgErrorHandle = (e) => {
console.error("imgError", e);
imgSrc.value = props.errorUrl || props.defaultSrc;
emit("imgError", e);
};
const visibilityChanged = (isVisible) => {
if (isVisible) {
imgSrc.value = props.src;
}
};
return {
imgErrorHandle,
visibilityChanged,
imgSrc,
imgLoadingHandle
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _directive_observe_visibility = resolveDirective("observe-visibility");
return withDirectives((openBlock(), createBlock("img", {
class: [_ctx.customClass, "ln-lazy-img"],
src: _ctx.imgSrc,
alt: _ctx.alt,
onError: _cache[1] || (_cache[1] = (...args) => _ctx.imgErrorHandle && _ctx.imgErrorHandle(...args)),
onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.imgLoadingHandle && _ctx.imgLoadingHandle(...args))
}, null, 42, ["src", "alt"])), [
[_directive_observe_visibility, {
callback: _ctx.visibilityChanged,
once: true
}]
]);
}
_sfc_main.render = _sfc_render;
function install(Vue) {
const packages = [_sfc_main$6, _sfc_main$5, _sfc_main$4, _sfc_main$3, _sfc_main$2, _sfc_main$1, _sfc_main];
packages.forEach((item) => {
Vue.component(item.name, item);
});
Vue.directive("observe-visibility", {
beforeMount: (el, binding, vnode2) => {
vnode2.context = binding.instance;
ObserveVisibility.bind(el, binding, vnode2);
},
updated: ObserveVisibility.update,
unmounted: ObserveVisibility.unbind
});
Vue.config.globalProperties.$toast = Toast;
}
export default install;
export {_sfc_main$4 as Dialog, _sfc_main$6 as Popup, _sfc_main$5 as Toast, _sfc_main$3 as actionSheet, _sfc_main$1 as infiniteScroll, _sfc_main as lazyImg, _sfc_main$2 as pullRefresh};