@overlastic/vue 0.4.7

package/dist/index.js

@@ -0,0 +1,249 @@
+// src/internal/index.ts
+var context = {
+  appContext: null
+};
+var ScriptsInjectionKey = Symbol("OverlayScripts");
+var InstancesInjectionKey = Symbol("OverlayInstances");
+
+// src/composable/usePrograms.ts
+import { getCurrentInstance, inject, onMounted, provide } from "vue-demi";
+import { useVModel } from "@vueuse/core";
+import { delay, noop } from "@overlastic/core";
+function usePrograms(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");
+  const { visible, deferred, vanish } = overlay;
+  async function destroy() {
+    visible.value = false;
+    await delay(duration);
+    vanish == null ? void 0 : vanish();
+    return Promise.resolve();
+  }
+  if (!dec && automatic)
+    deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
+  if (!dec && immediate)
+    onMounted(() => visible.value = true);
+  provide(ScriptsInjectionKey, null);
+  return overlay;
+}
+function useDeclarative(model, options = {}) {
+  const { reject = "reject", resolve = "resolve" } = options.events || {};
+  const instance = getCurrentInstance();
+  if (!instance)
+    throw new Error("Please use usePrograms in component setup");
+  const visible = useVModel(instance.props, model, instance.emit, { passive: true });
+  const _reject = (value) => {
+    instance == null ? void 0 : instance.emit(reject, value);
+    visible.value = false;
+  };
+  const _resolve = (value) => {
+    instance == null ? void 0 : instance.emit(resolve, value);
+    visible.value = false;
+  };
+  return {
+    reject: _reject,
+    resolve: _resolve,
+    vanish: noop,
+    visible,
+    in_dec: true
+  };
+}
+
+// src/composable/useScripts.ts
+import { ref } from "vue-demi";
+function useScripts(options) {
+  const { reject: _reject } = options.deferred || {};
+  const { vanish: _vanish } = options;
+  const visible = ref(false);
+  function vanish() {
+    _vanish == null ? void 0 : _vanish();
+    _reject == null ? void 0 : _reject();
+  }
+  return {
+    resolve: options.deferred.resolve,
+    reject: options.deferred.reject,
+    deferred: options.deferred,
+    visible,
+    vanish
+  };
+}
+
+// src/composable/useOverlayHolder.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() {
+  const visible = ref2(false);
+  const refresh = ref2(false);
+  const props = ref2();
+  const scripts = { vanish, visible };
+  function vanish() {
+    refresh.value = false;
+    props.value = {};
+    scripts.reject();
+  }
+  function callback(_props) {
+    scripts.deferred = createDeferred();
+    scripts.resolve = scripts.deferred.resolve;
+    scripts.reject = scripts.deferred.reject;
+    props.value = _props;
+    refresh.value = true;
+    return scripts.deferred;
+  }
+  return { callback, scripts, props, refresh };
+}
+
+// src/composable/useOverlay.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) => {
+  const { container, id, deferred, render, vanish: _vanish } = options;
+  const InstanceWithProvider = defineComponent2({
+    name: pascalCase2(id),
+    setup: () => {
+      const scripts = useScripts({ vanish, deferred });
+      provide3(ScriptsInjectionKey, scripts);
+    },
+    render: () => h2(Instance, props)
+  });
+  function vanish() {
+    _vanish(InstanceWithProvider);
+    container.remove();
+  }
+  render(Instance, props);
+});
+function useOverlay(Instance) {
+  const { render, vanish } = inject2(InstancesInjectionKey);
+  return define(Instance, { render, vanish });
+}
+
+// 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";
+
+// src/utils/index.ts
+function inheritParent(app, appContext) {
+  var _a;
+  const parent = (appContext == null ? void 0 : appContext.app) || ((_a = context.appContext) == null ? void 0 : _a.app);
+  if (parent) {
+    app.config.globalProperties = parent.config.globalProperties;
+    Object.assign(app._context, parent._context);
+  }
+}
+
+// src/define/constructor.ts
+var constructor = createConstructor2((Instance, props, options) => {
+  const { container, id, deferred, appContext } = options;
+  function vanish() {
+    app.unmount();
+    container.remove();
+  }
+  const InstanceWithProvider = defineComponent3({
+    name: pascalCase3(id),
+    setup: () => {
+      const scripts = useScripts({
+        vanish,
+        deferred
+      });
+      provide4(ScriptsInjectionKey, scripts);
+    },
+    render: () => h3(Instance, props)
+  });
+  const app = createApp(InstanceWithProvider);
+  inheritParent(app, appContext);
+  app.mount(container);
+  return vanish;
+});
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+
+// src/components/index.ts
+import { Fragment, defineComponent as defineComponent4, getCurrentInstance as getCurrentInstance2, h as h4, provide as provide5, ref as ref3 } from "vue-demi";
+var Provider = defineComponent4({
+  setup(_, { slots }) {
+    const { appContext } = getCurrentInstance2();
+    context.appContext = appContext;
+    return () => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+    };
+  }
+});
+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;
+    };
+  }
+});
+var OverlaysProvider = defineComponent4({
+  setup(_, { slots }) {
+    const instances = ref3([]);
+    function render(Instance, props) {
+      instances.value.push({ Instance, props });
+    }
+    function vanish(instance) {
+      instances.value = instances.value.filter(({ Instance }) => Instance === instance);
+    }
+    provide5(InstancesInjectionKey, { render, vanish });
+    return () => {
+      var _a;
+      return h4(Fragment, [
+        ...instances.value.map(({ Instance, props }, index) => h4(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;
+export {
+  Field,
+  OverlaysProvider,
+  Provider,
+  src_default as default,
+  defineOverlay,
+  install,
+  renderOverlay,
+  useOverlay,
+  useOverlayHolder,
+  usePrograms
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@overlastic/vue",
+  "type": "module",
+  "version": "0.4.7",
+  "license": "MIT",
+  "homepage": "https://github.com/hairyf/overlastic#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hairyf/overlastic.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hairyf/overlastic/issues"
+  },
+  "keywords": [
+    "unified",
+    "overlay",
+    "vue"
+  ],
+  "main": "./dist/index.cjs",
+  "publishConfig": {
+    "jsdelivr": "./dist/index.global.js",
+    "linkDirectory": false
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@vueuse/core": "^10.9.0",
+    "pascal-case": "latest",
+    "vue": "^3.3.2",
+    "vue-demi": ">=0.14.7",
+    "@overlastic/core": "^0.4.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "lint": "eslint ."
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts"
+}