pxd 0.0.13 → 0.0.16

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

@@ -0,0 +1,331 @@
+<script setup>
+import { computed, shallowRef } from "vue";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
+import { useDelayChange } from "../../composables/useDelayChange";
+import { getColorByThreshold } from "../../utils/colors";
+import { getAllDatesBetween } from "../../utils/dates";
+defineOptions({
+  name: "PActiveGraph"
+});
+const props = defineProps({
+  data: { type: Array, required: false, default: () => [] },
+  legend: { type: Boolean, required: false, default: true },
+  startDate: { type: [String, Date], required: false, default: () => {
+    const date = /* @__PURE__ */ new Date();
+    date.setFullYear(date.getFullYear() - 1);
+    while (date.getDay() !== 0) {
+      date.setDate(date.getDate() + 1);
+    }
+    return date;
+  } },
+  endDate: { type: [String, Date], required: false, default: () => /* @__PURE__ */ new Date() },
+  colors: { type: Object, required: false, default: () => ({
+    0: "",
+    5: "var(--color-green-300)",
+    10: "var(--color-green-500)",
+    15: "var(--color-green-700)",
+    20: "var(--color-green-900)"
+  }) },
+  onlyGraph: { type: Boolean, required: false, default: false },
+  transpose: { type: Boolean, required: false },
+  tooltipText: { type: String, required: false, default: "{COUNT} on {DATE}" }
+});
+const emits = defineEmits(["cellClick"]);
+const config = useConfigProvider();
+const CELL_GAP = 3;
+const CELL_SIZE = 12;
+const rangedDates = computed(() => getAllDatesBetween(props.startDate, props.endDate));
+const dateCountMap = computed(() => {
+  return props.data.reduce((acc, cur) => {
+    acc[cur.date] = (acc[cur.date] || 0) + cur.count;
+    return acc;
+  }, {});
+});
+function getLocalizedDay(dayIndex) {
+  return config.locale.date.day[dayIndex];
+}
+const tableHeadList = computed(() => {
+  if (props.transpose) {
+    return Array.from({ length: 7 }, (_, i) => {
+      return [1, 3, 5].includes(i) ? getLocalizedDay(i) : "";
+    });
+  }
+  return createMonthHeaders();
+});
+function createMonthHeaders() {
+  const dates = rangedDates.value.dates;
+  const colCount = Math.ceil(dates.length / 7);
+  const result = Array.from({ length: colCount }, () => "");
+  const firstDate = new Date(dates[0]);
+  result[0] = config.locale.date.month[firstDate.getMonth()];
+  const firstDayOfWeek = rangedDates.value.weeks[0];
+  let currentMonth = firstDate.getMonth();
+  for (let i = 1; i < dates.length; i++) {
+    const date = new Date(dates[i]);
+    const month = date.getMonth();
+    const day = date.getDate();
+    if (month !== currentMonth && day === 1) {
+      const colIndex = Math.floor((i + 7 - firstDayOfWeek) / 7);
+      if (colIndex < colCount) {
+        result[colIndex] = config.locale.date.month[month];
+        currentMonth = month;
+      }
+    }
+  }
+  return result;
+}
+const tableBodyList = computed(() => {
+  return props.transpose ? createTransposedTableData() : createStandardTableData();
+});
+function createTransposedTableData() {
+  const dataMap = dateCountMap.value;
+  const dateList = rangedDates.value.dates;
+  const dateListLength = dateList.length;
+  const monthRows = [];
+  let currentMonth = -1;
+  let currentYear = -1;
+  let currentRow = null;
+  for (let i = 0; i < dateListLength; i++) {
+    const dateStr = dateList[i];
+    const date = new Date(dateStr);
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const dayOfWeek = date.getDay();
+    const count = dataMap[dateStr] || 0;
+    if (currentRow === null) {
+      currentRow = [];
+      if (i === 0) {
+        for (let j = 0; j < dayOfWeek; j++) {
+          currentRow.push({
+            hidden: true,
+            date: void 0,
+            count: 0,
+            color: void 0
+          });
+        }
+      }
+    }
+    currentRow.push({
+      hidden: false,
+      date: dateStr,
+      count,
+      color: getColorByThreshold(count, props.colors)
+    });
+    if (month !== currentMonth || year !== currentYear) {
+      currentMonth = month;
+      currentYear = year;
+    }
+    const isLastItem = i === dateListLength - 1;
+    const isRowFull = currentRow.length >= 7;
+    if (isRowFull || isLastItem) {
+      if (currentRow.length < 7 && isLastItem) {
+        while (currentRow.length < 7) {
+          currentRow.push({
+            hidden: true,
+            date: void 0,
+            count: 0,
+            color: void 0
+          });
+        }
+      }
+      monthRows.push([...currentRow]);
+      currentRow = null;
+    }
+  }
+  return markMonthRows(monthRows);
+}
+function createStandardTableData() {
+  const dataMap = dateCountMap.value;
+  const dateList = rangedDates.value.dates;
+  const dateListLength = dateList.length;
+  const firstDayOfWeek = rangedDates.value.weeks[0];
+  const result = Array.from({ length: 7 }, (_, i) => {
+    const row = [];
+    if (i < firstDayOfWeek) {
+      row.push({
+        hidden: true,
+        date: void 0,
+        count: 0,
+        color: void 0
+      });
+    }
+    const rowWithHeader = row;
+    rowWithHeader.headerText = [1, 3, 5].includes(i) ? getLocalizedDay(i) : " ";
+    return rowWithHeader;
+  });
+  for (let i = 0; i < dateListLength; i++) {
+    const dateStr = dateList[i];
+    const count = dataMap[dateStr] || 0;
+    const dayOfWeek = new Date(dateStr).getDay();
+    result[dayOfWeek].push({
+      hidden: false,
+      date: dateStr,
+      count,
+      color: getColorByThreshold(count, props.colors)
+    });
+  }
+  return result;
+}
+function markMonthRows(rows) {
+  const monthMap = {};
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    const firstValidCell = row.find((cell) => !cell.hidden && cell.date);
+    if (firstValidCell) {
+      const date = new Date(firstValidCell.date);
+      const month = date.getMonth();
+      const year = date.getFullYear();
+      const day = date.getDate();
+      const key = `${year}-${month}`;
+      if (!monthMap[key] || day === 1) {
+        monthMap[key] = true;
+        row.isMonthFirstRow = true;
+        row.monthName = config.locale.date.month[month];
+        row.headerText = row.monthName;
+      }
+    }
+  }
+  return rows;
+}
+function onCellClick(event) {
+  const target = event.target;
+  const date = target.dataset.date;
+  if (!date) {
+    return;
+  }
+  emits("cellClick", event, date);
+}
+let tbodyRect;
+const tbodyRef = shallowRef();
+const {
+  value: showTooltip,
+  set: setShowTooltip,
+  setImmediate: setShowTooltipImmediate
+} = useDelayChange(false, 500);
+const tooltipInfo = shallowRef({});
+const formatTooltipText = computed(() => {
+  if (props.tooltipText) {
+    const { date = "", count = 0 } = tooltipInfo.value;
+    return props.tooltipText.replace(/\{DATE\}/g, date).replace(/\{COUNT\}/g, String(count));
+  }
+  return "";
+});
+function onMouseEnter() {
+  tbodyRect = tbodyRef.value.getBoundingClientRect();
+}
+function onMouseLeave() {
+  setShowTooltipImmediate(false);
+  tooltipInfo.value = {};
+  tbodyRect = null;
+}
+function onMouseOver(ev) {
+  const targetEl = ev.target;
+  if (targetEl.tagName !== "TD") {
+    setShowTooltip(false);
+    return;
+  }
+  const date = targetEl.dataset.date;
+  if (!date) {
+    setShowTooltipImmediate(false);
+    return;
+  }
+  setShowTooltipImmediate(true);
+  const rect = targetEl.getBoundingClientRect();
+  let top = rect.top - tbodyRect.top - CELL_SIZE;
+  if (props.onlyGraph) {
+    top -= CELL_SIZE;
+  }
+  tooltipInfo.value = {
+    date,
+    count: dateCountMap.value[date] || 0,
+    left: rect.left - tbodyRect.left + CELL_GAP,
+    top
+  };
+}
+</script>
+
+<template>
+  <div class="pxd-active-graph relative" :class="[onlyGraph ? 'py-[3px] pr-[3px]' : 'pr-5']">
+    <table
+      role="grid"
+      aria-readonly="true"
+      class="border-separate"
+      style="border-spacing: 3px;"
+      @pointerenter="onMouseEnter"
+      @pointerleave="onMouseLeave"
+    >
+      <thead v-if="!onlyGraph" class="text-xs">
+        <tr class="h-3">
+          <th style="width: 30px;min-width: 30px;" />
+
+          <th
+            v-for="col in tableHeadList"
+            :key="col"
+            class="relative font-normal text-gray-900"
+          >
+            <span class="absolute -top-1 left-0 whitespace-nowrap">{{ col }}</span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody
+        ref="tbodyRef"
+        class="text-xs"
+        @click="onCellClick"
+        @pointerover="onMouseOver"
+      >
+        <tr v-for="(row, i) of tableBodyList" :key="i" class="h-3">
+          <td class="relative leading-none text-gray-900 overflow-hidden">
+            <span class="absolute top-0 right-1">
+              {{ row.headerText }}
+            </span>
+          </td>
+
+          <td
+            v-for="col of row"
+            :key="col.date"
+            class="pxd-active-graph--item rounded-xs w-3 min-w-3 bg-gray-alpha-200 motion-safe:transition-colors"
+            :data-date="col.date"
+            :class="{ 'pointer-events-none opacity-0': col.hidden }"
+            :style="`background: ${col.color}`"
+          />
+        </tr>
+
+        <template v-if="props.legend">
+          <tr class="pxd-active-graph--placeholder pointer-events-none h-0.5" />
+          <tr class="pxd-active-graph--legend pointer-events-none">
+            <td class="relative h-3 text-gray-700">
+              <span class="absolute top-1/2 right-1 -translate-y-1/2">{{ config.locale.compare.less }}</span>
+            </td>
+
+            <td
+              v-for="color in props.colors"
+              :key="color"
+              class="w-3 h-3 rounded-xs bg-gray-alpha-200 motion-safe:transition-colors"
+              :style="`background-color: ${color}`"
+            />
+
+            <td class="relative h-3 text-gray-700 w-3">
+              <span
+                class="absolute top-1/2 left-px -translate-y-1/2"
+                style="width: 30px;min-width: 30px;"
+              >{{ config.locale.compare.more }}</span>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+
+    <Transition name="pxd-transition--fade">
+      <div
+        v-if="showTooltip"
+        class="pxd-active-graph--tooltip left-0 top-0 bg-gray-1000 pointer-events-none text-gray-100 absolute z-10 px-2 py-1 text-[13px] rounded-sm w-max"
+        :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
+      >
+        <slot name="tooltip" :data="tooltipInfo">
+          {{ formatTooltipText }}
+        </slot>
+      </div>
+    </Transition>
+  </div>
+</template>

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

@@ -0,0 +1,49 @@
+interface Props {
+    data?: Array<{
+        date: string;
+        count: number;
+    }>;
+    legend?: boolean;
+    startDate?: string | Date;
+    endDate?: string | Date;
+    colors?: Record<string, string>;
+    onlyGraph?: boolean;
+    transpose?: boolean;
+    tooltipText?: string;
+}
+/** 提示框信息 */
+interface TooltipInfo {
+    date: string;
+    count: number;
+    left: number;
+    top: number;
+}
+declare var __VLS_5: {
+    data: TooltipInfo;
+};
+type __VLS_Slots = {} & {
+    tooltip?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cellClick: (args_0: MouseEvent, args_1: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCellClick?: (args_0: MouseEvent, args_1: string) => any;
+}>, {
+    data: Array<{
+        date: string;
+        count: number;
+    }>;
+    legend: boolean;
+    startDate: string | Date;
+    endDate: string | Date;
+    colors: Record<string, string>;
+    onlyGraph: boolean;
+    tooltipText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/avatar/index.vue

@@ -1,19 +1,38 @@
 <script setup>
-import { computed, inject, ref } from "vue";
+import { computed, inject, shallowRef } from "vue";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
   name: "PAvatar"
 });
 const props = defineProps({
   src: { type: String, required: false },
+  alt: { type: String, required: false },
   size: { type: [Number, String], required: false },
   loading: { type: Boolean, required: false }
 });
-defineEmits(["error"]);
-const isLoadFailed = ref(false);
+const emits = defineEmits(["load", "error", "loadstart"]);
+const loadingStatus = shallowRef("idle");
 const groupSize = inject("groupSize", 32);
 const computedSize = computed(() => getCssUnitValue(props.size || groupSize));
-const computedLoading = computed(() => props.loading || isLoadFailed.value);
+const computedLoading = computed(() => props.loading || loadingStatus.value === "error");
+function onLoadError(event) {
+  loadingStatus.value = "error";
+  emits("error", event);
+}
+function onLoadSuccess(event) {
+  loadingStatus.value = "loaded";
+  emits("load", event);
+}
+function onLoadStart(event) {
+  loadingStatus.value = "loading";
+  emits("loadstart", event);
+}
+function getLoadingStatus() {
+  return loadingStatus.value;
+}
+defineExpose({
+  getLoadingStatus
+});
 </script>
 
 <template>
@@ -25,14 +44,17 @@ const computedLoading = computed(() => props.loading || isLoadFailed.value);
       <img
         v-if="!computedLoading"
         :src="src"
-        alt="avatar"
+        :alt="alt"
         loading="lazy"
         decoding="async"
         aria-hidden="true"
         fetchpriority="low"
         crossorigin="anonymous"
         class="relative block rounded-inherit overflow-hidden w-full h-full"
-        @error="$emit('error', $event)"
+        @load="onLoadSuccess"
+        @loadstart="onLoadStart"
+        @abort="onLoadError"
+        @error="onLoadError"
       >
     </slot>
 
@@ -58,12 +80,12 @@ const computedLoading = computed(() => props.loading || isLoadFailed.value);
   }
 
   &::before {
-    background-image: linear-gradient(270deg, var(--gray-alpha-100), var(--gray-alpha-300), var(--gray-alpha-300), var(--gray-alpha-100));
+    background-image: linear-gradient(270deg, var(--color-gray-alpha-100), var(--color-gray-alpha-400), var(--color-gray-alpha-400), var(--color-gray-alpha-100));
     background-size: 400% 100%;
   }
 
   &::after {
-    border: 1px solid var(--gray-alpha-400)
+    border: 1px solid var(--color-gray-alpha-400)
   }
 }
 

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

@@ -1,18 +1,27 @@
 interface Props {
     src?: string;
+    alt?: string;
     size?: number | string;
     loading?: boolean;
 }
+type LoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+declare function getLoadingStatus(): LoadingStatus;
 declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     badge?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {
+    getLoadingStatus: typeof getLoadingStatus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (args_0: Event) => any;
+    load: (args_0: Event) => any;
+    loadstart: (args_0: Event) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onError?: (args_0: Event) => any;
+    onLoad?: (args_0: Event) => any;
+    onLoadstart?: (args_0: Event) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, provide } from "vue";
-import Avatar from "../avatar/index.vue";
+import PAvatar from "../avatar/index.vue";
 defineOptions({
   name: "PAvatarGroup"
 });
@@ -15,17 +15,18 @@ provide("groupSize", props.size);
 
 <template>
   <div class="pxd-avatar-group flex flex-wrap items-center">
-    <Avatar
+    <PAvatar
       v-for="(option, index) in slicedOptions"
       :key="index"
       :size="size"
       :src="option.src"
+      :alt="option.alt"
       :loading="option.loading"
       class="[&:nth-child(n+2)]:-ml-3"
     />
 
-    <Avatar v-if="slicedOptions.length < options.length" class="text-xs bg-gray-1000 text-gray-100 -ml-3">
+    <PAvatar v-if="slicedOptions.length < options.length" class="text-xs bg-gray-1000 text-gray-100 -ml-3">
       +{{ options.length - slicedOptions.length }}
-    </Avatar>
+    </PAvatar>
   </div>
 </template>

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

@@ -1,5 +1,6 @@
 interface AvatarGroupOptions {
     src?: string;
+    alt?: string;
     loading?: boolean;
 }
 interface Props {

package/dist/components/button/index.vue

@@ -2,7 +2,7 @@
 import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
 import { useComputedSize } from "../../composables/useComputedSize";
-import Spinner from "../spinner/index.vue";
+import PSpinner from "../spinner/index.vue";
 defineOptions({
   name: "PButton"
 });
@@ -15,7 +15,7 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
-const emits = defineEmits(["click"]);
+const emits = defineEmits(["click", "dblclick"]);
 const SIZES = {
   xs: "h-6 px-1 rounded-md",
   sm: "h-7.5 px-1.5 rounded-md",
@@ -32,10 +32,10 @@ const VARIANTS = {
   simple: "",
   default: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input",
   ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent",
-  primary: "bg-primary text-gray-100 hover:bg-primary/80 active:bg-primary border-transparent",
-  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-800 border-transparent",
-  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-800 border-transparent",
-  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-800 border-transparent"
+  primary: "bg-primary text-gray-100 hover:bg-primary/80 active:bg-gray-900 border-transparent",
+  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-900 border-transparent",
+  warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-900 border-transparent",
+  success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-900 border-transparent"
 };
 const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:bg-gray-100 cursor-not-allowed text-gray-700 border-gray-300";
 const computedSize = useComputedSize(props.size, SIZES);
@@ -63,6 +63,9 @@ const computedClasses = computed(() => {
 function onButtonClick(event) {
   emits("click", event);
 }
+function onButtonDblClick(event) {
+  emits("dblclick", event);
+}
 </script>
 
 <template>
@@ -72,8 +75,9 @@ function onButtonClick(event) {
     :class="computedClasses"
     :disabled="computedDisabled"
     @click="onButtonClick"
+    @dblclick.prevent="onButtonDblClick"
   >
-    <Spinner v-if="loading" />
+    <PSpinner v-if="loading" />
 
     <slot name="prefix" />
 

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

@@ -1,19 +1,21 @@
 import type { ButtonProps } from '../../types/components';
-declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_13) => any;
+    prefix?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
-    suffix?: (props: typeof __VLS_17) => any;
+    suffix?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;
+    dblclick: (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
     onClick?: (args_0: MouseEvent) => any;
+    onDblclick?: (args_0: MouseEvent) => any;
 }>, {
-    variant: import("../../types/components").ComponentVariantWithDefault | "ghost" | "simple";
-    as: import("../../types/components").ComponentAs;
+    variant: import("../../types").ComponentVariantWithDefault | "ghost" | "simple";
+    as: import("../../types").ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/checkbox/index.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { CheckIcon, MinusIcon } from "gdsi/vue";
+import CheckIcon from "@gdsicon/vue/check";
+import MinusIcon from "@gdsicon/vue/minus";
 import { twMerge } from "tailwind-merge";
 import { computed, inject } from "vue";
 import { useModelValue } from "../../composables/useModelValue";
-import { getRandomId } from "../../utils/random";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PCheckbox",
   model: {
@@ -12,7 +13,7 @@ defineOptions({
   }
 });
 const props = defineProps({
-  label: { type: [String, Number], required: false },
+  label: { type: [String, Number, Array, null], required: false },
   value: { type: [String, Number, Boolean], required: false, default: true },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
@@ -20,7 +21,7 @@ const props = defineProps({
   indeterminate: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue"]);
-const randomId = getRandomId();
+const uniqueId = getUniqueId();
 const modelValue = useModelValue(props, emits);
 const checkboxGroupProps = inject("checkboxGroupProps", {
   disabled: false,
@@ -79,10 +80,10 @@ defineExpose({
   <label
     class="pxd-checkbox inline-flex items-center group/checkbox"
     :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
-    :for="randomId"
+    :for="uniqueId"
   >
     <input
-      :id="randomId"
+      :id="uniqueId"
       :value="value"
       type="checkbox"
       class="smallest peer"

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

@@ -1,6 +1,7 @@
+import type { ComponentLabel } from '../../types/components';
 type ValueType = string | number | boolean;
 interface Props {
-    label?: string | number;
+    label?: ComponentLabel;
     value?: ValueType;
     disabled?: boolean;
     required?: boolean;
@@ -15,9 +16,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<Props, {
     getCheckedState: typeof getCheckedState;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: ValueType | ValueType[]) => any;
+    "update:modelValue": (args_0: NonNullable<ValueType | ValueType[]>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: (args_0: ValueType | ValueType[]) => any;
+    "onUpdate:modelValue"?: (args_0: NonNullable<ValueType | ValueType[]>) => any;
 }>, {
     value: ValueType;
     modelValue: ValueType | ValueType[];