@platforma-sdk/ui-vue 1.66.2 → 1.68.0

package/src/components/PlAgDataTable/sources/table-source-v2.ts

@@ -396,11 +396,11 @@ function selectDisplayableIndices(
     .filter(([, spec]) => {
       switch (spec.type) {
         case "axis":
-          return !isPartitionedAxis(spec.id);
+          return !isColumnHidden(spec.spec) && !isPartitionedAxis(spec.id);
         case "column":
           return (
-            !isLabelColumnSpec(spec.spec) &&
             !isColumnHidden(spec.spec) &&
+            !isLabelColumnSpec(spec.spec) &&
             !isLinkerColumnSpec(spec.spec)
           );
       }

package/src/components/PlDatasetSelector/PlDatasetSelector.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+/**
+ * Select a dataset and (optionally) a filter column, emitting a `PrimaryRef`.
+ *
+ * Behaves like {@link PlDropdownRef} when none of the offered datasets carry
+ * filter options. When the selected dataset has compatible filters, a second
+ * dropdown appears with the filters plus a "No filter" entry.
+ *
+ * Accepts `PrimaryRef | PlRef | undefined` as `modelValue` (a plain `PlRef`
+ * is treated as an unfiltered dataset), but always emits `PrimaryRef`
+ * (or `undefined` when cleared).
+ */
+export default {
+  name: "PlDatasetSelector",
+};
+</script>
+
+<script lang="ts" setup>
+import type { DatasetOption, PlRef, PrimaryRef } from "@platforma-sdk/model";
+import { createPrimaryRef, isPrimaryRef, plRefsEqual } from "@platforma-sdk/model";
+import type { ListOption } from "@milaboratories/uikit";
+import { PlDropdown, PlDropdownRef } from "@milaboratories/uikit";
+import { computed } from "vue";
+
+const slots = defineSlots<{
+  tooltip?: () => unknown;
+}>();
+
+/**
+ * v-model value. Accepts `PrimaryRef`, plain `PlRef` (treated as unfiltered),
+ * or `undefined`. Writes always emit `PrimaryRef` or `undefined`.
+ */
+const model = defineModel<PrimaryRef | PlRef | undefined>();
+
+const props = withDefaults(
+  defineProps<{
+    /** Available datasets, each optionally carrying compatible filter choices. */
+    options?: Readonly<DatasetOption[]>;
+    /** Label above the dataset dropdown. */
+    label?: string;
+    /** Helper text below the dataset dropdown (shown when there is no error). */
+    helper?: string;
+    /** Helper text shown while `options` is undefined (loading). */
+    loadingOptionsHelper?: string;
+    /** Error message displayed below the dataset dropdown. */
+    error?: unknown;
+    /** Placeholder when no dataset is selected. */
+    placeholder?: string;
+    /** Label above the filter dropdown. */
+    filterLabel?: string;
+    /** Placeholder for the filter dropdown. */
+    filterPlaceholder?: string;
+    /** Label of the "no filter" entry prepended to the filter options. */
+    noFilterLabel?: string;
+    /** Show a clear button on the dataset dropdown. */
+    clearable?: boolean;
+    /** Mark the dataset dropdown as required. */
+    required?: boolean;
+    /** Disable all interaction. */
+    disabled?: boolean;
+  }>(),
+  {
+    options: undefined,
+    label: undefined,
+    helper: undefined,
+    loadingOptionsHelper: undefined,
+    error: undefined,
+    placeholder: "...",
+    filterLabel: "",
+    filterPlaceholder: "...",
+    noFilterLabel: "No filter",
+    clearable: false,
+    required: false,
+    disabled: false,
+  },
+);
+
+const selectedDataset = computed<PlRef | undefined>(() => {
+  const v = model.value;
+  if (v === undefined) return undefined;
+  return isPrimaryRef(v) ? v.column : v;
+});
+
+const selectedFilter = computed<PlRef | undefined>(() => {
+  const v = model.value;
+  return isPrimaryRef(v) ? v.filter : undefined;
+});
+
+const currentDatasetOption = computed<DatasetOption | undefined>(() => {
+  const dataset = selectedDataset.value;
+  if (!dataset) return undefined;
+  return props.options?.find((o) => plRefsEqual(o.ref, dataset, true));
+});
+
+const hasFilters = computed(() => (currentDatasetOption.value?.filters?.length ?? 0) > 0);
+
+/**
+ * Filter dropdown options. The first entry (`null`) is the "No filter" choice —
+ * null distinguishes it from `undefined` (dropdown clear button, disabled here).
+ */
+const filterOptions = computed<ListOption<PlRef | null>[]>(() => {
+  const filters = currentDatasetOption.value?.filters;
+  if (!filters) return [];
+  return [
+    { label: props.noFilterLabel, value: null } as ListOption<PlRef | null>,
+    ...filters.map((f) => ({ label: f.label, value: f.ref }) as ListOption<PlRef | null>),
+  ];
+});
+
+const filterValue = computed<PlRef | null>(() => selectedFilter.value ?? null);
+
+function emitValue(dataset: PlRef | undefined, filter: PlRef | undefined) {
+  model.value = dataset === undefined ? undefined : createPrimaryRef(dataset, filter);
+}
+
+function onDatasetChange(dataset: PlRef | undefined) {
+  emitValue(dataset, undefined);
+}
+
+function onFilterChange(value: PlRef | null | undefined) {
+  const dataset = selectedDataset.value;
+  if (!dataset) return;
+  emitValue(dataset, value ?? undefined);
+}
+</script>
+
+<template>
+  <div class="pl-dataset-selector">
+    <PlDropdownRef
+      :model-value="selectedDataset"
+      :options="options"
+      :label="label"
+      :helper="helper"
+      :loading-options-helper="loadingOptionsHelper"
+      :error="error"
+      :placeholder="placeholder"
+      :clearable="clearable"
+      :required="required"
+      :disabled="disabled"
+      @update:model-value="onDatasetChange"
+    >
+      <template v-if="slots.tooltip" #tooltip>
+        <slot name="tooltip" />
+      </template>
+    </PlDropdownRef>
+    <PlDropdown
+      v-if="hasFilters"
+      :model-value="filterValue"
+      :options="filterOptions"
+      :label="filterLabel"
+      :placeholder="filterPlaceholder"
+      :disabled="disabled"
+      @update:model-value="onFilterChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pl-dataset-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

package/src/components/PlDatasetSelector/__tests__/PlDatasetSelector.jsdomtest.ts

@@ -0,0 +1,257 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import type { DatasetOption, PrimaryRef } from "@platforma-sdk/model";
+import { createPlRef, createPrimaryRef } from "@platforma-sdk/model";
+import { describe, expect, it } from "vitest";
+import PlDatasetSelector from "../PlDatasetSelector.vue";
+
+const datasetA = createPlRef("1", "out-a", true);
+const datasetB = createPlRef("2", "out-b", true);
+const filterA1 = createPlRef("1", "filter-a1");
+const filterA2 = createPlRef("1", "filter-a2");
+
+const optionsWithFilters: DatasetOption[] = [
+  {
+    label: "Dataset A",
+    ref: datasetA,
+    filters: [
+      { label: "Top 1000", ref: filterA1 },
+      { label: "High quality", ref: filterA2 },
+    ],
+  },
+  // Dataset B has no filters — filter dropdown must stay hidden.
+  { label: "Dataset B", ref: datasetB },
+];
+
+const datasetC = createPlRef("3", "out-c", true);
+
+const optionsNoFilters: DatasetOption[] = [{ label: "Dataset B", ref: datasetB }];
+
+const optionsWithEmptyFilters: DatasetOption[] = [
+  { label: "Dataset C", ref: datasetC, filters: [] },
+];
+
+async function pickOption(index: number) {
+  const options = [...document.body.querySelectorAll(".dropdown-list-item")] as HTMLElement[];
+  options[index].click();
+  await flushPromises();
+}
+
+describe("PlDatasetSelector", () => {
+  it("renders a single dropdown when no dataset has filters", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: { modelValue: undefined, options: optionsNoFilters },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    const selector = wrapper.find(".pl-dataset-selector");
+    expect(selector.exists()).toBe(true);
+    // Only PlDropdownRef is rendered — no filter dropdown.
+    expect(selector.element.children.length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it("shows the filter dropdown when the selected dataset has filters", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: { modelValue: createPrimaryRef(datasetA), options: optionsWithFilters },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    expect(wrapper.find(".pl-dataset-selector").element.children.length).toBe(2);
+    wrapper.unmount();
+  });
+
+  it("hides the filter dropdown when the selected dataset has no filters", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: { modelValue: createPrimaryRef(datasetB), options: optionsWithFilters },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    expect(wrapper.find(".pl-dataset-selector").element.children.length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it("emits PrimaryRef with filter: undefined when dataset changes", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: {
+        modelValue: createPrimaryRef(datasetA, filterA1),
+        options: optionsWithFilters,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+      },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    // Open the dataset dropdown (the first input — dataset comes first).
+    const inputs = wrapper.findAll("input");
+    await inputs[0].trigger("focus");
+
+    // Dataset A is already selected (index 0); pick Dataset B (index 1).
+    await pickOption(1);
+
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeDefined();
+    const last = emitted![emitted!.length - 1][0] as PrimaryRef;
+    expect(last).toEqual({ __isPrimaryRef: "v1", column: datasetB });
+    wrapper.unmount();
+  });
+
+  it("emits PrimaryRef with filter set when a filter is picked", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: {
+        modelValue: createPrimaryRef(datasetA),
+        options: optionsWithFilters,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+      },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    // Open the filter dropdown — it's the second input in the component.
+    const inputs = wrapper.findAll("input");
+    expect(inputs.length).toBe(2);
+    await inputs[1].trigger("focus");
+
+    // Options are: [No filter, Top 1000, High quality]. Pick "Top 1000" (index 1).
+    await pickOption(1);
+
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeDefined();
+    const last = emitted![emitted!.length - 1][0] as PrimaryRef;
+    expect(last).toEqual({ __isPrimaryRef: "v1", column: datasetA, filter: filterA1 });
+    wrapper.unmount();
+  });
+
+  it("emits PrimaryRef with filter: undefined when 'No filter' is picked", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: {
+        modelValue: createPrimaryRef(datasetA, filterA1),
+        options: optionsWithFilters,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+      },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    const inputs = wrapper.findAll("input");
+    await inputs[1].trigger("focus");
+    // Pick "No filter" (index 0).
+    await pickOption(0);
+
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeDefined();
+    const last = emitted![emitted!.length - 1][0] as PrimaryRef;
+    expect(last).toEqual({ __isPrimaryRef: "v1", column: datasetA });
+    expect("filter" in last).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("accepts plain PlRef as modelValue for backward compat (filterless dataset)", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: { modelValue: datasetB, options: optionsWithFilters },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    expect(wrapper.find(".pl-dataset-selector").element.children.length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it("accepts plain PlRef as modelValue for backward compat (dataset with filters)", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: { modelValue: datasetA, options: optionsWithFilters },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    // PlRef matching dataset A — filter dropdown should appear since A has filters.
+    expect(wrapper.find(".pl-dataset-selector").element.children.length).toBe(2);
+    wrapper.unmount();
+  });
+
+  it("hides filter dropdown when dataset has filters: [] (empty array)", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: { modelValue: createPrimaryRef(datasetC), options: optionsWithEmptyFilters },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    expect(wrapper.find(".pl-dataset-selector").element.children.length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it("filter dropdown defaults to 'No filter' when dataset has filters but none selected", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: {
+        modelValue: createPrimaryRef(datasetA),
+        options: optionsWithFilters,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+      },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    // No emission on mount — the component does not auto-select a filter.
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+
+    // Filter dropdown is visible.
+    const inputs = wrapper.findAll("input");
+    expect(inputs.length).toBe(2);
+
+    // Open filter dropdown and verify "No filter" is the first option.
+    await inputs[1].trigger("focus");
+    const items = document.body.querySelectorAll(".dropdown-list-item");
+    expect(items.length).toBe(3); // No filter, Top 1000, High quality
+    expect(items[0].textContent).toContain("No filter");
+    wrapper.unmount();
+  });
+
+  it("emits PrimaryRef without filter key when selecting a filterless dataset", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: {
+        modelValue: undefined,
+        options: optionsNoFilters,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+      },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    const inputs = wrapper.findAll("input");
+    await inputs[0].trigger("focus");
+    await pickOption(0);
+
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeDefined();
+    const last = emitted![emitted!.length - 1][0] as PrimaryRef;
+    expect(last).toEqual({ __isPrimaryRef: "v1", column: datasetB });
+    expect("filter" in last).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("emits undefined when cleared via the dataset dropdown", async () => {
+    const wrapper = mount(PlDatasetSelector, {
+      props: {
+        modelValue: createPrimaryRef(datasetA, filterA1),
+        options: optionsWithFilters,
+        clearable: true,
+        "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
+      },
+      attachTo: document.body,
+    });
+    await flushPromises();
+
+    // PlDropdown's clear button carries the ".clear" class.
+    const clearBtn = wrapper.find(".clear");
+    expect(clearBtn.exists()).toBe(true);
+    await clearBtn.trigger("click");
+
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeDefined();
+    const last = emitted![emitted!.length - 1][0];
+    expect(last).toBeUndefined();
+    wrapper.unmount();
+  });
+});

package/src/components/PlDatasetSelector/index.ts

@@ -0,0 +1 @@
+export { default as PlDatasetSelector } from "./PlDatasetSelector.vue";

package/src/{usePlugin.ts → composition/usePlugin.ts}

@@ -1,5 +1,5 @@
 import { inject, type Reactive } from "vue";
-import { pluginDataKey } from "./defineApp";
+import { pluginDataKey } from "../defineApp";
 import type {
   PluginHandle,
   InferFactoryData,

package/src/composition/useServices.ts

@@ -0,0 +1,5 @@
+import { getServices } from "../internal/getServices";
+
+export function useServices() {
+  return getServices();
+}

package/src/internal/createAppV3.ts

@@ -12,8 +12,9 @@ import type {
   PluginHandle,
   InferFactoryData,
   InferFactoryOutputs,
-  InferFactoryUiServices,
   PluginFactoryLike,
+  UiServices as AllUiServices,
+  InferFactoryUiServices,
 } from "@platforma-sdk/model";
 import {
   hasAbortError,
@@ -23,7 +24,6 @@ import {
   isPluginOutputKey,
   pluginOutputPrefix,
 } from "@platforma-sdk/model";
-import { type UiServices as AllUiServices } from "@milaboratories/pl-model-common";
 import type { Ref } from "vue";
 import { reactive, computed, ref, markRaw } from "vue";
 import type { OutputValues, OutputErrors, AppSettings } from "../types";
@@ -32,7 +32,7 @@ import { ensureOutputHasStableFlag, MultiError } from "../utils";
 import { applyPatch } from "fast-json-patch";
 import { UpdateSerializer } from "./UpdateSerializer";
 import { watchIgnorable } from "@vueuse/core";
-import type { PluginState, PluginAccess } from "../usePlugin";
+import type { PluginState, PluginAccess } from "../composition/usePlugin";
 import { logDebug, logError } from "./utils";
 import { getServices } from "./getServices";
 
@@ -208,7 +208,7 @@ export function createAppV3<
         .dispose()
         .then(unwrapResult)
         .catch((err) => {
-          error("error in dispose", err);
+          error("platforma error in dispose", err);
         });
     });
 

package/src/internal/service_factories.ts

@@ -19,5 +19,6 @@ export function createUiServiceRegistry(options: UiServiceOptions) {
   return new UiServiceRegistry(Services, {
     PFrameSpec: () => new SpecDriver(),
     PFrame: () => options.proxy(Services.PFrame),
+    Dialog: () => options.proxy(Services.Dialog),
   });
 }

package/src/lib.ts

@@ -33,10 +33,12 @@ export * from "./components/PlBtnExportArchive";
 
 export * from "./components/PlAdvancedFilter";
 
+export * from "./components/PlDatasetSelector";
+
 export * from "./defineApp";
 
-export { usePlugin } from "./usePlugin";
-export type { PluginState } from "./usePlugin";
+export { usePlugin } from "./composition/usePlugin";
+export type { PluginState } from "./composition/usePlugin";
 export type {
   PluginHandle,
   PluginFactoryLike,

package/vitest.config.mts

@@ -3,8 +3,30 @@ import { defineConfig } from "vitest/config";
 
 export default defineConfig(
   createVitestVueConfig({
+    resolve: {
+      conditions: ["sources"],
+    },
     test: {
       includeSource: ["src/**/*.{js,ts}"],
+      setupFiles: ["./src/__tests__/setup.ts"],
+      projects: [
+        {
+          extends: true,
+          test: {
+            name: "node",
+            environment: "node",
+            include: ["src/**/*.test.ts"],
+          },
+        },
+        {
+          extends: true,
+          test: {
+            name: "jsdom",
+            environment: "jsdom",
+            include: ["src/**/*.jsdomtest.ts"],
+          },
+        },
+      ],
     },
   }),
 );

package/dist/usePlugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePlugin.d.ts","sourceRoot":"","sources":["../src/usePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAE9B,sEAAsE;AACtE,MAAM,WAAW,WAAW,CAC1B,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,OAAO,EACjB,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAElC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC;QACvB,IAAI,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC5C;aAAG,CAAC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS;SAAE,GAChD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC5B,YAAY,EAAE,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACjD;aAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,EAAE,KAAK;SAAE,GAChC,MAAM,CAAC,MAAM,EAAE,KAAK,GAAG,SAAS,CAAC,CAAC;KACvC,CAAC,CAAC;IACH,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;CAC7B;AAED,wFAAwF;AACxF,MAAM,WAAW,YAAY;IAC3B,sBAAsB,CAAC,CAAC,SAAS,iBAAiB,EAChD,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GACtB,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;CACxF;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,iBAAiB,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,uFAW7E"}

package/dist/usePlugin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePlugin.js","names":[],"sources":["../src/usePlugin.ts"],"sourcesContent":["import { inject, type Reactive } from \"vue\";\nimport { pluginDataKey } from \"./defineApp\";\nimport type {\n  PluginHandle,\n  InferFactoryData,\n  InferFactoryOutputs,\n  InferFactoryUiServices,\n  PluginFactoryLike,\n} from \"@platforma-sdk/model\";\n\n/** Per-plugin reactive model exposed to consumers via usePlugin(). */\nexport interface PluginState<\n  Data = unknown,\n  Outputs = unknown,\n  Services = Record<string, unknown>,\n> {\n  readonly model: Reactive<{\n    data: Data;\n    outputs: Outputs extends Record<string, unknown>\n      ? { [K in keyof Outputs]: Outputs[K] | undefined }\n      : Record<string, unknown>;\n    outputErrors: Outputs extends Record<string, unknown>\n      ? { [K in keyof Outputs]?: Error }\n      : Record<string, Error | undefined>;\n  }>;\n  readonly services: Services;\n}\n\n/** Internal interface for plugin access — provided via Vue injection to usePlugin(). */\nexport interface PluginAccess {\n  getOrCreatePluginState<F extends PluginFactoryLike>(\n    handle: PluginHandle<F>,\n  ): PluginState<InferFactoryData<F>, InferFactoryOutputs<F>, InferFactoryUiServices<F>>;\n}\n\n/**\n * Composable for accessing a plugin's reactive model: data, outputs, and outputErrors.\n *\n * Mirrors the `app.model` access pattern — `plugin.model.data` is reactive and deep-watched,\n * mutations are automatically queued and sent to storage.\n *\n * @param handle - Opaque plugin handle obtained from `app.plugins`.\n * @typeParam F - The plugin factory type (inferred from the handle)\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { usePlugin, type InferPluginHandle } from '@platforma-sdk/ui-vue';\n * import type { CounterPlugin } from './plugins/counter';\n *\n * const props = defineProps<{ instance: InferPluginHandle<CounterPlugin> }>();\n * const plugin = usePlugin(props.instance);\n *\n * plugin.model.data.count += 1;          // reactive, triggers storage update\n * plugin.model.outputs.displayText       // computed, plugin's own outputs only\n * plugin.model.outputErrors.displayText  // Error | undefined\n * </script>\n * ```\n */\nexport function usePlugin<F extends PluginFactoryLike>(handle: PluginHandle<F>) {\n  const access = inject<PluginAccess>(pluginDataKey);\n\n  if (!access) {\n    throw new Error(\n      \"usePlugin requires a V3 block (BlockModelV3). \" +\n        \"Make sure the block uses apiVersion 3 and the plugin is installed.\",\n    );\n  }\n\n  return access.getOrCreatePluginState<F>(handle);\n}\n"],"mappings":";;;AA2DA,SAAgB,EAAuC,GAAyB;CAC9E,IAAM,IAAS,EAAqB,EAAc;AAElD,KAAI,CAAC,EACH,OAAU,MACR,mHAED;AAGH,QAAO,EAAO,uBAA0B,EAAO"}