@vef-framework/components 1.0.122 → 1.0.123

package/esm/vef-temporal-range-picker/hooks/use-dayjs-values.js

@@ -0,0 +1,24 @@
+"use strict";
+import { isNullish, isArray } from '@vef-framework/shared';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { stringFormatSeparator } from '../props.js';
+
+"use strict";
+function useDayjsValues(value, formats) {
+  return useMemo(() => {
+    if (isNullish(value)) {
+      return value;
+    }
+    if (isArray(value)) {
+      return value.map((it) => dayjs(it, formats));
+    }
+    const [begin, end] = value.split(stringFormatSeparator);
+    return [
+      dayjs(begin, formats),
+      dayjs(end, formats)
+    ];
+  }, [value, formats]);
+}
+
+export { useDayjsValues };

package/esm/vef-temporal-range-picker/hooks/use-temporal-limit.js

@@ -0,0 +1,35 @@
+"use strict";
+import { isFunction } from '@vef-framework/shared';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+
+"use strict";
+function useTemporalLimit({
+  maxDate,
+  minDate,
+  disabledDate,
+  disabledTime
+}) {
+  const [minDateValue, maxDateValue] = useMemo(() => [
+    minDate ? dayjs(minDate) : void 0,
+    maxDate ? dayjs(maxDate) : void 0
+  ], [minDate, maxDate]);
+  const disabledTimeValue = useMemo(() => {
+    if (isFunction(disabledTime)) {
+      return (now) => disabledTime(now.toDate());
+    }
+  }, [disabledTime]);
+  const disabledDateValue = useMemo(() => {
+    if (isFunction(disabledDate)) {
+      return (now, { from }) => disabledDate(now.toDate(), from?.toDate());
+    }
+  }, [disabledDate]);
+  return {
+    minDateValue,
+    maxDateValue,
+    disabledTimeValue,
+    disabledDateValue
+  };
+}
+
+export { useTemporalLimit };

package/esm/vef-temporal-range-picker/hooks/use-temporal-range-picker-instance.js

@@ -0,0 +1,20 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+"use strict";
+function useTemporalRangePickerInstance(ref) {
+  const temporalPickerRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => {
+      temporalPickerRef.current?.blur();
+    },
+    focus: () => {
+      temporalPickerRef.current?.focus({
+        preventScroll: true
+      });
+    }
+  }));
+  return temporalPickerRef;
+}
+
+export { useTemporalRangePickerInstance };

package/esm/vef-temporal-range-picker/index.js

@@ -0,0 +1,129 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isFunction } from '@vef-framework/shared';
+import { TimePicker, DatePicker } from 'antd';
+import { useMemo, memo, forwardRef } from 'react';
+import '../internal/index.js';
+import { getTemporalFormats } from './helper.js';
+import { useDayjsValues } from './hooks/use-dayjs-values.js';
+import { useTemporalLimit } from './hooks/use-temporal-limit.js';
+import { useTemporalRangePickerInstance } from './hooks/use-temporal-range-picker-instance.js';
+import { stringFormatSeparator } from './props.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+function VefTemporalRangePickerBase({
+  defaultValue,
+  value,
+  clearable,
+  mode = "date",
+  size,
+  useStringFormat = false,
+  maxDate,
+  minDate,
+  disabledTime,
+  disabledDate,
+  hourStep,
+  minuteStep,
+  secondStep,
+  onChange,
+  ...restProps
+}, ref) {
+  const formats = getTemporalFormats(mode);
+  const valueToUse = useDayjsValues(value, formats);
+  const defaultValueToUse = useDayjsValues(value, formats);
+  const {
+    minDateValue,
+    maxDateValue,
+    disabledTimeValue,
+    disabledDateValue
+  } = useTemporalLimit({
+    maxDate,
+    minDate,
+    disabledTime,
+    disabledDate
+  });
+  const temporalRangePickerRef = useTemporalRangePickerInstance(ref);
+  const handleChange = useMemo(() => {
+    if (isFunction(onChange)) {
+      return (value2, valueFormats) => {
+        if (!value2) {
+          onChange(null, null);
+          return;
+        }
+        const dates = [value2[0].toDate(), value2[1].toDate()];
+        if (useStringFormat) {
+          onChange(valueFormats.join(stringFormatSeparator), dates);
+        } else {
+          onChange(valueFormats, dates);
+        }
+      };
+    }
+  }, [onChange, useStringFormat]);
+  if (mode === "time" || mode === "hour" || mode === "minute") {
+    return /* @__PURE__ */ jsx(
+      TimePicker.RangePicker,
+      {
+        ref: temporalRangePickerRef,
+        allowClear: clearable,
+        defaultValue: defaultValueToUse,
+        disabledTime: disabledTimeValue,
+        format: formats,
+        hourStep,
+        minuteStep,
+        secondStep,
+        size: convertBasicSizeToUiSize(size),
+        value: valueToUse,
+        onChange: handleChange,
+        ...restProps
+      }
+    );
+  }
+  if (mode === "datetime") {
+    return /* @__PURE__ */ jsx(
+      DatePicker.RangePicker,
+      {
+        ref: temporalRangePickerRef,
+        showTime: true,
+        allowClear: clearable,
+        defaultValue: defaultValueToUse,
+        disabledDate: disabledDateValue,
+        disabledTime: disabledTimeValue,
+        format: formats,
+        hourStep,
+        maxDate: maxDateValue,
+        minDate: minDateValue,
+        minuteStep,
+        picker: "date",
+        secondStep,
+        size: convertBasicSizeToUiSize(size),
+        value: valueToUse,
+        onChange: handleChange,
+        ...restProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DatePicker.RangePicker,
+    {
+      ref: temporalRangePickerRef,
+      allowClear: clearable,
+      defaultValue: defaultValueToUse,
+      disabledDate: disabledDateValue,
+      format: formats,
+      maxDate: maxDateValue,
+      minDate: minDateValue,
+      picker: mode,
+      size: convertBasicSizeToUiSize(size),
+      value: valueToUse,
+      onChange: handleChange,
+      ...restProps
+    }
+  );
+}
+const VefTemporalRangePicker = memo(
+  forwardRef(VefTemporalRangePickerBase)
+);
+VefTemporalRangePicker.displayName = "VefTemporalRangePicker";
+
+export { VefTemporalRangePicker as default };

package/esm/vef-temporal-range-picker/props.js

@@ -0,0 +1,5 @@
+"use strict";
+"use strict";
+const stringFormatSeparator = "_";
+
+export { stringFormatSeparator };

package/esm/vef-text/index.js

@@ -0,0 +1,81 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useColorTokens } from '@vef-framework/hooks';
+import { Typography } from 'antd';
+import { useMemo } from 'react';
+
+"use strict";
+const { Text } = Typography;
+function VefText({
+  variant,
+  color,
+  bold,
+  ellipsis,
+  ellipsisTip,
+  ellipsisTipPlacement,
+  copyable,
+  copiedText,
+  onCopy,
+  ...restProps
+}) {
+  const ellipsisConfig = useMemo(() => {
+    if (ellipsis) {
+      return {
+        tooltip: ellipsisTip ?? restProps.children,
+        placement: ellipsisTipPlacement
+      };
+    }
+  }, [
+    ellipsis,
+    ellipsisTip,
+    ellipsisTipPlacement,
+    restProps.children
+  ]);
+  const colorTokens = useColorTokens();
+  const styleProps = useMemo(() => {
+    const props = {};
+    if (variant === "shortcut") {
+      props.keyboard = true;
+    } else if (variant === "strikethrough") {
+      props.delete = true;
+    } else if (variant) {
+      props[variant] = true;
+    }
+    if (color === "secondary") {
+      props.type = "secondary";
+    } else if (color) {
+      props.css = {
+        color: colorTokens.get(color)
+      };
+    }
+    if (bold) {
+      props.strong = true;
+    }
+    return props;
+  }, [
+    bold,
+    color,
+    colorTokens,
+    variant
+  ]);
+  const copyConfig = useMemo(() => {
+    if (copyable) {
+      return {
+        format: "text/plain",
+        text: copiedText,
+        onCopy
+      };
+    }
+  }, [copyable, copiedText, onCopy]);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      copyable: copyConfig,
+      ellipsis: ellipsisConfig,
+      ...styleProps,
+      ...restProps
+    }
+  );
+}
+
+export { VefText as default };

package/esm/vef-text/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-textarea/hooks/use-textarea-instance.js

@@ -0,0 +1,14 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+"use strict";
+function useTextareaInstance(ref) {
+  const textareaRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => textareaRef.current?.blur(),
+    focus: () => textareaRef.current?.focus({ preventScroll: true })
+  }));
+  return textareaRef;
+}
+
+export { useTextareaInstance };

package/esm/vef-textarea/index.js

@@ -0,0 +1,68 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isFunction } from '@vef-framework/shared';
+import { Input } from 'antd';
+import { forwardRef, useMemo } from 'react';
+import '../internal/index.js';
+import { useTextareaInstance } from './hooks/use-textarea-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const { TextArea } = Input;
+function normalizeValue(value) {
+  if (value === "") {
+    return null;
+  }
+  return value;
+}
+const VefTextarea = forwardRef(
+  ({
+    defaultValue,
+    value,
+    size,
+    clearable,
+    showCount,
+    onChange,
+    onEnterKeyPress,
+    onBlur,
+    onFocus,
+    ...restProps
+  }, ref) => {
+    const eventHandlers = useMemo(() => ({
+      onChange: isFunction(onChange) ? (event) => onChange(
+        normalizeValue(event.target.value)
+      ) : void 0,
+      onPressEnter: isFunction(onEnterKeyPress) ? (event) => onEnterKeyPress(
+        normalizeValue(event.target.value)
+      ) : void 0,
+      onBlur: isFunction(onBlur) ? (event) => onBlur(
+        normalizeValue(event.target.value)
+      ) : void 0,
+      onFocus: isFunction(onFocus) ? (event) => onFocus(
+        normalizeValue(event.target.value)
+      ) : void 0
+    }), [
+      onChange,
+      onEnterKeyPress,
+      onBlur,
+      onFocus
+    ]);
+    const textareaRef = useTextareaInstance(ref);
+    return /* @__PURE__ */ jsx(
+      TextArea,
+      {
+        ref: textareaRef,
+        allowClear: clearable,
+        defaultValue,
+        showCount,
+        size: convertBasicSizeToUiSize(size),
+        value,
+        ...restProps,
+        ...eventHandlers
+      }
+    );
+  }
+);
+VefTextarea.displayName = "VefTextarea";
+
+export { VefTextarea as default };

package/esm/vef-textarea/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-title/index.js

@@ -0,0 +1,97 @@
+"use strict";
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useColorTokens } from '@vef-framework/hooks';
+import { themeVariables } from '@vef-framework/shared';
+import { Typography } from 'antd';
+import { useMemo } from 'react';
+import VefDivider from '../vef-divider/index.js';
+
+"use strict";
+const { Title } = Typography;
+const dividerStyle = css`
+  margin: ${themeVariables.marginSm} 0 ${themeVariables.marginLg};
+`;
+const leftBarStyle = css`
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: var(--vef-title-left-bar-height);
+    border-radius: 3px;
+    background: linear-gradient(to top, ${themeVariables.colorPrimary}, ${themeVariables.blue5});
+    margin-right: ${themeVariables.paddingSm};
+  }
+`;
+function VefTitle({
+  showLeftBar,
+  showBottomLine,
+  noPaddingBottom,
+  variant,
+  color,
+  ellipsis,
+  ellipsisTip,
+  ...restProps
+}) {
+  const { level = 1 } = restProps;
+  const ellipsisConfig = useMemo(() => {
+    if (ellipsis) {
+      return {
+        tooltip: ellipsisTip ?? restProps.children
+      };
+    }
+  }, [ellipsis, ellipsisTip, restProps.children]);
+  const colorTokens = useColorTokens();
+  const styleProps = useMemo(() => {
+    const props = {};
+    if (color === "secondary") {
+      props.type = "secondary";
+    } else {
+      const css2 = [];
+      if (color) {
+        css2.push({
+          color: colorTokens.get(color)
+        });
+      }
+      if (showLeftBar) {
+        css2.push(leftBarStyle);
+      }
+      props.css = css2;
+    }
+    if (variant) {
+      props[variant] = true;
+    }
+    if (showLeftBar) {
+      props.style = {
+        "--vef-title-left-bar-height": `calc(var(--vef-font-size-heading-${level}) * 0.8)`
+      };
+    }
+    if (noPaddingBottom) {
+      props.style = {
+        ...props.style,
+        "--vef-typography-title-margin-bottom": 0
+      };
+    }
+    return props;
+  }, [
+    color,
+    variant,
+    showLeftBar,
+    colorTokens,
+    level,
+    noPaddingBottom
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Title,
+      {
+        ellipsis: ellipsisConfig,
+        ...styleProps,
+        ...restProps
+      }
+    ),
+    showBottomLine && /* @__PURE__ */ jsx(VefDivider, { css: dividerStyle })
+  ] });
+}
+
+export { VefTitle as default };

package/esm/vef-title/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-tooltip/index.js

@@ -0,0 +1,36 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Tooltip } from 'antd';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+
+"use strict";
+const VefTooltip = forwardRef(({
+  content,
+  trigger = "hover",
+  arrow = true,
+  delay = 0.1,
+  defaultOpened,
+  opened,
+  onOpenedChange,
+  ...restProps
+}, ref) => {
+  const tooltipRef = useRef(null);
+  useImperativeHandle(ref, () => tooltipRef.current.nativeElement);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      ref: tooltipRef,
+      arrow,
+      defaultOpen: defaultOpened,
+      mouseEnterDelay: delay,
+      open: opened,
+      title: content,
+      trigger,
+      onOpenChange: onOpenedChange,
+      ...restProps
+    }
+  );
+});
+VefTooltip.displayName = "VefTooltip";
+
+export { VefTooltip as default };

package/esm/vef-tooltip/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-tree-select/hooks/use-change-handler.js

@@ -0,0 +1,34 @@
+"use strict";
+import { isFunction, isArray } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+"use strict";
+function useChangeHandler(onChange, options) {
+  const optionsMap = useMemo(() => options.reduce((map, option) => {
+    map.set(option.value, option);
+    return map;
+  }, /* @__PURE__ */ new Map()), [options]);
+  return useMemo(() => {
+    if (isFunction(onChange)) {
+      return (value) => {
+        if (!value) {
+          onChange(null, null);
+          return;
+        }
+        if (isArray(value)) {
+          onChange(
+            value,
+            value.map((it) => optionsMap.get(it))
+          );
+        } else {
+          onChange(
+            value,
+            optionsMap.get(value)
+          );
+        }
+      };
+    }
+  }, [onChange, optionsMap]);
+}
+
+export { useChangeHandler };

package/esm/vef-tree-select/hooks/use-data-options.js

@@ -0,0 +1,46 @@
+"use strict";
+import { useComputedOptions } from '@vef-framework/hooks';
+import { isArray, isFunction, isNullish } from '@vef-framework/shared';
+import { useLayoutEffect } from 'react';
+
+"use strict";
+function useDataOptions({
+  value,
+  multiple = false,
+  onChange,
+  ...rest
+}) {
+  const {
+    onFilterKeywordChange,
+    normalizedOptions,
+    defaultOption,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  } = useComputedOptions({
+    ...rest,
+    selectedOptionValues: isArray(value) ? value : value ? [value] : []
+  });
+  useLayoutEffect(() => {
+    if (defaultOption && isFunction(onChange) && isNullish(value)) {
+      onChange(
+        multiple ? [defaultOption.value] : defaultOption.value,
+        multiple ? [defaultOption] : defaultOption
+      );
+    }
+  }, [
+    defaultOption,
+    multiple,
+    onChange,
+    value
+  ]);
+  return {
+    onFilterKeywordChange,
+    normalizedOptions,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  };
+}
+
+export { useDataOptions };

package/esm/vef-tree-select/hooks/use-tree-select-instance.js

@@ -0,0 +1,21 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+"use strict";
+function useTreeSelectInstance(ref, dataOptions) {
+  const treeSelectRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => {
+      treeSelectRef.current?.blur();
+    },
+    focus: () => {
+      treeSelectRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return treeSelectRef;
+}
+
+export { useTreeSelectInstance };