@ark-ui/vue/dist/components/use-v-model.cjs

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const vue = require('vue');

function useVModel(props, key, emit, options = {}) {
  const { passive = false, eventName, defaultValue } = options;
  const vm = vue.getCurrentInstance();
  const _emit = emit || vm?.emit || vm?.$emit?.bind(vm) || vm?.proxy?.$emit?.bind(vm?.proxy);
  const prop = key;
  const getValue = () => props[prop] ?? defaultValue;
  const triggerEmit = (value) => {
    if (!eventName) {
      _emit(eventName || `update:${prop.toString()}`, value);
    } else {
      for (const event of eventName) {
        _emit(event, value);
      }
    }
  };
  if (passive) {
    const initialValue = getValue();
    const proxy = vue.ref(initialValue);
    let isUpdating = false;
    vue.watch(
      () => props[prop],
      (v) => {
        if (!isUpdating) {
          isUpdating = true;
          proxy.value = v;
          vue.nextTick(() => {
            isUpdating = false;
          });
        }
      }
    );
    vue.watch(proxy, (v) => {
      if (!isUpdating && v !== props[prop]) {
        triggerEmit(v);
      }
    });
    return proxy;
  }
  return vue.computed({
    get() {
      return getValue();
    },
    set(value) {
      triggerEmit(value);
    }
  });
}

exports.useVModel = useVModel;