@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
188 lines (187 loc) • 6.33 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const image_carousel = require("./media_components/image_carousel.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const button = require("../../../components/button/button.vue.cjs");
const MEDIA_ITEM_WIDTH = 64;
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeAttachmentCarousel",
components: {
DtButton: button.default,
DtIconArrowRight: vue3.DtIconArrowRight,
DtIconArrowLeft: vue3.DtIconArrowLeft,
DtImageCarousel: image_carousel.default
},
mixins: [],
/* inheritAttrs: false is generally an option we want to set on library
components. This allows any attributes passed in that are not recognized
as props to be passed down to another element or component using v-bind:$attrs
more info: https://vuejs.org/v2/api/#inheritAttrs */
// inheritAttrs: false,
props: {
/**
* media - object array of media objects
* @type {Array}
*
* Object: {
* path: String,
* altText: String | null,
* }
*/
mediaList: {
type: Array,
default: () => []
},
closeAriaLabel: {
type: String,
required: true
},
clickToOpenAriaLabel: {
type: String,
required: true
},
progressbarAriaLabel: {
type: String,
required: true
},
leftArrowAriaLabel: {
type: String,
required: true
},
rightArrowAriaLabel: {
type: String,
required: true
}
},
emits: [
/**
* Emitted when popover is shown or hidden
*
* @event remove-media
* @type {Number}
*/
"remove-media"
],
data() {
return {
showCloseButton: {},
showRightArrow: true,
showLeftArrow: false,
isMounted: false
};
},
computed: {
filteredMediaList() {
return this.mediaList.filter((mediaItem) => mediaItem.type === "image" || mediaItem.type === "video");
}
},
mounted: function() {
this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;
this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
},
methods: {
onItemFocus(e) {
e.currentTarget.scrollIntoView({ behavior: "smooth" });
},
mediaComponent(type) {
switch (type) {
case "image":
return "dt-image-carousel";
default:
return null;
}
},
removeMediaItem(index) {
this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH;
this.$emit("remove-media", index);
},
closeButton(val, index) {
this.showCloseButton[index] = val;
},
handleScroll() {
const carousel = this.$refs.carousel;
this.showLeftArrow = carousel.scrollLeft > 0;
this.showRightArrow = !(carousel.scrollLeft + carousel.clientWidth === carousel.scrollWidth);
},
leftScroll() {
this.$refs.carousel.scrollTo({
left: this.$refs.carousel.scrollLeft - 100,
behavior: "smooth"
});
},
rightScroll() {
this.$refs.carousel.scrollTo({
left: this.$refs.carousel.scrollLeft + 100,
behavior: "smooth"
});
}
}
};
const _hoisted_1 = {
class: "d-recipe-attachment-carousel",
role: "presentation"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_arrow_left = vue.resolveComponent("dt-icon-arrow-left");
const _component_dt_button = vue.resolveComponent("dt-button");
const _component_dt_icon_arrow_right = vue.resolveComponent("dt-icon-arrow-right");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
$props.mediaList.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", {
key: 0,
ref: "carousel",
class: "d-recipe-attachment-carousel__media-list",
onScroll: _cache[0] || (_cache[0] = (...args) => $options.handleScroll && $options.handleScroll(...args))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredMediaList, (mediaItem, index) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.mediaComponent(mediaItem.type)), {
key: `media-${index}`,
index,
"media-item": mediaItem,
"close-aria-label": $props.closeAriaLabel,
"click-to-open-aria-label": $props.clickToOpenAriaLabel,
"progressbar-aria-label": $props.progressbarAriaLabel,
onRemoveMedia: ($event) => $options.removeMediaItem(index),
onFocusin: $options.onItemFocus
}, null, 40, ["index", "media-item", "close-aria-label", "click-to-open-aria-label", "progressbar-aria-label", "onRemoveMedia", "onFocusin"]);
}), 128))
], 544)) : vue.createCommentVNode("", true),
vue.withDirectives(vue.createVNode(_component_dt_button, {
tabindex: "-1",
"aria-label": $props.leftArrowAriaLabel,
class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
circle: "",
size: "xs",
importance: "clear",
onClick: $options.leftScroll
}, {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_arrow_left, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "onClick"]), [
[vue.vShow, $data.showLeftArrow]
]),
vue.withDirectives(vue.createVNode(_component_dt_button, {
tabindex: "-1",
"aria-label": $props.rightArrowAriaLabel,
class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
circle: "",
size: "xs",
importance: "clear",
onClick: $options.rightScroll
}, {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_arrow_right, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "onClick"]), [
[vue.vShow, $data.showRightArrow]
])
]);
}
const attachment_carousel = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = attachment_carousel;
//# sourceMappingURL=attachment_carousel.vue.cjs.map