naive-ui 2.41.1 → 2.43.0

package/es/heatmap/src/utils/index.d.ts

@@ -0,0 +1,32 @@
+import type { DayRect } from '../interface';
+import type { HeatmapData, HeatmapDataItem, HeatmapFirstDayOfWeek } from '../public-types';
+/** get color by value/maxValue */
+export declare function calcColorByValue(colors: string[], value: number | null | undefined, maxValue: number): string;
+/**
+ * fill gaps for the given data
+ *
+ * fill gaps `[firstDate,lastDate]` with value `0`
+ *
+ * fill `[firstCalendarDate,firstDate]` and `[lastDate,lastCalendarDate]` with value `null` by default
+ *
+ * fill `[firstCalendarDate,firstDate]` with value `0` when `fillCalendarLeading` is `true`
+ */
+export declare function completeDataGaps(data: HeatmapData, firstDayOfWeek: HeatmapFirstDayOfWeek, fillCalendarLeading: boolean): HeatmapData;
+/**
+ * Create a DayRect object with position information
+ */
+export declare function createDayRect(item: HeatmapDataItem, calendarStartDate: number, weekStartOn: number, colors: string[], maxValue: number): DayRect;
+/**
+ * Create a sparse matrix from items with position information
+ */
+export declare function createSparseMatrix<T>(rows: number, items: T[], getRowIndex: (item: T) => number, getColIndex: (item: T) => number): T[][];
+/**
+ * This creates a 7x53 matrix (typical year layout) filled with loading cells
+ */
+export declare function createLoadingMatrix(firstDayOfWeek: HeatmapFirstDayOfWeek): DayRect[][];
+/**
+ * Generate heatmap data for mock purposes.
+ * This function generates random data and the result is not stable.
+ * @param range - 'recent' for last year, or a specific year number
+ */
+export declare function heatmapMockData(year?: 'recent' | number): HeatmapData;

package/es/heatmap/src/utils/index.mjs

@@ -0,0 +1,148 @@
+import { differenceInCalendarDays, eachDayOfInterval, endOfWeek, endOfYear, getDay, isWithinInterval, startOfDay, startOfWeek, startOfYear, subYears } from 'date-fns';
+import { groupBy } from 'lodash';
+/** get color by value/maxValue */
+export function calcColorByValue(colors, value, maxValue) {
+  if (maxValue === 0 || value === null || value === undefined || value <= 0) {
+    return colors[0];
+  }
+  const ratio = Math.min(value / maxValue, 1);
+  const maxLevel = colors.length - 1;
+  const level = Math.min(Math.ceil(ratio * maxLevel), maxLevel);
+  return colors[level];
+}
+/**
+ * fill gaps for the given data
+ *
+ * fill gaps `[firstDate,lastDate]` with value `0`
+ *
+ * fill `[firstCalendarDate,firstDate]` and `[lastDate,lastCalendarDate]` with value `null` by default
+ *
+ * fill `[firstCalendarDate,firstDate]` with value `0` when `fillCalendarLeading` is `true`
+ */
+export function completeDataGaps(data, firstDayOfWeek, fillCalendarLeading) {
+  const sortedData = [...data].sort((a, b) => a.timestamp - b.timestamp);
+  const firstDate = sortedData[0].timestamp;
+  const lastDate = sortedData[sortedData.length - 1].timestamp;
+  const firstCalendarDate = startOfWeek(firstDate, {
+    weekStartsOn: firstDayOfWeek
+  });
+  const lastCalendarEndDate = endOfWeek(lastDate, {
+    weekStartsOn: firstDayOfWeek
+  });
+  const dataMap = new Map(sortedData.map(d => [startOfDay(d.timestamp).getTime(), d]));
+  const allCalendarDates = eachDayOfInterval({
+    start: firstCalendarDate,
+    end: lastCalendarEndDate
+  });
+  const startDate = fillCalendarLeading ? firstCalendarDate : firstDate;
+  return allCalendarDates.map(date => {
+    const key = startOfDay(date).getTime();
+    const dateValue = dataMap.get(key);
+    if (dateValue) {
+      return dateValue;
+    }
+    const value = isWithinInterval(date, {
+      start: startDate,
+      end: lastDate
+    }) ? 0 : null;
+    return {
+      timestamp: date.getTime(),
+      value
+    };
+  });
+}
+/**
+ * Create a DayRect object with position information
+ */
+export function createDayRect(item, calendarStartDate, weekStartOn, colors, maxValue) {
+  const daysFromGridStart = differenceInCalendarDays(item.timestamp, calendarStartDate);
+  const colIndex = Math.floor(daysFromGridStart / 7);
+  const dayOfWeek = getDay(item.timestamp);
+  const rowIndex = (dayOfWeek - weekStartOn + 7) % 7;
+  return {
+    timestamp: item.timestamp,
+    value: item.value,
+    color: calcColorByValue(colors, item.value, maxValue),
+    dayOfWeek,
+    rowIndex,
+    colIndex
+  };
+}
+/**
+ * Create a sparse matrix from items with position information
+ */
+export function createSparseMatrix(rows, items, getRowIndex, getColIndex) {
+  const groupedByRow = groupBy(items, getRowIndex);
+  return Array.from({
+    length: rows
+  }, (_, rowIndex) => {
+    const rowData = groupedByRow[rowIndex] || [];
+    const row = [];
+    rowData.forEach(item => {
+      row[getColIndex(item)] = item;
+    });
+    return row;
+  });
+}
+/**
+ * This creates a 7x53 matrix (typical year layout) filled with loading cells
+ */
+export function createLoadingMatrix(firstDayOfWeek) {
+  const rows = 7;
+  const cols = 53;
+  const currentTimestamp = Date.now();
+  return Array.from({
+    length: rows
+  }, (_, row) => Array.from({
+    length: cols
+  }, (_, col) => ({
+    timestamp: currentTimestamp,
+    value: 0,
+    color: '#000000',
+    dayOfWeek: (firstDayOfWeek + row) % 7,
+    rowIndex: row,
+    colIndex: col
+  })));
+}
+/**
+ * Generate heatmap data for mock purposes.
+ * This function generates random data and the result is not stable.
+ * @param range - 'recent' for last year, or a specific year number
+ */
+export function heatmapMockData(year) {
+  let start;
+  let end;
+  if (year === undefined || year === 'recent') {
+    end = new Date();
+    start = subYears(end, 1);
+  } else {
+    const _year = Number(year);
+    start = startOfYear(new Date(_year, 0, 1));
+    end = endOfYear(new Date(_year, 11, 31));
+  }
+  const allDays = eachDayOfInterval({
+    start,
+    end
+  });
+  return allDays.map(day => {
+    const dayOfWeek = day.getDay();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+    if (isWeekend && Math.random() < 0.7) {
+      return {
+        timestamp: day.getTime(),
+        value: 0
+      };
+    }
+    if (!isWeekend && Math.random() < 0.15) {
+      return {
+        timestamp: day.getTime(),
+        value: 0
+      };
+    }
+    const value = Math.floor(Math.pow(Math.random(), 2) * 40) + 1;
+    return {
+      timestamp: day.getTime(),
+      value
+    };
+  });
+}

package/es/heatmap/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { HeatmapTheme } from './light';
+declare const HeatmapDark: HeatmapTheme;
+export default HeatmapDark;

package/es/heatmap/styles/dark.mjs

@@ -0,0 +1,16 @@
+import { commonDark } from "../../_styles/common/index.mjs";
+import { self } from "./light.mjs";
+const HeatmapDark = {
+  name: 'Heatmap',
+  common: commonDark,
+  self(vars) {
+    const lightSelf = self(vars);
+    return Object.assign(Object.assign({}, lightSelf), {
+      activeColors: ['#0d4429', '#006d32', '#26a641', '#39d353'],
+      mininumColor: 'rgba(255, 255, 255, 0.1)',
+      loadingColorStart: 'rgba(255, 255, 255, 0.12)',
+      loadingColorEnd: 'rgba(255, 255, 255, 0.18)'
+    });
+  }
+};
+export default HeatmapDark;

package/es/heatmap/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as heatmapDark } from './dark';
+export { default as heatmapLight } from './light';
+export type { HeatmapTheme, HeatmapThemeVars } from './light';

package/es/heatmap/styles/index.mjs

@@ -0,0 +1,2 @@
+export { default as heatmapDark } from "./dark.mjs";
+export { default as heatmapLight } from "./light.mjs";

package/es/heatmap/styles/light.d.ts

@@ -0,0 +1,31 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import { type Theme } from '../../_mixins';
+export declare function self(vars: ThemeCommonVars): {
+    activeColors: string[];
+    borderRadius: string;
+    borderColor: string;
+    textColor: string;
+    mininumColor: string;
+    fontWeight: string;
+    loadingColorStart: string;
+    loadingColorEnd: string;
+    rectSizeSmall: string;
+    rectSizeMedium: string;
+    rectSizeLarge: string;
+    borderRadiusSmall: string;
+    borderRadiusMedium: string;
+    borderRadiusLarge: string;
+    xGapSmall: string;
+    xGapMedium: string;
+    xGapLarge: string;
+    yGapSmall: string;
+    yGapMedium: string;
+    yGapLarge: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+};
+export type HeatmapThemeVars = ReturnType<typeof self>;
+declare const heatmapLight: Theme<'Heatmap', HeatmapThemeVars>;
+export default heatmapLight;
+export type HeatmapTheme = typeof heatmapLight;

package/es/heatmap/styles/light.mjs

@@ -0,0 +1,45 @@
+import { createTheme } from "../../_mixins/index.mjs";
+import { commonLight } from "../../_styles/common/index.mjs";
+export function self(vars) {
+  const {
+    borderRadius,
+    fontSizeMini,
+    fontSizeTiny,
+    fontSizeSmall,
+    fontWeight,
+    textColor2,
+    cardColor,
+    buttonColor2Hover
+  } = vars;
+  return {
+    activeColors: ['#9be9a8', '#40c463', '#30a14e', '#216e39'],
+    borderRadius,
+    borderColor: cardColor,
+    textColor: textColor2,
+    mininumColor: buttonColor2Hover,
+    fontWeight,
+    loadingColorStart: 'rgba(0, 0, 0, 0.06)',
+    loadingColorEnd: 'rgba(0, 0, 0, 0.12)',
+    rectSizeSmall: '10px',
+    rectSizeMedium: '11px',
+    rectSizeLarge: '12px',
+    borderRadiusSmall: '2px',
+    borderRadiusMedium: '2px',
+    borderRadiusLarge: '2px',
+    xGapSmall: '2px',
+    xGapMedium: '3px',
+    xGapLarge: '3px',
+    yGapSmall: '2px',
+    yGapMedium: '3px',
+    yGapLarge: '3px',
+    fontSizeSmall: fontSizeTiny,
+    fontSizeMedium: fontSizeMini,
+    fontSizeLarge: fontSizeSmall
+  };
+}
+const heatmapLight = createTheme({
+  name: 'Heatmap',
+  common: commonLight,
+  self
+});
+export default heatmapLight;

package/es/heatmap/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const heatmapRtl: RtlItem;

package/es/heatmap/styles/rtl.mjs

@@ -0,0 +1,5 @@
+import rtlStyle from "../src/styles/rtl.cssr.mjs";
+export const heatmapRtl = {
+  name: 'Heatmap',
+  style: rtlStyle
+};

package/es/highlight/src/utils.mjs

@@ -1,13 +1,16 @@
-// Generated by ChatGPT
 export function splitAndMarkByRegex(str, regex) {
+  if (!regex.global) {
+    throw new Error('splitAndMarkByRegex requires a global regex (with "g" flag)');
+  }
   const result = [];
   let lastIndex = 0;
-  let match;
-  // eslint-disable-next-line no-cond-assign
-  while ((match = regex.exec(str)) !== null) {
-    if (match.index > lastIndex) {
+  for (const match of str.matchAll(regex)) {
+    const {
+      index
+    } = match;
+    if (index > lastIndex) {
       result.push({
-        text: str.slice(lastIndex, match.index),
+        text: str.slice(lastIndex, index),
         isMatch: false
       });
     }
@@ -15,10 +18,7 @@ export function splitAndMarkByRegex(str, regex) {
       text: match[0],
       isMatch: true
     });
-    lastIndex = regex.lastIndex;
-    if (!regex.global) {
-      break;
-    }
+    lastIndex = index + match[0].length;
   }
   if (lastIndex < str.length) {
     result.push({

package/es/icon/src/styles/index.cssr.mjs

@@ -11,7 +11,6 @@ export default cB('icon', `
  display: inline-block;
  position: relative;
  fill: currentColor;
- transform: translateZ(0);
 `, [cM('color-transition', {
   transition: 'color .3s var(--n-bezier)'
 }), cM('depth', {

package/es/image/index.d.ts

@@ -1,5 +1,7 @@
 export { imageProps, default as NImage } from './src/Image';
-export type { ImageProps, ImageSlots } from './src/Image';
+export type { ImageProps } from './src/Image';
 export { imageGroupProps, default as NImageGroup } from './src/ImageGroup';
 export type { ImageGroupProps } from './src/ImageGroup';
+export { imagePreviewProps, default as NImagePreview } from './src/ImagePreview';
+export type { ImagePreviewProps } from './src/ImagePreview';
 export type * from './src/public-types';

package/es/image/index.mjs

@@ -1,2 +1,3 @@
 export { imageProps, default as NImage } from "./src/Image.mjs";
-export { imageGroupProps, default as NImageGroup } from "./src/ImageGroup.mjs";
+export { imageGroupProps, default as NImageGroup } from "./src/ImageGroup.mjs";
+export { imagePreviewProps, default as NImagePreview } from "./src/ImagePreview.mjs";

package/es/image/src/Image.d.ts

@@ -1,10 +1,7 @@
-import type { ImagePreviewInst } from './ImagePreview';
+import type { ImagePreviewInst, ImageSlots } from './public-types';
 import type { IntersectionObserverOptions } from './utils';
-import { type ImgHTMLAttributes, type PropType, type SlotsType, type VNode } from 'vue';
+import { type ImgHTMLAttributes, type PropType, type SlotsType } from 'vue';
 import { type ExtractPublicPropTypes } from '../../_utils';
-export interface ImageInst {
-    click: () => void;
-}
 export declare const imageProps: {
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -40,7 +37,20 @@ export declare const imageProps: {
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -69,7 +79,20 @@ export declare const imageProps: {
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -98,7 +121,20 @@ export declare const imageProps: {
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     alt: StringConstructor;
@@ -121,10 +157,6 @@ export declare const imageProps: {
     onLoad: PropType<(e: Event) => void>;
 };
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
-export interface ImageSlots {
-    placeholder?: () => VNode[];
-    error?: () => VNode[];
-}
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -160,7 +192,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -189,7 +234,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -218,7 +276,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     alt: StringConstructor;
@@ -241,24 +312,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onLoad: PropType<(e: Event) => void>;
 }>, {
     click: () => void;
+    showPreview: () => void;
     mergedClsPrefix: import("vue").Ref<string, string>;
     groupId: string | undefined;
     previewInstRef: import("vue").Ref<{
         setThumbnailEl: (e: HTMLImageElement | null) => void;
-        setPreviewSrc: (src?: string) => void;
-        toggleShow: () => void;
     } | null, ImagePreviewInst | {
         setThumbnailEl: (e: HTMLImageElement | null) => void;
-        setPreviewSrc: (src?: string) => void;
-        toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null, HTMLImageElement | null>;
+    mergedPreviewSrc: import("vue").ComputedRef<string | undefined>;
     showError: import("vue").Ref<boolean, boolean>;
     shouldStartLoading: import("vue").Ref<boolean, boolean>;
     loaded: import("vue").Ref<boolean, boolean>;
-    mergedOnClick: (e: MouseEvent) => void;
+    mergedOnClick: (e: PointerEvent) => void;
+    onPreviewClose: () => void;
     mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
+    previewShow: import("vue").Ref<boolean, boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -294,7 +365,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -323,7 +407,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -352,7 +449,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     alt: StringConstructor;