primevue/gallery/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { isElement } from '@primeuix/utils/dom';
import { mergeProps, openBlock, createBlock, resolveDynamicComponent, withCtx, renderSlot, normalizeClass } from 'vue';
import BaseComponent from '@primevue/core/basecomponent';
import GalleryStyle from 'primevue/gallery/style';

var script$1 = {
  name: 'BaseGallery',
  "extends": BaseComponent,
  props: {
    activeIndex: {
      type: Number,
      "default": 0
    },
    as: {
      type: [String, Object],
      "default": 'DIV'
    },
    asChild: {
      type: Boolean,
      "default": false
    },
    fullscreen: {
      type: Boolean,
      "default": false
    },
    closeOnEscape: {
      type: Boolean,
      "default": true
    }
  },
  style: GalleryStyle,
  provide: function provide() {
    return {
      $pcGallery: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'Gallery',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['update:activeIndex', 'update:fullscreen', 'zoom-change', 'rotate-change', 'flip-change'],
  fullscreenResizeTimeout: null,
  rootEl: null,
  prevReported: null,
  data: function data() {
    var _this$activeIndex;
    return {
      d_activeIndex: (_this$activeIndex = this.activeIndex) !== null && _this$activeIndex !== void 0 ? _this$activeIndex : 0,
      isFullscreen: false,
      pendingAction: null,
      activeItemTransform: {
        zoomed: false,
        rotated: false,
        flipped: false
      },
      contentEl: null,
      registeredItemCount: 0
    };
  },
  watch: {
    activeIndex: function activeIndex(newValue) {
      if (newValue == null) return;
      this.d_activeIndex = newValue;
    },
    fullscreen: function fullscreen(newValue) {
      if (newValue == null) return;
      this.setFullScreen(newValue);
    }
  },
  mounted: function mounted() {
    var _this = this;
    if (typeof document !== 'undefined') {
      document.addEventListener('fullscreenchange', this.onDocumentFullscreenChange);
    }
    if (this.fullscreen) {
      this.$nextTick(function () {
        return _this.setFullScreen(true);
      });
    }
  },
  beforeUnmount: function beforeUnmount() {
    this.registeredItemCount = 0;
    if (this.fullscreenResizeTimeout) {
      clearTimeout(this.fullscreenResizeTimeout);
      this.fullscreenResizeTimeout = null;
    }
    if (typeof document !== 'undefined') {
      document.removeEventListener('fullscreenchange', this.onDocumentFullscreenChange);
      if (document.fullscreenElement === this.rootEl) {
        var _document$exitFullscr, _document, _document$exitFullscr2;
        (_document$exitFullscr = (_document = document).exitFullscreen) === null || _document$exitFullscr === void 0 || (_document$exitFullscr = _document$exitFullscr.call(_document)) === null || _document$exitFullscr === void 0 || (_document$exitFullscr2 = _document$exitFullscr["catch"]) === null || _document$exitFullscr2 === void 0 || _document$exitFullscr2.call(_document$exitFullscr, function () {});
      }
    }
  },
  methods: {
    setRef: function setRef(el) {
      var _el$$el;
      var resolved = isElement(el) ? el : (_el$$el = el === null || el === void 0 ? void 0 : el.$el) !== null && _el$$el !== void 0 ? _el$$el : null;
      this.rootEl = isElement(resolved) ? resolved : null;
    },
    setContentEl: function setContentEl(el) {
      this.contentEl = isElement(el) ? el : null;
    },
    getItemCount: function getItemCount() {
      return this.registeredItemCount;
    },
    registerItem: function registerItem(currentIndex) {
      if (currentIndex !== null && currentIndex !== undefined) {
        if (currentIndex >= this.registeredItemCount) {
          this.registeredItemCount = currentIndex + 1;
        }
        return currentIndex;
      }
      var newIndex = this.registeredItemCount;
      this.registeredItemCount += 1;
      return newIndex;
    },
    handleNext: function handleNext() {
      var count = this.registeredItemCount;
      if (count <= 0) return;
      var newIndex = (this.d_activeIndex + 1) % count;
      this.updateActiveIndex(newIndex);
    },
    handlePrev: function handlePrev() {
      var count = this.registeredItemCount;
      if (count <= 0) return;
      var newIndex = (this.d_activeIndex - 1 + count) % count;
      this.updateActiveIndex(newIndex);
    },
    selectItem: function selectItem(index) {
      var count = this.registeredItemCount;
      if (index < 0 || index >= count) return;
      this.updateActiveIndex(index);
    },
    updateActiveIndex: function updateActiveIndex(value) {
      this.d_activeIndex = value;
      this.$emit('update:activeIndex', value);
    },
    dispatchAction: function dispatchAction(type) {
      this.pendingAction = {
        type: type,
        timestamp: Date.now()
      };
    },
    clearPendingAction: function clearPendingAction() {
      this.pendingAction = null;
    },
    reportItemState: function reportItemState(itemState) {
      this.activeItemTransform = {
        zoomed: itemState.zoomed,
        rotated: itemState.rotated,
        flipped: itemState.flipped
      };
      var prev = this.prevReported;
      if (!prev || prev.scale !== itemState.scale) this.$emit('zoom-change', itemState.scale);
      if (!prev || prev.rotation !== itemState.rotation) this.$emit('rotate-change', itemState.rotation);
      if (!prev || prev.flip.x !== itemState.flip.x || prev.flip.y !== itemState.flip.y) this.$emit('flip-change', itemState.flip);
      this.prevReported = {
        scale: itemState.scale,
        rotation: itemState.rotation,
        flip: itemState.flip
      };
    },
    isItemActive: function isItemActive(index) {
      return this.d_activeIndex === index;
    },
    setFullScreen: function setFullScreen(value) {
      if (typeof document === 'undefined') return;
      var el = this.rootEl;
      if (!el) return;
      var isNativeFullscreen = document.fullscreenElement === el;
      if (value && !isNativeFullscreen) {
        var _el$requestFullscreen, _el$requestFullscreen2;
        (_el$requestFullscreen = el.requestFullscreen) === null || _el$requestFullscreen === void 0 || (_el$requestFullscreen = _el$requestFullscreen.call(el)) === null || _el$requestFullscreen === void 0 || (_el$requestFullscreen2 = _el$requestFullscreen["catch"]) === null || _el$requestFullscreen2 === void 0 || _el$requestFullscreen2.call(_el$requestFullscreen, function () {});
      } else if (!value && document.fullscreenElement) {
        var _document$exitFullscr3, _document2, _document$exitFullscr4;
        (_document$exitFullscr3 = (_document2 = document).exitFullscreen) === null || _document$exitFullscr3 === void 0 || (_document$exitFullscr3 = _document$exitFullscr3.call(_document2)) === null || _document$exitFullscr3 === void 0 || (_document$exitFullscr4 = _document$exitFullscr3["catch"]) === null || _document$exitFullscr4 === void 0 || _document$exitFullscr4.call(_document$exitFullscr3, function () {});
      }
    },
    toggleFullScreen: function toggleFullScreen() {
      this.setFullScreen(!this.isFullscreen);
    },
    onDocumentFullscreenChange: function onDocumentFullscreenChange() {
      var _this2 = this;
      var active = typeof document !== 'undefined' && document.fullscreenElement === this.rootEl;
      if (active !== this.isFullscreen) {
        this.isFullscreen = active;
        this.$emit('update:fullscreen', active);
      }
      if (this.fullscreenResizeTimeout) {
        clearTimeout(this.fullscreenResizeTimeout);
      }
      this.fullscreenResizeTimeout = setTimeout(function () {
        if (typeof window !== 'undefined') {
          window.dispatchEvent(new Event('resize'));
        }
        _this2.fullscreenResizeTimeout = null;
      }, 100);
    },
    onClickAction: function onClickAction(action) {
      var _this3 = this;
      var map = {
        zoomIn: function zoomIn() {
          return _this3.dispatchAction('zoom-in');
        },
        zoomOut: function zoomOut() {
          return _this3.dispatchAction('zoom-out');
        },
        rotateLeft: function rotateLeft() {
          return _this3.dispatchAction('rotate-left');
        },
        rotateRight: function rotateRight() {
          return _this3.dispatchAction('rotate-right');
        },
        flipX: function flipX() {
          return _this3.dispatchAction('flip-x');
        },
        flipY: function flipY() {
          return _this3.dispatchAction('flip-y');
        },
        download: function download() {
          return _this3.dispatchAction('download');
        },
        next: function next() {
          return _this3.handleNext();
        },
        prev: function prev() {
          return _this3.handlePrev();
        },
        toggleFullScreen: function toggleFullScreen() {
          return _this3.toggleFullScreen();
        }
      };
      if (action && map[action]) map[action]();
    },
    onKeyDown: function onKeyDown(event) {
      if (event.key === 'ArrowRight') {
        event.preventDefault();
        this.handleNext();
      } else if (event.key === 'ArrowLeft') {
        event.preventDefault();
        this.handlePrev();
      } else if (event.key === 'Escape' && this.closeOnEscape && this.isFullscreen) {
        event.preventDefault();
        this.toggleFullScreen();
      }
    }
  },
  computed: {
    attrs: function attrs() {
      return mergeProps(this.a11yAttrs, this.ptmi('root'));
    },
    a11yAttrs: function a11yAttrs() {
      return {
        ref: this.setRef,
        tabindex: 0,
        'data-pc-name': 'gallery',
        'data-fullscreen': this.isFullscreen ? '' : undefined,
        'data-zoomed': this.activeItemTransform.zoomed ? '' : undefined,
        'data-rotated': this.activeItemTransform.rotated ? '' : undefined,
        'data-flipped': this.activeItemTransform.flipped ? '' : undefined,
        onKeydown: this.onKeyDown
      };
    }
  }
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return !_ctx.asChild ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({
    key: 0,
    "class": _ctx.cx('root')
  }, $options.attrs), {
    "default": withCtx(function () {
      return [renderSlot(_ctx.$slots, "default")];
    }),
    _: 3
  }, 16, ["class"])) : renderSlot(_ctx.$slots, "default", {
    key: 1,
    a11yAttrs: $options.a11yAttrs,
    "class": normalizeClass(_ctx.cx('root'))
  });
}

script.render = render;

export { script as default };