@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
188 lines (187 loc) • 6.18 kB
JavaScript
import { DtIconArrowRight, DtIconArrowLeft } from "@dialpad/dialtone-icons/vue3";
import DtImageCarousel from "./media_components/image_carousel.vue.js";
import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, withDirectives, createVNode, withCtx, vShow } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../../../components/button/button.vue.js";
const MEDIA_ITEM_WIDTH = 64;
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeAttachmentCarousel",
components: {
DtButton,
DtIconArrowRight,
DtIconArrowLeft,
DtImageCarousel
},
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 = resolveComponent("dt-icon-arrow-left");
const _component_dt_button = resolveComponent("dt-button");
const _component_dt_icon_arrow_right = resolveComponent("dt-icon-arrow-right");
return openBlock(), createElementBlock("div", _hoisted_1, [
$props.mediaList.length > 0 ? (openBlock(), createElementBlock("ul", {
key: 0,
ref: "carousel",
class: "d-recipe-attachment-carousel__media-list",
onScroll: _cache[0] || (_cache[0] = (...args) => $options.handleScroll && $options.handleScroll(...args))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.filteredMediaList, (mediaItem, index) => {
return openBlock(), createBlock(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)) : createCommentVNode("", true),
withDirectives(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: withCtx(() => [
createVNode(_component_dt_icon_arrow_left, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "onClick"]), [
[vShow, $data.showLeftArrow]
]),
withDirectives(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: withCtx(() => [
createVNode(_component_dt_icon_arrow_right, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "onClick"]), [
[vShow, $data.showRightArrow]
])
]);
}
const attachment_carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
attachment_carousel as default
};
//# sourceMappingURL=attachment_carousel.vue.js.map