@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
293 lines (292 loc) • 8.41 kB
JavaScript
import { DtIconClose as v, DtIconArrowLeft as E, DtIconArrowRight as T } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as L } from "../../localization/index.js";
import { createElementBlock as n, openBlock as i, normalizeStyle as R, createElementVNode as f, resolveComponent as s, createVNode as c, createBlock as b, createCommentVNode as C, withCtx as h, withDirectives as A, Fragment as D, renderList as x, resolveDynamicComponent as O, vShow as w } from "vue";
import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import I from "../button/button.js";
import B from "../image-viewer/image-viewer.js";
const y = {
compatConfig: { MODE: 3 },
name: "DtProgressBar",
props: {
ariaLabel: {
type: String,
required: !0
},
progress: {
type: Number,
default: 20
}
},
data: () => ({
circleCircumference: 50
}),
computed: {
cssVars() {
return {
"--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
"--stroke-dasharray": this.circleCircumference
};
}
},
mounted() {
this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
}
}, M = ["aria-label", "aria-valuenow"], S = {
ref: "progressbarCircle",
r: "8",
cx: "12",
cy: "12",
class: "d-recipe-attachment-carousel__progress-bar-circle"
}, N = /* @__PURE__ */ f("circle", {
r: "8",
cx: "12",
cy: "12",
class: "d-recipe-attachment-carousel__progress-bar-circle"
}, null, -1);
function $(e, o, r, g, a, t) {
return i(), n("div", {
role: "progressbar",
"aria-label": r.ariaLabel,
tabindex: "-1",
"aria-valuenow": r.progress,
"aria-valuemin": "0",
"aria-valuemax": "100"
}, [
(i(), n("svg", {
class: "d-recipe-attachment-carousel__progress-bar",
style: R(t.cssVars)
}, [
f("circle", S, null, 512),
N
], 4))
], 8, M);
}
const k = /* @__PURE__ */ p(y, [["render", $]]), W = {
compatConfig: { MODE: 3 },
name: "DtImageCarousel",
components: {
DtImageViewer: B,
DtButton: I,
DtIconClose: v,
DtProgressBar: k
},
props: {
mediaItem: {
type: Object,
required: !0
},
index: {
type: Number,
required: !0
}
},
emits: [
/**
* Emitted when media close button is clicked to remove the image
*
* @event remove-media
* @type {Number}
*/
"remove-media"
],
data() {
return {
i18n: new L()
};
},
computed: {
closeButtonTitle() {
return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
}
},
methods: {
removeMediaItem(e) {
this.$emit("remove-media", e);
}
}
}, z = { class: "d-recipe-attachment-carousel__image" }, V = { class: "d-recipe-attachment-carousel__image-top-right" };
function F(e, o, r, g, a, t) {
const d = s("dt-image-viewer"), m = s("dt-progress-bar"), u = s("dt-icon-close"), l = s("dt-button");
return i(), n("li", z, [
c(d, {
"image-button-class": "d-recipe-attachment-carousel__image-viewer",
"image-src": r.mediaItem.path,
"image-alt": r.mediaItem.altText,
"aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
}, null, 8, ["image-src", "image-alt", "aria-label"]),
f("div", V, [
r.mediaItem.isUploading ? (i(), b(m, {
key: 0,
class: "d-recipe-attachment-carousel__image-progress-bar",
progress: r.mediaItem.progress,
"aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
}, null, 8, ["progress", "aria-label"])) : C("", !0),
c(l, {
id: `closeButton-${r.index}`,
tabindex: "0",
class: "d-recipe-attachment-carousel__image-close-button",
circle: "",
size: "xs",
importance: "clear",
"aria-label": t.closeButtonTitle,
title: t.closeButtonTitle,
onClick: o[0] || (o[0] = (_) => t.removeMediaItem(r.index))
}, {
icon: h(() => [
c(u, { size: "200" })
]),
_: 1
}, 8, ["id", "aria-label", "title"])
])
]);
}
const U = /* @__PURE__ */ p(W, [["render", F]]), G = 64, H = {
compatConfig: { MODE: 3 },
name: "DtRecipeAttachmentCarousel",
components: {
DtButton: I,
DtIconArrowRight: T,
DtIconArrowLeft: E,
DtImageCarousel: U
},
/* 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: () => []
}
},
emits: [
/**
* Emitted when popover is shown or hidden
*
* @event remove-media
* @type {Number}
*/
"remove-media"
],
data() {
return {
showCloseButton: {},
showRightArrow: !0,
showLeftArrow: !1,
isMounted: !1,
i18n: new L()
};
},
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 + G, this.$emit("remove-media", e);
},
closeButton(e, o) {
this.showCloseButton[o] = e;
},
handleScroll() {
const 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"
});
}
}
}, P = {
class: "d-recipe-attachment-carousel",
role: "presentation"
};
function q(e, o, r, g, a, t) {
const d = s("dt-icon-arrow-left"), m = s("dt-button"), u = s("dt-icon-arrow-right");
return i(), n("div", P, [
r.mediaList.length > 0 ? (i(), n("ul", {
key: 0,
ref: "carousel",
class: "d-recipe-attachment-carousel__media-list",
onScroll: o[0] || (o[0] = (...l) => t.handleScroll && t.handleScroll(...l))
}, [
(i(!0), n(D, null, x(t.filteredMediaList, (l, _) => (i(), b(O(t.mediaComponent(l.type)), {
key: `media-${_}`,
index: _,
"media-item": l,
onRemoveMedia: (j) => t.removeMediaItem(_),
onFocusin: t.onItemFocus
}, null, 40, ["index", "media-item", "onRemoveMedia", "onFocusin"]))), 128))
], 544)) : C("", !0),
A(c(m, {
tabindex: "-1",
"aria-label": a.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: t.leftScroll
}, {
icon: h(() => [
c(d, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "onClick"]), [
[w, a.showLeftArrow]
]),
A(c(m, {
tabindex: "-1",
"aria-label": a.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: t.rightScroll
}, {
icon: h(() => [
c(u, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "onClick"]), [
[w, a.showRightArrow]
])
]);
}
const ee = /* @__PURE__ */ p(H, [["render", q]]);
export {
ee as default
};
//# sourceMappingURL=attachment-carousel.js.map