sard-uniapp 1.25.5 → 1.25.6

package/components/action-sheet-agent/action-sheet-agent.vue

@@ -0,0 +1,194 @@
+<template>
+  <sar-action-sheet
+    :root-style="innerProps.rootStyle"
+    :root-class="innerProps.rootClass"
+    :description="innerProps.description"
+    :itemList="innerProps.itemList"
+    :cancel="innerProps.cancel"
+    :show-cancel="innerProps.showCancel"
+    :visible="innerProps.visible"
+    :overlay-closable="innerProps.overlayClosable"
+    :before-close="innerProps.beforeClose"
+    :duration="innerProps.duration"
+    @update:visible="onUpdateVisible"
+    @select="onSelect"
+    @close="onClose"
+    @cancel="onCancel"
+    @visible-hook="onVisibleHook"
+    @before-enter="onBeforeEnter"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @enter-cancelled="onEnterCancelled"
+    @before-leave="onBeforeLeave"
+    @leave="onLeave"
+    @after-leave="onAfterLeave"
+    @leave-cancelled="onLeaveCancelled"
+  />
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, ref } from "vue";
+import SarActionSheet from "../action-sheet/action-sheet.vue";
+import {
+  defaultActionSheetAgentProps,
+  imperativeName
+} from "./common";
+import { useImperative } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} description 动作面板描述说明，默认值：-。
+ * @property {ActionSheetItem[]} itemList 面板项列表，默认值：[]。
+ * @property {boolean} showCancel 是否显示取消按钮，默认值：false。
+ * @property {string} cancel 自定义取消按钮文字，默认值：-。
+ * @property {boolean} visible 是否显示动作面板，默认值：false。
+ * @property {boolean} overlayClosable 点击遮罩后是否关闭，默认值：true。
+ * @property {ActionSheetBeforeClose} beforeClose 关闭前的回调，返回 `false` 或 `rejected` 状态的 `Promise` 可阻止关闭，默认值：-。
+ * @property {number} duration 显隐动画时长，单位 ms，默认值：300。
+ * @property {string} id 动作面板组件的 id，默认值：'actionSheet'。
+ * @property {() => void} onClose 点击遮罩时调用，默认值：undefined。
+ * @property {() => void} onCancel 点击取消按钮时调用，默认值：undefined。
+ * @property {(item: ActionSheetItem, index: number) => void} onSelect 点击动作项时调用，默认值：undefined。
+ * @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用，默认值：undefined。
+ * @property {() => void} onBeforeEnter 入场动画开始前调用，默认值：undefined。
+ * @property {() => void} onEnter 入场动画开始时调用，默认值：undefined。
+ * @property {() => void} onAfterEnter 入场动画结束时调用，默认值：undefined。
+ * @property {() => void} onEnterCancelled 入场动画取消时调用，默认值：undefined。
+ * @property {() => void} onBeforeLeave 退场动画开始前调用，默认值：undefined。
+ * @property {() => void} onLeave 退场动画开始时调用，默认值：undefined。
+ * @property {() => void} onAfterLeave 退场动画结束时调用，默认值：undefined。
+ * @property {() => void} onLeaveCancelled 退场动画取消时调用，默认值：undefined。
+ * @event {(visible: boolean) => void} update 动作面板显隐时触发
+ * @event {() => void} close 点击遮罩时触发
+ * @event {() => void} cancel 点击取消按钮时触发
+ * @event {(item: ActionSheetItem, index: number) => void} select 点击动作按钮时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
+ */
+export default  _defineComponent({
+  components: {
+    SarActionSheet,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "action-sheet-agent",
+  props:  _mergeDefaults({
+    id: { type: String, required: false },
+    onClose: { type: Function, required: false },
+    onCancel: { type: Function, required: false },
+    onSelect: { type: Function, required: false },
+    rootStyle: { type: null, required: false },
+    rootClass: { type: String, required: false },
+    description: { type: String, required: false },
+    itemList: { type: Array, required: false },
+    cancel: { type: String, required: false },
+    showCancel: { type: Boolean, required: false },
+    visible: { type: Boolean, required: false },
+    overlayClosable: { type: Boolean, required: false },
+    beforeClose: { type: Function, required: false },
+    duration: { type: Number, required: false },
+    onVisibleHook: { type: Function, required: false },
+    onBeforeEnter: { type: Function, required: false },
+    onEnter: { type: Function, required: false },
+    onAfterEnter: { type: Function, required: false },
+    onEnterCancelled: { type: Function, required: false },
+    onBeforeLeave: { type: Function, required: false },
+    onLeave: { type: Function, required: false },
+    onAfterLeave: { type: Function, required: false },
+    onLeaveCancelled: { type: Function, required: false }
+  }, defaultActionSheetAgentProps()),
+  emits: ["update:visible", "close", "cancel", "select", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const innerProps = ref({ ...props });
+    const imperative = {
+      show(newProps) {
+        innerProps.value = {
+          ...props,
+          ...newProps,
+          visible: true
+        };
+      },
+      hide() {
+        innerProps.value = {
+          ...innerProps.value,
+          visible: false
+        };
+      }
+    };
+    const onSelect = (item, index) => {
+      emit("select", item, index);
+      innerProps.value.onSelect?.(item, index);
+    };
+    const onClose = () => {
+      emit("close");
+      innerProps.value.onClose?.();
+    };
+    const onCancel = () => {
+      emit("cancel");
+      innerProps.value.onCancel?.();
+    };
+    const onUpdateVisible = (visible) => {
+      innerProps.value.visible = visible;
+      emit("update:visible", visible);
+    };
+    const onVisibleHook = (name) => {
+      emit("visible-hook", name);
+      innerProps.value.onVisibleHook?.(name);
+    };
+    const onBeforeEnter = () => {
+      emit("before-enter");
+      innerProps.value.onBeforeEnter?.();
+    };
+    const onEnter = () => {
+      emit("enter");
+      innerProps.value.onEnter?.();
+    };
+    const onAfterEnter = () => {
+      emit("after-enter");
+      innerProps.value.onAfterEnter?.();
+    };
+    const onEnterCancelled = () => {
+      emit("enter-cancelled");
+      innerProps.value.onEnterCancelled?.();
+    };
+    const onBeforeLeave = () => {
+      emit("before-leave");
+      innerProps.value.onBeforeLeave?.();
+    };
+    const onLeave = () => {
+      emit("leave");
+      innerProps.value.onLeave?.();
+    };
+    const onAfterLeave = () => {
+      emit("after-leave");
+      innerProps.value.onAfterLeave?.();
+    };
+    const onLeaveCancelled = () => {
+      emit("leave-cancelled");
+      innerProps.value.onLeaveCancelled?.();
+    };
+    useImperative(
+      imperativeName,
+      imperative,
+      computed(() => innerProps.value.id)
+    );
+    const __returned__ = { props, emit, innerProps, imperative, onSelect, onClose, onCancel, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarActionSheet };
+    return __returned__;
+  }
+});
+</script>