import { mergeProps, toHandlers } from "vue";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { makeDraggableProps, useDraggable } from "../../composables/draggable/index.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const Draggable = defineComponent({
  name: "VeDraggable",
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Object,
      default: () => ({
        left: 0,
        top: 0
      })
    },
    ...makeDraggableProps()
  },
  emits: {
    "update:modelValue": (_value) => true
  },
  setup(props, {
    slots
  }) {
    const model = useProxiedModel(props, "modelValue", props.modelValue, (v) => ({
      left: parseFloat((v == null ? void 0 : v.left) || 0),
      top: parseFloat((v == null ? void 0 : v.top) || 0)
    }));
    const {
      draggableEvents,
      draggableStyles,
      contentStyles
    } = useDraggable(props, model);
    return () => {
      var _a;
      const draggable = mergeProps(toHandlers(draggableEvents.value), {
        style: draggableStyles.value
      });
      return (_a = slots.default) == null ? void 0 : _a.call(slots, {
        value: model.value,
        draggable,
        contentStyle: contentStyles.value,
        props: mergeProps(draggable, {
          style: contentStyles.value
        })
      });
    };
  }
});
export {
  Draggable
};
//# sourceMappingURL=draggable.mjs.map
