@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
191 lines (190 loc) • 5.91 kB
JavaScript
import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as t } from "./localization/index.js";
import n from "./lib/button/button.js";
import r from "./lib/image-viewer/image-viewer.js";
import i from "./lib/progress-circle/progress-circle.js";
import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, openBlock as d, renderList as f, resolveComponent as p, resolveDynamicComponent as m, vShow as h, withCtx as g, withDirectives as _ } from "vue";
import { DtIconArrowLeft as v, DtIconArrowRight as y, DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
//#region recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue
var x = {
compatConfig: { MODE: 3 },
name: "DtImageCarousel",
components: {
DtImageViewer: r,
DtButton: n,
DtIconClose: b,
DtProgressCircle: i
},
props: {
mediaItem: {
type: Object,
required: !0
},
index: {
type: Number,
required: !0
}
},
emits: ["remove-media"],
data() {
return { i18n: new t() };
},
computed: { closeButtonTitle() {
return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
} },
methods: { removeMediaItem(e) {
this.$emit("remove-media", e);
} }
}, S = { class: "d-recipe-attachment-carousel__image" }, C = { class: "d-recipe-attachment-carousel__image-top-right" }, w = { class: "d-recipe-attachment-carousel__image-progress-bar" };
function T(e, t, n, r, i, a) {
let f = p("dt-image-viewer"), m = p("dt-progress-circle"), h = p("dt-icon-close"), _ = p("dt-button");
return d(), c("li", S, [u(f, {
"image-button-class": "d-recipe-attachment-carousel__image-viewer",
"image-src": n.mediaItem.path,
"image-alt": n.mediaItem.altText,
"aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
}, null, 8, [
"image-src",
"image-alt",
"aria-label"
]), l("div", C, [l("span", w, [n.mediaItem.isUploading ? (d(), o(m, {
key: 0,
kind: "brand",
size: "400",
progress: n.mediaItem.progress,
"aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
}, null, 8, ["progress", "aria-label"])) : s("", !0)]), u(_, {
id: `closeButton-${n.index}`,
tabindex: "0",
class: "d-recipe-attachment-carousel__image-close-button",
circle: "",
size: "xs",
importance: "clear",
"aria-label": a.closeButtonTitle,
title: a.closeButtonTitle,
onClick: t[0] || (t[0] = (e) => a.removeMediaItem(n.index))
}, {
icon: g(() => [u(h, { size: "200" })]),
_: 1
}, 8, [
"id",
"aria-label",
"title"
])])]);
}
var E = /* @__PURE__ */ e(x, [["render", T]]), D = 64, O = {
compatConfig: { MODE: 3 },
name: "DtRecipeAttachmentCarousel",
components: {
DtButton: n,
DtIconArrowRight: y,
DtIconArrowLeft: v,
DtImageCarousel: E
},
props: { mediaList: {
type: Array,
default: () => []
} },
emits: ["remove-media"],
data() {
return {
showCloseButton: {},
showRightArrow: !0,
showLeftArrow: !1,
isMounted: !1,
i18n: new t()
};
},
computed: { filteredMediaList() {
return this.mediaList.filter((e) => e.type === "image" || e.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(e) {
switch (e) {
case "image": return "dt-image-carousel";
default: return null;
}
},
removeMediaItem(e) {
this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + D, this.$emit("remove-media", e);
},
closeButton(e, t) {
this.showCloseButton[t] = e;
},
handleScroll() {
let e = this.$refs.carousel;
this.showLeftArrow = e.scrollLeft > 0, this.showRightArrow = e.scrollLeft + e.clientWidth !== e.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"
});
}
}
}, k = {
class: "d-recipe-attachment-carousel",
role: "presentation"
};
function A(e, t, n, r, i, l) {
let v = p("dt-icon-arrow-left"), y = p("dt-button"), b = p("dt-icon-arrow-right");
return d(), c("div", k, [
n.mediaList.length > 0 ? (d(), c("ul", {
key: 0,
ref: "carousel",
class: "d-recipe-attachment-carousel__media-list",
onScroll: t[0] || (t[0] = (...e) => l.handleScroll && l.handleScroll(...e))
}, [(d(!0), c(a, null, f(l.filteredMediaList, (e, t) => (d(), o(m(l.mediaComponent(e.type)), {
key: `media-${t}`,
index: t,
"media-item": e,
onRemoveMedia: (e) => l.removeMediaItem(t),
onFocusin: l.onItemFocus
}, null, 40, [
"index",
"media-item",
"onRemoveMedia",
"onFocusin"
]))), 128))], 544)) : s("", !0),
_(u(y, {
tabindex: "-1",
"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
circle: "",
size: "xs",
importance: "clear",
onClick: l.leftScroll
}, {
icon: g(() => [u(v, { size: "100" })]),
_: 1
}, 8, ["aria-label", "onClick"]), [[h, i.showLeftArrow]]),
_(u(y, {
tabindex: "-1",
"aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
circle: "",
size: "xs",
importance: "clear",
onClick: l.rightScroll
}, {
icon: g(() => [u(b, { size: "100" })]),
_: 1
}, 8, ["aria-label", "onClick"]), [[h, i.showRightArrow]])
]);
}
var j = /* @__PURE__ */ e(O, [["render", A]]);
//#endregion
export { j as t };
//# sourceMappingURL=attachment_carousel-CouFqFMw.js.map