pxd 0.0.55 → 0.0.61

package/dist/components/carousel/index.vue

@@ -1,43 +1,356 @@
 <script setup>
-import { onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { useCarouselGroupContext } from "../../contexts/carousel";
-import { getUniqueId } from "../../utils/uid";
+import ChevronRightIcon from "@gdsicon/vue/chevron-right";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { provideCarouselContext } from "../../contexts/carousel";
+import { getCssUnitValue } from "../../utils/format";
 defineOptions({
-  name: "PCarousel"
+  name: "PCarousel",
+  inheritAttrs: false
 });
-const carouselGroupContext = useCarouselGroupContext();
-const uniqueId = getUniqueId();
-const transformStyle = shallowRef("");
-function resetPosition() {
-  transformStyle.value = "";
-}
-function getTranslateStyle(translate) {
-  return carouselGroupContext.props.direction === "horizontal" ? `translateX(${translate}%)` : `translateY(${translate}%)`;
-}
-function translateItem(index, activeIndex) {
-  const maxLength = carouselGroupContext.carousels.value.length;
-  const lastIndex = maxLength - 1;
-  if (index === 0 && activeIndex === maxLength) {
-    transformStyle.value = getTranslateStyle(maxLength * 100);
-  } else if (index === lastIndex && activeIndex <= 0) {
-    transformStyle.value = getTranslateStyle(-maxLength * 100);
+const props = defineProps({
+  index: { type: Number, required: false, default: 0 },
+  loop: { type: Boolean, required: false, default: true },
+  arrow: { type: Boolean, required: false, default: true },
+  height: { type: [Number, String], required: false, default: 180 },
+  autoplay: { type: Boolean, required: false, default: true },
+  interval: { type: Number, required: false, default: 3e3 },
+  indicator: { type: Boolean, required: false, default: true },
+  direction: { type: String, required: false, default: "horizontal" },
+  indicatorType: { type: String, required: false, default: "line" },
+  indicatorPosition: { type: String, required: false, default: "bottom" },
+  pauseOnHover: { type: Boolean, required: false, default: true },
+  toggleOnWheel: { type: Boolean, required: false }
+});
+const emits = defineEmits(["change"]);
+const TRANSITION_CLASSES = ["transition-transform", "duration-[calc(var(--duration,200ms)+100ms)]"];
+let autoPlayRafId = null;
+let autoPlaySession = 0;
+let isPointerEntering = false;
+let toggleQueue = Promise.resolve();
+const carousels = ref([]);
+const sliderRef = shallowRef();
+const virtualIndex = shallowRef(props.index);
+const correctIndex = computed(() => {
+  const index = virtualIndex.value;
+  if (index >= carousels.value.length) {
+    return 0;
+  }
+  if (index <= -1) {
+    return carousels.value.length - 1;
+  }
+  return index;
+});
+const computedStyle = computed(() => {
+  const translateValue = virtualIndex.value * -100;
+  const styles = {
+    transform: props.direction === "horizontal" ? `translateX(${translateValue}%)` : `translateY(${translateValue}%)`
+  };
+  return styles;
+});
+function translateItems() {
+  carousels.value.forEach((carousel, index) => {
+    carousel.translateItem(index, virtualIndex.value);
+  });
+}
+async function awaitAnimationEnd() {
+  const animations = sliderRef.value?.getAnimations() ?? [];
+  await Promise.allSettled(animations.map((a) => a.finished));
+}
+async function performToggle(delta) {
+  const length = carousels.value.length;
+  if (length === 0) {
+    return;
+  }
+  await awaitAnimationEnd();
+  if (props.loop) {
+    virtualIndex.value += delta;
+    translateItems();
   } else {
-    resetPosition();
+    virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
   }
+  emits("change", correctIndex.value);
+  nextTick(onPointerLeave);
 }
-onMounted(() => {
-  carouselGroupContext?.registerCarousel({
-    uid: uniqueId,
-    translateItem
+function onToggleClick(delta) {
+  toggleQueue = toggleQueue.catch(() => {
+  }).then(async () => {
+    await performToggle(delta);
   });
+  return toggleQueue;
+}
+function onWheelToggle(ev) {
+  if (!props.toggleOnWheel) {
+    return;
+  }
+  const length = carousels.value.length;
+  if (length <= 1) {
+    return;
+  }
+  const delta = ev.deltaY > 0 ? 1 : -1;
+  const indexBefore = virtualIndex.value;
+  const lastIndex = length - 1;
+  if (!props.loop) {
+    const isAtFirstAndGoPrev = indexBefore <= 0 && delta < 0;
+    const isAtLastAndGoNext = indexBefore >= lastIndex && delta > 0;
+    if (isAtFirstAndGoPrev || isAtLastAndGoNext) {
+      return;
+    }
+  }
+  if (ev.cancelable) {
+    ev.preventDefault();
+  }
+  onToggleClick(delta);
+}
+function resetContainerPosition(resetIndex) {
+  const containerClassList = sliderRef.value.classList;
+  containerClassList.remove(...TRANSITION_CLASSES);
+  virtualIndex.value = resetIndex;
+  translateItems();
+  setTimeout(() => {
+    containerClassList.add(...TRANSITION_CLASSES);
+  }, 0);
+}
+function onTransitionsEnd(ev) {
+  if (ev.propertyName !== "transform" || ev.target !== sliderRef.value) {
+    return;
+  }
+  if (!props.loop) {
+    return;
+  }
+  if (virtualIndex.value >= carousels.value.length) {
+    resetContainerPosition(0);
+  } else if (virtualIndex.value <= -1) {
+    resetContainerPosition(carousels.value.length - 1);
+  }
+}
+function clearAutoPlayTimer() {
+  autoPlaySession++;
+  if (autoPlayRafId != null) {
+    cancelAnimationFrame(autoPlayRafId);
+    autoPlayRafId = null;
+  }
+}
+function setAutoPlayTimer() {
+  const mySession = autoPlaySession;
+  const startTime = performance.now();
+  const onAnimationFrame = () => {
+    if (mySession !== autoPlaySession || isPointerEntering) {
+      return;
+    }
+    const currentTime = performance.now();
+    const elapsedTime = currentTime - startTime;
+    if (elapsedTime >= props.interval) {
+      onToggleClick(1);
+      return;
+    }
+    autoPlayRafId = requestAnimationFrame(onAnimationFrame);
+  };
+  autoPlayRafId = requestAnimationFrame(onAnimationFrame);
+}
+function onPointerEnter() {
+  if (props.pauseOnHover) {
+    isPointerEntering = true;
+    clearAutoPlayTimer();
+  }
+}
+function onPointerLeave() {
+  isPointerEntering = false;
+  if (!props.autoplay) {
+    return;
+  }
+  clearAutoPlayTimer();
+  setAutoPlayTimer();
+}
+function onIndicatorClick(ev) {
+  clearAutoPlayTimer();
+  const targetEl = ev.target.closest("[data-index]");
+  const targetIndex = Number(targetEl?.dataset.index);
+  if (Number.isNaN(targetIndex)) {
+    return;
+  }
+  const deltaIndex = targetIndex - virtualIndex.value;
+  if (deltaIndex !== 0) {
+    onToggleClick(deltaIndex);
+  }
+  nextTick(onPointerLeave);
+}
+function registerCarousel(state) {
+  carousels.value.push(state);
+}
+function unregisterCarousel(id) {
+  carousels.value = carousels.value.filter(({ uid }) => uid !== id);
+}
+provideCarouselContext({
+  props,
+  carousels,
+  registerCarousel,
+  unregisterCarousel
+});
+onMounted(async () => {
+  onPointerLeave();
+  await nextTick();
+  translateItems();
 });
 onBeforeUnmount(() => {
-  carouselGroupContext?.unregisterCarousel(uniqueId);
+  clearAutoPlayTimer();
+  carousels.value = [];
 });
 </script>
 
 <template>
-  <div class="pxd-carousel size-full shrink-0" :style="{ transform: transformStyle }">
-    <slot />
+  <div
+    v-bind="$attrs"
+    :data-direction="direction"
+    :data-indicator-type="indicatorType"
+    :data-indicator-position="indicatorPosition"
+    class="pxd-carousel group relative w-full touch-none overflow-hidden"
+    :style="{ height: getCssUnitValue(height) }"
+    @pointerenter="onPointerEnter"
+    @pointerleave="onPointerLeave"
+    @wheel="onWheelToggle"
+  >
+    <div class="pxd-carousel--container size-full">
+      <div
+        ref="sliderRef"
+        class="pxd-carousel--slider translate-z-0 size-full"
+        :style="computedStyle"
+        :class="TRANSITION_CLASSES"
+        @transitionend="onTransitionsEnd"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <div
+      v-if="indicator"
+      class="pxd-carousel--indicator gap-2 absolute flex w-max items-center"
+      @click="onIndicatorClick"
+    >
+      <slot name="indicator" :current="correctIndex + 1" :total="carousels.length">
+        <button
+          v-for="(_, i) in carousels.length"
+          :key="i"
+          :data-index="i"
+          class="pxd-carousel--indicator-item relative h-(--carousel-dot-height) w-(--carousel-dot-width) cursor-pointer appearance-none rounded-full bg-gray-alpha-200 font-inherit self-focus-ring outline-none hover:bg-gray-alpha-400 motion-safe:transition-colors"
+          :class="{ 'bg-primary!': i === correctIndex }"
+        />
+      </slot>
+    </div>
+
+    <div v-if="arrow" class="pxd-carousel--toggler gap-2 absolute flex">
+      <button
+        type="button"
+        aria-label="Carousel arrow left"
+        class="pxd-carousel--prev-btn p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
+        @click="onToggleClick(-1)"
+      >
+        <ChevronRightIcon class="rotate-180" />
+      </button>
+
+      <button
+        type="button"
+        aria-label="Carousel arrow right"
+        class="pxd-carousel--next-btn p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 font-inherit text-foreground-secondary self-focus-ring outline-none hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
+        @click="onToggleClick(1)"
+      >
+        <ChevronRightIcon />
+      </button>
+    </div>
   </div>
 </template>
+
+<style lang="postcss">
+.pxd-carousel {
+  &[data-indicator-type='dot'] {
+    --carousel-dot-width: 0.5rem;
+    --carousel-dot-height: 0.5rem;
+  }
+
+  &[data-indicator-type='line'] {
+    &[data-indicator-position='top'],
+    &[data-indicator-position='bottom'] {
+      --carousel-dot-width: 1rem;
+      --carousel-dot-height: 0.25rem;
+    }
+
+    &[data-indicator-position='left'],
+    &[data-indicator-position='right'] {
+      --carousel-dot-width: 0.25rem;
+      --carousel-dot-height: 1rem;
+    }
+  }
+
+  &[data-indicator-position='top'] {
+    .pxd-carousel--indicator {
+      left: 12px;
+      top: 0.5rem;
+    }
+
+    .pxd-carousel--toggler {
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+  }
+
+  &[data-indicator-position='bottom'] {
+    .pxd-carousel--indicator {
+      left: 12px;
+      bottom: 0.5rem;
+    }
+
+    .pxd-carousel--toggler {
+      right: 0.5rem;
+      bottom: 0.5rem;
+    }
+  }
+
+  &[data-indicator-position='left'] {
+    .pxd-carousel--indicator {
+      left: 0.5rem;
+      top: 12px;
+    }
+
+    .pxd-carousel--toggler {
+      left: 0.5rem;
+      bottom: 0.5rem;
+    }
+  }
+
+  &[data-indicator-position='right'] {
+    .pxd-carousel--indicator {
+      right: 0.5rem;
+      top: 12px;
+    }
+
+    .pxd-carousel--toggler {
+      right: 0.5rem;
+      bottom: 0.5rem;
+    }
+  }
+
+  &[data-direction='horizontal'] .pxd-carousel--slider {
+    display: flex;
+  }
+
+  &[data-direction='vertical'] {
+    .pxd-carousel--prev-btn,
+    .pxd-carousel--next-btn {
+      transform: rotate(90deg);
+    }
+  }
+
+  &[data-indicator-position='left'],
+  &[data-indicator-position='right'] {
+    .pxd-carousel--indicator,
+    .pxd-carousel--toggler {
+      flex-direction: column;
+    }
+  }
+}
+
+.pxd-carousel--indicator-item::before {
+  content: '';
+  position: absolute;
+  inset: -0.25rem;
+}
+</style>

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

@@ -1,6 +1,6 @@
 import type { BasePosition, ComponentDirection } from '../../types/shared'
 
-export interface CarouselGroupProps {
+export interface CarouselProps {
   index?: number
   loop?: boolean
   arrow?: boolean
@@ -15,6 +15,6 @@ export interface CarouselGroupProps {
   toggleOnWheel?: boolean
 }
 
-export interface CarouselGroupEmits {
+export interface CarouselEmits {
   change: [index: number]
 }

package/dist/components/carousel-item/index.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/components/carousel-item/index.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useCarouselContext } from "../../contexts/carousel";
+import { getUniqueId } from "../../utils/uid";
+defineOptions({
+  name: "PCarouselItem",
+  inheritAttrs: false
+});
+const uniqueId = getUniqueId();
+const transformStyle = shallowRef("");
+const carouselContext = useCarouselContext();
+function resetPosition() {
+  transformStyle.value = "";
+}
+function getTranslateStyle(translate) {
+  const isHorizontal = carouselContext.props.direction === "horizontal";
+  return `translate${isHorizontal ? "X" : "Y"}(${translate}%)`;
+}
+function translateItem(index, activeIndex) {
+  const maxLength = carouselContext.carousels.value.length;
+  const lastIndex = maxLength - 1;
+  if (index === 0 && activeIndex === maxLength) {
+    transformStyle.value = getTranslateStyle(maxLength * 100);
+  } else if (index === lastIndex && activeIndex <= 0) {
+    transformStyle.value = getTranslateStyle(-maxLength * 100);
+  } else {
+    resetPosition();
+  }
+}
+onMounted(() => {
+  carouselContext?.registerCarousel({
+    uid: uniqueId,
+    translateItem
+  });
+});
+onBeforeUnmount(() => {
+  carouselContext?.unregisterCarousel(uniqueId);
+});
+</script>
+
+<template>
+  <div
+    class="pxd-carousel-item size-full shrink-0 content-visibility-auto intrinsic-size-auto"
+    :style="{ transform: transformStyle }"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -1,12 +1,9 @@
 import type { CheckboxProps } from './types';
-declare function getCheckedState(): "indeterminate" | "checked" | "unchecked";
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {
-    getCheckedState: typeof getCheckedState;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
@@ -14,7 +11,6 @@ declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
     value: import("../../types/shared").ComponentValue;
-    modelValue: import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[];
 }, {}, {}, {}, 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/checkbox/index.vue

@@ -1,11 +1,11 @@
 <script setup>
 import CheckIcon from "@gdsicon/vue/check";
 import MinusIcon from "@gdsicon/vue/minus";
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
 import { useCheckboxGroupContext } from "../../contexts/checkbox";
 import { getUniqueId } from "../../utils/uid";
-import { checkboxVariant } from "./cn";
 defineOptions({
   name: "PCheckbox",
   inheritAttrs: false,
@@ -17,15 +17,63 @@ defineOptions({
 const props = defineProps({
   label: { type: [String, Number, Array, null], required: false },
   value: { type: [String, Number, Boolean], required: false, default: true },
+  shape: { type: String, required: false },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Boolean, Array], required: false, default: () => [] },
+  modelValue: { type: [String, Number, Boolean, Array], required: false },
   indeterminate: { type: Boolean, required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
+const checkboxVariant = tv({
+  base: "pxd-checkbox--inner size-4 p-0.5 inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden border peer-focus-ring motion-safe:transition-colors",
+  variants: {
+    checked: {
+      true: "",
+      false: ""
+    },
+    disabled: {
+      true: "",
+      false: ""
+    },
+    shape: {
+      default: "rounded-sm",
+      square: "rounded-none",
+      rounded: "rounded-full"
+    }
+  },
+  compoundVariants: [
+    {
+      checked: true,
+      disabled: false,
+      class: "border-primary bg-primary"
+    },
+    {
+      checked: true,
+      disabled: true,
+      class: "border-gray-500 bg-gray-500"
+    },
+    {
+      checked: false,
+      disabled: false,
+      class: "border-gray-alpha-400 bg-background-100 group-hover/checkbox:bg-gray-200"
+    },
+    {
+      checked: false,
+      disabled: true,
+      class: "border-gray-500 bg-gray-100"
+    }
+  ],
+  defaultVariants: {
+    shape: "default",
+    checked: false,
+    disabled: false
+  }
+});
 const uniqueId = getUniqueId();
-const modelValue = useModelValue(props, emits);
 const checkboxGroupContext = useCheckboxGroupContext();
+const modelValue = useModelValue(
+  checkboxGroupContext?.props ?? props,
+  checkboxGroupContext?.emits ?? emits
+);
 const isChecked = computed(() => {
   if (Array.isArray(modelValue.value)) {
     return modelValue.value.includes(props.value);
@@ -35,42 +83,30 @@ const isChecked = computed(() => {
   }
   return modelValue.value === props.value;
 });
-const computedDisabled = computed(() => props.disabled || checkboxGroupContext?.disabled);
-const computedRequired = computed(() => props.required || checkboxGroupContext?.required);
+const isDisabled = computed(() => props.disabled || checkboxGroupContext?.props.disabled);
 const computedClasses = computed(() => {
   return checkboxVariant({
+    shape: props.shape,
     checked: isChecked.value,
-    disabled: computedDisabled.value
+    disabled: isDisabled.value
   });
 });
-function toggleChecked(isChecked2) {
+function onInputChange(event) {
+  const isChecked2 = event.target.checked;
   if (Array.isArray(modelValue.value)) {
     modelValue.value = isChecked2 ? [...modelValue.value, props.value] : modelValue.value.filter((v) => v !== props.value);
     return;
   }
   modelValue.value = isChecked2;
 }
-function onInputChange(event) {
-  const isInputChecked = event.target.checked;
-  toggleChecked(isInputChecked);
-}
-function getCheckedState() {
-  if (props.indeterminate) {
-    return "indeterminate";
-  }
-  return isChecked.value ? "checked" : "unchecked";
-}
-defineExpose({
-  getCheckedState
-});
 </script>
 
 <template>
   <label
     role="checkbox"
-    :aria-checked="isChecked"
-    :data-disabled="computedDisabled"
-    :class="computedClasses.wrapper()"
+    :aria-selected="isChecked"
+    :data-disabled="isDisabled"
+    class="pxd-checkbox group/checkbox gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-gray-500"
     :for="uniqueId"
     v-bind="$attrs"
   >
@@ -78,17 +114,16 @@ defineExpose({
       :id="uniqueId"
       :value="value"
       type="checkbox"
-      class="peer smallest"
+      class="peer visually-hidden"
       :checked="isChecked"
-      :required="computedRequired"
-      :disabled="computedDisabled"
+      :disabled="isDisabled"
       @change="onInputChange"
     />
 
-    <span aria-hidden="true" :class="computedClasses.inner()">
-      <CheckIcon v-if="isChecked" class="size-3 text-gray-100" />
-      <MinusIcon v-else-if="indeterminate" class="size-3" />
-      <span v-else class="size-3" />
+    <span aria-hidden="true" :class="computedClasses">
+      <CheckIcon v-if="isChecked" class="size-3 pointer-events-none text-gray-100" />
+      <MinusIcon v-else-if="indeterminate" class="size-3 pointer-events-none" />
+      <span v-else class="size-3 pointer-events-none" />
     </span>
 
     <span class="text-sm flex-1 shrink-0 empty:hidden">

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

@@ -1,10 +1,10 @@
-import type { ComponentLabel, ComponentOption, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue, ComponentShape } from '../../types/shared'
 
 export interface CheckboxProps {
   label?: ComponentLabel
   value?: ComponentValue
+  shape?: ComponentShape
   disabled?: boolean
-  required?: boolean
   modelValue?: ComponentValue | ComponentValue[]
   indeterminate?: boolean
 }
@@ -13,15 +13,3 @@ export interface CheckboxEmits {
   change: [NonNullable<CheckboxProps['modelValue']>]
   'update:modelValue': [NonNullable<CheckboxProps['modelValue']>]
 }
-
-export interface CheckboxGroupProps {
-  disabled?: boolean
-  required?: boolean
-  modelValue?: ComponentValue[]
-  options?: ComponentOption[]
-}
-
-export interface CheckboxGroupEmits {
-  change: [NonNullable<CheckboxGroupProps['modelValue']>]
-  'update:modelValue': [NonNullable<CheckboxGroupProps['modelValue']>]
-}

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

@@ -1,14 +1,9 @@
-import type { CheckboxGroupProps } from '../checkbox/types';
-declare function isCheckedAll(): boolean;
-declare function isCheckedPartial(): boolean;
+import type { CheckboxGroupProps } from './types';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {
-    isCheckedAll: typeof isCheckedAll;
-    isCheckedPartial: typeof isCheckedPartial;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: import("../../types/shared").ComponentValue[]) => any;
     "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{