pxd 0.0.55 → 0.0.61

package/README.md

@@ -1,17 +1,23 @@
 # PXD
 
-A universal UI component library for Vue@2.7+ & Vue@3.2+
+A Vue 2.7 & 3.2 universal component library. Built-in light/dark theme. PC & mobile ready. Animation-free mode supported.
+
+[简体中文](README-CN.md) | [Online Preview](https://pxd-ui.netlify.app/)
 
-[Online Preview](https://pxd-ui.netlify.app/)
 
 > [!WARNING]
 > The project is under active development and is not ready for production.
 
 ## Features
 
-- Vue 3 Composition API
-- 100% compatible with Vue2.7+ & Vue3.2+
+- Universal: One codebase for Vue 2.7+ and Vue 3.2+
+- Responsive: Seamlessly works on both PC and mobile devices
+- Built-in light & dark theme, no extra configuration needed
+- Motion-safe: Supports fully disabling all animations
+- Written in TypeScript with full type definitions
+- Vue 3 Composition API with `<script setup>`
 - Complete tree-shaking support
+- Inspired by the [Geist Design System](https://vercel.com/geist/introduction)
 
 ## Contribution
 
@@ -43,6 +49,14 @@ pnpm build:docs
 pnpm build
 ```
 
+## Contribution Guidelines
+
+### Component Naming Rules
+
+- Components that can be used independently do not need to add -group/-item suffix, such as: `Checkbox`, `Radio`, `Toggle`, `ToggleButton`
+- Components that are used to manage a group of sub-components need to add -group suffix, such as: `CheckboxGroup`, `RadioGroup`, `ToggleGroup`, `ToggleButtonGroup`
+- Components that can only be used as a sub-component of another component need to add -item suffix, such as: `ListItem`, `GridItem`, `MessageItem`
+
 ## Reference
 
 - [Geist Design System](https://vercel.com/geist/introduction)

package/dist/components/_internal/fragment-container.vue

@@ -1,11 +1,12 @@
 <script setup>
 defineOptions({
-  name: "PFragmentContainer"
+  name: "PFragmentContainer",
+  inheritAttrs: false
 });
 </script>
 
 <template>
-  <div class="pxd-fragment-container">
+  <div class="pxd-fragment-container" v-bind="$attrs">
     <slot />
   </div>
 </template>

package/dist/components/active-graph/index.d.vue.ts

@@ -6,13 +6,12 @@ type __VLS_Slots = {} & {
     tooltip?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ActiveGraphProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "cell-click": (args_0: MouseEvent, args_1: string) => any;
+    select: (args_0: string, args_1: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ActiveGraphProps> & Readonly<{
-    "onCell-click"?: ((args_0: MouseEvent, args_1: string) => any) | undefined;
+    onSelect?: ((args_0: string, args_1: MouseEvent) => any) | undefined;
 }>, {
     data: Record<string, any>[];
     legend: boolean;
-    graphOnly: boolean;
     tooltip: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/active-graph/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useDelayChange } from "../../composables/use-delay-change";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getAllDatesBetween } from "../../utils/date";
 import { getCssUnitValue } from "../../utils/format";
 import { getColorByThreshold } from "../../utils/get";
@@ -12,19 +12,21 @@ defineOptions({
 const props = defineProps({
   data: { type: Array, required: false, default: () => [] },
   legend: { type: Boolean, required: false, default: true },
+  colors: { type: Object, required: false },
   startDate: { type: [String, Date], required: false },
   endDate: { type: [String, Date], required: false },
-  colors: { type: Object, required: false },
-  graphOnly: { type: Boolean, required: false, default: false },
-  transpose: { type: Boolean, required: false },
   tooltip: { type: Boolean, required: false, default: true },
+  graphOnly: { type: Boolean, required: false },
+  transpose: { type: Boolean, required: false },
   fieldNames: { type: Object, required: false },
-  itemRadius: { type: [String, Number], required: false }
+  itemRadius: { type: [String, Number], required: false },
+  defaultSelect: { type: String, required: false }
 });
-const emits = defineEmits(["cell-click"]);
+const emits = defineEmits(["select"]);
 const configProvider = useConfigProvider();
 const CELL_GAP = 3;
 const CELL_SIZE = 12;
+const selectedDate = shallowRef(props.defaultSelect);
 const getDefaultStartDate = () => {
   const date = /* @__PURE__ */ new Date();
   date.setFullYear(date.getFullYear() - 1);
@@ -223,7 +225,8 @@ function onCellClick(event) {
   if (!date) {
     return;
   }
-  emits("cell-click", event, date);
+  selectedDate.value = selectedDate.value === date ? "" : date;
+  emits("select", date, event);
 }
 let tbodyRect;
 const tbodyRef = shallowRef();
@@ -315,9 +318,13 @@ onBeforeUnmount(() => {
           <td
             v-for="col of row"
             :key="col.date"
-            class="pxd-active-graph--item w-3 min-w-3 rounded-(--item-radius) bg-gray-alpha-200 motion-safe:transition-colors"
+            class="pxd-active-graph--item w-3 min-w-3 rounded-(--item-radius) border border-transparent bg-gray-alpha-100 hover:border-primary motion-safe:transition-all"
             :data-date="col.date"
-            :class="{ 'pointer-events-none opacity-0': col.hidden }"
+            :class="{
+  'pointer-events-none invisible': col.hidden,
+  'opacity-30': selectedDate && col.date !== selectedDate,
+  'border-primary!': selectedDate && col.date === selectedDate
+}"
             :style="`background: ${col.color}`"
           />
         </tr>
@@ -326,22 +333,22 @@ onBeforeUnmount(() => {
           <tr class="pxd-active-graph--placeholder h-0.5 pointer-events-none" />
           <tr class="pxd-active-graph--legend pointer-events-none">
             <td class="h-3 relative text-foreground-secondary">
-              <span class="right-1 absolute top-1/2 -translate-y-1/2">{{
-                configProvider.locale.compare.less
-              }}</span>
+              <span class="right-1 absolute top-1/2 -translate-y-1/2">
+                {{ configProvider.locale.compare.less }}
+              </span>
             </td>
 
             <td
               v-for="color in computedColors"
               :key="color"
-              class="w-3 h-3 rounded-(--item-radius) bg-gray-alpha-200 motion-safe:transition-colors"
+              class="w-3 h-3 rounded-(--item-radius) bg-gray-alpha-100 motion-safe:transition-colors"
               :style="`background-color: ${color}`"
             />
 
             <td class="h-3 w-3 relative text-foreground-secondary">
-              <span class="absolute top-1/2 left-px -translate-y-1/2">{{
-                configProvider.locale.compare.more
-              }}</span>
+              <span class="absolute top-1/2 left-px -translate-y-1/2">
+                {{ configProvider.locale.compare.more }}
+              </span>
             </td>
           </tr>
         </template>

package/dist/components/active-graph/types.d.ts

@@ -6,18 +6,19 @@ interface FieldNames {
 export interface ActiveGraphProps {
   data?: Record<string, any>[]
   legend?: boolean
+  colors?: Record<string, string>
   startDate?: string | Date
   endDate?: string | Date
-  colors?: Record<string, string>
+  tooltip?: boolean
   graphOnly?: boolean
   transpose?: boolean
-  tooltip?: boolean
   fieldNames?: FieldNames
   itemRadius?: string | number
+  defaultSelect?: string
 }
 
 export interface ActiveGraphEmits {
-  'cell-click': [MouseEvent, string]
+  select: [string, MouseEvent]
 }
 
 export interface ActiveGraphCellData {

package/dist/components/avatar/index.vue

@@ -16,8 +16,10 @@ const props = defineProps({
 const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
 const avatarGroupContext = useAvatarGroupContext();
-const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.size, "32px"));
-const hideAvatar = computed(
+const computedSize = computed(
+  () => getCssUnitValue(props.size || avatarGroupContext?.props.size, "32px")
+);
+const isHideAvatar = computed(
   () => !props.src || props.placeholder || loadingStatus.value === "error"
 );
 function onLoadError(event) {
@@ -42,13 +44,20 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 select-none before:default-animation-timing-function! motion-safe:before:animate-[placeholder_8s_infinite]"
+    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 bg-background-100 text-13px select-none before:default-animation-timing-function! motion-safe:before:[animation-duration:8s]"
     :style="{ '--avatar-size': computedSize }"
+    :data-placeholder="placeholder"
     v-bind="$attrs"
   >
     <slot>
+      <span
+        v-if="isHideAvatar"
+        class="font-medium px-1 relative flex size-full items-center justify-center overflow-hidden rounded-inherit"
+      >
+        {{ alt }}
+      </span>
       <img
-        v-if="!hideAvatar"
+        v-else
         :src="src"
         :alt="alt"
         loading="lazy"
@@ -56,7 +65,7 @@ defineExpose({
         aria-hidden="true"
         fetchpriority="low"
         crossorigin="anonymous"
-        class="relative block size-full overflow-hidden rounded-inherit"
+        class="relative block size-full overflow-hidden rounded-inherit bg-gray-100"
         @load="onLoadSuccess"
         @loadstart="onLoadStart"
         @abort="onLoadError"
@@ -80,17 +89,15 @@ defineExpose({
 
 <style lang="postcss">
 .pxd-avatar {
-  &::before,
-  &::after {
+  &::after,
+  &[data-placeholder='true']::before {
     content: '';
-    width: 100%;
-    height: 100%;
     position: absolute;
     inset: 0;
     border-radius: inherit;
   }
 
-  &::before {
+  &[data-placeholder='true']::before {
     background-image: linear-gradient(
       270deg,
       var(--color-gray-alpha-100),
@@ -99,6 +106,8 @@ defineExpose({
       var(--color-gray-alpha-100)
     );
     background-size: 400% 100%;
+    animation-name: placeholder;
+    animation-iteration-count: infinite;
   }
 
   &::after {

package/dist/components/avatar/types.d.ts

@@ -13,15 +13,3 @@ export interface AvatarEmits {
   error: [Event]
   loadstart: [Event]
 }
-
-interface AvatarOptions {
-  src?: string
-  alt?: string
-  loading?: boolean
-}
-
-export interface AvatarGroupProps {
-  max?: number
-  size?: number | string
-  options?: AvatarOptions[]
-}

package/dist/components/avatar-group/index.d.vue.ts

@@ -1,8 +1,8 @@
-import type { AvatarGroupProps } from '../avatar/types';
+import type { AvatarGroupProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     size: number | string;
     max: number;
-    options: import("../avatar/types").AvatarOptions[];
+    options: import("./types").AvatarOptions[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/avatar-group/index.vue

@@ -3,7 +3,8 @@ import { computed } from "vue";
 import { provideAvatarGroupContext } from "../../contexts/avatar";
 import PAvatar from "../avatar/index.vue";
 defineOptions({
-  name: "PAvatarGroup"
+  name: "PAvatarGroup",
+  inheritAttrs: false
 });
 const props = defineProps({
   max: { type: Number, required: false, default: 5 },
@@ -15,11 +16,11 @@ const slicedOptions = computed(() => {
   const maxCount = Math.max(Math.min(max, options.length), 1);
   return options.slice(0, maxCount);
 });
-provideAvatarGroupContext(props);
+provideAvatarGroupContext({ props });
 </script>
 
 <template>
-  <div class="pxd-avatar-group flex flex-wrap items-center">
+  <div class="pxd-avatar-group flex flex-wrap items-center" v-bind="$attrs">
     <PAvatar
       v-for="(option, index) in slicedOptions"
       :key="index"

package/dist/components/avatar-group/types.d.ts

@@ -0,0 +1,11 @@
+interface AvatarOptions {
+  src?: string
+  alt?: string
+  loading?: boolean
+}
+
+export interface AvatarGroupProps {
+  max?: number
+  size?: number | string
+  options?: AvatarOptions[]
+}

package/dist/components/badge/index.d.vue.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
-    variant: import("./cn").BadgeVariant;
     as: import("../../types/shared").ComponentAs;
+    variant: import("./types").BadgeVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/badge/index.vue

@@ -1,17 +1,61 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
-import { badgeVariant } from "./cn";
+import { useConfigProvider } from "../../contexts/config-provider";
 defineOptions({
   name: "PBadge",
   inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "span" },
+  as: { type: [String, Object], required: false, default: "span" },
   href: { type: String, required: false },
   size: { type: String, required: false },
   variant: { type: String, required: false, default: "gray" }
 });
+const badgeVariant = tv({
+  base: "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans text-nowrap whitespace-nowrap no-underline! motion-safe:transition-all",
+  variants: {
+    variant: {
+      pill: "bg-background-100",
+      primary: "bg-primary text-gray-100",
+      gray: "text-white bg-gray-600",
+      blue: "bg-blue-700 text-gray-100 dark:text-gray-1000",
+      purple: "bg-purple-700 text-gray-100 dark:text-gray-1000",
+      amber: "bg-amber-700 text-gray-1000 dark:text-gray-100",
+      red: "bg-red-700 text-gray-100 dark:text-gray-1000",
+      pink: "bg-pink-700 text-gray-100 dark:text-gray-1000",
+      green: "bg-green-700 text-gray-100 dark:text-gray-1000",
+      teal: "bg-teal-700 text-gray-100 dark:text-gray-1000",
+      "gray-subtle": "bg-gray-200 text-gray-1000",
+      "blue-subtle": "bg-blue-200 text-blue-900",
+      "purple-subtle": "bg-purple-200 text-purple-900",
+      "amber-subtle": "bg-amber-200 text-amber-900",
+      "red-subtle": "bg-red-200 text-red-900",
+      "pink-subtle": "bg-pink-200 text-pink-900",
+      "green-subtle": "bg-green-200 text-green-900",
+      "teal-subtle": "bg-teal-200 text-teal-900",
+      inverted: "bg-gray-1000 text-gray-100",
+      vue: "text-gray-100 dark:text-gray-1000",
+      trial: "text-gray-100 dark:text-gray-1000",
+      turborepo: "text-gray-100 dark:text-gray-1000"
+    },
+    size: {
+      sm: "px-2 h-5 text-xs",
+      md: "px-2.5 h-6 text-xs",
+      lg: "px-3 h-7.5 text-sm"
+    }
+  },
+  compoundVariants: [
+    { variant: "pill", class: "pill" },
+    { variant: "vue", class: "vue" },
+    { variant: "trial", class: "trial" },
+    { variant: "turborepo", class: "turborepo" }
+  ],
+  defaultVariants: {
+    variant: "gray",
+    size: "md"
+  }
+});
 const configProvider = useConfigProvider();
 const computedClasses = computed(() => {
   const { variant, size = configProvider.size } = props;

package/dist/components/badge/types.d.ts

@@ -1,5 +1,28 @@
 import type { ComponentAs, ComponentSize } from '../../types/shared'
-import type { BadgeVariant } from './cn'
+
+export type BadgeVariant =
+  | 'pill'
+  | 'primary'
+  | 'gray'
+  | 'blue'
+  | 'purple'
+  | 'amber'
+  | 'red'
+  | 'pink'
+  | 'green'
+  | 'teal'
+  | 'gray-subtle'
+  | 'blue-subtle'
+  | 'purple-subtle'
+  | 'amber-subtle'
+  | 'red-subtle'
+  | 'pink-subtle'
+  | 'green-subtle'
+  | 'teal-subtle'
+  | 'inverted'
+  | 'vue'
+  | 'trial'
+  | 'turborepo'
 
 export interface BadgeProps {
   as?: ComponentAs

package/dist/components/book/index.vue

@@ -2,7 +2,8 @@
 import { computed } from "vue";
 import { getResponsiveValue } from "../../utils/responsive";
 defineOptions({
-  name: "PBook"
+  name: "PBook",
+  inheritAttrs: false
 });
 const props = defineProps({
   color: { type: String, required: false },
@@ -45,7 +46,7 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <div class="pxd-book inline-flex w-fit">
+  <div class="pxd-book inline-flex w-fit" v-bind="$attrs">
     <div :class="computedClasses" :style="computedStyle">
       <div
         class="pxd-book--content translate-z-0 absolute flex size-full min-w-full flex-col overflow-hidden bg-background-200"

package/dist/components/browser/index.vue

@@ -8,7 +8,8 @@ import { computed } from "vue";
 import { useCopyClick } from "../../composables/use-copy-click";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PBrowser"
+  name: "PBrowser",
+  inheritAttrs: false
 });
 defineProps({
   address: { type: String, required: false }
@@ -18,7 +19,10 @@ const renderIcon = computed(() => isCopied.value ? CheckIcon : CopyIcon);
 </script>
 
 <template>
-  <div class="pxd-browser overflow-hidden rounded-md bg-background-200 shadow-border-small">
+  <div
+    class="pxd-browser overflow-hidden rounded-md bg-background-200 shadow-border-small"
+    v-bind="$attrs"
+  >
     <div class="py-2.5 px-5 gap-4 md:gap-6 flex justify-between bg-background-100">
       <div
         class="gap-4 min-w-0 md:first:max-w-35 md:last:max-w-35 max-md:first:flex-none flex flex-1 items-center justify-center first:justify-start last:justify-end"

package/dist/components/button/index.d.vue.ts

@@ -9,9 +9,9 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     icon: boolean;
+    as: import("../../types/shared").ComponentAs;
     variant: import("./types").ButtonVariant;
     align: "left" | "center" | "right";
-    as: import("../../types/shared").ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/button/index.vue

@@ -1,15 +1,15 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
 import PSpinner from "../spinner/index.vue";
-import { buttonVariants } from "./cn";
 defineOptions({
   name: "PButton",
   inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "button" },
+  as: { type: [String, Object], required: false, default: "button" },
   variant: { type: String, required: false, default: "default" },
   size: { type: String, required: false },
   shape: { type: String, required: false },
@@ -19,8 +19,62 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   fullWidth: { type: Boolean, required: false }
 });
+const buttonVariants = tv({
+  base: "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-all",
+  variants: {
+    size: {
+      xs: "h-6 px-1 text-sm rounded-sm",
+      sm: "h-7.5 px-1.5 text-sm rounded-md",
+      md: "h-9 px-2.5 text-sm rounded-md",
+      lg: "h-10 px-3.5 text-base rounded-lg"
+    },
+    shape: {
+      square: "rounded-none",
+      rounded: "rounded-full",
+      default: ""
+    },
+    align: {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end"
+    },
+    variant: {
+      simple: "",
+      icon: "p-0! aspect-square",
+      link: "font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity",
+      default: "border-input bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active",
+      ghost: "border-transparent bg-transparent text-foreground hover:bg-background-hover active:bg-background-active",
+      primary: "border-transparent bg-primary text-gray-100 hover:bg-primary-hover active:bg-primary-active",
+      error: "text-white border-transparent bg-red-800 hover:bg-red-700 active:bg-red-900",
+      warning: "text-black border-transparent bg-amber-800 hover:bg-amber-700 active:bg-amber-900",
+      success: "text-white border-transparent bg-green-800 hover:bg-green-700 active:bg-green-900"
+    },
+    disabled: {
+      true: "is-disabled hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700"
+    },
+    fullWidth: {
+      true: "w-full"
+    },
+    icon: {
+      true: "p-0! aspect-square"
+    },
+    loading: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["default", "ghost", "primary", "error", "warning", "success"],
+      class: "border self-focus-ring outline-none"
+    },
+    {
+      icon: true,
+      class: "p-0! aspect-square"
+    }
+  ]
+});
 const configProvider = useConfigProvider();
-const computedDisabled = computed(
+const isDisabled = computed(
   () => isTruthyProp(props.disabled) || isTruthyProp(props.loading)
 );
 const computedClasses = computed(() => {
@@ -32,19 +86,13 @@ const computedClasses = computed(() => {
     align,
     variant,
     fullWidth,
-    disabled: computedDisabled.value
+    disabled: isDisabled.value
   });
 });
 </script>
 
 <template>
-  <Component
-    :is="as"
-    role="button"
-    :class="computedClasses"
-    :disabled="computedDisabled"
-    v-bind="$attrs"
-  >
+  <Component :is="as" role="button" :class="computedClasses" :disabled="isDisabled" v-bind="$attrs">
     <PSpinner v-if="loading" />
 
     <slot name="prefix" />

package/dist/components/carousel/index.d.vue.ts

@@ -1,8 +1,30 @@
-declare var __VLS_1: {};
+import type { CarouselProps } from './types';
+declare var __VLS_1: {}, __VLS_3: {
+    current: number;
+    total: number;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    indicator?: (props: typeof __VLS_3) => 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_base: import("vue").DefineComponent<CarouselProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<CarouselProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+}>, {
+    index: number;
+    height: number | string;
+    loop: boolean;
+    arrow: boolean;
+    autoplay: boolean;
+    interval: number;
+    indicator: boolean;
+    direction: import("../../types/shared").ComponentDirection;
+    indicatorType: "dot" | "line";
+    indicatorPosition: import("../../types/shared").BasePosition;
+    pauseOnHover: boolean;
+}, {}, {}, {}, 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;