@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
70 lines (69 loc) • 2.8 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const progress_bar = require("./progress_bar.vue.cjs");
const _pluginVue2_normalizer = require("../../../../_virtual/_plugin-vue2_normalizer.cjs");
const image_viewer = require("../../../../components/image_viewer/image_viewer.vue.cjs");
const button = require("../../../../components/button/button.vue.cjs");
const _sfc_main = {
name: "DtImageCarousel",
components: {
DtImageViewer: image_viewer.default,
DtButton: button.default,
DtIconClose: vue2.DtIconClose,
DtProgressBar: progress_bar.default
},
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__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtImageCarousel = __component__.exports;
exports.default = DtImageCarousel;
//# sourceMappingURL=image_carousel.vue.cjs.map