mount-component.mjs 853 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. import { createApp, reactive } from "vue";
  2. import { extend } from "./basic.mjs";
  3. import { useExpose } from "../composables/use-expose.mjs";
  4. function usePopupState() {
  5. const state = reactive({
  6. show: false
  7. });
  8. const toggle = (show) => {
  9. state.show = show;
  10. };
  11. const open = (props) => {
  12. extend(state, props, { transitionAppear: true });
  13. toggle(true);
  14. };
  15. const close = () => toggle(false);
  16. useExpose({ open, close, toggle });
  17. return {
  18. open,
  19. close,
  20. state,
  21. toggle
  22. };
  23. }
  24. function mountComponent(RootComponent) {
  25. const app = createApp(RootComponent);
  26. const root = document.createElement("div");
  27. document.body.appendChild(root);
  28. return {
  29. instance: app.mount(root),
  30. unmount() {
  31. app.unmount();
  32. document.body.removeChild(root);
  33. }
  34. };
  35. }
  36. export {
  37. mountComponent,
  38. usePopupState
  39. };