@vef-framework/components 1.0.121 → 1.0.123

package/esm/vef-select/index.js

@@ -0,0 +1,101 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useOptionFilter } from '@vef-framework/hooks';
+import { styles } from '@vef-framework/shared';
+import { Select } from 'antd';
+import { memo, forwardRef } from 'react';
+import '../internal/index.js';
+import VefLoadingPlaceholder from '../vef-loading-placeholder/index.js';
+import { useDataOptions } from './hooks/use-data-options.js';
+import { useFieldNames } from './hooks/use-field-names.js';
+import { useRenderLabel } from './hooks/use-render-label.js';
+import { useRenderOption } from './hooks/use-render-option.js';
+import { useSelectInstance } from './hooks/use-select-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const listHeight = 280;
+const loadingPlaceholder = /* @__PURE__ */ jsx("div", { css: { height: listHeight / 2 }, children: /* @__PURE__ */ jsx(VefLoadingPlaceholder, {}) });
+function VefSelectBase({
+  defaultValue,
+  value,
+  size,
+  clearable,
+  disabled,
+  placeholder,
+  variant,
+  onClear,
+  onBlur,
+  onFocus,
+  onChange,
+  onSelect,
+  onDeselect,
+  multiple = false,
+  grouped = false,
+  maxCount,
+  renderOption,
+  filterable = false,
+  filterFromRemote = false,
+  ...restProps
+}, ref) {
+  const {
+    onFilterKeywordChange,
+    normalizedOptions,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  } = useDataOptions({
+    value,
+    grouped,
+    multiple,
+    onChange,
+    filterable,
+    filterFromRemote,
+    ...restProps
+  });
+  const renderOptionToUse = useRenderOption(renderOption);
+  const filterOption = useOptionFilter(filterable, filterFromRemote);
+  const fieldNames = useFieldNames(grouped);
+  const renderLabel = useRenderLabel(isFallbackOptionsLoading, fallbackOptions);
+  const selectRef = useSelectInstance(ref, normalizedOptions);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ref: selectRef,
+      defaultActiveFirstOption: true,
+      allowClear: clearable,
+      css: styles.fullWidth,
+      defaultValue,
+      disabled,
+      fieldNames,
+      filterOption,
+      labelRender: renderLabel,
+      listHeight,
+      loading: isLoading,
+      maxCount: multiple ? maxCount : void 0,
+      maxTagCount: multiple ? "responsive" : void 0,
+      mode: multiple ? "multiple" : void 0,
+      notFoundContent: isLoading ? loadingPlaceholder : void 0,
+      optionRender: renderOptionToUse,
+      options: normalizedOptions,
+      placeholder,
+      showSearch: filterable,
+      size: convertBasicSizeToUiSize(size),
+      value,
+      variant,
+      onBlur,
+      onChange,
+      onClear,
+      onDeselect,
+      onFocus,
+      onSearch: onFilterKeywordChange,
+      onSelect
+    }
+  );
+}
+const VefSelect = memo(
+  forwardRef(VefSelectBase)
+);
+VefSelect.displayName = "VefSelect";
+
+export { VefSelect as default };

package/esm/vef-select/props.js

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

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

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

package/esm/vef-slider/index.js

@@ -0,0 +1,35 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Slider } from 'antd';
+import { forwardRef, useMemo } from 'react';
+import { useSliderInstance } from './hooks/use-slider-instance.js';
+
+"use strict";
+const VefSlider = forwardRef(({
+  step,
+  tipFormatter,
+  onChange,
+  ...restProps
+}, ref) => {
+  const tooltipProps = useMemo(() => {
+    if (tipFormatter) {
+      return {
+        formatter: (value) => tipFormatter(value)
+      };
+    }
+  }, [tipFormatter]);
+  const sliderRef = useSliderInstance(ref);
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      ref: sliderRef,
+      step: step === "mark" ? null : step,
+      tooltip: tooltipProps,
+      onChange,
+      ...restProps
+    }
+  );
+});
+VefSlider.displayName = "VefSlider";
+
+export { VefSlider as default };

package/esm/vef-slider/props.js

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

package/esm/vef-sortable-list/components/overlay-item.js

@@ -0,0 +1,35 @@
+"use strict";
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { HolderOutlined } from '@ant-design/icons';
+import { css } from '@emotion/react';
+
+"use strict";
+const defaultHandleIcon = /* @__PURE__ */ jsx(HolderOutlined, {});
+const handlePresetStyle = css`
+  cursor: move;
+  user-select: none;
+  touch-action: none;
+`;
+function VefOverlayItem({
+  item,
+  renderItem,
+  useHandle,
+  handleClassName,
+  handleStyle,
+  handleIcon
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    useHandle && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: handleClassName,
+        css: handlePresetStyle,
+        style: handleStyle,
+        children: handleIcon ?? defaultHandleIcon
+      }
+    ),
+    renderItem(item, true)
+  ] });
+}
+
+export { VefOverlayItem as default };

package/esm/vef-sortable-list/components/sortable-item.js

@@ -0,0 +1,79 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { HolderOutlined } from '@ant-design/icons';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { css } from '@emotion/react';
+
+"use strict";
+const defaultHandleIcon = /* @__PURE__ */ jsx(HolderOutlined, {});
+const handlePresetStyle = css`
+  cursor: move;
+  user-select: none;
+  touch-action: none;
+`;
+function VefSortableItem({
+  item,
+  itemKey,
+  itemIndex,
+  itemClassName,
+  itemStyle,
+  renderItem,
+  useHandle,
+  useOverlay,
+  handleClassName,
+  handleStyle,
+  handleIcon,
+  disabled
+}) {
+  const {
+    isDragging,
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transition,
+    transform
+  } = useSortable({
+    id: itemKey,
+    disabled,
+    data: {
+      index: itemIndex
+    }
+  });
+  const style = {
+    ...itemStyle,
+    transition,
+    transform: CSS.Transform.toString(transform),
+    ...!useOverlay && isDragging ? {
+      position: "relative",
+      zIndex: 999
+    } : {}
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: itemClassName,
+      style,
+      ...attributes,
+      ...useHandle ? {} : listeners,
+      children: [
+        useHandle && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            className: handleClassName,
+            css: handlePresetStyle,
+            style: handleStyle,
+            ...listeners,
+            children: handleIcon ?? defaultHandleIcon
+          }
+        ),
+        renderItem(item, false)
+      ]
+    }
+  );
+}
+
+export { VefSortableItem as default };

package/esm/vef-sortable-list/hooks/use-merged-items.js

@@ -0,0 +1,22 @@
+"use strict";
+import { isNullish } from '@vef-framework/shared';
+import { useState, useCallback } from 'react';
+
+"use strict";
+function useMergedItems(defaultItems, items, onChange) {
+  if (isNullish(defaultItems) && isNullish(items)) {
+    throw new Error("At least one of `defaultItems` and `items` must be provided for VefSortableList component.");
+  }
+  const [internalItems, setInternalItems] = useState(defaultItems ?? []);
+  const mergedItems = items ?? internalItems;
+  const mergedOnChange = useCallback((moveItems) => {
+    if (items) {
+      onChange?.(moveItems(items));
+    } else {
+      setInternalItems(moveItems);
+    }
+  }, [items, onChange]);
+  return [mergedItems, mergedOnChange];
+}
+
+export { useMergedItems };

package/esm/vef-sortable-list/index.js

@@ -0,0 +1,115 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, closestCenter } from '@dnd-kit/core';
+import { restrictToParentElement, restrictToWindowEdges } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, verticalListSortingStrategy, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { isFunction } from '@vef-framework/shared';
+import { useMemo, useState, useCallback, memo } from 'react';
+import VefOverlayItem from './components/overlay-item.js';
+import VefSortableItem from './components/sortable-item.js';
+import { useMergedItems } from './hooks/use-merged-items.js';
+
+"use strict";
+const defaultItemKey = "id";
+function VefSortableListBase({
+  defaultItems,
+  items,
+  itemKey = defaultItemKey,
+  className,
+  style,
+  orientation = "vertical",
+  useOverlay = true,
+  restrictStrategy = "parent",
+  onChange,
+  ...restProps
+}) {
+  const [mergedItems, mergedOnChange] = useMergedItems(defaultItems, items, onChange);
+  const sensors = useSensors(useSensor(PointerSensor));
+  const itemKeyFn = useMemo(() => {
+    if (isFunction(itemKey)) {
+      return itemKey;
+    }
+    return (item) => item[itemKey];
+  }, [itemKey]);
+  const [activeItem, setActiveItem] = useState();
+  const handleDragStart = useCallback(({ active }) => {
+    setActiveItem(mergedItems[active.data.current.index]);
+  }, [mergedItems]);
+  const handleDragEnd = useCallback(({ active, over }) => {
+    if (!over) {
+      return;
+    }
+    if (active.id !== over.id) {
+      mergedOnChange(
+        (items2) => arrayMove(
+          items2,
+          active.data.current.index,
+          over.data.current.index
+        )
+      );
+    }
+  }, [mergedOnChange]);
+  const itemKeys = mergedItems.map((item) => itemKeyFn(item));
+  const {
+    itemClassName,
+    itemStyle,
+    disabled,
+    ...overlayItemProps
+  } = restProps;
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      sensors,
+      modifiers: [
+        restrictStrategy === "parent" ? restrictToParentElement : restrictToWindowEdges
+      ],
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: /* @__PURE__ */ jsx(
+        SortableContext,
+        {
+          items: itemKeys,
+          strategy: orientation === "vertical" ? verticalListSortingStrategy : horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs("div", { className, style, children: [
+            mergedItems.map((item, index) => {
+              const key = itemKeyFn(item);
+              return /* @__PURE__ */ jsx(
+                VefSortableItem,
+                {
+                  item,
+                  itemIndex: index,
+                  itemKey: key,
+                  ...restProps
+                },
+                key
+              );
+            }),
+            useOverlay && /* @__PURE__ */ jsx(
+              DragOverlay,
+              {
+                className: itemClassName,
+                style: itemStyle,
+                wrapperElement: "div",
+                modifiers: [
+                  restrictStrategy === "parent" ? restrictToParentElement : restrictToWindowEdges
+                ],
+                children: activeItem && /* @__PURE__ */ jsx(
+                  VefOverlayItem,
+                  {
+                    item: activeItem,
+                    ...overlayItemProps
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const VefSortableList = memo(VefSortableListBase);
+VefSortableList.displayName = "VefSortableList";
+
+export { VefSortableList as default };

package/esm/vef-sortable-list/props.js

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

package/esm/vef-space/index.js

@@ -0,0 +1,26 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useGapSizeNormalizer } from '@vef-framework/hooks';
+import { isArray } from '@vef-framework/shared';
+import { Space } from 'antd';
+import { useMemo } from 'react';
+
+"use strict";
+function VefSpace({
+  gap,
+  ...restProps
+}) {
+  const normalizeGapSize = useGapSizeNormalizer();
+  const size = useMemo(() => {
+    if (isArray(gap)) {
+      return gap.map((it) => normalizeGapSize(it));
+    }
+    if (gap) {
+      return normalizeGapSize(gap);
+    }
+    return gap;
+  }, [gap, normalizeGapSize]);
+  return /* @__PURE__ */ jsx(Space, { size, ...restProps });
+}
+
+export { VefSpace as default };

package/esm/vef-space/props.js

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

package/esm/vef-spin/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Spin } from 'antd';
+
+"use strict";
+function VefSpin({
+  size,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(Spin, { size: size === "medium" ? "default" : size, ...restProps });
+}
+
+export { VefSpin as default };

package/esm/vef-spin/props.js

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

package/esm/vef-splitter/index.js

@@ -0,0 +1,21 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Splitter } from 'antd';
+
+"use strict";
+function VefSplitter({
+  orientation,
+  onResizeBegin,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Splitter,
+    {
+      layout: orientation,
+      onResizeStart: onResizeBegin,
+      ...rest
+    }
+  );
+}
+
+export { VefSplitter as default };

package/esm/vef-splitter/props.js

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

package/esm/vef-splitter-panel/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Splitter } from 'antd';
+
+"use strict";
+const { Panel } = Splitter;
+function VefSplitterPanel({
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(Panel, { ...rest });
+}
+
+export { VefSplitterPanel as default };

package/esm/vef-splitter-panel/props.js

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

package/esm/vef-status/index.js

@@ -0,0 +1,38 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useColorTokens } from '@vef-framework/hooks';
+import { Badge } from 'antd';
+import { useMemo } from 'react';
+
+"use strict";
+function VefStatus({
+  processing = false,
+  color = "default",
+  children
+}) {
+  const colorTokens = useColorTokens();
+  const badgeProps = useMemo(() => {
+    if (color === "default") {
+      return {
+        status: "default",
+        text: children
+      };
+    }
+    if (colorTokens.has(color)) {
+      return {
+        status: processing ? "processing" : "default",
+        color: colorTokens.get(color),
+        text: children
+      };
+    }
+    throw new Error(`Invalid color value "${color}" of VefStatus component. Color must be either "default" or a valid color token.`);
+  }, [
+    color,
+    colorTokens,
+    processing,
+    children
+  ]);
+  return /* @__PURE__ */ jsx(Badge, { ...badgeProps });
+}
+
+export { VefStatus as default };

package/esm/vef-status/props.js

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

package/esm/vef-table/components/columns/bool.js

@@ -0,0 +1,92 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { VefError, isString, isNullish, isDeepEqual } from '@vef-framework/shared';
+import { useMemo, memo } from 'react';
+import VefText from '../../../vef-text/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+
+"use strict";
+function Bool({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Boolean") {
+    throw new VefError(-1, "Column type must be Boolean");
+  }
+  const {
+    defaultValue,
+    trueText = "是",
+    falseText = "否",
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorOrMapping] = useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const colorToUse = useMemo(() => {
+    if (isString(colorOrMapping)) {
+      return colorOrMapping;
+    }
+    if (colorOrMapping) {
+      if (!isNullish(value) && Object.hasOwn(colorOrMapping, value)) {
+        return colorOrMapping[value];
+      } else {
+        return colorOrMapping["*"];
+      }
+    }
+  }, [colorOrMapping, value]);
+  const valueToDisplay = useMemo(() => {
+    if (value) {
+      return value ? trueText : falseText;
+    }
+    return defaultValue;
+  }, [
+    value,
+    trueText,
+    falseText,
+    defaultValue
+  ]);
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsx(
+    VefText,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+const BoolMemo = memo(Bool, isDeepEqual);
+
+export { BoolMemo as default };

package/esm/vef-table/components/columns/code.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+
+"use strict";
+function Code({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { Code as default };