@dialpad/dialtone-vue/dist/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js

Vue component library for Dialpad's design system Dialtone

import { DtIconArrowRight, DtIconArrowLeft } from "@dialpad/dialtone-icons/vue2";
import DtImageCarousel from "./media_components/image_carousel.vue.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtButton from "../../../components/button/button.vue.js";
const MEDIA_ITEM_WIDTH = 64;
const _sfc_main = {
  name: "DtRecipeAttachmentCarousel",
  components: {
    DtButton,
    DtIconArrowRight,
    DtIconArrowLeft,
    DtImageCarousel
  },
  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: true
    },
    clickToOpenAriaLabel: {
      type: String,
      required: true
    },
    progressbarAriaLabel: {
      type: String,
      required: true
    },
    leftArrowAriaLabel: {
      type: String,
      required: true
    },
    rightArrowAriaLabel: {
      type: String,
      required: true
    }
  },
  emits: [
    /**
     * Emitted when popover is shown or hidden
     *
     * @event remove-media
     * @type {Number}
     */
    "remove-media"
  ],
  data() {
    return {
      showCloseButton: {},
      showRightArrow: true,
      showLeftArrow: false,
      isMounted: false
    };
  },
  computed: {
    filteredMediaList() {
      return this.mediaList.filter((mediaItem) => mediaItem.type === "image" || mediaItem.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(type) {
      switch (type) {
        case "image":
          return "dt-image-carousel";
        default:
          return null;
      }
    },
    removeMediaItem(index) {
      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH;
      this.$emit("remove-media", index);
    },
    closeButton(val, index) {
      this.showCloseButton[index] = val;
    },
    handleScroll() {
      const carousel = this.$refs.carousel;
      this.showLeftArrow = carousel.scrollLeft > 0;
      this.showRightArrow = !(carousel.scrollLeft + carousel.clientWidth === carousel.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"
      });
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("div", { staticClass: "d-recipe-attachment-carousel", attrs: { "role": "presentation" } }, [_vm.mediaList.length > 0 ? _c("ul", { ref: "carousel", staticClass: "d-recipe-attachment-carousel__media-list", on: { "scroll": _vm.handleScroll } }, _vm._l(_vm.filteredMediaList, function(mediaItem, index) {
    return _c(_vm.mediaComponent(mediaItem.type), { key: `media-${index}`, tag: "component", attrs: { "index": index, "media-item": mediaItem, "close-aria-label": _vm.closeAriaLabel, "click-to-open-aria-label": _vm.clickToOpenAriaLabel, "progressbar-aria-label": _vm.progressbarAriaLabel }, on: { "remove-media": function($event) {
      return _vm.removeMediaItem(index);
    }, "focusin": _vm.onItemFocus } });
  }), 1) : _vm._e(), _c("dt-button", { directives: [{ name: "show", rawName: "v-show", value: _vm.showLeftArrow, expression: "showLeftArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left", attrs: { "tabindex": "-1", "aria-label": _vm.leftArrowAriaLabel, "circle": "", "size": "xs", "importance": "clear" }, on: { "click": _vm.leftScroll }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-arrow-left", { attrs: { "size": "100" } })];
  }, proxy: true }]) }), _c("dt-button", { directives: [{ name: "show", rawName: "v-show", value: _vm.showRightArrow, expression: "showRightArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right", attrs: { "tabindex": "-1", "aria-label": _vm.rightArrowAriaLabel, "circle": "", "size": "xs", "importance": "clear" }, on: { "click": _vm.rightScroll }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-arrow-right", { attrs: { "size": "100" } })];
  }, proxy: true }]) })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const attachment_carousel = __component__.exports;
export {
  attachment_carousel as default
};
//# sourceMappingURL=attachment_carousel.vue.js.map