feat: add usePopupState

src/dialog/index.js

@@ -1,38 +1,27 @@
 import { nextTick } from 'vue';
-import { inBrowser, mountComponent } from '../utils';
+import { inBrowser } from '../utils';
+import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanDialog from './Dialog';
 
 let instance;
 
 function initInstance() {
-  ({ instance } = mountComponent({
+  const Wrapper = {
-    data() {
+    setup() {
-      return {
+      const { state, toggle } = usePopupState();
-        dialogProps: {
+      return () => (
-          show: false,
-        },
-      };
-    },
-    methods: {
-      toggle(show) {
-        this.dialogProps.show = show;
-      },
-      setProps(props) {
-        this.dialogProps = props;
-      },
-    },
-    render() {
-      return (
         <VanDialog
           lazyRender={false}
           {...{
-            ...this.dialogProps,
+            ...state,
-            'onUpdate:show': this.toggle,
+            'onUpdate:show': toggle,
           }}
         />
       );
     },
-  }));
+  };
+
+  ({ instance } = mountComponent(Wrapper));
 }
 
 function Dialog(options) {
@@ -46,7 +35,7 @@ function Dialog(options) {
       initInstance();
     }
 
-    instance.setProps({
+    instance.setState({
       ...Dialog.currentOptions,
       ...options,
       callback: (action) => {

src/image-preview/index.js

@@ -1,5 +1,6 @@
 import { nextTick } from 'vue';
-import { inBrowser, mountComponent } from '../utils';
+import { inBrowser } from '../utils';
+import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanImagePreview from './ImagePreview';
 
 let instance;
@@ -27,34 +28,19 @@ const defaultConfig = {
 
 function initInstance() {
   ({ instance } = mountComponent({
-    data() {
+    setup() {
-      return {
+      const { state, toggle } = usePopupState();
-        props: {
+
-          show: false,
+      const onClosed = () => {
-        },
+        state.images = [];
       };
-    },
+
-    methods: {
+      return () => (
-      close() {
-        this.toggle(false);
-      },
-      toggle(show) {
-        this.props.show = show;
-      },
-      setProps(props) {
-        Object.assign(this.props, props);
-      },
-      onClosed() {
-        this.props.images = [];
-      },
-    },
-    render() {
-      return (
         <VanImagePreview
           {...{
-            ...this.props,
+            ...state,
-            onClosed: this.onClosed,
+            onClosed,
-            'onUpdate:show': this.toggle,
+            'onUpdate:show': toggle,
           }}
         />
       );
@@ -74,7 +60,7 @@ const ImagePreview = (images, startPosition = 0) => {
 
   const options = Array.isArray(images) ? { images, startPosition } : images;
 
-  instance.setProps({
+  instance.setState({
     ...defaultConfig,
     ...options,
   });

src/notify/index.js

@@ -1,5 +1,6 @@
 import { nextTick } from 'vue';
-import { isObject, inBrowser, mountComponent } from '../utils';
+import { isObject, inBrowser } from '../utils';
+import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanNotify from './Notify';
 
 let timer;
@@ -11,27 +12,13 @@ function parseOptions(message) {
 
 function initInstance() {
   ({ instance } = mountComponent({
-    data() {
+    setup() {
-      return {
+      const { state, toggle } = usePopupState();
-        notifyProps: {
+      return () => (
-          show: false,
-        },
-      };
-    },
-    methods: {
-      toggle(show) {
-        this.notifyProps.show = show;
-      },
-      setProps(props) {
-        this.notifyProps = props;
-      },
-    },
-    render() {
-      return (
         <VanNotify
           {...{
-            ...this.notifyProps,
+            ...state,
-            'onUpdate:show': this.toggle,
+            'onUpdate:show': toggle,
           }}
         />
       );
@@ -53,7 +40,7 @@ function Notify(options) {
     ...parseOptions(options),
   };
 
-  instance.setProps(options);
+  instance.setState(options);
   clearTimeout(timer);
 
   if (options.duration && options.duration > 0) {

src/toast/index.js

@@ -1,5 +1,6 @@
 import { nextTick } from 'vue';
-import { isObject, inBrowser, mountComponent } from '../utils';
+import { isObject, inBrowser } from '../utils';
+import { mountComponent } from '../utils/mount-component';
 import VanToast from './Toast';
 
 const defaultOptions = {
@@ -57,14 +58,14 @@ function createInstance() {
         return {
           timer: null,
           message: null,
-          toastProps: {
+          state: {
             show: false,
           },
         };
       },
       watch: {
         message(val) {
-          this.toastProps.message = val;
+          this.state.message = val;
         },
       },
       methods: {
@@ -72,7 +73,7 @@ function createInstance() {
           this.toggle(false);
         },
         toggle(show, duration) {
-          this.toastProps.show = show;
+          this.state.show = show;
 
           if (show) {
             clearTimeout(this.timer);
@@ -84,8 +85,8 @@ function createInstance() {
             }
           }
         },
-        setProps(props) {
+        setState(props) {
-          this.toastProps = {
+          this.state = {
             ...props,
             duration: undefined,
           };
@@ -102,7 +103,7 @@ function createInstance() {
         return (
           <VanToast
             {...{
-              ...this.toastProps,
+              ...this.state,
               onClosed: this.onClosed,
               'onUpdate:show': this.toggle,
             }}
@@ -132,7 +133,7 @@ function Toast(options = {}) {
     ...options,
   };
 
-  toast.setProps(options);
+  toast.setState(options);
 
   nextTick(() => {
     toast.toggle(true, options.duration);

src/utils/index.ts

@@ -1,5 +1,3 @@
-import { createApp, Component } from 'vue';
-
 export { addUnit, getSizeStyle } from './format/unit';
 export { createNamespace } from './create';
 
@@ -42,18 +40,3 @@ export function pick(obj: Record<string, any>, keys: string[]) {
     return ret;
   }, {} as Record<string, any>);
 }
-
-export function mountComponent(RootComponent: Component) {
-  const app = createApp(RootComponent);
-  const root = document.createElement('div');
-
-  document.body.appendChild(root);
-
-  return {
-    instance: app.mount(root),
-    unmount() {
-      app.unmount(root);
-      document.body.removeChild(root);
-    },
-  };
-}

src/utils/mount-component.ts

@@ -0,0 +1,42 @@
+import { createApp, reactive, Component } from 'vue';
+import { usePublicApi } from '../composition/use-public-api';
+
+export function usePopupState() {
+  const state = reactive({
+    show: false,
+  });
+
+  const toggle = (show: boolean) => {
+    state.show = show;
+  };
+
+  const close = () => {
+    toggle(false);
+  };
+
+  const setState = (props: Record<string, any>) => {
+    Object.assign(state, props);
+  };
+
+  usePublicApi({ close, toggle, setState });
+
+  return {
+    state,
+    toggle,
+  };
+}
+
+export function mountComponent(RootComponent: Component) {
+  const app = createApp(RootComponent);
+  const root = document.createElement('div');
+
+  document.body.appendChild(root);
+
+  return {
+    instance: app.mount(root),
+    unmount() {
+      app.unmount(root);
+      document.body.removeChild(root);
+    },
+  };
+}