yc-design-vue 1.0.1

package/es/_shared/utils/color.js

@@ -0,0 +1,125 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import tinycolor from "../../node_modules/tinycolor2/esm/tinycolor.js";
+class GradientColorCalculator {
+  constructor() {
+    __publicField(this, "colorStops");
+    this.colorStops = [
+      { pos: 0, color: "#f00" },
+      { pos: 0.17, color: "#ff0" },
+      { pos: 0.33, color: "#0f0" },
+      { pos: 0.5, color: "#0ff" },
+      { pos: 0.67, color: "#00f" },
+      { pos: 0.83, color: "#f0f" },
+      { pos: 1, color: "#f00" }
+    ];
+  }
+  // 根据颜色反向计算近似位置
+  getPositionForColor(color, totalWidth) {
+    const targetColor = tinycolor(color);
+    let minDistance = Infinity;
+    let bestPosition = 0;
+    const samplePoints = 100;
+    for (let i = 0; i <= samplePoints; i++) {
+      const position = i / samplePoints;
+      const sampleColor = tinycolor(
+        this.getColorAtPosition(position * totalWidth, totalWidth)
+      );
+      const distance = this.calculateColorDistance(targetColor, sampleColor);
+      if (distance < minDistance) {
+        minDistance = distance;
+        bestPosition = position;
+      }
+    }
+    return bestPosition * totalWidth;
+  }
+  // 计算两个颜色之间的距离（简化版）
+  calculateColorDistance(color1, color2) {
+    const rgb1 = color1.toRgb();
+    const rgb2 = color2.toRgb();
+    return Math.sqrt(
+      Math.pow(rgb1.r - rgb2.r, 2) + Math.pow(rgb1.g - rgb2.g, 2) + Math.pow(rgb1.b - rgb2.b, 2)
+    );
+  }
+  // 更精确的颜色搜索算法（二分查找优化）
+  getPrecisePositionForColor(color, totalWidth, precision = 1e-3) {
+    const targetColor = tinycolor(color);
+    let left = 0;
+    let right = 1;
+    let bestPosition = 0.5;
+    let minDistance = Infinity;
+    while (right - left > precision) {
+      const mid1 = left + (right - left) / 3;
+      const mid2 = right - (right - left) / 3;
+      const color1 = tinycolor(
+        this.getColorAtPosition(mid1 * totalWidth, totalWidth)
+      );
+      const color2 = tinycolor(
+        this.getColorAtPosition(mid2 * totalWidth, totalWidth)
+      );
+      const distance1 = this.calculateColorDistance(targetColor, color1);
+      const distance2 = this.calculateColorDistance(targetColor, color2);
+      if (distance1 < distance2) {
+        right = mid2;
+        if (distance1 < minDistance) {
+          minDistance = distance1;
+          bestPosition = mid1;
+        }
+      } else {
+        left = mid1;
+        if (distance2 < minDistance) {
+          minDistance = distance2;
+          bestPosition = mid2;
+        }
+      }
+    }
+    return bestPosition * totalWidth;
+  }
+  // 根据位置获取渐变颜色
+  getColorAtPosition(offsetX, totalWidth) {
+    const position = this.clamp(offsetX / totalWidth, 0, 1);
+    const { startStop, endStop } = this.findStops(position);
+    const range = endStop.pos - startStop.pos;
+    const ratio = range > 0 ? (position - startStop.pos) / range : 0;
+    const startColor = tinycolor(startStop.color);
+    const endColor = tinycolor(endStop.color);
+    return tinycolor.mix(startColor, endColor, ratio * 100).toHexString();
+  }
+  // 查找包含指定位置的颜色停止点
+  findStops(position) {
+    for (let i = 0; i < this.colorStops.length - 1; i++) {
+      if (position >= this.colorStops[i].pos && position <= this.colorStops[i + 1].pos) {
+        return {
+          startStop: this.colorStops[i],
+          endStop: this.colorStops[i + 1]
+        };
+      }
+    }
+    return {
+      startStop: this.colorStops[0],
+      endStop: this.colorStops[this.colorStops.length - 1]
+    };
+  }
+  // 限制数值在最小最大值之间
+  clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+  // 更新渐变颜色停止点
+  updateColorStops(stops) {
+    if (stops.length < 2) {
+      throw new Error("至少需要两个颜色停止点");
+    }
+    if (stops[0].pos !== 0 || stops[stops.length - 1].pos !== 1) {
+      throw new Error("第一个停止点位置必须为0，最后一个必须为1");
+    }
+    this.colorStops = stops.sort((a, b) => a.pos - b.pos);
+  }
+}
+const parseColor = (color) => {
+  return tinycolor(color);
+};
+export {
+  GradientColorCalculator,
+  parseColor
+};

package/es/_shared/utils/control.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+type OnSet = (...args: any) => any;
+type OnGet = (...args: any) => any;
+declare const _default: <T>(modelValue: Ref<T | undefined>, defaultValue: T, onSet?: OnSet, onGet?: OnGet) => import('vue').WritableComputedRef<any, T>;
+export default _default;

package/es/_shared/utils/control.js

@@ -0,0 +1,23 @@
+import { ref, computed } from "vue";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "./dom.js";
+import { isUndefined } from "./is.js";
+import "./time.js";
+import "../../Empty/index.js";
+/* empty css                 */
+const useControlValue = (modelValue, defaultValue, onSet = (data) => data, onGet = (data) => data) => {
+  const controlValue = ref(defaultValue);
+  return computed({
+    get() {
+      const value = isUndefined(modelValue.value) ? controlValue.value : modelValue.value;
+      return onGet(value);
+    },
+    set(value) {
+      controlValue.value = value;
+      onSet(value);
+    }
+  });
+};
+export {
+  useControlValue as default
+};

package/es/_shared/utils/dom.d.ts

@@ -0,0 +1,28 @@
+import { EllipsisConfig } from '../../Typography/type';
+import { BreakpointName, ResponsiveValue } from '../../Grid';
+import { Ref } from 'vue';
+export declare const isServerRendering: boolean;
+export declare const querySelector: (selectors: string, container?: Document | HTMLElement) => HTMLElement | undefined;
+export declare const getElement: (target: string | HTMLElement | undefined, container?: Document | HTMLElement) => HTMLElement | undefined;
+export declare function getDomText(dom: Ref<HTMLElement | undefined>): string;
+export declare function getBreakpointValue(breakpoint: BreakpointName, value: string | number | ResponsiveValue, defaultValue?: number | string): number | string | undefined;
+export declare const mediaQueryHandler: (onBreakpoint: (breakpoint: BreakpointName, order: Record<string, number>, index: number) => void, queries?: Record<string, string>) => void;
+export declare function findFirstScrollableParent(element?: HTMLElement): HTMLElement | undefined;
+/**
+ * 计算文本是否需要省略并返回处理后的文本
+ * @param originElement 原始DOM元素，用于获取样式
+ * @param ellipsisConfig 省略配置
+ * @param operations 操作按钮的DOM元素或元素数组
+ * @param fullText 完整文本
+ * @returns 返回处理后的文本和是否省略的标志
+ */
+export declare function calculateEllipsis(originElement: HTMLElement, ellipsisConfig: EllipsisConfig | undefined, operations: (HTMLElement | HTMLElement[] | null) | undefined, fullText: string): {
+    tooltip?: {
+        type?: "tooltip" | "popover" | undefined;
+        props?: Record<string, any> | undefined;
+        title: string;
+    } | undefined;
+    text: string;
+    ellipsis: boolean;
+    isClamped: boolean;
+};

package/es/_shared/utils/dom.js

@@ -0,0 +1,101 @@
+import { isString, isObject, isUndefined } from "./is.js";
+import { useMediaQuery } from "../../node_modules/@vueuse/core/index.js";
+import { watch } from "vue";
+import { unrefElement } from "./vue-utils.js";
+const isServerRendering = (() => {
+  try {
+    return !(typeof window !== "undefined" && document !== void 0);
+  } catch (e) {
+    return true;
+  }
+})();
+const querySelector = (selectors, container) => {
+  if (isServerRendering) {
+    return void 0;
+  }
+  return (container ?? document).querySelector(selectors) ?? void 0;
+};
+const getElement = (target, container) => {
+  if (isString(target)) {
+    const selector = target[0] === "#" ? `[id='${target.slice(1)}']` : target;
+    return querySelector(selector, container);
+  }
+  return target;
+};
+function getDomText(dom) {
+  var _a;
+  return ((_a = unrefElement(dom)) == null ? void 0 : _a.innerText) || "";
+}
+const getMedicaQueryQuerues = () => {
+  return {
+    xs: "(min-width: 0)",
+    sm: "(min-width: 576px)",
+    md: "(min-width: 768px)",
+    lg: "(min-width: 992px)",
+    xl: "(min-width: 1200px)",
+    xxl: "(min-width: 1600px)"
+  };
+};
+function getBreakpointValue(breakpoint, value, defaultValue) {
+  if (!isObject(value)) {
+    return value;
+  }
+  const order = ["xs", "sm", "md", "lg", "xl", "xxl"];
+  const index = order.indexOf(breakpoint);
+  for (let i = index; i >= 0; i--) {
+    const bp = order[i];
+    if (isUndefined(value[bp])) continue;
+    return value[bp];
+  }
+  for (let i = index + 1; i < order.length; i++) {
+    const bp = order[i];
+    if (isUndefined(value[bp])) continue;
+    return value[bp];
+  }
+  return defaultValue;
+}
+const mediaQueryHandler = (onBreakpoint, queries = getMedicaQueryQuerues()) => {
+  const breakpoints = [];
+  const order = {};
+  const matches = [];
+  Object.keys(queries).forEach((key, i) => {
+    breakpoints.push(key);
+    order[key] = i;
+    matches.push(useMediaQuery(queries[key]));
+  });
+  watch(
+    matches,
+    (val) => {
+      const i = val.lastIndexOf(true);
+      onBreakpoint(breakpoints[i], order, i);
+    },
+    {
+      immediate: true
+    }
+  );
+};
+function findFirstScrollableParent(element) {
+  if (!element || element === document.body) {
+    return;
+  }
+  let currentElement = element.parentElement;
+  while (currentElement && currentElement !== document.body) {
+    const style = window.getComputedStyle(currentElement);
+    const overflow = style.overflowY || style.overflow;
+    const isScrollable = ["auto", "scroll"].includes(overflow);
+    const canScroll = currentElement.scrollHeight > currentElement.clientHeight;
+    if (isScrollable && canScroll) {
+      return currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+}
+export {
+  findFirstScrollableParent,
+  getBreakpointValue,
+  getDomText,
+  getElement,
+  isServerRendering,
+  mediaQueryHandler,
+  querySelector
+};

package/es/_shared/utils/fn.d.ts

@@ -0,0 +1,8 @@
+export declare const sleep: (ms: number) => Promise<unknown>;
+export declare function throttleByRaf(cb: (...args: any[]) => void): {
+    (...args: any[]): void;
+    cancel(): void;
+};
+export declare function debounce<T extends (...args: any[]) => any>(func: T, delay: number, immediate?: boolean): (...args: Parameters<T>) => void;
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
+export declare const valueToPx: (value: string | number | undefined) => string;

package/es/_shared/utils/fn.js

@@ -0,0 +1,80 @@
+import { isNumber, isString } from "./is.js";
+const sleep = (ms) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve("");
+    }, ms);
+  });
+};
+function throttleByRaf(cb) {
+  let timer = 0;
+  const throttle2 = (...args) => {
+    if (timer) {
+      window.cancelAnimationFrame(timer);
+    }
+    timer = window.requestAnimationFrame(() => {
+      cb(...args);
+      timer = 0;
+    });
+  };
+  throttle2.cancel = () => {
+    window.cancelAnimationFrame(timer);
+    timer = 0;
+  };
+  return throttle2;
+}
+function debounce(func, delay, immediate = false) {
+  let timer = null;
+  let isInvoked = false;
+  return function(...args) {
+    const context = this;
+    if (timer) clearTimeout(timer);
+    if (immediate && !isInvoked) {
+      func.apply(context, args);
+      isInvoked = true;
+    }
+    timer = setTimeout(() => {
+      if (!immediate) {
+        func.apply(context, args);
+      }
+      isInvoked = false;
+    }, delay);
+  };
+}
+function throttle(fn, delay) {
+  let lastTime = 0;
+  let timeoutId = null;
+  return function(...args) {
+    const now = Date.now();
+    const remaining = delay - (now - lastTime);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (remaining <= 0) {
+      fn.apply(this, args);
+      lastTime = now;
+    } else {
+      timeoutId = setTimeout(() => {
+        fn.apply(this, args);
+        lastTime = Date.now();
+        timeoutId = null;
+      }, remaining);
+    }
+  };
+}
+const valueToPx = (value) => {
+  const numberReg = /^-?\d+(\.\d+)?$/;
+  if (isNumber(value) || isString(value) && numberReg.test(value)) {
+    return value + "px";
+  }
+  console.log("value", value);
+  return value;
+};
+export {
+  debounce,
+  sleep,
+  throttle,
+  throttleByRaf,
+  valueToPx
+};

package/es/_shared/utils/global-config.d.ts

@@ -0,0 +1,28 @@
+import { Ref, VNode } from 'vue';
+import { ConfigconfigSlots, EmptyComponent } from '../../ConfigProvider';
+import { PopupContainer, Props, Size } from '../type';
+export declare const CONFIG_PROVIDER_PROVIDE_KEY = "config-props";
+export interface ConfigProviderProvide {
+    zIndex: Ref<number>;
+    size: Ref<Size>;
+    popupContainer: Ref<PopupContainer>;
+    updateAtScroll: Ref<boolean>;
+    scrollToClose: Ref<boolean>;
+    exchangeTime: Ref<boolean>;
+    slots: Partial<ConfigconfigSlots>;
+}
+export declare const getGlobalConfig: (props?: Props) => {
+    slots: Partial<ConfigconfigSlots>;
+    zIndex: Ref<number, number>;
+    size: Ref<any, any>;
+    updateAtScroll: Ref<any, any>;
+    scrollToClose: Ref<any, any>;
+    popupContainer: Ref<any, any>;
+    exchangeTime: Ref<any, any>;
+    renderEmpty: (name: EmptyComponent) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }> | (() => void | undefined);
+    renderLoading: () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }> | (() => void);
+};

package/es/_shared/utils/global-config.js

@@ -0,0 +1,59 @@
+import { inject, ref, toRefs, reactive, isReactive } from "vue";
+import "../../node_modules/tinycolor2/esm/tinycolor.js";
+import "./dom.js";
+import { isUndefined, isString } from "./is.js";
+import "./time.js";
+import Empty from "../../Empty/index.js";
+/* empty css                 */
+import _sfc_main from "../icons/IconLoading.vue.js";
+const CONFIG_PROVIDER_PROVIDE_KEY = "config-props";
+const getVar = (value, _value) => {
+  var _a;
+  return isUndefined(value == null ? void 0 : value.value) || isString(_value == null ? void 0 : _value.value) && !((_a = value == null ? void 0 : value.value) == null ? void 0 : _a.length) ? _value : value;
+};
+const getGlobalConfig = (props = {}) => {
+  const {
+    slots,
+    zIndex,
+    size: _size,
+    updateAtScroll: _updateAtScroll,
+    scrollToClose: _scrollToClose,
+    exchangeTime: _exchangeTime,
+    popupContainer: _popupContainer
+  } = inject(CONFIG_PROVIDER_PROVIDE_KEY, {
+    zIndex: ref(1001),
+    size: ref("medium"),
+    updateAtScroll: ref(true),
+    scrollToClose: ref(false),
+    exchangeTime: ref(true),
+    popupContainer: ref("body"),
+    slots: {}
+  });
+  const renderEmpty = (name) => {
+    return slots.empty ? () => {
+      var _a;
+      return (_a = slots.empty) == null ? void 0 : _a.call(slots, {
+        component: name
+      });
+    } : Empty;
+  };
+  const renderLoading = () => {
+    return slots.loading ? slots.loading : _sfc_main;
+  };
+  const { size, updateAtScroll, scrollToClose, exchangeTime, popupContainer } = toRefs(isReactive(props) ? props : reactive(props));
+  return {
+    slots,
+    zIndex,
+    size: getVar(size, _size),
+    updateAtScroll: getVar(updateAtScroll, _updateAtScroll),
+    scrollToClose: getVar(scrollToClose, _scrollToClose),
+    popupContainer: getVar(popupContainer, _popupContainer),
+    exchangeTime: getVar(exchangeTime, _exchangeTime),
+    renderEmpty,
+    renderLoading
+  };
+};
+export {
+  CONFIG_PROVIDER_PROVIDE_KEY,
+  getGlobalConfig
+};

package/es/_shared/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from './color';
+export * from './dom';
+export * from './fn';
+export * from './is';
+export * from './time';
+export * from './vue-utils';
+export * from './global-config';
+export { default as useControlValue } from './control';

package/es/_shared/utils/is.d.ts

@@ -0,0 +1,27 @@
+export declare function isElement(value: unknown): value is Element;
+export declare function isNull(value: unknown): value is null;
+export declare function isUndefined(value: unknown): value is undefined;
+export declare function isNaN(value: unknown): value is number;
+export declare function isNumber(value: unknown): value is number;
+export declare function isString(value: unknown): value is string;
+export declare function isBoolean(value: unknown): value is boolean;
+export declare function isRegExp(value: unknown): value is RegExp;
+export declare function isDate(value: unknown): value is Date;
+export declare function isFunction(value: unknown): value is Function;
+export declare function isArray(value: unknown): value is Array<unknown>;
+export declare function isObject(value: unknown): value is Record<string, unknown>;
+declare const _default: {
+    element: typeof isElement;
+    null: typeof isNull;
+    undefined: typeof isUndefined;
+    nan: typeof isNaN;
+    number: typeof isNumber;
+    string: typeof isString;
+    boolean: typeof isBoolean;
+    regexp: typeof isRegExp;
+    date: typeof isDate;
+    function: typeof isFunction;
+    array: typeof isArray;
+    object: typeof isObject;
+};
+export default _default;

package/es/_shared/utils/is.js

@@ -0,0 +1,34 @@
+function isNull(value) {
+  return value === null;
+}
+function isUndefined(value) {
+  return value === void 0;
+}
+function isNumber(value) {
+  return typeof value === "number" && !Number.isNaN(value);
+}
+function isString(value) {
+  return typeof value === "string";
+}
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function isObject(value) {
+  return value !== null && typeof value === "object";
+}
+export {
+  isArray,
+  isBoolean,
+  isFunction,
+  isNull,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined
+};

package/es/_shared/utils/time.d.ts

@@ -0,0 +1,48 @@
+import { default as dayjs } from 'dayjs';
+type options = {
+    value: string;
+    disabled: boolean;
+}[];
+export declare function generateTimeOptions(config: {
+    format: string;
+    disabledHours?: () => number[];
+    disabledMinutes?: (selectedHour?: number) => number[];
+    disabledSeconds?: (selectedHour?: number, selectedMinute?: number) => number[];
+    hideDisabledOptions?: boolean;
+    step?: {
+        hour?: number;
+        minute?: number;
+        second?: number;
+    };
+    selectedHour?: string;
+    selectedMinute?: string;
+}): {
+    hours: options;
+    minutes: options;
+    seconds: options;
+    meridiems: options;
+};
+export declare function parseTimeStrByFormat(timeStr: string, format: string): {
+    hours: string;
+    minutes: string;
+    seconds: string;
+    meridiems: string | undefined;
+};
+export declare function timeObjToStr(timeObj: {
+    hours?: string;
+    minutes?: string;
+    seconds?: string;
+    meridiems?: string | undefined;
+}, format: string): string;
+export declare const isValidTimeRange: (beginDate: string, endDate: string, format: string) => boolean;
+export interface CalendarCellData {
+    day: number;
+    month: number;
+    year: number;
+    isCurrentMonth: boolean;
+    fullDate: string;
+}
+export declare function generateMonthCalendar(year: number, month: number): CalendarCellData[][];
+export declare const formatSeconds: (time: number, format: string, type?: dayjs.UnitType) => string;
+export declare const formatDate: (value: string | number | Date, format: string) => string;
+export {};

package/es/_shared/utils/time.js

@@ -0,0 +1,52 @@
+import dayjs from "../../node_modules/dayjs/dayjs.min.js";
+import "../../node_modules/dayjs/locale/en.js";
+import duration from "../../node_modules/dayjs/plugin/duration.js";
+import toObject from "../../node_modules/dayjs/plugin/toObject.js";
+import isSameOrAfter from "../../node_modules/dayjs/plugin/isSameOrAfter.js";
+import isSameOrBefore from "../../node_modules/dayjs/plugin/isSameOrBefore.js";
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(toObject);
+dayjs.extend(duration);
+const isValidTimeRange = (beginDate, endDate, format) => {
+  const begin = dayjs(beginDate, format).locale("en", { weekStart: 1 });
+  const end = dayjs(endDate, format).locale("en", { weekStart: 1 });
+  return begin.isBefore(end);
+};
+function generateMonthCalendar(year, month) {
+  const firstDayOfMonth = dayjs(`${year}-${month}-01`);
+  const firstDayOfWeek = firstDayOfMonth.day();
+  const daysFromPrevMonth = firstDayOfWeek;
+  const totalCalendarDays = 42;
+  const calendar = [];
+  const row = [];
+  for (let i = 0; i < totalCalendarDays; i++) {
+    const dayOffset = i - daysFromPrevMonth;
+    const date = firstDayOfMonth.add(dayOffset, "day");
+    const isCurrentMonth = date.month() + 1 === month;
+    row.push({
+      day: date.date(),
+      month: date.month(),
+      year: date.year(),
+      fullDate: date.format("YYYY/MM/DD"),
+      isCurrentMonth
+    });
+    if (row.length === 7) {
+      calendar.push([...row]);
+      row.splice(0);
+    }
+  }
+  return calendar;
+}
+const formatSeconds = (time, format, type = "milliseconds") => {
+  return dayjs.duration(time, type).format(format);
+};
+const formatDate = (value, format) => {
+  return dayjs(value).format(format);
+};
+export {
+  formatDate,
+  formatSeconds,
+  generateMonthCalendar,
+  isValidTimeRange
+};

package/es/_shared/utils/vue-utils.d.ts

@@ -0,0 +1,7 @@
+import { RenderContent, ObjectData, MaybeElement, MaybeComputedElementRef, UnRefElementReturn } from '../type';
+import { VNode } from 'vue';
+export declare const getSlotFunction: (param: RenderContent | undefined) => import('vue').RenderFunction | (() => string | ObjectData[]) | undefined;
+export declare function isVifNode(vnode: VNode | undefined | null): boolean;
+export declare function findFirstLegitChild(node: VNode[] | undefined): VNode | null;
+export declare function findComponentsFromVnodes(vnodes: VNode[], name: string): ObjectData[];
+export declare function unrefElement<T extends MaybeElement>(elRef: MaybeComputedElementRef<T>): UnRefElementReturn<T>;