@dyrected/vue 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,19 +12,45 @@ export declare const DY_PATH_KEY: InjectionKey<string>;
12
12
  */
13
13
  export declare function provideDyPath(path: string): void;
14
14
  /**
15
- * useDyPath — returns an attribute object annotating an element with its
15
+ * Function that creates `data-dy-path` props for any field relative to the current block.
16
+ */
17
+ export type DyPathFn = (field?: string) => {
18
+ 'data-dy-path': string;
19
+ };
20
+ /**
21
+ * useDyPath — returns an annotation helper or attribute object annotating an element with its
16
22
  * document value path, so the Dyrected live-preview editor can map a click in
17
- * the preview back to the exact field. Spread it onto the element (render
18
- * functions) or bind with `v-bind` in templates.
23
+ * the preview back to the exact field.
19
24
  *
20
- * Must be called in `setup()`. Authors pass only the field name relative to the
21
- * current block; the ancestor `<Blocks>`/`provideDyPath` supplies the base path.
25
+ * @overload When called with no arguments (recommended), returns a `dy` helper function:
26
+ * ```vue
27
+ * <script setup>
28
+ * const dy = useDyPath();
29
+ * </script>
30
+ * <template>
31
+ * <h1 v-bind="dy('heading')">{{ heading }}</h1>
32
+ * <p v-if="subheading" v-bind="dy('subheading')">{{ subheading }}</p>
33
+ * <ul>
34
+ * <li v-for="(item, idx) in items" :key="idx" v-bind="dy(`items.${idx}.title`)">
35
+ * {{ item.title }}
36
+ * </li>
37
+ * </ul>
38
+ * </template>
39
+ * ```
22
40
  *
23
- * @example (render function)
24
- * h('h1', useDyPath('heading'), props.heading)
25
- * @example (template)
41
+ * @overload When called with a field name, returns the attribute object directly:
42
+ * ```vue
43
+ * <template>
26
44
  * <h1 v-bind="useDyPath('heading')">{{ heading }}</h1>
45
+ * </template>
46
+ * ```
27
47
  */
28
- export declare function useDyPath(field?: string): {
48
+ export declare function useDyPath(): DyPathFn;
49
+ export declare function useDyPath(field: string): {
29
50
  'data-dy-path': string;
30
51
  };
52
+ /**
53
+ * useDyPathHelper — explicit helper that reads context once in setup() and returns
54
+ * a callable path generator function.
55
+ */
56
+ export declare function useDyPathHelper(): DyPathFn;