origam 0.1.0

package/dist/src/composables/Commons/style.composable.cjs

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyle = useStyle;
+exports.useStyleTag = useStyleTag;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+let _id = 0;
+function useStyleTag(css, options = {}) {
+  const isLoaded = (0, _vue.shallowRef)(false);
+  const {
+    document = _consts.DEFAULT_DOCUMENT,
+    immediate = true,
+    manual = false,
+    id = `foxy_styletag_${++_id}`
+  } = options;
+  const cssRef = (0, _vue.shallowRef)(css);
+  let stop = () => {};
+  const load = () => {
+    if (!document) return;
+    const el = document.getElementById(id) || document.createElement("style");
+    if (!el.isConnected) {
+      el.id = id;
+      if (options.media) el.media = options.media;
+      document.head.appendChild(el);
+    }
+    if (isLoaded.value) return;
+    stop = (0, _vue.watch)(cssRef, value => {
+      el.textContent = value;
+    }, {
+      immediate: true
+    });
+    isLoaded.value = true;
+  };
+  const unload = () => {
+    if (!document || !isLoaded.value) return;
+    stop();
+    document.head.removeChild(document.getElementById(id));
+    isLoaded.value = false;
+  };
+  if (immediate && !manual) (0, _utils.tryOnMounted)(load);
+  if (!manual) (0, _utils.tryOnScopeDispose)(unload);
+  return {
+    id,
+    css: cssRef,
+    unload,
+    load,
+    isLoaded: (0, _vue.readonly)(isLoaded)
+  };
+}
+function useStyle(styles, uniq = void 0, name = (0, _utils.getCurrentInstanceName)()) {
+  const id = (0, _vue.computed)(() => {
+    return uniq ?? `${name}-${(0, _utils.getUid)()}`;
+  });
+  const customCss = (0, _vue.computed)(() => {
+    const stylesArray = styles.value.map(value => {
+      if (typeof value === "object" && !Array.isArray(value)) {
+        return Object.keys(value).filter(key => typeof value[key] !== "undefined").map(key => `${key}: ${value[key]}`);
+      }
+      return value;
+    }).flat().filter(value => value.length > 0);
+    return `#${id.value} {${stylesArray.join(";")}}`;
+  });
+  const {
+    id: styleTagId,
+    css,
+    load,
+    unload,
+    isLoaded
+  } = useStyleTag(customCss);
+  (0, _vue.onMounted)(() => {
+    load();
+  });
+  return {
+    id,
+    styleTagId,
+    css,
+    load,
+    unload,
+    isLoaded
+  };
+}

package/dist/src/composables/Commons/style.composable.d.ts

@@ -0,0 +1,25 @@
+import type { IStyleTagOptions } from "@foxy/interfaces";
+import { ComputedRef, MaybeRef } from 'vue';
+/**
+ * Inject <style> element in head.
+ *
+ * Overload: Omitted id
+ *
+ * @param css
+ * @param options
+ */
+export declare function useStyleTag(css: MaybeRef<string>, options?: IStyleTagOptions): {
+    id: IStyleTagOptions;
+    css: import("vue").Ref<string, string> | import("vue").ShallowRef<string, string> | import("vue").WritableComputedRef<string, string>;
+    unload: () => void;
+    load: () => void;
+    isLoaded: Readonly<import("vue").Ref<boolean, boolean>>;
+};
+export declare function useStyle(styles: ComputedRef, uniq?: undefined, name?: any): {
+    id: ComputedRef<string>;
+    styleTagId: IStyleTagOptions;
+    css: import("vue").Ref<string, string> | import("vue").ShallowRef<string, string> | import("vue").WritableComputedRef<string, string>;
+    load: () => void;
+    unload: () => void;
+    isLoaded: Readonly<import("vue").Ref<boolean, boolean>>;
+};

package/dist/src/composables/Commons/style.composable.js

@@ -0,0 +1,81 @@
+import { DEFAULT_DOCUMENT } from "@foxy/consts";
+import { getCurrentInstanceName, getUid, tryOnMounted, tryOnScopeDispose } from "@foxy/utils";
+import { computed, onMounted, readonly, shallowRef, watch } from "vue";
+let _id = 0;
+export function useStyleTag(css, options = {}) {
+  const isLoaded = shallowRef(false);
+  const {
+    document = DEFAULT_DOCUMENT,
+    immediate = true,
+    manual = false,
+    id = `foxy_styletag_${++_id}`
+  } = options;
+  const cssRef = shallowRef(css);
+  let stop = () => {
+  };
+  const load = () => {
+    if (!document)
+      return;
+    const el = document.getElementById(id) || document.createElement("style");
+    if (!el.isConnected) {
+      el.id = id;
+      if (options.media)
+        el.media = options.media;
+      document.head.appendChild(el);
+    }
+    if (isLoaded.value)
+      return;
+    stop = watch(
+      cssRef,
+      (value) => {
+        el.textContent = value;
+      },
+      { immediate: true }
+    );
+    isLoaded.value = true;
+  };
+  const unload = () => {
+    if (!document || !isLoaded.value)
+      return;
+    stop();
+    document.head.removeChild(document.getElementById(id));
+    isLoaded.value = false;
+  };
+  if (immediate && !manual)
+    tryOnMounted(load);
+  if (!manual)
+    tryOnScopeDispose(unload);
+  return {
+    id,
+    css: cssRef,
+    unload,
+    load,
+    isLoaded: readonly(isLoaded)
+  };
+}
+export function useStyle(styles, uniq = void 0, name = getCurrentInstanceName()) {
+  const id = computed(() => {
+    return uniq ?? `${name}-${getUid()}`;
+  });
+  const customCss = computed(() => {
+    const stylesArray = styles.value.map((value) => {
+      if (typeof value === "object" && !Array.isArray(value)) {
+        return Object.keys(value).filter((key) => typeof value[key] !== "undefined").map((key) => `${key}: ${value[key]}`);
+      }
+      return value;
+    }).flat().filter((value) => value.length > 0);
+    return `#${id.value} {${stylesArray.join(";")}}`;
+  });
+  const { id: styleTagId, css, load, unload, isLoaded } = useStyleTag(customCss);
+  onMounted(() => {
+    load();
+  });
+  return {
+    id,
+    styleTagId,
+    css,
+    load,
+    unload,
+    isLoaded
+  };
+}

package/dist/src/composables/Commons/teleport.composable.cjs

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTeleport = useTeleport;
+var _consts = require("@foxy/consts");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useTeleport(target) {
+  const teleportTarget = (0, _vue.computed)(() => {
+    const _target = target.value;
+    if (_target === true || !_consts.IN_BROWSER) return void 0;
+    const targetElement = _target === false ? document.body : typeof _target === "string" ? document.querySelector(_target) : _target;
+    if (targetElement == null) {
+      (0, _utils.consoleWarn)(`Unable to locate target ${_target}`);
+      return void 0;
+    }
+    let container = targetElement.querySelector(":scope > .foxy-overlay-container");
+    if (!container) {
+      container = document.createElement("div");
+      container.className = "foxy-overlay-container";
+      targetElement.appendChild(container);
+    }
+    return container;
+  });
+  return {
+    teleportTarget
+  };
+}

package/dist/src/composables/Commons/teleport.composable.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+export declare function useTeleport(target: Ref<boolean | string | Element>): {
+    teleportTarget: import("vue").ComputedRef<Element | undefined>;
+};

package/dist/src/composables/Commons/teleport.composable.js

@@ -0,0 +1,22 @@
+import { IN_BROWSER } from "@foxy/consts";
+import { consoleWarn } from "@foxy/utils";
+import { computed } from "vue";
+export function useTeleport(target) {
+  const teleportTarget = computed(() => {
+    const _target = target.value;
+    if (_target === true || !IN_BROWSER) return void 0;
+    const targetElement = _target === false ? document.body : typeof _target === "string" ? document.querySelector(_target) : _target;
+    if (targetElement == null) {
+      consoleWarn(`Unable to locate target ${_target}`);
+      return void 0;
+    }
+    let container = targetElement.querySelector(":scope > .foxy-overlay-container");
+    if (!container) {
+      container = document.createElement("div");
+      container.className = "foxy-overlay-container";
+      targetElement.appendChild(container);
+    }
+    return container;
+  });
+  return { teleportTarget };
+}

package/dist/src/composables/Commons/throttle.composable.cjs

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThrottleFn = useThrottleFn;
+function useThrottleFn(fn, wait) {
+  let timer = null;
+  return (...args) => {
+    if (!timer) {
+      fn(...args);
+      timer = setTimeout(() => {
+        clearTimeout(timer);
+        timer = null;
+      }, wait);
+    }
+  };
+}

package/dist/src/composables/Commons/throttle.composable.d.ts

@@ -0,0 +1 @@
+export declare function useThrottleFn<T extends any[], R = void>(fn: (...args: T) => R, wait: number): (...args: T) => void;

package/dist/src/composables/Commons/throttle.composable.js

@@ -0,0 +1,12 @@
+export function useThrottleFn(fn, wait) {
+  let timer = null;
+  return (...args) => {
+    if (!timer) {
+      fn(...args);
+      timer = setTimeout(() => {
+        clearTimeout(timer);
+        timer = null;
+      }, wait);
+    }
+  };
+}

package/dist/src/composables/Commons/toggleScope.composable.cjs

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToggleScope = useToggleScope;
+var _vue = require("vue");
+function useToggleScope(source, fn) {
+  let scope;
+  const start = () => {
+    scope = (0, _vue.effectScope)();
+    scope.run(() => fn.length ? fn(() => {
+      scope?.stop();
+      start();
+    }) : fn());
+  };
+  (0, _vue.watch)(source, active => {
+    if (active && !scope) {
+      start();
+    } else if (!active) {
+      scope?.stop();
+      scope = void 0;
+    }
+  }, {
+    immediate: true
+  });
+  (0, _vue.onScopeDispose)(() => {
+    scope?.stop();
+  });
+}

package/dist/src/composables/Commons/toggleScope.composable.d.ts

@@ -0,0 +1,2 @@
+import type { WatchSource } from 'vue';
+export declare function useToggleScope(source: WatchSource<boolean>, fn: (reset: () => void) => void): void;

package/dist/src/composables/Commons/toggleScope.composable.js

@@ -0,0 +1,24 @@
+import { effectScope, onScopeDispose, watch } from "vue";
+export function useToggleScope(source, fn) {
+  let scope;
+  const start = () => {
+    scope = effectScope();
+    scope.run(
+      () => fn.length ? fn(() => {
+        scope?.stop();
+        start();
+      }) : fn()
+    );
+  };
+  watch(source, (active) => {
+    if (active && !scope) {
+      start();
+    } else if (!active) {
+      scope?.stop();
+      scope = void 0;
+    }
+  }, { immediate: true });
+  onScopeDispose(() => {
+    scope?.stop();
+  });
+}

package/dist/src/composables/Commons/touch.composable.cjs

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTouch = useTouch;
+var _composables = require("@foxy/composables");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useTouch({
+  isActive,
+  isTemporary,
+  width,
+  touchless,
+  position
+}) {
+  (0, _vue.onMounted)(() => {
+    window.addEventListener("touchstart", handleTouchstart, {
+      passive: true
+    });
+    window.addEventListener("touchmove", handleTouchmove, {
+      passive: false
+    });
+    window.addEventListener("touchend", handleTouchend, {
+      passive: true
+    });
+  });
+  (0, _vue.onBeforeUnmount)(() => {
+    window.removeEventListener("touchstart", handleTouchstart);
+    window.removeEventListener("touchmove", handleTouchmove);
+    window.removeEventListener("touchend", handleTouchend);
+  });
+  const isHorizontal = (0, _vue.computed)(() => ["left", "right"].includes(position.value));
+  const {
+    addMovement,
+    endTouch,
+    getVelocity
+  } = (0, _composables.useVelocity)();
+  let maybeDragging = false;
+  const isDragging = (0, _vue.shallowRef)(false);
+  const dragProgress = (0, _vue.shallowRef)(0);
+  const offset = (0, _vue.shallowRef)(0);
+  let start;
+  const getOffset = (pos, active) => {
+    return (position.value === "left" ? pos : position.value === "right" ? document.documentElement.clientWidth - pos : position.value === "top" ? pos : position.value === "bottom" ? document.documentElement.clientHeight - pos : (0, _utils.oops)()) - (active ? width.value : 0);
+  };
+  const getProgress = (pos, limit = true) => {
+    const progress = position.value === "left" ? (pos - offset.value) / width.value : position.value === "right" ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === "top" ? (pos - offset.value) / width.value : position.value === "bottom" ? (document.documentElement.clientHeight - pos - offset.value) / width.value : (0, _utils.oops)();
+    return limit ? Math.max(0, Math.min(1, progress)) : progress;
+  };
+  const handleTouchstart = e => {
+    if (touchless.value) return;
+    const touchX = e.changedTouches[0].clientX;
+    const touchY = e.changedTouches[0].clientY;
+    const touchZone = 25;
+    const inTouchZone = position.value === "left" ? touchX < touchZone : position.value === "right" ? touchX > document.documentElement.clientWidth - touchZone : position.value === "top" ? touchY < touchZone : position.value === "bottom" ? touchY > document.documentElement.clientHeight - touchZone : (0, _utils.oops)();
+    const inElement = isActive.value && (position.value === "left" ? touchX < width.value : position.value === "right" ? touchX > document.documentElement.clientWidth - width.value : position.value === "top" ? touchY < width.value : position.value === "bottom" ? touchY > document.documentElement.clientHeight - width.value : (0, _utils.oops)());
+    if (inTouchZone || inElement || isActive.value && isTemporary.value) {
+      maybeDragging = true;
+      start = [touchX, touchY];
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
+      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      endTouch(e);
+      addMovement(e);
+    }
+  };
+  const handleTouchmove = e => {
+    const touchX = e.changedTouches[0].clientX;
+    const touchY = e.changedTouches[0].clientY;
+    if (maybeDragging) {
+      if (!e.cancelable) {
+        maybeDragging = false;
+        return;
+      }
+      const dx = Math.abs(touchX - start[0]);
+      const dy = Math.abs(touchY - start[1]);
+      const thresholdMet = isHorizontal.value ? dx > dy && dx > 3 : dy > dx && dy > 3;
+      if (thresholdMet) {
+        isDragging.value = true;
+        maybeDragging = false;
+      } else if ((isHorizontal.value ? dy : dx) > 3) {
+        maybeDragging = false;
+      }
+    }
+    if (!isDragging.value) return;
+    e.preventDefault();
+    addMovement(e);
+    const progress = getProgress(isHorizontal.value ? touchX : touchY, false);
+    dragProgress.value = Math.max(0, Math.min(1, progress));
+    if (progress > 1) {
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true);
+    } else if (progress < 0) {
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false);
+    }
+  };
+  const handleTouchend = e => {
+    maybeDragging = false;
+    if (!isDragging.value) return;
+    addMovement(e);
+    isDragging.value = false;
+    const velocity = getVelocity(e.changedTouches[0].identifier);
+    const vx = Math.abs(velocity.x);
+    const vy = Math.abs(velocity.y);
+    const thresholdMet = isHorizontal.value ? vx > vy && vx > 400 : vy > vx && vy > 3;
+    if (thresholdMet) {
+      isActive.value = velocity.direction === ({
+        left: "right",
+        right: "left",
+        top: "down",
+        bottom: "up"
+      }[position.value] || (0, _utils.oops)());
+    } else {
+      isActive.value = dragProgress.value > 0.5;
+    }
+  };
+  const dragStyles = (0, _vue.computed)(() => {
+    return isDragging.value ? {
+      transform: position.value === "left" ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === "right" ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === "top" ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === "bottom" ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : (0, _utils.oops)(),
+      transition: "none"
+    } : void 0;
+  });
+  return {
+    isDragging,
+    dragProgress,
+    dragStyles
+  };
+}

package/dist/src/composables/Commons/touch.composable.d.ts

@@ -0,0 +1,15 @@
+import { Ref } from 'vue';
+export declare function useTouch({ isActive, isTemporary, width, touchless, position }: {
+    isActive: Ref<boolean>;
+    isTemporary: Ref<boolean>;
+    width: Ref<number>;
+    touchless: Ref<boolean>;
+    position: Ref<'left' | 'right' | 'top' | 'bottom'>;
+}): {
+    isDragging: import("vue").ShallowRef<boolean, boolean>;
+    dragProgress: import("vue").ShallowRef<number, number>;
+    dragStyles: import("vue").ComputedRef<{
+        transform: any;
+        transition: string;
+    } | undefined>;
+};

package/dist/src/composables/Commons/touch.composable.js

@@ -0,0 +1,105 @@
+import { useVelocity } from "@foxy/composables";
+import { oops } from "@foxy/utils";
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+export function useTouch({ isActive, isTemporary, width, touchless, position }) {
+  onMounted(() => {
+    window.addEventListener("touchstart", handleTouchstart, { passive: true });
+    window.addEventListener("touchmove", handleTouchmove, { passive: false });
+    window.addEventListener("touchend", handleTouchend, { passive: true });
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("touchstart", handleTouchstart);
+    window.removeEventListener("touchmove", handleTouchmove);
+    window.removeEventListener("touchend", handleTouchend);
+  });
+  const isHorizontal = computed(() => ["left", "right"].includes(position.value));
+  const { addMovement, endTouch, getVelocity } = useVelocity();
+  let maybeDragging = false;
+  const isDragging = shallowRef(false);
+  const dragProgress = shallowRef(0);
+  const offset = shallowRef(0);
+  let start;
+  const getOffset = (pos, active) => {
+    return (position.value === "left" ? pos : position.value === "right" ? document.documentElement.clientWidth - pos : position.value === "top" ? pos : position.value === "bottom" ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
+  };
+  const getProgress = (pos, limit = true) => {
+    const progress = position.value === "left" ? (pos - offset.value) / width.value : position.value === "right" ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === "top" ? (pos - offset.value) / width.value : position.value === "bottom" ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
+    return limit ? Math.max(0, Math.min(1, progress)) : progress;
+  };
+  const handleTouchstart = (e) => {
+    if (touchless.value) return;
+    const touchX = e.changedTouches[0].clientX;
+    const touchY = e.changedTouches[0].clientY;
+    const touchZone = 25;
+    const inTouchZone = position.value === "left" ? touchX < touchZone : position.value === "right" ? touchX > document.documentElement.clientWidth - touchZone : position.value === "top" ? touchY < touchZone : position.value === "bottom" ? touchY > document.documentElement.clientHeight - touchZone : oops();
+    const inElement = isActive.value && (position.value === "left" ? touchX < width.value : position.value === "right" ? touchX > document.documentElement.clientWidth - width.value : position.value === "top" ? touchY < width.value : position.value === "bottom" ? touchY > document.documentElement.clientHeight - width.value : oops());
+    if (inTouchZone || inElement || isActive.value && isTemporary.value) {
+      maybeDragging = true;
+      start = [touchX, touchY];
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
+      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      endTouch(e);
+      addMovement(e);
+    }
+  };
+  const handleTouchmove = (e) => {
+    const touchX = e.changedTouches[0].clientX;
+    const touchY = e.changedTouches[0].clientY;
+    if (maybeDragging) {
+      if (!e.cancelable) {
+        maybeDragging = false;
+        return;
+      }
+      const dx = Math.abs(touchX - start[0]);
+      const dy = Math.abs(touchY - start[1]);
+      const thresholdMet = isHorizontal.value ? dx > dy && dx > 3 : dy > dx && dy > 3;
+      if (thresholdMet) {
+        isDragging.value = true;
+        maybeDragging = false;
+      } else if ((isHorizontal.value ? dy : dx) > 3) {
+        maybeDragging = false;
+      }
+    }
+    if (!isDragging.value) return;
+    e.preventDefault();
+    addMovement(e);
+    const progress = getProgress(isHorizontal.value ? touchX : touchY, false);
+    dragProgress.value = Math.max(0, Math.min(1, progress));
+    if (progress > 1) {
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true);
+    } else if (progress < 0) {
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false);
+    }
+  };
+  const handleTouchend = (e) => {
+    maybeDragging = false;
+    if (!isDragging.value) return;
+    addMovement(e);
+    isDragging.value = false;
+    const velocity = getVelocity(e.changedTouches[0].identifier);
+    const vx = Math.abs(velocity.x);
+    const vy = Math.abs(velocity.y);
+    const thresholdMet = isHorizontal.value ? vx > vy && vx > 400 : vy > vx && vy > 3;
+    if (thresholdMet) {
+      isActive.value = velocity.direction === ({
+        left: "right",
+        right: "left",
+        top: "down",
+        bottom: "up"
+      }[position.value] || oops());
+    } else {
+      isActive.value = dragProgress.value > 0.5;
+    }
+  };
+  const dragStyles = computed(() => {
+    return isDragging.value ? {
+      transform: position.value === "left" ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === "right" ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === "top" ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === "bottom" ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
+      transition: "none"
+    } : void 0;
+  });
+  return {
+    isDragging,
+    dragProgress,
+    dragStyles
+  };
+}

package/dist/src/composables/Commons/vModel.composable.cjs

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVModel = useVModel;
+var _composables = require("@foxy/composables");
+var _utils = require("@foxy/utils");
+var _vue = require("vue");
+function useVModel(props, prop, defaultValue, transformIn = v => v, transformOut = v => v) {
+  const vm = (0, _utils.getCurrentInstance)("useVModel");
+  const internal = (0, _vue.ref)(props[prop] !== void 0 ? props[prop] : defaultValue);
+  const kebabProp = (0, _utils.toKebabCase)(prop);
+  const checkKebab = kebabProp !== prop;
+  const isControlled = checkKebab ? (0, _vue.computed)(() => {
+    void props[prop];
+    return (Object.prototype.hasOwnProperty.call(vm.vnode.props, prop) || Object.prototype.hasOwnProperty.call(vm.vnode.props, kebabProp)) && (Object.prototype.hasOwnProperty.call(vm.vnode.props, `onUpdate:${prop}`) || Object.prototype.hasOwnProperty.call(vm.vnode.props, `onUpdate:${kebabProp}`));
+  }) : (0, _vue.computed)(() => {
+    void props[prop];
+    return Object.prototype.hasOwnProperty.call(vm.vnode.props, prop) && Object.prototype.hasOwnProperty.call(vm.vnode.props, `onUpdate:${prop}`);
+  });
+  (0, _composables.useToggleScope)(() => !isControlled.value, () => {
+    (0, _vue.watch)(() => props[prop], val => {
+      internal.value = val;
+    });
+  });
+  const model = (0, _vue.computed)({
+    get() {
+      const externalValue = props[prop];
+      return transformIn(isControlled.value ? externalValue : internal.value);
+    },
+    set(internalValue) {
+      const newValue = transformOut(internalValue);
+      const value = (0, _vue.toRaw)(isControlled.value ? props[prop] : internal.value);
+      if (value === newValue || transformIn(value) === internalValue) {
+        return;
+      }
+      internal.value = newValue;
+      vm?.emit(`update:${prop}`, newValue);
+    }
+  });
+  Object.defineProperty(model, "externalValue", {
+    get: () => isControlled.value ? props[prop] : internal.value
+  });
+  return model;
+}

package/dist/src/composables/Commons/vModel.composable.d.ts

@@ -0,0 +1,4 @@
+import type { TEventProp, TVModel } from '@foxy/types';
+export declare function useVModel<Props extends object & {
+    [key in Prop as `onUpdate:${Prop}`]?: TEventProp | undefined;
+}, Prop extends Extract<keyof Props, string>, Inner = Props[Prop]>(props: Props, prop: Prop, defaultValue?: Props[Prop], transformIn?: (value?: Props[Prop]) => Inner, transformOut?: (value: Inner) => Props[Prop]): TVModel<Props, Prop, Inner>;