@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
189 lines (188 loc) • 6.07 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const core_scroller = require("./modules/core_scroller.vue.cjs");
const dynamic_scroller = require("./modules/dynamic_scroller.vue.cjs");
const _sfc_main = /* @__PURE__ */ Object.assign({
name: "DtScroller"
}, {
__name: "scroller",
props: {
/**
* The direction of the scroller.
* @values vertical, horizontal
*/
direction: {
type: String,
default: "vertical",
validator: (value) => ["vertical", "horizontal"].includes(value)
},
/**
* Indicates if the items need to react to changes in their size.
* If disabled the itemSize prop is required and you will get improved performance.
* If enabled the minItemSize prop is required and you
* will have reduced performance but the ability to reactively size list items
* @values true, false
*/
dynamic: {
type: Boolean,
default: false
},
/**
* Display height (or width in horizontal mode) of the items in pixels
* used to calculate the scroll size and position.
* Required if DYNAMIC is false
*/
itemSize: {
type: Number,
default: null
},
/**
* The tag to use for the items.
*/
itemTag: {
type: String,
default: "div"
},
/**
* The items to render.
* If the items are simple arrays, the index will be used as the key.
* If the items are objects, the keyField will be used as the key.
* @example items: [ 'item1', 'item2', 'item3' ]
* @example items: [ { id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' } ]
*/
items: {
type: Array,
required: true
},
/**
* The key field to use for the items.
* If the items are objects, the scroller needs to be able to identify them.
* By default it will look for an id field on the items.
* This can be configured with this prop if you are using another field name.
*/
keyField: {
type: String,
default: "id"
},
/**
* The tag to use for the list.
*/
listTag: {
type: String,
default: "div"
},
/**
* Minimum size used if the height (or width in horizontal mode) of a item is unknown.
* Is required for the initial render of items in DYNAMIC size mode.
*/
minItemSize: {
type: [Number, String],
default: null
},
/**
* The height of the scroller.
* Can be a number (in pixels) or a string (in CSS units).
*/
scrollerHeight: {
type: [String, Number],
default: "100%"
},
/**
* The width of the scroller.
* Can be a number (in pixels) or a string (in CSS units).
*/
scrollerWidth: {
type: [String, Number],
default: "100%"
}
},
emits: [
/**
* Describe when the scroller changes from start/middle/end
* @param {string} position The position of the scroller.
* @values start, middle, end
*/
"user-position"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
vue.provide("emit", emits);
const scroller = vue.ref(null);
const computedStyle = vue.computed(() => {
return {
width: typeof props.scrollerWidth === "number" ? `${props.scrollerWidth}px` : props.scrollerWidth,
height: typeof props.scrollerHeight === "number" ? `${props.scrollerHeight}px` : props.scrollerHeight
};
});
vue.watch(props, () => {
validateProps();
}, { deep: true, immediate: true });
function scrollToBottom() {
if (scroller.value) scroller.value.scrollToBottom();
}
function scrollToItem(index) {
if (scroller.value) scroller.value.scrollToItem(index);
}
function updateItems() {
if (!scroller.value) return;
if (props.dynamic) {
scroller.value.dynamicScrollerUpdateItems();
} else {
scroller.value._updateVisibleItems(true);
}
}
function updateItemsFromBottom() {
if (!scroller.value) return;
if (props.dynamic) {
scroller.value.dynamicScrollerUpdateItemsFromBottom();
} else {
scroller.value._updateVisibleItems(false, true);
}
}
function validateProps() {
if (props.dynamic && !props.minItemSize) {
console.error("scroller error: 'minItemSize' is required on 'dynamic' mode.");
}
if (!props.dynamic && !props.itemSize) {
console.error("scroller error: 'itemSize' is required.");
}
}
__expose({
scrollToBottom,
scrollToItem,
updateItems,
updateItemsFromBottom
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.dynamic ? dynamic_scroller.default : core_scroller.default), {
ref_key: "scroller",
ref: scroller,
"data-qa": "dt-scroller",
items: __props.items,
"item-size": __props.itemSize,
"min-item-size": __props.minItemSize,
direction: __props.direction,
"key-field": __props.keyField,
"list-tag": __props.listTag,
"item-tag": __props.itemTag,
style: vue.normalizeStyle(computedStyle.value),
tabindex: "0",
onUserPosition: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("user-position", $event))
}, {
default: vue.withCtx(({ item, index, active }) => [
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({
item,
index,
active
})))
]),
_: 3
}, 40, ["items", "item-size", "min-item-size", "direction", "key-field", "list-tag", "item-tag", "style"]);
};
}
});
const _sfc_main$1 = _sfc_main;
exports.default = _sfc_main$1;
//# sourceMappingURL=scroller.vue.cjs.map