@vef-framework/components 1.0.122 → 1.0.123

package/cjs/vef-radio/index.cjs

@@ -0,0 +1,93 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react$1 = require('react');
+require('../internal/index.cjs');
+var index = require('../vef-loading-placeholder/index.cjs');
+var index$1 = require('../vef-tooltip/index.cjs');
+var useDataOptions = require('./hooks/use-data-options.cjs');
+var useRadioInstance = require('./hooks/use-radio-instance.cjs');
+var utils = require('../internal/utils.cjs');
+
+"use strict";
+const { Group } = antd.Radio;
+const loadingPlaceholder = /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    css: react.css`
+      height: ${shared.themeVariables.controlHeight}
+    `,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.default, {})
+  }
+);
+function VefRadioBase({
+  defaultValue,
+  value,
+  disabled,
+  block,
+  variant,
+  buttonVariant,
+  buttonSize,
+  onChange,
+  ...restProps
+}, ref) {
+  const {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  } = useDataOptions.useDataOptions({
+    value,
+    onChange,
+    ...restProps
+  });
+  const radioRef = useRadioInstance.useRadioInstance(ref, normalizedOptions);
+  const handleChange = react$1.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return ({ target: { value: value2 } }) => {
+        onChange(value2, optionsMap.get(value2));
+      };
+    }
+  }, [onChange, optionsMap]);
+  if (isLoading) {
+    return loadingPlaceholder;
+  }
+  const radios = normalizedOptions.map((option) => {
+    const {
+      value: value2,
+      label,
+      disabled: disabled2,
+      description
+    } = option;
+    if (description) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { content: description, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Radio, { disabled: disabled2, value: value2, children: label }) }, value2);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Radio, { disabled: disabled2, value: value2, children: label }, value2);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Group,
+    {
+      ref: radioRef,
+      block,
+      buttonStyle: buttonVariant,
+      defaultValue,
+      disabled,
+      optionType: variant,
+      size: utils.convertBasicSizeToUiSize(buttonSize),
+      onChange: handleChange,
+      ...value === void 0 ? {} : { value },
+      children: radios
+    }
+  );
+}
+const VefRadio = react$1.memo(
+  react$1.forwardRef(VefRadioBase)
+);
+VefRadio.displayName = "VefRadio";
+
+exports.default = VefRadio;

package/cjs/vef-radio/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-rate/hooks/use-rate-instance.cjs

@@ -0,0 +1,16 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+"use strict";
+function useRateInstance(ref) {
+  const rateRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => rateRef.current?.blur(),
+    focus: () => rateRef.current?.focus()
+  }));
+  return rateRef;
+}
+
+exports.useRateInstance = useRateInstance;

package/cjs/vef-rate/index.cjs

@@ -0,0 +1,35 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react = require('react');
+var useRateInstance = require('./hooks/use-rate-instance.cjs');
+
+"use strict";
+const VefRate = react.forwardRef(({
+  character,
+  ...restProps
+}, ref) => {
+  const characterValue = react.useMemo(() => {
+    if (shared.isFunction(character)) {
+      return ({ index }) => character(index);
+    }
+    return character;
+  }, [character]);
+  const rateRef = useRateInstance.useRateInstance(ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Rate,
+    {
+      ref: rateRef,
+      character: characterValue,
+      ...restProps
+    }
+  );
+});
+VefRate.displayName = "VefRate";
+
+exports.default = VefRate;

package/cjs/vef-rate/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-responsive-container/index.cjs

@@ -0,0 +1,62 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var react$2 = require('motion/react');
+var react$1 = require('react');
+var index = require('../vef-responsive-item/index.cjs');
+
+"use strict";
+const containerStyle = react.css`
+  display: grid;
+  grid-template-columns: repeat(var(--vef-responsive-container-auto-mode), minmax(var(--vef-responsive-container-base-width), 1fr));
+  gap: var(--vef-responsive-container-gap);
+`;
+const VefResponsiveContainerBase = react$1.forwardRef(({
+  style,
+  baseItemWidth = 320,
+  autoExpand = true,
+  gap = 0,
+  children,
+  ...restProps
+}, ref) => {
+  if (baseItemWidth % 2 !== 0) {
+    throw new Error("VefResponsiveContainer: baseItemWidth must be an even number.");
+  }
+  react$1.Children.forEach(children, (child) => {
+    if (!react$1.isValidElement(child) || child.type !== index.default) {
+      throw new Error("VefResponsiveContainer: children must be a VefResponsiveItem element.");
+    }
+  });
+  const normalizeGapSize = hooks.useGapSizeNormalizer();
+  const normalizedGap = react$1.useMemo(() => {
+    if (shared.isArray(gap)) {
+      return gap.map((it) => normalizeGapSize(it)).join(" ");
+    }
+    return normalizeGapSize(gap);
+  }, [gap, normalizeGapSize]);
+  const mergedStyle = react$1.useMemo(() => {
+    const autoMode = autoExpand ? "auto-fit" : "auto-fill";
+    return {
+      ...style,
+      "--vef-responsive-container-auto-mode": autoMode,
+      "--vef-responsive-container-base-width": `${baseItemWidth / 2}px`,
+      "--vef-responsive-container-gap": normalizedGap
+    };
+  }, [
+    autoExpand,
+    baseItemWidth,
+    normalizedGap,
+    style
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.motion.div, { ref, css: containerStyle, style: mergedStyle, ...restProps, children });
+});
+const VefResponsiveContainer = react$1.memo(VefResponsiveContainerBase);
+VefResponsiveContainer.displayName = "VefResponsiveContainer";
+
+exports.default = VefResponsiveContainer;

package/cjs/vef-responsive-container/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-responsive-item/index.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var react$2 = require('motion/react');
+var react$1 = require('react');
+
+"use strict";
+const itemStyle = react.css`
+  grid-column: span var(--vef-responsive-item-span);
+`;
+const VefResponsiveItem = react$1.forwardRef(({
+  style,
+  span = 1,
+  children,
+  ...restProps
+}, ref) => {
+  const mergedStyle = react$1.useMemo(() => ({
+    ...style,
+    "--vef-responsive-item-span": span * 2
+  }), [span, style]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.motion.div, { ref, css: itemStyle, style: mergedStyle, ...restProps, children });
+});
+VefResponsiveItem.displayName = "VefResponsiveItem";
+
+exports.default = VefResponsiveItem;

package/cjs/vef-responsive-item/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-ribbon/index.cjs

@@ -0,0 +1,43 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@vef-framework/hooks');
+var antd = require('antd');
+var react = require('react');
+
+"use strict";
+const { Ribbon } = antd.Badge;
+function VefRibbon({
+  color,
+  position = "right",
+  children
+}) {
+  const colorTokens = hooks.useColorTokens();
+  const ribbonProps = react.useMemo(() => {
+    if (!color) {
+      return {
+        placement: position === "right" ? "end" : "start",
+        text: children
+      };
+    }
+    if (colorTokens.has(color)) {
+      return {
+        color: color ? colorTokens.get(color) : void 0,
+        placement: position === "right" ? "end" : "start",
+        text: children
+      };
+    }
+    throw new Error(`Invalid color value "${color}" of VefRibbon component. Color must be a valid color token.`);
+  }, [
+    children,
+    color,
+    colorTokens,
+    position
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Ribbon, { ...ribbonProps });
+}
+
+exports.default = VefRibbon;

package/cjs/vef-ribbon/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-row/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+
+"use strict";
+function VefRow({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { ...props });
+}
+VefRow.displayName = "VefRow";
+
+exports.default = VefRow;

package/cjs/vef-row/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-scroll-area/components/scrollbar.cjs

@@ -0,0 +1,64 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var reactScrollArea = require('@radix-ui/react-scroll-area');
+var shared = require('@vef-framework/shared');
+var react$1 = require('react');
+
+"use strict";
+const scrollbarStyle = react.css`
+  --vef-scroll-area-scrollbar-padding: 2px;
+
+  display: flex;
+  touch-action: none;
+  user-select: none;
+`;
+const verticalScrollbarStyle = react.css`
+  height: 100%;
+  width: var(--vef-scroll-area-scrollbar-size);
+  border-left-width: 1px;
+  border-left-color: transparent;
+  padding: var(--vef-scroll-area-scrollbar-padding);
+`;
+const horizontalScrollbarStyle = react.css`
+  flex-direction: column;
+  height: var(--vef-scroll-area-scrollbar-size);
+  border-top-width: 1px;
+  border-top-color: transparent;
+  padding: var(--vef-scroll-area-scrollbar-padding);
+`;
+const thumbStyle = react.css`
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  border-radius: calc(var(--vef-scroll-area-scrollbar-size) - var(--vef-scroll-area-scrollbar-padding) * 2);
+  background-color: hsl(240 5.9% 90%);
+  transition-property: background-color;
+  transition-timing-function: ${shared.themeVariables.motionEaseInOutCirc};
+  transition-duration: ${shared.themeVariables.motionDurationMid};
+
+  &:hover {
+    background-color: hsl(240 5.9% 84%);
+  }
+`;
+const VefScrollbar = react$1.forwardRef(({ orientation = "vertical", ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  reactScrollArea.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    css: [
+      scrollbarStyle,
+      orientation === "vertical" && verticalScrollbarStyle,
+      orientation === "horizontal" && horizontalScrollbarStyle
+    ],
+    ...restProps,
+    children: /* @__PURE__ */ jsxRuntime.jsx(reactScrollArea.ScrollAreaThumb, { css: thumbStyle })
+  }
+));
+VefScrollbar.displayName = "VefScrollbar";
+
+exports.default = VefScrollbar;

package/cjs/vef-scroll-area/index.cjs

@@ -0,0 +1,82 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var reactScrollArea = require('@radix-ui/react-scroll-area');
+var shared = require('@vef-framework/shared');
+var react$1 = require('react');
+var scrollbar = require('./components/scrollbar.cjs');
+
+"use strict";
+const scrollAreaStyle = react.css`
+  position: relative;
+  overflow: hidden;
+  height: var(--vef-scroll-area-height, 100%);
+  width: var(--vef-scroll-area-width, auto);
+`;
+const viewportStyle = react.css`
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  -webkit-overflow-scrolling: touch;
+`;
+const VefScrollArea = react$1.forwardRef(({
+  style,
+  height,
+  width,
+  scrollDirection = "y",
+  scrollbarSize = "medium",
+  autoHideScrollbar = true,
+  viewportClassName,
+  viewportStyle: externalViewportStyle,
+  viewportRef,
+  onScroll,
+  children,
+  ...restProps
+}, ref) => {
+  const scrollAreaDynamicStyle = react$1.useMemo(() => ({
+    ...style,
+    "--vef-scroll-area-height": (shared.isNumber(height) ? `${height}px` : height) ?? "100%",
+    "--vef-scroll-area-width": (shared.isNumber(width) ? `${width}px` : width) ?? "auto"
+  }), [height, style, width]);
+  const scrollbarSizeStyle = react$1.useMemo(() => ({
+    "--vef-scroll-area-scrollbar-size": scrollbarSize === "small" ? "10px" : scrollbarSize === "medium" ? "12px" : "14px"
+  }), [scrollbarSize]);
+  const viewportInlineStyle = react$1.useMemo(() => ({
+    ...externalViewportStyle,
+    overflowX: `${scrollDirection === "x" || scrollDirection === "both" ? "scroll" : "hidden"}`,
+    overflowY: `${scrollDirection === "y" || scrollDirection === "both" ? "scroll" : "hidden"}`
+  }), [scrollDirection, externalViewportStyle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactScrollArea.Root,
+    {
+      ref,
+      css: scrollAreaStyle,
+      style: scrollAreaDynamicStyle,
+      type: autoHideScrollbar ? "hover" : "auto",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactScrollArea.Viewport,
+          {
+            ref: viewportRef,
+            className: viewportClassName,
+            css: viewportStyle,
+            style: viewportInlineStyle,
+            onScroll,
+            children
+          }
+        ),
+        (scrollDirection === "y" || scrollDirection === "both") && /* @__PURE__ */ jsxRuntime.jsx(scrollbar.default, { orientation: "vertical", style: scrollbarSizeStyle }),
+        (scrollDirection === "x" || scrollDirection === "both") && /* @__PURE__ */ jsxRuntime.jsx(scrollbar.default, { orientation: "horizontal", style: scrollbarSizeStyle }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactScrollArea.Corner, {})
+      ]
+    }
+  );
+});
+VefScrollArea.displayName = "VefScrollArea";
+
+exports.default = VefScrollArea;

package/cjs/vef-scroll-area/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-segment/index.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+require('../internal/index.cjs');
+var utils = require('../internal/utils.cjs');
+
+"use strict";
+function VefSegment({
+  className,
+  style,
+  defaultValue,
+  value,
+  size,
+  orientation = "horizontal",
+  shape = "default",
+  items,
+  onChange,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Segmented,
+    {
+      className,
+      defaultValue,
+      options: items,
+      shape: shape === "rounded" ? "round" : "default",
+      size: utils.convertBasicSizeToUiSize(size),
+      style,
+      value,
+      vertical: orientation === "vertical",
+      onChange,
+      ...restProps
+    }
+  );
+}
+
+exports.default = VefSegment;

package/cjs/vef-segment/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-select/components/option.cjs

@@ -0,0 +1,34 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var react$1 = require('react');
+var index = require('../../vef-text/index.cjs');
+
+"use strict";
+const optionWithDescriptionStyle = react.css`
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+
+  > .vef-typography-secondary {
+    font-size: ${shared.themeVariables.fontSizeSm};
+  }
+`;
+function VefOption({ label, description }) {
+  if (description) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: optionWithDescriptionStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.default, { ellipsis: true, ellipsisTipPlacement: "right", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.default, { ellipsis: true, color: "secondary", ellipsisTipPlacement: "right", children: description })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { ellipsis: true, ellipsisTipPlacement: "right", children: label });
+}
+const VefOptionMemo = react$1.memo(VefOption);
+VefOptionMemo.displayName = "VefOption";
+
+exports.default = VefOptionMemo;

package/cjs/vef-select/hooks/use-data-options.cjs

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

package/cjs/vef-select/hooks/use-field-names.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+"use strict";
+function useFieldNames(grouped) {
+  return react.useMemo(() => {
+    if (grouped) {
+      return {
+        label: "label",
+        value: "value",
+        options: "children",
+        groupLabel: "label"
+      };
+    }
+    return {
+      label: "label",
+      value: "value"
+    };
+  }, [grouped]);
+}
+
+exports.useFieldNames = useFieldNames;

package/cjs/vef-select/hooks/use-render-label.cjs

@@ -0,0 +1,32 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var Icon = require('@ant-design/icons');
+var react = require('@emotion/react');
+var react$1 = require('react');
+var index = require('../../vef-spin/index.cjs');
+
+"use strict";
+const loadingPlaceholderStyle = react.css`
+  display: inline-flex;
+  align-items: center;
+
+  .vef-spin {
+    color: inherit;
+  }
+`;
+function useRenderLabel(isFallbackOptionsLoading, fallbackOptions) {
+  return react$1.useCallback(({ label, value }) => {
+    if (label) {
+      return label;
+    }
+    if (isFallbackOptionsLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { css: loadingPlaceholderStyle, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { indicator: /* @__PURE__ */ jsxRuntime.jsx(Icon.LoadingOutlined, {}), size: "small" }) });
+    }
+    const fallbackOption = fallbackOptions?.find((option) => option.value === value);
+    return fallbackOption?.label ?? value;
+  }, [isFallbackOptionsLoading, fallbackOptions]);
+}
+
+exports.useRenderLabel = useRenderLabel;