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