@revenexx/studio-shared 0.3.2 → 0.4.0

package/dist/runtime/components/DataTable/SavedViewsMenu.vue.d.ts

@@ -1,6 +1,11 @@
 import type { DataTableSavedViews } from './types.js';
 type __VLS_Props = {
     config: DataTableSavedViews;
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DataTable/SortMenu.d.vue.ts

@@ -1,13 +1,19 @@
 import type { DataTableColumn, SortState } from './types.js';
 type __VLS_Props = {
     columns: DataTableColumn[];
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     modelValue: SortState;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SortState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SortState) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DataTable/SortMenu.vue

@@ -1,22 +1,32 @@
 <script setup>
-import { AltArrowDown, SortVertical } from "#solar-icons";
+import { CheckCircle, RoundSortVertical, SortFromBottomToTop, SortFromTopToBottom } from "#solar-icons";
 import {
   Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuTrigger
 } from "@revenexx/studio";
 const props = defineProps({
-  columns: { type: Array, required: true }
+  columns: { type: Array, required: true },
+  size: { type: String, required: false, default: "sm" }
 });
 const sort = defineModel({ type: Object, ...{ required: true } });
 const t = useT();
+const sorted = computed(() => Boolean(sort.value.column && sort.value.direction));
+const icon = computed(() => {
+  if (!sorted.value) return RoundSortVertical;
+  return sort.value.direction === "asc" ? SortFromBottomToTop : SortFromTopToBottom;
+});
 const label = computed(() => {
   const col = props.columns.find((c) => c.key === sort.value.column);
-  if (!col || !sort.value.direction) return t("shared.datatable.sortmenu.label.default");
+  if (!col || !sorted.value) return t("shared.datatable.sortmenu.label.default");
   return `${col.label} ${sort.value.direction === "asc" ? "\u2191" : "\u2193"}`;
 });
+function isActive(key, direction) {
+  return sort.value.column === key && sort.value.direction === direction;
+}
 function pick(key, direction) {
   sort.value = { column: key, direction };
 }
@@ -25,21 +35,39 @@ function pick(key, direction) {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-sm" :aria-label="t('shared.datatable.sortmenu.aria')">
-        <SortVertical :size="14" />
-        {{ label }}
-        <AltArrowDown :size="12" class="opacity-60" />
+      <Button
+        :variant="sorted ? 'default' : 'outline'"
+        :size="size === 'sm' ? 'icon-sm' : 'icon'"
+        :data-active="sorted"
+        :aria-label="t('shared.datatable.sortmenu.aria', { sort: label })"
+        :title="t('shared.datatable.sortmenu.aria', { sort: label })"
+      >
+        <!-- Violet while idle like the filter trigger and the column picker
+             beside it; on the filled face the icon takes the button's own
+             foreground, or it would be violet on violet. -->
+        <span class="flex shrink-0 items-center" :class="sorted ? '' : 'text-primary'">
+          <component :is="icon" weight="Linear" :class="size === 'sm' ? 'size-3.5' : 'size-4'" />
+        </span>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="start" class="w-52">
+    <DropdownMenuContent align="start" class="w-56">
+      <DropdownMenuLabel>{{ t("shared.datatable.sortmenu.heading") }}</DropdownMenuLabel>
       <template v-for="col in columns" :key="col.key">
         <DropdownMenuItem class="gap-2" @select="pick(col.key, 'asc')">
-          <span class="flex-1 truncate">{{ col.label }} ↑</span>
-          <span v-if="sort.column === col.key && sort.direction === 'asc'" class="text-xs text-primary">{{ t("shared.datatable.sortmenu.active.badge") }}</span>
+          <SortFromBottomToTop weight="Linear" :size="13" class="shrink-0 text-muted-foreground" />
+          <span
+            class="min-w-0 flex-1 truncate"
+            :class="isActive(col.key, 'asc') ? 'font-medium text-primary' : ''"
+          >{{ col.label }}</span>
+          <CheckCircle v-if="isActive(col.key, 'asc')" :size="14" weight="Bold" class="shrink-0 text-primary" />
         </DropdownMenuItem>
         <DropdownMenuItem class="gap-2" @select="pick(col.key, 'desc')">
-          <span class="flex-1 truncate">{{ col.label }} ↓</span>
-          <span v-if="sort.column === col.key && sort.direction === 'desc'" class="text-xs text-primary">{{ t("shared.datatable.sortmenu.active.badge") }}</span>
+          <SortFromTopToBottom weight="Linear" :size="13" class="shrink-0 text-muted-foreground" />
+          <span
+            class="min-w-0 flex-1 truncate"
+            :class="isActive(col.key, 'desc') ? 'font-medium text-primary' : ''"
+          >{{ col.label }}</span>
+          <CheckCircle v-if="isActive(col.key, 'desc')" :size="14" weight="Bold" class="shrink-0 text-primary" />
         </DropdownMenuItem>
       </template>
     </DropdownMenuContent>

package/dist/runtime/components/DataTable/SortMenu.vue.d.ts

@@ -1,13 +1,19 @@
 import type { DataTableColumn, SortState } from './types.js';
 type __VLS_Props = {
     columns: DataTableColumn[];
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     modelValue: SortState;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SortState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SortState) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DataTable/ViewModeSwitch.d.vue.ts

@@ -9,12 +9,14 @@ import type { DataTableViewMode } from './types.js';
 type __VLS_Props = {
     modes: DataTableViewMode[];
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     modelValue: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DataTable/ViewModeSwitch.vue.d.ts

@@ -9,12 +9,14 @@ import type { DataTableViewMode } from './types.js';
 type __VLS_Props = {
     modes: DataTableViewMode[];
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     modelValue: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Form/FieldCell.d.vue.ts

@@ -0,0 +1,32 @@
+import type { FieldSpan } from '../../lib/formLayout.js';
+type __VLS_Props = {
+    span?: FieldSpan | 'auto';
+    /** Field type, for the default span when `span` is absent or `auto`. */
+    type?: string;
+    label?: string;
+    /** Id of the control the label is for. */
+    for?: string;
+    hint?: string;
+    error?: string | null;
+    required?: boolean;
+};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {
+    id: string;
+    describedBy: string | undefined;
+};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    'label-extra'?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form/FieldCell.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { Label } from "@revenexx/studio";
+import { computed, useId } from "vue";
+import { useT } from "../../composables/useT";
+import { resolveSpan, spanClass } from "../../lib/formLayout";
+const props = defineProps({
+  span: { type: String, required: false },
+  type: { type: String, required: false },
+  label: { type: String, required: false },
+  for: { type: String, required: false },
+  hint: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  required: { type: Boolean, required: false }
+});
+const t = useT();
+const uid = useId();
+const cellClass = computed(() => spanClass(resolveSpan({ type: props.type, span: props.span })));
+const controlId = computed(() => props.for ?? `${uid}-control`);
+const hintId = computed(() => props.hint ? `${controlId.value}-hint` : void 0);
+const errorId = computed(() => props.error ? `${controlId.value}-error` : void 0);
+const describedBy = computed(() => [errorId.value, hintId.value].filter(Boolean).join(" ") || void 0);
+</script>
+
+<template>
+  <div class="min-w-0" :class="cellClass">
+    <div v-if="label || $slots.label" class="mb-1.5 flex items-center gap-1.5">
+      <slot name="label">
+        <Label :for="controlId" class="text-[12.5px] font-medium">
+          {{ label }}
+          <template v-if="required">
+            <span aria-hidden="true" class="text-rose-600">*</span>
+            <span class="sr-only">({{ t("shared.form.field.required") }})</span>
+          </template>
+        </Label>
+      </slot>
+      <slot name="label-extra" />
+    </div>
+    <slot :id="controlId" :described-by="describedBy" />
+    <p v-if="error" :id="errorId" class="mt-1 text-xs text-rose-700">
+      {{ error }}
+    </p>
+    <p v-if="hint" :id="hintId" class="mt-1 text-xs leading-snug text-muted-foreground">
+      {{ hint }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/Form/FieldCell.vue.d.ts

@@ -0,0 +1,32 @@
+import type { FieldSpan } from '../../lib/formLayout.js';
+type __VLS_Props = {
+    span?: FieldSpan | 'auto';
+    /** Field type, for the default span when `span` is absent or `auto`. */
+    type?: string;
+    label?: string;
+    /** Id of the control the label is for. */
+    for?: string;
+    hint?: string;
+    error?: string | null;
+    required?: boolean;
+};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {
+    id: string;
+    describedBy: string | undefined;
+};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    'label-extra'?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form/FieldGrid.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form/FieldGrid.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="@container">
+    <div class="grid grid-cols-1 gap-x-4 gap-y-3.5 @md:grid-cols-2">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Form/FieldGrid.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form/FormContextCard.d.vue.ts

@@ -0,0 +1,33 @@
+import type { FormContextRow } from '../../lib/formLayout.js';
+type __VLS_Props = {
+    title: string;
+    subtitle?: string;
+    /** Defaults to the title's initials. Empty string = no avatar. */
+    initials?: string;
+    rows?: FormContextRow[];
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
+    row: FormContextRow;
+}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    avatar?: (props: typeof __VLS_1) => any;
+} & {
+    badges?: (props: typeof __VLS_3) => any;
+} & {
+    value?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    footer?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rows: FormContextRow[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form/FormContextCard.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from "vue";
+import { initialsOf } from "../../lib/formLayout";
+const props = defineProps({
+  title: { type: String, required: true },
+  subtitle: { type: String, required: false },
+  initials: { type: String, required: false },
+  rows: { type: Array, required: false, default: () => [] }
+});
+const initialsText = computed(() => props.initials ?? initialsOf(props.title));
+</script>
+
+<template>
+  <div class="rounded-lg border border-black/[0.06] bg-white/70 p-4 backdrop-blur-sm">
+    <div class="flex items-center gap-3">
+      <slot name="avatar">
+        <span
+          v-if="initialsText"
+          aria-hidden="true"
+          class="flex size-11 shrink-0 items-center justify-center rounded-full bg-accent text-[15px] font-medium text-primary"
+        >{{ initialsText }}</span>
+      </slot>
+      <div class="min-w-0">
+        <p class="truncate text-[15px] font-medium text-[#0B0522]" :title="title">
+          {{ title }}
+        </p>
+        <p v-if="subtitle" class="truncate text-[12.5px] text-muted-foreground" :title="subtitle">
+          {{ subtitle }}
+        </p>
+      </div>
+    </div>
+
+    <div v-if="$slots.badges" class="mt-3 flex flex-wrap gap-1.5">
+      <slot name="badges" />
+    </div>
+
+    <dl v-if="rows.length" class="mt-4 space-y-2.5 text-[13px]">
+      <div v-for="row in rows" :key="row.key" class="flex items-baseline justify-between gap-3">
+        <dt class="shrink-0 text-muted-foreground">
+          {{ row.label }}
+        </dt>
+        <dd class="min-w-0 truncate text-right text-[#0B0522]">
+          <slot name="value" :row="row">
+            {{ row.value || row.value === 0 ? row.value : "\u2014" }}
+          </slot>
+        </dd>
+      </div>
+    </dl>
+
+    <slot />
+
+    <div v-if="$slots.footer" class="mt-2.5 border-t border-black/[0.06] pt-2.5 text-[13px]">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Form/FormContextCard.vue.d.ts

@@ -0,0 +1,33 @@
+import type { FormContextRow } from '../../lib/formLayout.js';
+type __VLS_Props = {
+    title: string;
+    subtitle?: string;
+    /** Defaults to the title's initials. Empty string = no avatar. */
+    initials?: string;
+    rows?: FormContextRow[];
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
+    row: FormContextRow;
+}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    avatar?: (props: typeof __VLS_1) => any;
+} & {
+    badges?: (props: typeof __VLS_3) => any;
+} & {
+    value?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    footer?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rows: FormContextRow[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Form/FormLayout.d.vue.ts

@@ -0,0 +1,47 @@
+import type { FormSectionEntry } from '../../lib/formLayoutContext.js';
+type __VLS_Props = {
+    /** `auto` = from three sections on. `false` hides it, `true` forces it from one. */
+    nav?: boolean | 'auto';
+    /** Draw the context column. Defaults to "when a `#context` slot is given". */
+    context?: boolean;
+    /**
+     * Height of the sticky page header in px. The nav and context column park
+     * under it, sections scroll to just below it. 57 = PageHeader without tabs.
+     */
+    stickyOffset?: number;
+    /** Accessible name of the navigation. Defaults to "Sections". */
+    navLabel?: string;
+    /** Accessible name of the context column. Defaults to "Summary". */
+    contextLabel?: string;
+};
+declare function goTo(id: string, event?: Event): void;
+declare var __VLS_1: {
+    sections: FormSectionEntry[];
+    activeId: string | null;
+    goTo: typeof goTo;
+}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    nav?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    context?: (props: typeof __VLS_5) => any;
+} & {
+    savebar?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    activeId: import("vue").Ref<string | null, string | null>;
+    goTo: typeof goTo;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    nav: boolean | "auto";
+    context: boolean;
+    stickyOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};