zmp-vue/esm/zalo-ui-kits/list-item.js

Build full featured iOS & Android apps using ZMP & Vue

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue";

function render(_ctx, _cache) {
  var _component_ListItem = _resolveComponent("ListItem");

  return _openBlock(), _createBlock(_component_ListItem, _mergeProps({
    id: "li" + _ctx.id
  }, _extends({}, _ctx.$attrs, _ctx.$props), {
    link: undefined,
    href: undefined,
    onClick: _ctx.handleClick,
    class: {
      'list-item-taphold': !!_ctx.$attrs.onTaphold
    }
  }), _createSlots({
    footer: _withCtx(function () {
      return [_renderSlot(_ctx.$slots, "footer", {}, function () {
        return [_createTextVNode(_toDisplayString(_ctx.description), 1)];
      })];
    }),
    _: 2
  }, [_renderList(_ctx.$slots, function (_, slot) {
    return {
      name: slot,
      fn: _withCtx(function (scope) {
        return [_renderSlot(_ctx.$slots, slot, scope)];
      })
    };
  })]), 1040, ["id", "onClick", "class"]);
}

import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import ListItem from '../components/list-item';
import { useLink } from '../shared/use-link';
export default {
  name: 'zmp-list-item',
  render: render,
  components: {
    ListItem: ListItem
  },
  props: _extends({}, ListItem.props, {
    description: String
  }),
  emits: ['taphold'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        attrs = _ref.attrs;

    var _useLink = useLink(props),
        handleClickLink = _useLink[0];

    var handleClick = function handleClick(e) {
      handleClickLink(_extends({}, e, {
        preventDefault: function preventDefault() {}
      }));
    };

    var preventContextMenu = function preventContextMenu(e) {
      if (attrs.onTaphold) {
        e.preventDefault();
      }

      return true;
    };

    var onTaphold = function onTaphold() {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      emit.apply(void 0, ['taphold'].concat(args));
    };

    var id = computed(function () {
      return attrs.id || props.id || +new Date();
    });
    onMounted(function () {
      var listEl = document.getElementById(id.value);

      if (listEl) {
        listEl.addEventListener('taphold', onTaphold);
        listEl.addEventListener('contextmenu', preventContextMenu, false);
      }
    });
    onBeforeUnmount(function () {
      var listEl = document.getElementById(id.value);

      if (listEl) {
        listEl.removeEventListener('taphold', onTaphold);
        listEl.removeEventListener('contextmenu', preventContextMenu);
      }
    });
    return {
      handleClick: handleClick,
      id: id
    };
  }
};