taro-ui-vue3/lib/action-sheet/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, watch, ref, computed, mergeProps} from "vue";
import {View} from "@tarojs/components";
import AtActionSheetHeader from "./header/index";
import AtActionSheetBody from "./body/index";
import AtActionSheetFooter from "./footer/index";
const AtActionSheet = defineComponent({
  name: "AtActionSheet",
  props: {
    isOpened: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    cancelText: {
      type: String,
      default: ""
    },
    onClose: Function,
    onCancel: Function
  },
  setup(props, {attrs, slots}) {
    const _isOpened = ref(props.isOpened);
    const rootClasses = computed(() => ({
      "at-action-sheet": true,
      "at-action-sheet--active": _isOpened.value
    }));
    watch(() => props.isOpened, (val) => {
      if (val !== _isOpened.value) {
        _isOpened.value = val;
      }
      !val && handleClose();
    });
    function handleClose() {
      var _a;
      (_a = props.onClose) == null ? void 0 : _a.call(props);
    }
    function handleCancel() {
      var _a;
      (_a = props.onCancel) == null ? void 0 : _a.call(props);
      close();
    }
    function close() {
      _isOpened.value = false;
      handleClose();
    }
    function handleTouchMove(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value,
      catchMove: true,
      onTouchmove: handleTouchMove
    }), {
      default: () => [
        h(View, {
          class: "at-action-sheet__overlay",
          onTap: close
        }),
        h(View, {
          class: "at-action-sheet__container"
        }, {
          default: () => [
            props.title && h(AtActionSheetHeader, null, {default: () => props.title}),
            h(AtActionSheetBody, null, {default: () => {
              var _a;
              return (_a = slots.default) == null ? void 0 : _a.call(slots);
            }}),
            props.cancelText && h(AtActionSheetFooter, {
              onClick: handleCancel
            }, {default: () => props.cancelText})
          ]
        })
      ]
    });
  }
});
var action_sheet_default = AtActionSheet;
export {
  action_sheet_default as default
};