@overlastic/vue 0.8.0 → 0.8.3

package/dist/index.js

@@ -5,11 +5,55 @@ var context = {
 var ScriptsInjectionKey = Symbol("OverlayScripts");
 var InstancesInjectionKey = Symbol("OverlayInstances");
 
-// src/composable/define.ts
-import { getCurrentInstance, inject, onMounted, provide } from "vue-demi";
-import { useVModel } from "@vueuse/core";
+// src/components/Field.ts
+import { defineComponent, h } from "vue";
+var Field = defineComponent({
+  name: "Field",
+  props: {
+    is: {
+      type: [String, Number, Object],
+      default: ""
+    }
+  },
+  setup(props) {
+    return () => {
+      if (typeof props.is === "string" || typeof props.is === "number")
+        return props.is;
+      return props.is ? h(props.is) : null;
+    };
+  }
+});
+
+// src/components/Provider.ts
+import { markRaw } from "vue";
+import { defineComponent as defineComponent2, Fragment, h as h2, provide, ref } from "vue-demi";
+var OverlaysProvider = defineComponent2({
+  setup(_, { slots }) {
+    const instances = ref([]);
+    function render(Instance, props) {
+      instances.value.push({ Instance: markRaw(Instance), props });
+    }
+    function vanish(instance) {
+      instances.value = instances.value.filter(({ Instance }) => Instance !== instance);
+    }
+    provide(InstancesInjectionKey, { render, vanish });
+    return () => {
+      var _a;
+      return h2(Fragment, [
+        ...instances.value.map(
+          ({ Instance, props }, index) => h2(Instance, { ...props, key: index })
+        ),
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
+      ]);
+    };
+  }
+});
+
+// src/composable/disclosure.ts
 import { delay, noop } from "@overlastic/core";
-function useExtendOverlay(options = {}) {
+import { useVModel } from "@vueuse/core";
+import { getCurrentInstance, inject, onMounted, provide as provide2 } from "vue-demi";
+function useDisclosure(options = {}) {
   const { duration = 0, immediate = true, model = "visible", automatic = true } = options;
   const overlay = inject(ScriptsInjectionKey, useDeclarative(model, options));
   const dec = Reflect.get(overlay, "in_dec");
@@ -24,80 +68,63 @@ function useExtendOverlay(options = {}) {
     deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
   if (!dec && immediate)
     onMounted(() => visible.value = true);
-  provide(ScriptsInjectionKey, null);
+  provide2(ScriptsInjectionKey, null);
   return overlay;
 }
 function useDeclarative(model, options = {}) {
-  const { reject = "reject", resolve = "resolve" } = options.events || {};
+  const { cancel = "cancel", confirm = "confirm", close = "close" } = options.events || {};
   const instance = getCurrentInstance();
   if (!instance)
-    throw new Error("Please use useExtendOverlay in component setup");
+    throw new Error("Please use useDisclosure in component setup");
   const visible = useVModel(instance.props, model, instance.emit, { passive: true });
-  const _reject = (value) => {
-    instance == null ? void 0 : instance.emit(reject, value);
+  const _cancel = (value) => {
+    instance == null ? void 0 : instance.emit(cancel, value);
+    visible.value = false;
+  };
+  const _confirm = (value) => {
+    instance == null ? void 0 : instance.emit(confirm, value);
     visible.value = false;
   };
-  const _resolve = (value) => {
-    instance == null ? void 0 : instance.emit(resolve, value);
+  const _close = (value) => {
+    instance == null ? void 0 : instance.emit(close, value);
     visible.value = false;
   };
   return {
-    reject: _reject,
-    resolve: _resolve,
+    cancel: _cancel,
+    confirm: _confirm,
+    close: _close,
     vanish: noop,
     visible,
     in_dec: true
   };
 }
 
-// src/composable/scripts.ts
-import { ref } from "vue-demi";
-function useScripts(options) {
-  const { reject: _reject } = options.deferred || {};
+// src/composable/overlay.ts
+import { createConstructor, defineName } from "@overlastic/core";
+import { pascalCase } from "pascal-case";
+import { defineComponent as defineComponent3, h as h3, inject as inject2, provide as provide3, Teleport } from "vue";
+
+// src/composable/utils/index.ts
+import { createDeferred } from "@overlastic/core";
+import { ref as ref2 } from "vue-demi";
+function createScripts(options) {
+  const { cancel: _cancel } = options.deferred || {};
   const { vanish: _vanish } = options;
-  const visible = ref(false);
+  const visible = ref2(false);
   function vanish() {
     _vanish == null ? void 0 : _vanish();
-    _reject == null ? void 0 : _reject();
+    _cancel == null ? void 0 : _cancel();
   }
   return {
-    resolve: options.deferred.resolve,
-    reject: options.deferred.reject,
+    confirm: options.deferred.confirm,
+    cancel: options.deferred.cancel,
+    close: () => options.deferred.confirm(),
     deferred: options.deferred,
     visible,
     vanish
   };
 }
-
-// src/composable/holder.ts
-import { Teleport, defineComponent, h, provide as provide2, ref as ref2 } from "vue-demi";
-import { createDeferred, defineName } from "@overlastic/core";
-import { pascalCase } from "pascal-case";
-function useOverlayHolder(component, options = {}) {
-  const { callback, scripts, props, refresh } = useRefreshMetadata();
-  const name = defineName(options.id, options.autoIncrement);
-  function render() {
-    return h(
-      Teleport,
-      {
-        to: options.root || document.body,
-        disabled: options.root === false
-      },
-      h("div", { id: name }, [
-        h(component, props.value)
-      ])
-    );
-  }
-  const Holder = defineComponent({
-    name: pascalCase(name),
-    setup() {
-      provide2(ScriptsInjectionKey, scripts);
-      return () => refresh.value ? render() : null;
-    }
-  });
-  return [Holder, callback];
-}
-function useRefreshMetadata() {
+function createRefreshMetadata() {
   const visible = ref2(false);
   const refresh = ref2(false);
   const props = ref2();
@@ -105,12 +132,12 @@ function useRefreshMetadata() {
   function vanish() {
     refresh.value = false;
     props.value = {};
-    scripts.reject();
+    scripts.cancel();
   }
   function callback(_props) {
     scripts.deferred = createDeferred();
-    scripts.resolve = scripts.deferred.resolve;
-    scripts.reject = scripts.deferred.reject;
+    scripts.confirm = scripts.deferred.confirm;
+    scripts.cancel = scripts.deferred.cancel;
     props.value = _props;
     refresh.value = true;
     return scripts.deferred;
@@ -118,34 +145,64 @@ function useRefreshMetadata() {
   return { callback, scripts, props, refresh };
 }
 
-// src/composable/inject.ts
-import { createConstructor } from "@overlastic/core";
-import { defineComponent as defineComponent2, h as h2, inject as inject2, provide as provide3 } from "vue";
-import { pascalCase as pascalCase2 } from "pascal-case";
-var { define } = createConstructor((Instance, props, options) => {
+// src/composable/overlay.ts
+var { define: defineInject } = createConstructor((Instance, props, options) => {
   const { id, deferred, render, vanish: _vanish } = options;
-  const InstanceWithProvider = defineComponent2({
-    name: pascalCase2(id),
+  const InstanceWithProvider = defineComponent3({
+    name: pascalCase(id),
     setup: () => {
-      const scripts = useScripts({ vanish, deferred });
+      const scripts = createScripts({ vanish, deferred });
       provide3(ScriptsInjectionKey, scripts);
     },
-    render: () => h2(Instance, props)
+    render: () => h3(Instance, props)
   });
   function vanish() {
     _vanish(InstanceWithProvider);
   }
   render(InstanceWithProvider, props);
 }, { container: false });
-function useOverlayInject(Instance) {
-  const { render, vanish } = inject2(InstancesInjectionKey);
-  return define(Instance, { render, vanish });
+function defineHolder(component, options = {}) {
+  const { callback, scripts, props, refresh } = createRefreshMetadata();
+  const name = defineName(options.id, options.autoIncrement);
+  function render() {
+    return h3(
+      Teleport,
+      {
+        to: options.root || document.body,
+        disabled: options.root === false
+      },
+      h3("div", { id: name }, [
+        h3(component, props.value)
+      ])
+    );
+  }
+  const Holder = defineComponent3({
+    name: pascalCase(name),
+    setup() {
+      provide3(ScriptsInjectionKey, scripts);
+      return () => refresh.value ? render() : null;
+    }
+  });
+  return [
+    Holder,
+    callback
+  ];
+}
+function useOverlay(Instance, options = {}) {
+  const { type = "inject" } = options != null ? options : {};
+  if (type === "inject") {
+    const { render, vanish } = inject2(InstancesInjectionKey);
+    return defineInject(Instance, { render, vanish });
+  }
+  if (type === "holder") {
+    return defineHolder(Instance, options);
+  }
 }
 
 // src/define/constructor.ts
 import { createConstructor as createConstructor2 } from "@overlastic/core";
-import { pascalCase as pascalCase3 } from "pascal-case";
-import { createApp, defineComponent as defineComponent3, h as h3, provide as provide4 } from "vue-demi";
+import { pascalCase as pascalCase2 } from "pascal-case";
+import { createApp, defineComponent as defineComponent4, h as h4, provide as provide4 } from "vue-demi";
 
 // src/utils/index.ts
 function inheritParent(app, appContext) {
@@ -164,16 +221,16 @@ var constructor = createConstructor2((Instance, props, options) => {
     app.unmount();
     container.remove();
   }
-  const InstanceWithProvider = defineComponent3({
-    name: pascalCase3(id),
+  const InstanceWithProvider = defineComponent4({
+    name: pascalCase2(id),
     setup: () => {
-      const scripts = useScripts({
+      const scripts = createScripts({
         vanish,
         deferred
       });
       provide4(ScriptsInjectionKey, scripts);
     },
-    render: () => h3(Instance, props)
+    render: () => h4(Instance, props)
   });
   const app = createApp(InstanceWithProvider);
   inheritParent(app, appContext);
@@ -185,65 +242,19 @@ var constructor = createConstructor2((Instance, props, options) => {
 var defineOverlay = constructor.define;
 var renderOverlay = constructor.render;
 
-// src/components/Field.ts
-import { defineComponent as defineComponent4, h as h4 } from "vue";
-var Field = defineComponent4({
-  name: "Field",
-  props: {
-    is: {
-      type: [String, Number, Object],
-      default: ""
-    }
-  },
-  setup(props) {
-    return () => {
-      if (typeof props.is === "string" || typeof props.is === "number")
-        return props.is;
-      return props.is ? h4(props.is) : null;
-    };
-  }
-});
-
-// src/components/Provider.ts
-import { Fragment, defineComponent as defineComponent5, h as h5, provide as provide5, ref as ref3 } from "vue-demi";
-import { markRaw } from "vue";
-var OverlaysProvider = defineComponent5({
-  setup(_, { slots }) {
-    const instances = ref3([]);
-    function render(Instance, props) {
-      console.log({ Instance, props });
-      instances.value.push({ Instance: markRaw(Instance), props });
-    }
-    function vanish(instance) {
-      instances.value = instances.value.filter(({ Instance }) => Instance !== instance);
-    }
-    provide5(InstancesInjectionKey, { render, vanish });
-    return () => {
-      var _a;
-      return h5(Fragment, [
-        ...instances.value.map(
-          ({ Instance, props }, index) => h5(Instance, { ...props, key: index })
-        ),
-        (_a = slots.default) == null ? void 0 : _a.call(slots)
-      ]);
-    };
-  }
-});
-
 // src/index.ts
 function install(app) {
   context.appContext = app._context;
 }
 var unoverlay = { install };
-var src_default = unoverlay;
+var index_default = unoverlay;
 export {
   Field,
   OverlaysProvider,
-  src_default as default,
+  index_default as default,
   defineOverlay,
   install,
   renderOverlay,
-  useExtendOverlay,
-  useOverlayHolder,
-  useOverlayInject
+  useDisclosure,
+  useOverlay
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/vue",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.8.3",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -25,11 +25,11 @@
     "dist"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.1",
     "pascal-case": "3.1.2",
     "vue": "^3.3.2",
-    "vue-demi": ">=0.14.7",
-    "@overlastic/core": "^0.8.0"
+    "vue-demi": ">=0.14.10",
+    "@overlastic/core": "^0.8.3"
   },
   "scripts": {
     "build": "tsup src/index.ts",