choo-taro-ui-vue3/lib/float-layout/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, ref, computed, watch, toRefs, nextTick, createCommentVNode, resolveComponent, mergeProps, createVNode, toDisplayString, createTextVNode, withCtx, openBlock, createBlock, renderSlot } from 'vue';
import { handleTouchScroll } from '../utils';

const AtFloatLayout = defineComponent({
  name: "AtFloatLayout",
  emits: {
    "close": null,
    "scroll"(e) {
      return !!(e && typeof e === "object");
    },
    "scroll-to-upper"(e) {
      return !!(e && typeof e === "object");
    },
    "scroll-to-lower"(e) {
      return !!(e && typeof e === "object");
    }
  },
  props: {
    title: String,
    scrollWithAnimation: Boolean,
    isOpened: Boolean,
    scrollX: Boolean,
    scrollY: {
      type: Boolean,
      default: true
    },
    scrollTop: Number,
    scrollLeft: Number,
    upperThreshold: Number,
    lowerThreshold: Number
  },
  setup(props, { emit }) {
    const _isOpened = ref(props.isOpened);
    const rootClasses = computed(() => ["at-float-layout", {
      "at-float-layout--active": _isOpened.value
    }]);
    const disableScroll = process.env.TARO_ENV === "alipay" ? { disableScroll: true } : {};
    const trapScroll = process.env.TARO_ENV === "alipay" ? { trapScroll: true } : {};
    watch(() => props.isOpened, (val, oldVal) => {
      if (val === oldVal) {
        handleTouchScroll(val);
      }
      if (val !== _isOpened.value) {
        _isOpened.value = val;
      }
    });
    function handleClose() {
      _isOpened.value = false;
      nextTick(() => {
        emit("close");
      });
    }
    function handleTouchMove(e) {
      e.stopPropagation();
    }
    return {
      ...toRefs(props),
      rootClasses,
      trapScroll,
      disableScroll,
      handleClose,
      handleTouchMove
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _mergeProps = mergeProps, _createVNode = createVNode, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _renderSlot = renderSlot;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
  const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
  const _component_taro_scroll_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-scroll-view") : "scroll-view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
    class: _ctx.rootClasses,
    catchMove: true,
    onTouchmove: _ctx.handleTouchMove
  }), {
    default: _withCtx(() => [
      _createCommentVNode(" overlay "),
      _createVNode(_component_taro_view, _mergeProps({ class: "at-float-layout__overlay" }, _ctx.disableScroll, { onTap: _ctx.handleClose }), null, 16 /* FULL_PROPS */, ["onTap"]),
      _createCommentVNode(" container layout "),
      _createVNode(_component_taro_view, { class: "at-float-layout__container layout" }, {
        default: _withCtx(() => [
          _createCommentVNode(" header "),
          (_ctx.title)
            ? (_openBlock(), _createBlock(_component_taro_view, {
                key: 0,
                class: "layout-header"
              }, {
                default: _withCtx(() => [
                  _createVNode(_component_taro_text, { class: "layout-header__title" }, {
                    default: _withCtx(() => [
                      _createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
                    ]),
                    _: 1 /* STABLE */
                  }),
                  _createVNode(_component_taro_view, {
                    class: "layout-header__btn-close",
                    onTap: _ctx.handleClose
                  }, null, 8 /* PROPS */, ["onTap"])
                ]),
                _: 1 /* STABLE */
              }))
            : _createCommentVNode("v-if", true),
          _createCommentVNode(" body "),
          _createVNode(_component_taro_view, { class: "layout-body" }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_scroll_view, _mergeProps({ class: "layout-body__content" }, _ctx.trapScroll, {
                "scroll-x": _ctx.scrollX,
                "scroll-y": _ctx.scrollY,
                "scroll-top": _ctx.scrollTop,
                "scroll-left": _ctx.scrollLeft,
                "upper-threshold": _ctx.upperThreshold,
                "lower-threshold": _ctx.lowerThreshold,
                "scroll-with-animation": _ctx.scrollWithAnimation,
                onScroll: _cache[0] || (_cache[0] = (e) => _ctx.$emit('scroll', e)),
                onScrolltolower: _cache[1] || (_cache[1] = (e) => _ctx.$emit('scroll-to-lower', e)),
                onScrolltoupper: _cache[2] || (_cache[2] = (e) => _ctx.$emit('scroll-to-upper', e))
              }), {
                default: _withCtx(() => [
                  _renderSlot(_ctx.$slots, "default")
                ]),
                _: 3 /* FORWARDED */
              }, 16 /* FULL_PROPS */, ["scroll-x", "scroll-y", "scroll-top", "scroll-left", "upper-threshold", "lower-threshold", "scroll-with-animation"])
            ]),
            _: 3 /* FORWARDED */
          })
        ]),
        _: 3 /* FORWARDED */
      })
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */, ["class", "onTouchmove"]))
}


AtFloatLayout.render = _sfc_render;

export default AtFloatLayout;