@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
70 lines (69 loc) • 2.58 kB
JavaScript
import { DtIconClose } from "@dialpad/dialtone-icons/vue2";
import DtProgressBar from "./progress_bar.vue.js";
import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
import DtImageViewer from "../../../../components/image_viewer/image_viewer.vue.js";
import DtButton from "../../../../components/button/button.vue.js";
const _sfc_main = {
name: "DtImageCarousel",
components: {
DtImageViewer,
DtButton,
DtIconClose,
DtProgressBar
},
props: {
mediaItem: {
type: Object,
required: true
},
index: {
type: Number,
required: true
},
closeAriaLabel: {
type: String,
required: true
},
clickToOpenAriaLabel: {
type: String,
required: true
},
progressbarAriaLabel: {
type: String,
required: true
}
},
emits: [
/**
* Emitted when media close button is clicked to remove the image
*
* @event remove-media
* @type {Number}
*/
"remove-media"
],
methods: {
removeMediaItem(index) {
this.$emit("remove-media", index);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("li", { staticClass: "d-recipe-attachment-carousel__image" }, [_c("dt-image-viewer", { attrs: { "image-button-class": "d-recipe-attachment-carousel__image-viewer", "image-src": _vm.mediaItem.path, "image-alt": _vm.mediaItem.altText, "close-aria-label": _vm.closeAriaLabel, "aria-label": _vm.clickToOpenAriaLabel } }), _c("div", { staticClass: "d-recipe-attachment-carousel__image-top-right" }, [_vm.mediaItem.isUploading ? _c("dt-progress-bar", { staticClass: "d-recipe-attachment-carousel__image-progress-bar", attrs: { "progress": _vm.mediaItem.progress, "progressbar-aria-label": _vm.progressbarAriaLabel } }) : _vm._e(), _c("dt-button", { staticClass: "d-recipe-attachment-carousel__image-close-button", attrs: { "id": `closeButton-${_vm.index}`, "tabindex": "0", "circle": "", "size": "xs", "importance": "clear", "aria-label": _vm.closeAriaLabel }, on: { "click": function($event) {
return _vm.removeMediaItem(_vm.index);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-close", { attrs: { "size": "200" } })];
}, proxy: true }]) })], 1)], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtImageCarousel = __component__.exports;
export {
DtImageCarousel as default
};
//# sourceMappingURL=image_carousel.vue.js.map