v2.16.1

Shorthand hex colors are now supported in config objects

const config = ref({
  style: {
    chart: {
       backgroundColor:  '#FFF', // now works properly
    }
  }
})

useObjectBindings composable #226

Special thanks to @tjones-ieee for his original idea and contribution

useObjectBindings is a composable that flattens a reactive object into a set of refs (one for each “leaf” property) so you can easily bind to deeply nested values by their string paths.

Why use it?

• Automatic reactivity: Every nested property becomes a Ref, with automatic getters/setters that keep your source object in sync.
• Flat API surface: Access or update any nested field by its dot‑delimited path, without writing deep destructuring or ref plumbing.
• Dynamic path support: New paths added at runtime are discovered automatically (and proxied), so you never lose reactivity when mutating the structure.

import { useObjectBindings, getVueDataUiConfig } from "vue-data-ui";

const config = ref(getVueDataUiConfig('vue_ui_donut'));

const bindings = useObjectBindings(config);
//   Now `bindings` has refs for each leaf path:
//   bindings["style.chart.backgroundColor"] → Ref<string>
//   bindings["style.chart.color"] → Ref<string>
//   bindings["customPalette"] → Ref<boolean>
//   by default, arrays are skipped:
//   no "customPalette.0", unless you disable skipArrays

You can then use these in your template:

<template>
  <div>
    <input type="color" v-model="bindings['style.chart.backgroundColor'].value" />
  </div>
</template>

Note: this composable could have been tested further, but I just couldn't wait to ship it.