@bcc-code/component-library-vue 1.3.23 → 1.3.24

package/dist/theme.css

@@ -1,5 +1,5 @@
 /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
-@layer theme, base, tailwind, primevue;
+@layer theme, base, component, library-utilities, utilities, primevue;
 @import '@bcc-code/design-tokens/css';
 
 @import 'tailwindcss';
@@ -23,201 +23,36 @@
 	--spacing-18: 4.5rem;
 }
 
-.ctx-default {
-	@apply ctx-default;
-}
-.ctx-success {
-	@apply ctx-success-subtlest;
-}
-.ctx-danger {
-	@apply ctx-danger-subtlest;
-}
-.ctx-warning {
-	@apply ctx-warning-subtlest;
-}
-.ctx-info {
-	@apply ctx-info-subtlest;
-}
+/*
+ * Force-emit ctx-* utilities that components construct dynamically (e.g.
+ * `:class="\`ctx-${context}\`"` in BccBadge, BccStepIndicator, BccCapacityIndicator).
+ * Tailwind cannot see those class names by scanning source, so without this list
+ * they would never be emitted into the utilities layer.
+ *
+ * Source of truth: the @utility ctx-* definitions in ./contexts.css (auto-generated
+ * by `pnpm run generate:context-css`). Keep this list in sync with that file.
+ */
+@source inline("ctx-default ctx-{blue,brown,gray,green,magenta,orange,purple,red,teal,yellow}-{bolder,subtle,subtler,subtlest} ctx-{danger,info,success,warning}-{bolder,subtlest} ctx-brand-{bold,bolder,boldest,default,subtle,subtler,subtlest} ctx-neutral-{bold,bolder,boldest,subtle,subtler,subtlest}");
 
-.ctx-blue-bolder {
-	@apply ctx-blue-bolder;
-}
-.ctx-blue-subtle {
-	@apply ctx-blue-subtle;
-}
-.ctx-blue-subtler {
-	@apply ctx-blue-subtler;
-}
-.ctx-blue-subtlest {
-	@apply ctx-blue-subtlest;
-}
-.ctx-brand-boldest {
-	@apply ctx-brand-boldest;
-}
-.ctx-brand-bolder {
-	@apply ctx-brand-bolder;
-}
-.ctx-brand-bold {
-	@apply ctx-brand-bold;
-}
-.ctx-brand-subtle {
-	@apply ctx-brand-subtle;
-}
-.ctx-brand-subtler {
-	@apply ctx-brand-subtler;
-}
-.ctx-brand-subtlest {
-	@apply ctx-brand-subtlest;
-}
-.ctx-brown-bolder {
-	@apply ctx-brown-bolder;
-}
-.ctx-brown-subtle {
-	@apply ctx-brown-subtle;
-}
-.ctx-brown-subtler {
-	@apply ctx-brown-subtler;
-}
-.ctx-brown-subtlest {
-	@apply ctx-brown-subtlest;
-}
-.ctx-danger-subtlest {
-	@apply ctx-danger;
-}
-.ctx-danger-bolder {
-	@apply ctx-danger-bolder;
-}
-.ctx-gray-bolder {
-	@apply ctx-gray-bolder;
-}
-.ctx-gray-subtle {
-	@apply ctx-gray-subtle;
-}
-.ctx-gray-subtler {
-	@apply ctx-gray-subtler;
-}
-.ctx-gray-subtlest {
-	@apply ctx-gray-subtlest;
-}
-.ctx-green-bolder {
-	@apply ctx-green-bolder;
-}
-.ctx-green-subtle {
-	@apply ctx-green-subtle;
-}
-.ctx-green-subtler {
-	@apply ctx-green-subtler;
-}
-.ctx-green-subtlest {
-	@apply ctx-green-subtlest;
-}
-.ctx-info-subtlest {
-	@apply ctx-info;
-}
-.ctx-info-bolder {
-	@apply ctx-info-bolder;
-}
-.ctx-magenta-bolder {
-	@apply ctx-magenta-bolder;
-}
-.ctx-magenta-subtle {
-	@apply ctx-magenta-subtle;
-}
-.ctx-magenta-subtler {
-	@apply ctx-magenta-subtler;
-}
-.ctx-magenta-subtlest {
-	@apply ctx-magenta-subtlest;
-}
-.ctx-neutral-boldest {
-	@apply ctx-neutral-boldest;
-}
-.ctx-neutral-bolder {
-	@apply ctx-neutral-bolder;
-}
-.ctx-neutral-bold {
-	@apply ctx-neutral-bold;
-}
-.ctx-neutral-subtle {
-	@apply ctx-neutral-subtle;
-}
-.ctx-neutral-subtler {
-	@apply ctx-neutral-subtler;
-}
-.ctx-neutral-subtlest {
-	@apply ctx-neutral-subtlest;
-}
-.ctx-orange-bolder {
-	@apply ctx-orange-bolder;
-}
-.ctx-orange-subtle {
-	@apply ctx-orange-subtle;
-}
-.ctx-orange-subtler {
-	@apply ctx-orange-subtler;
-}
-.ctx-orange-subtlest {
-	@apply ctx-orange-subtlest;
-}
-.ctx-purple-bolder {
-	@apply ctx-purple-bolder;
-}
-.ctx-purple-subtle {
-	@apply ctx-purple-subtle;
-}
-.ctx-purple-subtler {
-	@apply ctx-purple-subtler;
-}
-.ctx-purple-subtlest {
-	@apply ctx-purple-subtlest;
-}
-.ctx-red-bolder {
-	@apply ctx-red-bolder;
-}
-.ctx-red-subtle {
-	@apply ctx-red-subtle;
-}
-.ctx-red-subtler {
-	@apply ctx-red-subtler;
-}
-.ctx-red-subtlest {
-	@apply ctx-red-subtlest;
-}
-.ctx-success-subtlest {
-	@apply ctx-success;
-}
-.ctx-success-bolder {
-	@apply ctx-success-bolder;
-}
-.ctx-teal-bolder {
-	@apply ctx-teal-bolder;
-}
-.ctx-teal-subtle {
-	@apply ctx-teal-subtle;
-}
-.ctx-teal-subtler {
-	@apply ctx-teal-subtler;
-}
-.ctx-teal-subtlest {
-	@apply ctx-teal-subtlest;
-}
-.ctx-warning-subtlest {
-	@apply ctx-warning;
-}
-.ctx-warning-bolder {
-	@apply ctx-warning-bolder;
-}
-.ctx-yellow-bolder {
-	@apply ctx-yellow-bolder;
-}
-.ctx-yellow-subtle {
-	@apply ctx-yellow-subtle;
-}
-.ctx-yellow-subtler {
-	@apply ctx-yellow-subtler;
-}
-.ctx-yellow-subtlest {
-	@apply ctx-yellow-subtlest;
+/*
+ * Aliases for semantic context names. Plain @apply wrappers are kept because
+ * `.ctx-success` etc. are aliases (point at -subtlest variants), not standalone
+ * @utility definitions. Wrapped in @layer utilities so they participate in the
+ * cascade alongside other utilities.
+ */
+@layer utilities {
+	.ctx-success {
+		@apply ctx-success-subtlest;
+	}
+	.ctx-danger {
+		@apply ctx-danger-subtlest;
+	}
+	.ctx-warning {
+		@apply ctx-warning-subtlest;
+	}
+	.ctx-info {
+		@apply ctx-info-subtlest;
+	}
 }
 
 
@@ -1963,6 +1798,84 @@
 
 
 
+/* === ./lightbox/BccLightbox.css === */
+@layer components {
+	.bcc-lightbox {
+		@apply fixed inset-0 z-9999 flex touch-none items-center justify-center;
+	}
+
+	.bcc-lightbox__backdrop {
+		@apply absolute inset-0 bg-black/75;
+	}
+
+	.bcc-lightbox__header {
+		@apply top-inset-top pointer-events-none absolute inset-x-0 z-20 flex items-center justify-end gap-3 p-3;
+	}
+
+	.bcc-lightbox__counter {
+		@apply body-sm pointer-events-none mr-auto rounded-md bg-black/50 px-2.5 py-1 text-white;
+	}
+
+	.bcc-lightbox__control {
+		@apply pointer-events-auto flex cursor-pointer items-center justify-center rounded-md border-0 bg-black/50 p-2 text-white transition-colors hover:bg-black/65;
+	}
+
+	.bcc-lightbox__icon {
+		@apply size-6 shrink-0;
+	}
+
+	.bcc-lightbox__nav {
+		@apply absolute top-1/2 z-20 -translate-y-1/2;
+	}
+
+	.bcc-lightbox__nav--prev {
+		@apply left-1 sm:left-3;
+	}
+
+	.bcc-lightbox__nav--next {
+		@apply right-1 sm:right-3;
+	}
+
+	.bcc-lightbox__stage {
+		@apply relative z-10 box-border flex h-full w-full max-w-6xl items-center justify-center px-2 py-14 sm:px-12;
+	}
+
+	.bcc-lightbox__toolbar {
+		@apply center bottom-inset-bottom-4 pointer-events-none absolute z-20 flex gap-1 rounded-md bg-black/50 p-1;
+	}
+
+	.bcc-lightbox__toolbar-btn {
+		@apply pointer-events-auto flex cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent px-3 py-2 text-white transition-colors hover:bg-white/12;
+	}
+
+	.bcc-lightbox__media {
+		@apply flex max-h-[calc(100vh-7rem)] w-full touch-none flex-col items-center justify-center;
+	}
+
+	.bcc-lightbox__media--zoomable {
+		@apply cursor-grab active:cursor-grabbing;
+	}
+
+	.bcc-lightbox__transform {
+		@apply flex origin-center items-center justify-center will-change-transform;
+	}
+
+	.bcc-lightbox__image,
+	.bcc-lightbox__video {
+		@apply block h-auto max-h-[calc(100vh-8rem)] w-auto max-w-[min(92vw,68rem)] object-contain select-none;
+	}
+
+	.bcc-lightbox__video {
+		@apply bg-black;
+	}
+
+	.bcc-lightbox__caption {
+		@apply body-sm mt-3 max-w-[min(92vw,40rem)] text-center text-white;
+	}
+}
+
+
+
 /* === ./components/custom/styles.css === */
 
 /* from ./BccAppNavigation/BccAppNavigation.css */
@@ -2246,6 +2159,42 @@
 
 
 
+/* from ./BccImage/BccImage.css */
+@layer components {
+	.bcc-image {
+		@apply relative inline-block leading-none;
+	}
+
+	.bcc-image__img {
+		@apply block max-w-full align-middle;
+	}
+
+	.bcc-image--preview {
+		@apply cursor-zoom-in;
+	}
+
+	.bcc-image__preview-mask {
+		@apply absolute inset-0 m-0 flex cursor-pointer items-center justify-center border-0 bg-black/40 p-0 opacity-0 transition-opacity;
+	}
+
+	.bcc-image--preview:hover .bcc-image__preview-mask,
+	.bcc-image--preview:focus-within .bcc-image__preview-mask {
+		@apply opacity-100;
+	}
+
+	.bcc-image__preview-icon {
+		@apply size-6 text-white;
+	}
+
+	@media (width < 750px) {
+		.bcc-image--preview .bcc-image__preview-mask {
+			@apply opacity-100;
+		}
+	}
+}
+
+
+
 /* from ./BccNpsResult/BccNpsResult.css */
 @layer components {
   .bcc-nps-result {
@@ -2608,22 +2557,24 @@
 	font-kerning: normal;
 }
 
-hr {
-	border-color: var(--color-border-default);
-}
+@layer base {
+	hr {
+		border-color: var(--color-border-default);
+	}
 
-b,
-strong,
-.bold {
-	font-weight: bold;
-	--ctx-text: var(--ctx-text-bold);
-}
+	b,
+	strong,
+	.bold {
+		font-weight: bold;
+		--ctx-text: var(--ctx-text-bold);
+	}
 
-/* Disable state */
-:disabled,
-.disabled {
-	cursor: not-allowed;
-	pointer-events: none;
+	/* Disable state */
+	:disabled,
+	.disabled {
+		cursor: not-allowed;
+		pointer-events: none;
+	}
 }
 
 

package/dist-types/components/custom/BccImage/BccImage.vue.d.ts

@@ -0,0 +1,54 @@
+import { type StyleValue } from 'vue';
+import type { LightboxItemInput } from '../../../lightbox/types';
+export type { LightboxItem, LightboxItemInput, LightboxMediaType } from '../../../lightbox/types';
+export type ImageProps = {
+    /** Image URL for the thumbnail and lightbox (when `imgs` is not set). */
+    src?: string;
+    /** Enables click-to-preview in the global lightbox. */
+    preview?: boolean;
+    /** Inline style applied to the thumbnail `<img>`. */
+    imageStyle?: StyleValue;
+    /** Class applied to the thumbnail `<img>`. */
+    imageClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    /** Gallery items for the lightbox. Falls back to `src` when omitted. */
+    imgs?: LightboxItemInput[];
+    /** Index of the item shown when the lightbox opens. */
+    index?: number;
+    /** Allow looping when navigating a gallery. */
+    loop?: boolean;
+    /** Close the lightbox when clicking the backdrop. */
+    maskClosable?: boolean;
+    /** Accessible label for the preview trigger button. */
+    previewAriaLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+} & {
+    previewicon?: (props: typeof __VLS_3) => any;
+} & {
+    indicatoricon?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (event: Event) => any;
+    show: () => any;
+    hide: () => any;
+}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    index: number;
+    loop: boolean;
+    maskClosable: boolean;
+    preview: boolean;
+    previewAriaLabel: string;
+}, {}, {}, {}, 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-types/components/custom/BccNpsScore/BccNpsScore.vue.d.ts

@@ -25,12 +25,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
 }>, {
     reverse: boolean;
+    disabled: boolean;
     min: number;
     max: number;
     leftLabel: string;
     rightLabel: string;
     labelPosition: "top" | "bottom";
-    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/custom/index.d.ts

@@ -8,6 +8,7 @@ export { default as BccCapacityIndicator } from './BccCapacityIndicator/BccCapac
 export { default as BccDialKnob } from './BccDialKnob/BccDialKnob.vue';
 export { default as BccFrame } from './BccFrame/BccFrame.vue';
 export { default as BccGraphic } from './BccGraphic/BccGraphic.vue';
+export { default as BccImage } from './BccImage/BccImage.vue';
 export { default as BccNpsResult } from './BccNpsResult/BccNpsResult.vue';
 export { default as BccNpsScore } from './BccNpsScore/BccNpsScore.vue';
 export { default as BccReact } from './BccReact/BccReact.vue';
@@ -21,6 +22,7 @@ export type { CapacityIndicatorProps } from './BccCapacityIndicator/BccCapacityI
 export type { KnobProps, KnobSlots } from './BccDialKnob/BccDialKnob.vue';
 export type { FrameProps } from './BccFrame/BccFrame.vue';
 export type { GraphicProps } from './BccGraphic/BccGraphic.vue';
+export type { ImageProps } from './BccImage/BccImage.vue';
 export type { NpsResultProps } from './BccNpsResult/BccNpsResult.vue';
 export type { NpsScoreProps } from './BccNpsScore/BccNpsScore.vue';
 export type { ReactInfo, ReactProps } from './BccReact/types';

package/dist-types/components/wrapped/index.d.ts

@@ -7,7 +7,6 @@ export { default as BccButton } from './BccButton.vue';
 export { default as BccCheckbox } from './BccCheckbox.vue';
 export { default as BccChip } from './BccChip/BccChip.vue';
 export { default as BccConfirmDialog } from './BccConfirmDialog/BccConfirmDialog.vue';
-export { default as BccImage } from './BccImage.vue';
 export { default as BccInput } from './BccInput.vue';
 export { default as BccMenu } from './BccMenu/BccMenu.vue';
 export { default as BccMessage } from './BccMessage.vue';
@@ -20,7 +19,6 @@ export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
 export type { ButtonProps } from './BccButton.vue';
 export type { CheckboxProps } from './BccCheckbox.vue';
 export type { ChipProps } from './BccChip/BccChip.vue';
-export type { ImageProps } from './BccImage.vue';
 export type { InputProps } from './BccInput.vue';
 export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
 export type { MessageProps } from './BccMessage.vue';

package/dist-types/index.d.ts

@@ -23,6 +23,7 @@ export { BCC_CONTEXTS, type BCC_CONTEXT } from './contexts';
 export { default as BccComponentLibrary } from './setup';
 export * from './types';
 export * from './components/custom';
+export * from './lightbox';
 export * from './components/wrapped';
 export { default as BccAccordion } from 'primevue/accordion';
 export { default as BccAccordionContent } from 'primevue/accordioncontent';

package/dist-types/lightbox/BccLightbox.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist-types/lightbox/BccLightboxMedia.vue.d.ts

@@ -0,0 +1,18 @@
+import type { LightboxItem } from './types';
+type __VLS_Props = {
+    item: LightboxItem;
+    zoomEnabled: boolean;
+};
+declare function rotateLeft(): void;
+declare function rotateRight(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    isImage: import("vue").ComputedRef<boolean>;
+    rotateLeft: typeof rotateLeft;
+    rotateRight: typeof rotateRight;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    swipe: (direction: "left" | "right") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSwipe?: ((direction: "left" | "right") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist-types/lightbox/composables.d.ts

@@ -0,0 +1,23 @@
+import { type Ref } from 'vue';
+import { openLightbox } from './state';
+import { type LightboxApi } from './types';
+export declare function useLightbox(): LightboxApi;
+/** Open the global lightbox without using inject (e.g. imperative usage). */
+export declare const openBccLightbox: typeof openLightbox;
+/** Close the global lightbox without using inject. */
+export declare const closeBccLightbox: LightboxApi['close'];
+export declare function usePinchPan(zoomEnabled: Ref<boolean>, options?: {
+    swipeEnabled?: Ref<boolean>;
+    onSwipe?: (direction: 'left' | 'right') => void;
+    swipeThreshold?: number;
+}): {
+    scale: Ref<number, number>;
+    transformStyle: import("vue").ComputedRef<{
+        transform: string;
+    }>;
+    reset: () => void;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onWheel: (event: WheelEvent) => void;
+};

package/dist-types/lightbox/detectMedia.d.ts

@@ -0,0 +1,4 @@
+import type { LightboxItem, LightboxItemInput, LightboxMediaType } from './types';
+export declare function detectMediaType(src: string, type?: LightboxMediaType): LightboxMediaType;
+export declare function normalizeLightboxItem(input: LightboxItemInput): LightboxItem;
+export declare function normalizeLightboxItems(items: LightboxItemInput[]): LightboxItem[];

package/dist-types/lightbox/index.d.ts

@@ -0,0 +1,7 @@
+export { default as BccLightbox } from './BccLightbox.vue';
+export { closeBccLightbox, openBccLightbox, useLightbox, usePinchPan } from './composables';
+export { detectMediaType, normalizeLightboxItem, normalizeLightboxItems } from './detectMedia';
+export { canGoNext, canGoPrevious, closeLightbox, goToNextItem, goToPreviousItem, installLightbox, lightboxState, openLightbox, setLightboxIndex, } from './state';
+export type { LightboxState } from './state';
+export { LIGHTBOX_KEY } from './types';
+export type { LightboxApi, LightboxItem, LightboxItemInput, LightboxMediaType, LightboxOpenOptions } from './types';

package/dist-types/lightbox/state.d.ts

@@ -0,0 +1,30 @@
+import type { App } from 'vue';
+import { type LightboxItem, type LightboxOpenOptions } from './types';
+export type LightboxState = {
+    visible: boolean;
+    items: LightboxItem[];
+    index: number;
+    loop: boolean;
+    maskClosable: boolean;
+};
+export declare const lightboxState: {
+    readonly visible: boolean;
+    readonly items: readonly {
+        readonly src: string;
+        readonly type?: import("./types").LightboxMediaType | undefined;
+        readonly alt?: string | undefined;
+        readonly title?: string | undefined;
+        readonly poster?: string | undefined;
+    }[];
+    readonly index: number;
+    readonly loop: boolean;
+    readonly maskClosable: boolean;
+};
+export declare function openLightbox(options: LightboxOpenOptions): void;
+export declare function closeLightbox(): void;
+export declare function setLightboxIndex(index: number): void;
+export declare function goToPreviousItem(): void;
+export declare function goToNextItem(): void;
+export declare function canGoPrevious(): boolean;
+export declare function canGoNext(): boolean;
+export declare function installLightbox(app: App): void;

package/dist-types/lightbox/types.d.ts

@@ -0,0 +1,24 @@
+import type { InjectionKey } from 'vue';
+export type LightboxMediaType = 'image' | 'video';
+export type LightboxItem = {
+    src: string;
+    type?: LightboxMediaType;
+    alt?: string;
+    title?: string;
+    /** Poster image for video items. */
+    poster?: string;
+};
+export type LightboxItemInput = string | LightboxItem;
+export type LightboxOpenOptions = {
+    items: LightboxItemInput[];
+    index?: number;
+    loop?: boolean;
+    maskClosable?: boolean;
+    onShow?: () => void;
+    onHide?: () => void;
+};
+export type LightboxApi = {
+    open: (options: LightboxOpenOptions) => void;
+    close: () => void;
+};
+export declare const LIGHTBOX_KEY: InjectionKey<LightboxApi>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/component-library-vue",
-  "version": "1.3.23",
+  "version": "1.3.24",
   "type": "module",
   "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
   "repository": "https://github.com/bcc-code/bcc-design.git",

package/dist-types/components/wrapped/BccImage.vue.d.ts

@@ -1,17 +0,0 @@
-import { type ImageProps as PrimeImageProps } from 'primevue/image';
-export type ImageProps = PrimeImageProps;
-declare var __VLS_9: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    refresh?: (props: typeof __VLS_9) => any;
-} & {
-    undo?: (props: typeof __VLS_17) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<PrimeImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimeImageProps> & 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;
-    };
-};