vue-socials/dist/esm/mixins/BaseCount/BaseCount.js

Social media share buttons and counts for Vue.js

import { defineComponent, h } from 'vue';
import { isUndefined } from '../../utils/inspect.js';

/**
 * Hey!
 *
 * Base count mixin used for every social count component.
 */

/**
 * Wrapper around Vue mixin to pass parameters inside.
 * We use multiple parameters instead of a single object because
 * it causes problems with tree-shaking. I don't know why.
 * A little bit inconvenient, but overall OK :)
 */
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
function BaseCount(name, customShareOptions, isShareOptionsRequired, customAriaLabel) {
  return /* #__PURE__ */defineComponent({
    props: {
      /**
       * Component tag
       */
      tag: {
        type: [String, Object],
        default: 'span'
      },

      /**
       * Share parameters for social network
       */
      shareOptions: {
        type: Object,
        default: function _default() {
          return customShareOptions || {};
        },
        required: isShareOptionsRequired || true
      }
    },
    data: function data() {
      return {
        count: undefined,
        response: null,
        error: null,
        isLoading: false
      };
    },
    emits: ['load', 'error', 'loading'],
    computed: {
      /**
       * Calculate the aria-label for a counter.
       * It replaces @s in a string with a social network name
       * and @c with a count.
       */
      ariaLabel: function ariaLabel() {
        var count = this.count;
        var label = customAriaLabel || '@c people share this on @s.';

        if (!isUndefined(count)) {
          return label.replace(/@c/g, String(count)).replace(/@s/g, name);
        }

        return 'No one shares this content yet.';
      }
    },
    methods: {
      /**
       * Save response from JSONP or HTTP and emit event
       */
      handleResult: function handleResult(value) {
        this.response = value;
        this.$emit('load', value);
      },

      /**
       * Save response from JSONP or HTTP and emit event
       */
      handleError: function handleError(value) {
        this.error = value;
        this.$emit('error', value);
      },

      /**
       * Save loading state and emit event
       */
      handleLoading: function handleLoading(value) {
        this.isLoading = value;
        this.$emit('loading', value);
      },

      /**
       * Save counter value and render inside element
       */
      handleCount: function handleCount(count) {
        this.count = count;
      },

      /**
       * Create new count component
       */
      generateComponent: function generateComponent() {
        var _this$$slots$default, _this$$slots;

        var children = ((_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots, {
          isLoading: this.isLoading,
          response: this.response,
          count: this.count
        })) || [this.count];
        return h(this.tag, {
          'aria-label': this.ariaLabel
        }, children);
      }
    },
    render: function render() {
      return this.generateComponent();
    }
  });
}

export default BaseCount;