+ el[key] = '';
+ el.removeAttribute(key);
+ return;
+ }
+ else if (type === 'number') {
+ // e.g.
![]()
+ el[key] = 0;
+ el.removeAttribute(key);
+ return;
+ }
+ }
+ // some properties perform value validation and throw
+ try {
+ el[key] = value;
+ }
+ catch (e) {
+ if ((process.env.NODE_ENV !== 'production')) {
+ warn$1(`Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
+ `value ${value} is invalid.`, e);
+ }
+ }
}
- function _createClass(Constructor, protoProps, staticProps) {
- if (protoProps) _defineProperties(Constructor.prototype, protoProps);
- if (staticProps) _defineProperties(Constructor, staticProps);
- return Constructor;
+ // Async edge case fix requires storing an event listener's attach timestamp.
+ let _getNow = Date.now;
+ // Determine what event timestamp the browser is using. Annoyingly, the
+ // timestamp can either be hi-res (relative to page load) or low-res
+ // (relative to UNIX epoch), so in order to compare time we have to use the
+ // same timestamp type when saving the flush timestamp.
+ if (typeof document !== 'undefined' &&
+ _getNow() > document.createEvent('Event').timeStamp) {
+ // if the low-res timestamp which is bigger than the event timestamp
+ // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+ // and we need to use the hi-res version for event listeners as well.
+ _getNow = () => performance.now();
+ }
+ // To avoid the overhead of repeatedly calling performance.now(), we cache
+ // and use the same timestamp for all event listeners attached in the same tick.
+ let cachedNow = 0;
+ const p = Promise.resolve();
+ const reset = () => {
+ cachedNow = 0;
+ };
+ const getNow = () => cachedNow || (p.then(reset), (cachedNow = _getNow()));
+ function addEventListener(el, event, handler, options) {
+ el.addEventListener(event, handler, options);
+ }
+ function removeEventListener(el, event, handler, options) {
+ el.removeEventListener(event, handler, options);
+ }
+ function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
+ // vei = vue event invokers
+ const invokers = el._vei || (el._vei = {});
+ const existingInvoker = invokers[rawName];
+ if (nextValue && existingInvoker) {
+ // patch
+ existingInvoker.value = nextValue;
+ }
+ else {
+ const [name, options] = parseName(rawName);
+ if (nextValue) {
+ // add
+ const invoker = (invokers[rawName] = createInvoker(nextValue, instance));
+ addEventListener(el, name, invoker, options);
+ }
+ else if (existingInvoker) {
+ // remove
+ removeEventListener(el, name, existingInvoker, options);
+ invokers[rawName] = undefined;
+ }
+ }
+ }
+ const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+ function parseName(name) {
+ let options;
+ if (optionsModifierRE.test(name)) {
+ options = {};
+ let m;
+ while ((m = name.match(optionsModifierRE))) {
+ name = name.slice(0, name.length - m[0].length);
+ options[m[0].toLowerCase()] = true;
+ }
+ }
+ return [name.slice(2).toLowerCase(), options];
+ }
+ function createInvoker(initialValue, instance) {
+ const invoker = (e) => {
+ // async edge case #6566: inner click event triggers patch, event handler
+ // attached to outer element during patch, and triggered again. This
+ // happens because browsers fire microtask ticks between event propagation.
+ // the solution is simple: we save the timestamp when a handler is attached,
+ // and the handler would only fire if the event passed to it was fired
+ // AFTER it was attached.
+ const timeStamp = e.timeStamp || _getNow();
+ if (timeStamp >= invoker.attached - 1) {
+ callWithAsyncErrorHandling$1(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]);
+ }
+ };
+ invoker.value = initialValue;
+ invoker.attached = getNow();
+ return invoker;
+ }
+ function patchStopImmediatePropagation(e, value) {
+ if (isArray$1(value)) {
+ const originalStop = e.stopImmediatePropagation;
+ e.stopImmediatePropagation = () => {
+ originalStop.call(e);
+ e._stopped = true;
+ };
+ return value.map(fn => (e) => !e._stopped && fn(e));
+ }
+ else {
+ return value;
+ }
}
- function _toConsumableArray(arr) {
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+ const nativeOnRE = /^on[a-z]/;
+ const forcePatchProp = (_, key) => key === 'value';
+ const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
+ switch (key) {
+ // special
+ case 'class':
+ patchClass(el, nextValue, isSVG);
+ break;
+ case 'style':
+ patchStyle(el, prevValue, nextValue);
+ break;
+ default:
+ if (isOn$1(key)) {
+ // ignore v-model listeners
+ if (!isModelListener(key)) {
+ patchEvent(el, key, prevValue, nextValue, parentComponent);
+ }
+ }
+ else if (shouldSetAsProp(el, key, nextValue, isSVG)) {
+ patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren);
+ }
+ else {
+ // special case for
with
+ // :true-value & :false-value
+ // store value as dom properties since non-string values will be
+ // stringified.
+ if (key === 'true-value') {
+ el._trueValue = nextValue;
+ }
+ else if (key === 'false-value') {
+ el._falseValue = nextValue;
+ }
+ patchAttr(el, key, nextValue, isSVG);
+ }
+ break;
+ }
+ };
+ function shouldSetAsProp(el, key, value, isSVG) {
+ if (isSVG) {
+ // most keys must be set as attribute on svg elements to work
+ // ...except innerHTML
+ if (key === 'innerHTML') {
+ return true;
+ }
+ // or native onclick with function values
+ if (key in el && nativeOnRE.test(key) && isFunction$1(value)) {
+ return true;
+ }
+ return false;
+ }
+ // spellcheck and draggable are numerated attrs, however their
+ // corresponding DOM properties are actually booleans - this leads to
+ // setting it with a string "false" value leading it to be coerced to
+ // `true`, so we need to always treat them as attributes.
+ // Note that `contentEditable` doesn't have this problem: its DOM
+ // property is also enumerated string values.
+ if (key === 'spellcheck' || key === 'draggable') {
+ return false;
+ }
+ // #1787 form as an attribute must be a string, while it accepts an Element as
+ // a prop
+ if (key === 'form' && typeof value === 'string') {
+ return false;
+ }
+ // #1526
must be set as attribute
+ if (key === 'list' && el.tagName === 'INPUT') {
+ return false;
+ }
+ // native onclick with string value, must be set as attribute
+ if (nativeOnRE.test(key) && isString$1(value)) {
+ return false;
+ }
+ return key in el;
}
- 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;
- }
- }
+ const rendererOptions = extend$1({ patchProp, forcePatchProp }, nodeOps);
- function _iterableToArray(iter) {
- if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+ function initDev$1() {
+ const target = getGlobalThis$1();
+ target.__VUE__ = true;
+ setDevtoolsHook$1(target.__VUE_DEVTOOLS_GLOBAL_HOOK__);
+ {
+ initCustomFormatter$1();
+ }
}
- function _nonIterableSpread() {
- throw new TypeError("Invalid attempt to spread non-iterable instance");
- }
+ // This entry exports the runtime only, and is built as
+ (process.env.NODE_ENV !== 'production') && initDev$1();
function processOptions(value) {
var options;
@@ -455,7 +5720,7 @@
}
}, this.options.intersection); // Wait for the element to be in document
- vnode.context.$nextTick(function () {
+ nextTick$1(function () {
if (_this.observer) {
_this.observer.observe(_this.el);
}
@@ -528,9 +5793,9 @@
}
var ObserveVisibility = {
- bind: bind,
- update: update,
- unbind: unbind
+ beforeMount: bind,
+ updated: update,
+ unmounted: unbind
};
function install$1(Vue) {
@@ -544,7 +5809,7 @@
var plugin$1 = {
// eslint-disable-next-line no-undef
- version: "0.4.6",
+ version: "0.9.0-ropez.1",
install: install$1
};
@@ -650,15 +5915,16 @@
} catch (e) {}
}
- var uid = 0;
- var script = {
+ var uid$2 = 0;
+ var script$1 = {
name: 'RecycleScroller',
components: {
- ResizeObserver: ResizeObserver$1
+ ResizeObserver: script
},
directives: {
ObserveVisibility: ObserveVisibility
},
+ emits: ['update', 'resize', 'visible', 'hidden'],
props: _objectSpread2({}, props, {
itemSize: {
type: Number,
@@ -781,25 +6047,21 @@
_this.ready = true;
});
},
- beforeDestroy: function beforeDestroy() {
+ beforeUnmount: function beforeUnmount() {
this.removeListeners();
},
methods: {
addView: function addView(pool, index, item, key, type) {
- var view = {
+ var view = vue.shallowReactive({
item: item,
- position: 0
- };
- var nonReactive = {
- id: uid++,
- index: index,
- used: true,
- key: key,
- type: type
- };
- Object.defineProperty(view, 'nr', {
- configurable: false,
- value: nonReactive
+ position: 0,
+ nr: {
+ id: uid$2++,
+ index: index,
+ used: true,
+ key: key,
+ type: type
+ }
});
pool.push(view);
return view;
@@ -1176,224 +6438,73 @@
}
};
- function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
- if (typeof shadowMode !== 'boolean') {
- createInjectorSSR = createInjector;
- createInjector = shadowMode;
- shadowMode = false;
- }
- // Vue.extend constructor export interop.
- const options = typeof script === 'function' ? script.options : script;
- // render functions
- if (template && template.render) {
- options.render = template.render;
- options.staticRenderFns = template.staticRenderFns;
- options._compiled = true;
- // functional template
- if (isFunctionalTemplate) {
- options.functional = true;
- }
- }
- // scopedId
- if (scopeId) {
- options._scopeId = scopeId;
- }
- let hook;
- if (moduleIdentifier) {
- // server build
- hook = function (context) {
- // 2.3 injection
- context =
- context || // cached call
- (this.$vnode && this.$vnode.ssrContext) || // stateful
- (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
- // 2.2 with runInNewContext: true
- if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
- context = __VUE_SSR_CONTEXT__;
- }
- // inject component styles
- if (style) {
- style.call(this, createInjectorSSR(context));
- }
- // register component module identifier for async chunk inference
- if (context && context._registeredComponents) {
- context._registeredComponents.add(moduleIdentifier);
- }
- };
- // used by ssr in case component is cached and beforeCreate
- // never gets called
- options._ssrRegister = hook;
- }
- else if (style) {
- hook = shadowMode
- ? function (context) {
- style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
- }
- : function (context) {
- style.call(this, createInjector(context));
- };
- }
- if (hook) {
- if (options.functional) {
- // register for functional component in vue file
- const originalRender = options.render;
- options.render = function renderWithStyleInjection(h, context) {
- hook.call(context);
- return originalRender(h, context);
- };
- }
- else {
- // inject component registration as beforeCreate hook
- const existing = options.beforeCreate;
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
- }
- }
- return script;
- }
-
- /* script */
- const __vue_script__ = script;
- /* template */
- var __vue_render__ = function() {
- var _obj, _obj$1;
- var _vm = this;
- var _h = _vm.$createElement;
- var _c = _vm._self._c || _h;
- return _c(
- "div",
- {
- directives: [
- {
- name: "observe-visibility",
- rawName: "v-observe-visibility",
- value: _vm.handleVisibilityChange,
- expression: "handleVisibilityChange"
- }
- ],
- staticClass: "vue-recycle-scroller",
- class:
- ((_obj = {
- ready: _vm.ready,
- "page-mode": _vm.pageMode
- }),
- (_obj["direction-" + _vm.direction] = true),
- _obj),
- on: {
- "&scroll": function($event) {
- return _vm.handleScroll($event)
- }
- }
- },
- [
- _vm.$slots.before
- ? _c(
- "div",
- { staticClass: "vue-recycle-scroller__slot" },
- [_vm._t("before")],
- 2
- )
- : _vm._e(),
- _vm._v(" "),
- _c(
- "div",
- {
- ref: "wrapper",
- staticClass: "vue-recycle-scroller__item-wrapper",
- style:
- ((_obj$1 = {}),
- (_obj$1[_vm.direction === "vertical" ? "minHeight" : "minWidth"] =
- _vm.totalSize + "px"),
- _obj$1)
- },
- _vm._l(_vm.pool, function(view) {
- return _c(
- "div",
- {
- key: view.nr.id,
- staticClass: "vue-recycle-scroller__item-view",
- class: { hover: _vm.hoverKey === view.nr.key },
- style: _vm.ready
- ? {
- transform:
- "translate" +
- (_vm.direction === "vertical" ? "Y" : "X") +
- "(" +
- view.position +
- "px)"
- }
- : null,
- on: {
- mouseenter: function($event) {
- _vm.hoverKey = view.nr.key;
- },
- mouseleave: function($event) {
- _vm.hoverKey = null;
- }
- }
- },
- [
- _vm._t("default", null, {
- item: view.item,
- index: view.nr.index,
- active: view.nr.used
- })
- ],
- 2
- )
- }),
- 0
- ),
- _vm._v(" "),
- _vm.$slots.after
- ? _c(
- "div",
- { staticClass: "vue-recycle-scroller__slot" },
- [_vm._t("after")],
- 2
- )
- : _vm._e(),
- _vm._v(" "),
- _c("ResizeObserver", { on: { notify: _vm.handleResize } })
- ],
- 1
- )
+ var _hoisted_1$1 = {
+ key: 0,
+ class: "vue-recycle-scroller__slot"
+ };
+ var _hoisted_2 = {
+ key: 1,
+ class: "vue-recycle-scroller__slot"
};
- var __vue_staticRenderFns__ = [];
- __vue_render__._withStripped = true;
-
- /* style */
- const __vue_inject_styles__ = undefined;
- /* scoped */
- const __vue_scope_id__ = undefined;
- /* module identifier */
- const __vue_module_identifier__ = undefined;
- /* functional template */
- const __vue_is_functional_template__ = false;
- /* style inject */
-
- /* style inject SSR */
-
- /* style inject shadow dom */
-
-
-
- const __vue_component__ = normalizeComponent(
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
- __vue_inject_styles__,
- __vue_script__,
- __vue_scope_id__,
- __vue_is_functional_template__,
- __vue_module_identifier__,
- false,
- undefined,
- undefined,
- undefined
- );
+ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+ var _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
+
+ var _directive_observe_visibility = vue.resolveDirective("observe-visibility");
+
+ return vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
+ class: ["vue-recycle-scroller", _defineProperty({
+ ready: $data.ready,
+ 'page-mode': $props.pageMode
+ }, "direction-".concat(_ctx.direction), true)],
+ onScrollPassive: _cache[2] || (_cache[2] = function () {
+ return $options.handleScroll && $options.handleScroll.apply($options, arguments);
+ })
+ }, [_ctx.$slots.before ? (vue.openBlock(), vue.createBlock("div", _hoisted_1$1, [vue.renderSlot(_ctx.$slots, "before")])) : vue.createCommentVNode("v-if", true), vue.createVNode("div", {
+ ref: "wrapper",
+ style: _defineProperty({}, _ctx.direction === 'vertical' ? 'minHeight' : 'minWidth', $data.totalSize + 'px'),
+ class: "vue-recycle-scroller__item-wrapper"
+ }, [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($data.pool, function (view) {
+ return vue.openBlock(), vue.createBlock("div", {
+ key: view.nr.id,
+ style: $data.ready ? {
+ transform: "translate".concat(_ctx.direction === 'vertical' ? 'Y' : 'X', "(").concat(view.position, "px)")
+ } : null,
+ class: ["vue-recycle-scroller__item-view", {
+ hover: $data.hoverKey === view.nr.key
+ }],
+ onMouseenter: function onMouseenter($event) {
+ return $data.hoverKey = view.nr.key;
+ },
+ onMouseleave: _cache[1] || (_cache[1] = function ($event) {
+ return $data.hoverKey = null;
+ })
+ }, [vue.renderSlot(_ctx.$slots, "default", {
+ item: view.item,
+ index: view.nr.index,
+ active: view.nr.used
+ })], 46
+ /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+ , ["onMouseenter"]);
+ }), 128
+ /* KEYED_FRAGMENT */
+ ))], 4
+ /* STYLE */
+ ), _ctx.$slots.after ? (vue.openBlock(), vue.createBlock("div", _hoisted_2, [vue.renderSlot(_ctx.$slots, "after")])) : vue.createCommentVNode("v-if", true), vue.createVNode(_component_ResizeObserver, {
+ onNotify: $options.handleResize
+ }, null, 8
+ /* PROPS */
+ , ["onNotify"])], 34
+ /* CLASS, HYDRATE_EVENTS */
+ )), [[_directive_observe_visibility, $options.handleVisibilityChange]]);
+ }
- var script$1 = {
+ script$1.render = render$1;
+ script$1.__file = "src/components/RecycleScroller.vue";
+
+ var script$2 = {
name: 'DynamicScroller',
components: {
- RecycleScroller: __vue_component__
+ RecycleScroller: script$1
},
inheritAttrs: false,
provide: function provide() {
@@ -1429,6 +6540,7 @@
vscrollResizeObserver: this.$_resizeObserver
};
},
+ emits: ['resize', 'visible', 'vscroll:update'],
props: _objectSpread2({}, props, {
minItemSize: {
type: [Number, String],
@@ -1575,98 +6687,48 @@
}
};
- /* script */
- const __vue_script__$1 = script$1;
-
- /* template */
- var __vue_render__$1 = function() {
- var _vm = this;
- var _h = _vm.$createElement;
- var _c = _vm._self._c || _h;
- return _c(
- "RecycleScroller",
- _vm._g(
- _vm._b(
- {
- ref: "scroller",
- attrs: {
- items: _vm.itemsWithSize,
- "min-item-size": _vm.minItemSize,
- direction: _vm.direction,
- "key-field": "id"
- },
- on: { resize: _vm.onScrollerResize, visible: _vm.onScrollerVisible },
- scopedSlots: _vm._u(
- [
- {
- key: "default",
- fn: function(ref) {
- var itemWithSize = ref.item;
- var index = ref.index;
- var active = ref.active;
- return [
- _vm._t("default", null, null, {
- item: itemWithSize.item,
- index: index,
- active: active,
- itemWithSize: itemWithSize
- })
- ]
- }
- }
- ],
- null,
- true
- )
- },
- "RecycleScroller",
- _vm.$attrs,
- false
- ),
- _vm.listeners
- ),
- [
- _vm._v(" "),
- _c("template", { slot: "before" }, [_vm._t("before")], 2),
- _vm._v(" "),
- _c("template", { slot: "after" }, [_vm._t("after")], 2)
- ],
- 2
- )
- };
- var __vue_staticRenderFns__$1 = [];
- __vue_render__$1._withStripped = true;
-
- /* style */
- const __vue_inject_styles__$1 = undefined;
- /* scoped */
- const __vue_scope_id__$1 = undefined;
- /* module identifier */
- const __vue_module_identifier__$1 = undefined;
- /* functional template */
- const __vue_is_functional_template__$1 = false;
- /* style inject */
-
- /* style inject SSR */
-
- /* style inject shadow dom */
-
-
-
- const __vue_component__$1 = normalizeComponent(
- { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
- __vue_inject_styles__$1,
- __vue_script__$1,
- __vue_scope_id__$1,
- __vue_is_functional_template__$1,
- __vue_module_identifier__$1,
- false,
- undefined,
- undefined,
- undefined
- );
+ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+ var _component_RecycleScroller = vue.resolveComponent("RecycleScroller");
+
+ return vue.openBlock(), vue.createBlock(_component_RecycleScroller, vue.mergeProps({
+ ref: "scroller",
+ items: $options.itemsWithSize,
+ "min-item-size": $props.minItemSize,
+ direction: _ctx.direction,
+ "key-field": "id"
+ }, _ctx.$attrs, {
+ onResize: $options.onScrollerResize,
+ onVisible: $options.onScrollerVisible
+ }, vue.toHandlers($options.listeners)), {
+ default: vue.withCtx(function (_ref) {
+ var itemWithSize = _ref.item,
+ index = _ref.index,
+ active = _ref.active;
+ return [vue.renderSlot(_ctx.$slots, "default", {
+ item: itemWithSize.item,
+ index: index,
+ active: active,
+ itemWithSize: itemWithSize
+ })];
+ }),
+ before: vue.withCtx(function () {
+ return [vue.renderSlot(_ctx.$slots, "before")];
+ }),
+ after: vue.withCtx(function () {
+ return [vue.renderSlot(_ctx.$slots, "after")];
+ }),
+ _: 1
+ /* STABLE */
+
+ }, 16
+ /* FULL_PROPS */
+ , ["items", "min-item-size", "direction", "onResize", "onVisible"]);
+ }
- var script$2 = {
+ script$2.render = render$2;
+ script$2.__file = "src/components/DynamicScroller.vue";
+
+ var script$3 = {
name: 'DynamicScrollerItem',
inject: ['vscrollData', 'vscrollParent', 'vscrollResizeObserver'],
props: {
@@ -1679,8 +6741,8 @@
default: false
},
- /**
- * Indicates if the view is actively used to display an item.
+ /**
+ * Indicates if the view is actively used to display an item.
*/
active: {
type: Boolean,
@@ -1775,7 +6837,7 @@
this.observeSize();
}
},
- beforeDestroy: function beforeDestroy() {
+ beforeUnmount: function beforeUnmount() {
this.vscrollParent.$off('vscroll:update', this.onVscrollUpdate);
this.vscrollParent.$off('vscroll:update-size', this.onVscrollUpdateSize);
this.unobserveSize();
@@ -1872,39 +6934,7 @@
}
};
- /* script */
- const __vue_script__$2 = script$2;
-
- /* template */
-
- /* style */
- const __vue_inject_styles__$2 = undefined;
- /* scoped */
- const __vue_scope_id__$2 = undefined;
- /* module identifier */
- const __vue_module_identifier__$2 = undefined;
- /* functional template */
- const __vue_is_functional_template__$2 = undefined;
- /* style inject */
-
- /* style inject SSR */
-
- /* style inject shadow dom */
-
-
-
- const __vue_component__$2 = normalizeComponent(
- {},
- __vue_inject_styles__$2,
- __vue_script__$2,
- __vue_scope_id__$2,
- __vue_is_functional_template__$2,
- __vue_module_identifier__$2,
- false,
- undefined,
- undefined,
- undefined
- );
+ script$3.__file = "src/components/DynamicScrollerItem.vue";
function IdState () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -1913,14 +6943,7 @@
return vm.item.id;
} : _ref$idProp;
- var store = {};
- var vm = new Vue({
- data: function data() {
- return {
- store: store
- };
- }
- }); // @vue/component
+ var store = vue.reactive({}); // @vue/component
return {
data: function data() {
@@ -1959,16 +6982,16 @@
this.$_updateIdState();
},
methods: {
- /**
- * Initialize an idState
- * @param {number|string} id Unique id for the data
+ /**
+ * Initialize an idState
+ * @param {number|string} id Unique id for the data
*/
$_idStateInit: function $_idStateInit(id) {
var factory = this.$options.idState;
if (typeof factory === 'function') {
var data = factory.call(this, this);
- vm.$set(store, id, data);
+ store[id] = data;
this.$_id = id;
return data;
} else {
@@ -1976,8 +6999,8 @@
}
},
- /**
- * Ensure idState is created and up-to-date
+ /**
+ * Ensure idState is created and up-to-date
*/
$_updateIdState: function $_updateIdState() {
var id = this.$_getId();
@@ -1999,17 +7022,17 @@
}
function registerComponents(Vue, prefix) {
- Vue.component("".concat(prefix, "recycle-scroller"), __vue_component__);
- Vue.component("".concat(prefix, "RecycleScroller"), __vue_component__);
- Vue.component("".concat(prefix, "dynamic-scroller"), __vue_component__$1);
- Vue.component("".concat(prefix, "DynamicScroller"), __vue_component__$1);
- Vue.component("".concat(prefix, "dynamic-scroller-item"), __vue_component__$2);
- Vue.component("".concat(prefix, "DynamicScrollerItem"), __vue_component__$2);
+ Vue.component("".concat(prefix, "recycle-scroller"), script$1);
+ Vue.component("".concat(prefix, "RecycleScroller"), script$1);
+ Vue.component("".concat(prefix, "dynamic-scroller"), script$2);
+ Vue.component("".concat(prefix, "DynamicScroller"), script$2);
+ Vue.component("".concat(prefix, "dynamic-scroller-item"), script$3);
+ Vue.component("".concat(prefix, "DynamicScrollerItem"), script$3);
}
var plugin$2 = {
// eslint-disable-next-line no-undef
- version: "1.0.10",
+ version: "1.0.99-ropez.2",
install: function install(Vue, options) {
var finalOptions = Object.assign({}, {
installComponents: true,
@@ -2040,10 +7063,10 @@
GlobalVue$2.use(plugin$2);
}
- exports.DynamicScroller = __vue_component__$1;
- exports.DynamicScrollerItem = __vue_component__$2;
+ exports.DynamicScroller = script$2;
+ exports.DynamicScrollerItem = script$3;
exports.IdState = IdState;
- exports.RecycleScroller = __vue_component__;
+ exports.RecycleScroller = script$1;
exports.default = plugin$2;
Object.defineProperty(exports, '__esModule', { value: true });
diff --git a/dist/vue-virtual-scroller.umd.js.map b/dist/vue-virtual-scroller.umd.js.map
index 7aca6a78..eec889e6 100644
--- a/dist/vue-virtual-scroller.umd.js.map
+++ b/dist/vue-virtual-scroller.umd.js.map
@@ -1 +1 @@
-{"version":3,"file":"vue-virtual-scroller.umd.js","sources":["../src/config.js","../node_modules/vue-resize/dist/vue-resize.esm.js","../node_modules/vue-observe-visibility/dist/vue-observe-visibility.esm.js","../node_modules/scrollparent/scrollparent.js","../src/components/common.js","../src/utils.js","../src/components/RecycleScroller.vue","../node_modules/vue-runtime-helpers/dist/normalize-component.mjs","../src/components/DynamicScroller.vue","../src/components/DynamicScrollerItem.vue","../src/mixins/IdState.js","../src/index.js"],"sourcesContent":["export default {\n itemsLimit: 1000,\n}\n","function getInternetExplorerVersion() {\n\tvar ua = window.navigator.userAgent;\n\n\tvar msie = ua.indexOf('MSIE ');\n\tif (msie > 0) {\n\t\t// IE 10 or older => return version number\n\t\treturn parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);\n\t}\n\n\tvar trident = ua.indexOf('Trident/');\n\tif (trident > 0) {\n\t\t// IE 11 => return version number\n\t\tvar rv = ua.indexOf('rv:');\n\t\treturn parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);\n\t}\n\n\tvar edge = ua.indexOf('Edge/');\n\tif (edge > 0) {\n\t\t// Edge (IE 12+) => return version number\n\t\treturn parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);\n\t}\n\n\t// other browser\n\treturn -1;\n}\n\nvar isIE = void 0;\n\nfunction initCompat() {\n\tif (!initCompat.init) {\n\t\tinitCompat.init = true;\n\t\tisIE = getInternetExplorerVersion() !== -1;\n\t}\n}\n\nvar ResizeObserver = { render: function render() {\n\t\tvar _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: \"resize-observer\", attrs: { \"tabindex\": \"-1\" } });\n\t}, staticRenderFns: [], _scopeId: 'data-v-b329ee4c',\n\tname: 'resize-observer',\n\n\tmethods: {\n\t\tcompareAndNotify: function compareAndNotify() {\n\t\t\tif (this._w !== this.$el.offsetWidth || this._h !== this.$el.offsetHeight) {\n\t\t\t\tthis._w = this.$el.offsetWidth;\n\t\t\t\tthis._h = this.$el.offsetHeight;\n\t\t\t\tthis.$emit('notify');\n\t\t\t}\n\t\t},\n\t\taddResizeHandlers: function addResizeHandlers() {\n\t\t\tthis._resizeObject.contentDocument.defaultView.addEventListener('resize', this.compareAndNotify);\n\t\t\tthis.compareAndNotify();\n\t\t},\n\t\tremoveResizeHandlers: function removeResizeHandlers() {\n\t\t\tif (this._resizeObject && this._resizeObject.onload) {\n\t\t\t\tif (!isIE && this._resizeObject.contentDocument) {\n\t\t\t\t\tthis._resizeObject.contentDocument.defaultView.removeEventListener('resize', this.compareAndNotify);\n\t\t\t\t}\n\t\t\t\tdelete this._resizeObject.onload;\n\t\t\t}\n\t\t}\n\t},\n\n\tmounted: function mounted() {\n\t\tvar _this = this;\n\n\t\tinitCompat();\n\t\tthis.$nextTick(function () {\n\t\t\t_this._w = _this.$el.offsetWidth;\n\t\t\t_this._h = _this.$el.offsetHeight;\n\t\t});\n\t\tvar object = document.createElement('object');\n\t\tthis._resizeObject = object;\n\t\tobject.setAttribute('aria-hidden', 'true');\n\t\tobject.setAttribute('tabindex', -1);\n\t\tobject.onload = this.addResizeHandlers;\n\t\tobject.type = 'text/html';\n\t\tif (isIE) {\n\t\t\tthis.$el.appendChild(object);\n\t\t}\n\t\tobject.data = 'about:blank';\n\t\tif (!isIE) {\n\t\t\tthis.$el.appendChild(object);\n\t\t}\n\t},\n\tbeforeDestroy: function beforeDestroy() {\n\t\tthis.removeResizeHandlers();\n\t}\n};\n\n// Install the components\nfunction install(Vue) {\n\tVue.component('resize-observer', ResizeObserver);\n\tVue.component('ResizeObserver', ResizeObserver);\n}\n\n// Plugin\nvar plugin = {\n\t// eslint-disable-next-line no-undef\n\tversion: \"0.4.5\",\n\tinstall: install\n};\n\n// Auto-install\nvar GlobalVue = null;\nif (typeof window !== 'undefined') {\n\tGlobalVue = window.Vue;\n} else if (typeof global !== 'undefined') {\n\tGlobalVue = global.Vue;\n}\nif (GlobalVue) {\n\tGlobalVue.use(plugin);\n}\n\nexport { install, ResizeObserver };\nexport default plugin;\n","function _typeof(obj) {\n if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n _typeof = function (obj) {\n return typeof obj;\n };\n } else {\n _typeof = function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n };\n }\n\n return _typeof(obj);\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];\n\n return arr2;\n }\n}\n\nfunction _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nfunction processOptions(value) {\n var options;\n\n if (typeof value === 'function') {\n // Simple options (callback-only)\n options = {\n callback: value\n };\n } else {\n // Options object\n options = value;\n }\n\n return options;\n}\nfunction throttle(callback, delay) {\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n var timeout;\n var lastState;\n var currentArgs;\n\n var throttled = function throttled(state) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n currentArgs = args;\n if (timeout && state === lastState) return;\n var leading = options.leading;\n\n if (typeof leading === 'function') {\n leading = leading(state, lastState);\n }\n\n if ((!timeout || state !== lastState) && leading) {\n callback.apply(void 0, [state].concat(_toConsumableArray(currentArgs)));\n }\n\n lastState = state;\n clearTimeout(timeout);\n timeout = setTimeout(function () {\n callback.apply(void 0, [state].concat(_toConsumableArray(currentArgs)));\n timeout = 0;\n }, delay);\n };\n\n throttled._clear = function () {\n clearTimeout(timeout);\n timeout = null;\n };\n\n return throttled;\n}\nfunction deepEqual(val1, val2) {\n if (val1 === val2) return true;\n\n if (_typeof(val1) === 'object') {\n for (var key in val1) {\n if (!deepEqual(val1[key], val2[key])) {\n return false;\n }\n }\n\n return true;\n }\n\n return false;\n}\n\nvar VisibilityState =\n/*#__PURE__*/\nfunction () {\n function VisibilityState(el, options, vnode) {\n _classCallCheck(this, VisibilityState);\n\n this.el = el;\n this.observer = null;\n this.frozen = false;\n this.createObserver(options, vnode);\n }\n\n _createClass(VisibilityState, [{\n key: \"createObserver\",\n value: function createObserver(options, vnode) {\n var _this = this;\n\n if (this.observer) {\n this.destroyObserver();\n }\n\n if (this.frozen) return;\n this.options = processOptions(options);\n\n this.callback = function (result, entry) {\n _this.options.callback(result, entry);\n\n if (result && _this.options.once) {\n _this.frozen = true;\n\n _this.destroyObserver();\n }\n }; // Throttle\n\n\n if (this.callback && this.options.throttle) {\n var _ref = this.options.throttleOptions || {},\n _leading = _ref.leading;\n\n this.callback = throttle(this.callback, this.options.throttle, {\n leading: function leading(state) {\n return _leading === 'both' || _leading === 'visible' && state || _leading === 'hidden' && !state;\n }\n });\n }\n\n this.oldResult = undefined;\n this.observer = new IntersectionObserver(function (entries) {\n var entry = entries[0];\n\n if (entries.length > 1) {\n var intersectingEntry = entries.find(function (e) {\n return e.isIntersecting;\n });\n\n if (intersectingEntry) {\n entry = intersectingEntry;\n }\n }\n\n if (_this.callback) {\n // Use isIntersecting if possible because browsers can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.\n var result = entry.isIntersecting && entry.intersectionRatio >= _this.threshold;\n if (result === _this.oldResult) return;\n _this.oldResult = result;\n\n _this.callback(result, entry);\n }\n }, this.options.intersection); // Wait for the element to be in document\n\n vnode.context.$nextTick(function () {\n if (_this.observer) {\n _this.observer.observe(_this.el);\n }\n });\n }\n }, {\n key: \"destroyObserver\",\n value: function destroyObserver() {\n if (this.observer) {\n this.observer.disconnect();\n this.observer = null;\n } // Cancel throttled call\n\n\n if (this.callback && this.callback._clear) {\n this.callback._clear();\n\n this.callback = null;\n }\n }\n }, {\n key: \"threshold\",\n get: function get() {\n return this.options.intersection && this.options.intersection.threshold || 0;\n }\n }]);\n\n return VisibilityState;\n}();\n\nfunction bind(el, _ref2, vnode) {\n var value = _ref2.value;\n if (!value) return;\n\n if (typeof IntersectionObserver === 'undefined') {\n 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');\n } else {\n var state = new VisibilityState(el, value, vnode);\n el._vue_visibilityState = state;\n }\n}\n\nfunction update(el, _ref3, vnode) {\n var value = _ref3.value,\n oldValue = _ref3.oldValue;\n if (deepEqual(value, oldValue)) return;\n var state = el._vue_visibilityState;\n\n if (!value) {\n unbind(el);\n return;\n }\n\n if (state) {\n state.createObserver(value, vnode);\n } else {\n bind(el, {\n value: value\n }, vnode);\n }\n}\n\nfunction unbind(el) {\n var state = el._vue_visibilityState;\n\n if (state) {\n state.destroyObserver();\n delete el._vue_visibilityState;\n }\n}\n\nvar ObserveVisibility = {\n bind: bind,\n update: update,\n unbind: unbind\n};\n\nfunction install(Vue) {\n Vue.directive('observe-visibility', ObserveVisibility);\n /* -- Add more components here -- */\n}\n/* -- Plugin definition & Auto-install -- */\n\n/* You shouldn't have to modify the code below */\n// Plugin\n\nvar plugin = {\n // eslint-disable-next-line no-undef\n version: \"0.4.6\",\n install: install\n};\n\nvar GlobalVue = null;\n\nif (typeof window !== 'undefined') {\n GlobalVue = window.Vue;\n} else if (typeof global !== 'undefined') {\n GlobalVue = global.Vue;\n}\n\nif (GlobalVue) {\n GlobalVue.use(plugin);\n}\n\nexport default plugin;\nexport { ObserveVisibility, install };\n","(function (root, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([], factory);\n } else if (typeof module === \"object\" && module.exports) {\n module.exports = factory();\n } else {\n root.Scrollparent = factory();\n }\n}(this, function () {\n var regex = /(auto|scroll)/;\n\n var parents = function (node, ps) {\n if (node.parentNode === null) { return ps; }\n\n return parents(node.parentNode, ps.concat([node]));\n };\n\n var style = function (node, prop) {\n return getComputedStyle(node, null).getPropertyValue(prop);\n };\n\n var overflow = function (node) {\n return style(node, \"overflow\") + style(node, \"overflow-y\") + style(node, \"overflow-x\");\n };\n\n var scroll = function (node) {\n return regex.test(overflow(node));\n };\n\n var scrollParent = function (node) {\n if (!(node instanceof HTMLElement || node instanceof SVGElement)) {\n return ;\n }\n\n var ps = parents(node.parentNode, []);\n\n for (var i = 0; i < ps.length; i += 1) {\n if (scroll(ps[i])) {\n return ps[i];\n }\n }\n\n return document.scrollingElement || document.documentElement;\n };\n\n return scrollParent;\n}));\n","export const props = {\n items: {\n type: Array,\n required: true,\n },\n\n keyField: {\n type: String,\n default: 'id',\n },\n\n direction: {\n type: String,\n default: 'vertical',\n validator: (value) => ['vertical', 'horizontal'].includes(value),\n },\n}\n\nexport function simpleArray () {\n return this.items.length && typeof this.items[0] !== 'object'\n}\n","export let supportsPassive = false\n\nif (typeof window !== 'undefined') {\n supportsPassive = false\n try {\n var opts = Object.defineProperty({}, 'passive', {\n get () {\n supportsPassive = true\n },\n })\n window.addEventListener('test', null, opts)\n } catch (e) {}\n}\n","
\n \n \n \n