@vef-framework/components 1.0.62 → 1.0.64

package/lib/vef-button/index.cjs

@@ -1,3 +1,156 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),n=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),i=require("react"),t=require("../vef-popconfirm/index.cjs"),r=require("../vef-tooltip/index.cjs"),a=require("./components/base-button.cjs"),f=i.forwardRef((({tip:f,onClick:s,disabled:l=!1,loading:c,...m},u)=>{const[d,C]=i.useState(!1),p=i.useMemo((()=>{if(m.requireConfirmation){const{onConfirmationOk:e}=m;return o.isNullish(c)?async()=>{await o.invokeMaybeAsyncFn(e,{beforeInvoke:()=>{C(!0)},onFinally:()=>{C(!1)}})}:e}}),[m.requireConfirmation,m.onConfirmationOk]),k=i.useMemo((()=>{if(!m.requireConfirmation)return s&&o.isNullish(c)?async e=>{await o.invokeMaybeAsyncFn(s,{beforeInvoke:()=>{C(!0)},onFinally:()=>{C(!1)}},e)}:s;const{confirmationMode:e="simple",confirmationTitle:n=o.defaultMessageTitle,confirmationContent:i,onConfirmationCancel:t}=m;return"simple"===e?e=>{e.stopPropagation()}:e=>{e.stopPropagation(),o.showConfirmation(n,i,p,{onCancel:t})}}),[c,s,p,m.requireConfirmation,m.confirmationMode,m.confirmationTitle,m.confirmationContent,m.onConfirmationCancel]),q=n.useContextDisabled()||l,b=e.jsx(a.default,{ref:u,disabled:q,loading:c??d,onClick:k,...o.omit(m,["requireConfirmation","confirmationMode","confirmationTitle","confirmationContent","onConfirmationOk","onConfirmationCancel"])}),M=f?e.jsx(r.default,{content:f,children:b}):b;if(m.requireConfirmation&&"simple"===m.confirmationMode){const{confirmationTitle:n=o.defaultMessageTitle,confirmationContent:i,onConfirmationCancel:r}=m;return e.jsx(t.default,{ref:u,content:i,disabled:q,title:n,onCancel:r,onOk:p,children:M})}return M})),s=i.memo(f);s.displayName="VefButton",exports.default=s;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index$1 = require('../vef-popconfirm/index.cjs');
+const index = require('../vef-tooltip/index.cjs');
+const baseButton = require('./components/base-button.cjs');
+
+const VefButtonBase = react.forwardRef(({
+  tip,
+  onClick,
+  disabled = false,
+  loading,
+  ...restProps
+}, ref) => {
+  const [isLoading, setIsLoading] = react.useState(false);
+  const onConfirmationOkToUse = react.useMemo(
+    () => {
+      if (restProps.requireConfirmation) {
+        const { onConfirmationOk } = restProps;
+        return shared.isNullish(loading) ? async () => {
+          await shared.invokeMaybeAsyncFn(
+            onConfirmationOk,
+            {
+              beforeInvoke: () => {
+                setIsLoading(true);
+              },
+              onFinally: () => {
+                setIsLoading(false);
+              }
+            }
+          );
+        } : onConfirmationOk;
+      }
+    },
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [restProps.requireConfirmation, restProps.onConfirmationOk]
+  );
+  const onClickToUse = react.useMemo(
+    () => {
+      if (!restProps.requireConfirmation) {
+        if (onClick && shared.isNullish(loading)) {
+          return async (event) => {
+            await shared.invokeMaybeAsyncFn(
+              onClick,
+              {
+                beforeInvoke: () => {
+                  setIsLoading(true);
+                },
+                onFinally: () => {
+                  setIsLoading(false);
+                }
+              },
+              event
+            );
+          };
+        } else {
+          return onClick;
+        }
+      }
+      const {
+        confirmationMode = "simple",
+        confirmationTitle = shared.defaultMessageTitle,
+        confirmationContent,
+        onConfirmationCancel
+      } = restProps;
+      if (confirmationMode === "simple") {
+        return (event) => {
+          event.stopPropagation();
+        };
+      }
+      return (event) => {
+        event.stopPropagation();
+        shared.showConfirmation(
+          confirmationTitle,
+          confirmationContent,
+          onConfirmationOkToUse,
+          {
+            onCancel: onConfirmationCancel
+          }
+        );
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      loading,
+      onClick,
+      onConfirmationOkToUse,
+      restProps.requireConfirmation,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.confirmationMode,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.confirmationTitle,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.confirmationContent,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.onConfirmationCancel
+    ]
+  );
+  const contextDisabled = hooks.useContextDisabled();
+  const buttonDisabled = contextDisabled || disabled;
+  const buttonNode = /* @__PURE__ */ jsxRuntime.jsx(
+    baseButton.default,
+    {
+      ref,
+      disabled: buttonDisabled,
+      loading: loading ?? isLoading,
+      onClick: onClickToUse,
+      ...shared.omit(restProps, [
+        "requireConfirmation",
+        "confirmationMode",
+        "confirmationTitle",
+        "confirmationContent",
+        "onConfirmationOk",
+        "onConfirmationCancel"
+      ])
+    }
+  );
+  const buttonNodeMaybeWithTip = tip ? /* @__PURE__ */ jsxRuntime.jsx(index.default, { content: tip, children: buttonNode }) : buttonNode;
+  if (restProps.requireConfirmation && restProps.confirmationMode === "simple") {
+    const {
+      confirmationTitle = shared.defaultMessageTitle,
+      confirmationContent,
+      onConfirmationCancel
+    } = restProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        ref,
+        content: confirmationContent,
+        disabled: buttonDisabled,
+        title: confirmationTitle,
+        onCancel: onConfirmationCancel,
+        onOk: onConfirmationOkToUse,
+        children: buttonNodeMaybeWithTip
+      }
+    );
+  }
+  return buttonNodeMaybeWithTip;
+});
+const VefButton = react.memo(VefButtonBase);
+VefButton.displayName = "VefButton";
+
+exports.default = VefButton;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-button/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-card/index.cjs

@@ -1,3 +1,30 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared"),t=require("antd");exports.default=function({size:i="medium",showHoverEffect:o=!1,actions:s,nested:u=!1,...a}){return e.jsx(t.Card,{actions:r.isArray(s)?s:s?[s]:void 0,hoverable:o,size:"medium"===i?"default":i,type:u?"inner":void 0,...a})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+
+function VefCard({
+  size = "medium",
+  showHoverEffect = false,
+  actions,
+  nested = false,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Card,
+    {
+      actions: shared.isArray(actions) ? actions : actions ? [actions] : void 0,
+      hoverable: showHoverEffect,
+      size: size === "medium" ? "default" : size,
+      type: nested ? "inner" : void 0,
+      ...restProps
+    }
+  );
+}
+
+exports.default = VefCard;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-card/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-card-meta/index.cjs

@@ -1,3 +1,17 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("antd"),{Meta:r}=t.Card;exports.default=function({...t}){return e.jsx(r,{...t})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+
+const { Meta: CardMeta } = antd.Card;
+function VefCardMeta({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CardMeta, { ...props });
+}
+
+exports.default = VefCardMeta;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-card-meta/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-checkbox/hooks/use-checkbox-instance.cjs

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useCheckboxInstance=function(t,r){const u=e.useRef(null);return e.useImperativeHandle(t,(()=>({blur:()=>{u.current?.blur()},focus:()=>{u.current?.focus({preventScroll:!0})},getDataOptions:()=>r}))),u};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useCheckboxInstance(ref, dataOptions) {
+  const checkboxRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => {
+      checkboxRef.current?.blur();
+    },
+    focus: () => {
+      checkboxRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return checkboxRef;
+}
+
+exports.useCheckboxInstance = useCheckboxInstance;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-checkbox/hooks/use-data-options.cjs

@@ -1,3 +1,45 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),t=require("react");exports.useDataOptions=function({value:i,onChange:s,...r}){const{normalizedOptions:n,defaultOption:u,isLoading:a}=e.useComputedOptions({...r,isGrouped:!1,filterable:!1,selectedOptionValues:i}),l=t.useMemo((()=>n.reduce(((e,o)=>(e.set(o.value,o),e)),new Map)),[n]);return t.useLayoutEffect((()=>{u&&o.isFunction(s)&&o.isNullish(i)&&s([u.value],[u])}),[u,s,i]),{optionsMap:l,normalizedOptions:n,isLoading:a}};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useDataOptions({
+  value,
+  onChange,
+  ...rest
+}) {
+  const {
+    normalizedOptions,
+    defaultOption,
+    isLoading
+  } = hooks.useComputedOptions({
+    ...rest,
+    isGrouped: false,
+    filterable: false,
+    selectedOptionValues: value
+  });
+  const optionsMap = react.useMemo(() => normalizedOptions.reduce((map, option) => {
+    map.set(option.value, option);
+    return map;
+  }, /* @__PURE__ */ new Map()), [normalizedOptions]);
+  react.useLayoutEffect(() => {
+    if (defaultOption && shared.isFunction(onChange) && shared.isNullish(value)) {
+      onChange(
+        [defaultOption.value],
+        [defaultOption]
+      );
+    }
+  }, [defaultOption, onChange, value]);
+  return {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  };
+}
+
+exports.useDataOptions = useDataOptions;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-checkbox/index.cjs

@@ -1,5 +1,93 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),o=require("@vef-framework/shared"),i=require("antd"),s=require("react"),n=require("../vef-loading-placeholder/index.cjs"),t=require("../vef-tooltip/index.cjs"),a=require("./hooks/use-checkbox-instance.cjs"),u=require("./hooks/use-data-options.cjs"),{Group:c}=i.Checkbox,d=e.jsx("div",{css:r.css`
-      height: ${o.themeVariables.controlHeight}
-    `,children:e.jsx(n.default,{})});const l=s.memo(s.forwardRef((function({defaultValue:r,value:n,disabled:l,renderCheckboxes:h,onChange:x,...f},b){const{optionsMap:p,normalizedOptions:m,isLoading:v}=u.useDataOptions({value:n,onChange:x,...f}),j=a.useCheckboxInstance(b,m),g=s.useMemo((()=>{if(o.isFunction(x))return e=>{x(e,e.map((e=>p.get(e))))}}),[x,p]),k=s.useMemo((()=>{if(v)return;const r=m.map((r=>{const{value:o,label:s,disabled:n,description:a}=r;return a?e.jsx(t.default,{content:a,children:e.jsx(i.Checkbox,{disabled:n,value:o,children:s})},o):e.jsx(i.Checkbox,{disabled:n,value:o,children:s},o)}));return o.isFunction(h)?h(r):r}),[v,m,h]);return v?d:e.jsx(c,{ref:j,defaultValue:r,disabled:l,onChange:g,...void 0===n?{}:{value:n},children:k})})));l.displayName="VefCheckbox",exports.default=l;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+const index = require('../vef-loading-placeholder/index.cjs');
+const index$1 = require('../vef-tooltip/index.cjs');
+const useCheckboxInstance = require('./hooks/use-checkbox-instance.cjs');
+const useDataOptions = require('./hooks/use-data-options.cjs');
+
+const { Group } = antd.Checkbox;
+const loadingPlaceholder = /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    css: react.css`
+      height: ${shared.themeVariables.controlHeight}
+    `,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.default, {})
+  }
+);
+function VefCheckboxBase({
+  defaultValue,
+  value,
+  disabled,
+  renderCheckboxes,
+  onChange,
+  ...restProps
+}, ref) {
+  const {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  } = useDataOptions.useDataOptions({
+    value,
+    onChange,
+    ...restProps
+  });
+  const checkboxRef = useCheckboxInstance.useCheckboxInstance(ref, normalizedOptions);
+  const handleChange = react$1.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return (value2) => {
+        onChange(value2, value2.map((option) => optionsMap.get(option)));
+      };
+    }
+  }, [onChange, optionsMap]);
+  const content = react$1.useMemo(() => {
+    if (isLoading) {
+      return;
+    }
+    const checkboxes = 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.Checkbox, { disabled: disabled2, value: value2, children: label }) }, value2);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Checkbox, { disabled: disabled2, value: value2, children: label }, value2);
+    });
+    if (shared.isFunction(renderCheckboxes)) {
+      return renderCheckboxes(checkboxes);
+    }
+    return checkboxes;
+  }, [isLoading, normalizedOptions, renderCheckboxes]);
+  if (isLoading) {
+    return loadingPlaceholder;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Group,
+    {
+      ref: checkboxRef,
+      defaultValue,
+      disabled,
+      onChange: handleChange,
+      ...value === void 0 ? {} : { value },
+      children: content
+    }
+  );
+}
+const VefCheckbox = react$1.memo(
+  react$1.forwardRef(VefCheckboxBase)
+);
+VefCheckbox.displayName = "VefCheckbox";
+
+exports.default = VefCheckbox;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-checkbox/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-col/index.cjs

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("antd");exports.default=function({...r}){return e.jsx(t.Col,{...r})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+
+function VefCol({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { ...props });
+}
+
+exports.default = VefCol;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-col/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-color-picker/index.cjs

@@ -1,3 +1,51 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared"),t=require("antd"),i=require("react");require("../internal/index.cjs");const o=require("../internal/utils.cjs"),a=["single","gradient"];exports.default=function({clearable:n,disabled:s,format:l,size:u,showText:c,trigger:d,defaultValue:g,value:f,onChange:m}){const x=i.useMemo((()=>{if(r.isFunction(m))return e=>{m(e.toCssString(),e)}}),[m]);return e.jsx(t.ColorPicker,{allowClear:n,arrow:!1,defaultValue:g,disabled:s,format:l,mode:a,showText:c,size:o.convertBasicSizeToUiSize(u),trigger:d,value:f,onChangeComplete:x})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+require('../internal/index.cjs');
+const utils = require('../internal/utils.cjs');
+
+const mode = ["single", "gradient"];
+function VefColorPicker({
+  clearable,
+  disabled,
+  format,
+  size,
+  showText,
+  trigger,
+  defaultValue,
+  value,
+  onChange
+}) {
+  const handleChange = react.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return (color) => {
+        onChange(color.toCssString(), color);
+      };
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.ColorPicker,
+    {
+      allowClear: clearable,
+      arrow: false,
+      defaultValue,
+      disabled,
+      format,
+      mode,
+      showText,
+      size: utils.convertBasicSizeToUiSize(size),
+      trigger,
+      value,
+      onChangeComplete: handleChange
+    }
+  );
+}
+
+exports.default = VefColorPicker;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-color-picker/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-compact/index.cjs

@@ -1,3 +1,20 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("antd");require("../internal/index.cjs");const i=require("../internal/utils.cjs"),{Compact:r}=t.Space;exports.default=function({size:t,...n}){return e.jsx(r,{size:i.convertBasicSizeToUiSize(t),...n})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+require('../internal/index.cjs');
+const utils = require('../internal/utils.cjs');
+
+const { Compact } = antd.Space;
+function VefCompact({
+  size,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Compact, { size: utils.convertBasicSizeToUiSize(size), ...restProps });
+}
+
+exports.default = VefCompact;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-compact/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-config-provider/global-style.cjs

@@ -1,6 +1,14 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react"),r=require("@vef-framework/shared"),t=require("../internal/modern-normalize.css.cjs"),o=e.css`
-  ${t.default}
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const modernNormalize = require('../internal/modern-normalize.css.cjs');
+
+const globalStyle = react.css`
+  ${modernNormalize.default}
   
   html, body, #root, .vef-app {
     height: 100%;
@@ -19,14 +27,14 @@
     .vef-message-notice-wrapper {
       .vef-message-custom-content {
         .vef-icon {
-          font-size: ${r.themeVariables.fontSizeXl};
+          font-size: ${shared.themeVariables.fontSizeXl};
         }
       }
     }
   }
 
   .vef-modal {
-    --vef-modal-confirm-icon-margin-inline-end: ${r.themeVariables.paddingSm};
+    --vef-modal-confirm-icon-margin-inline-end: ${shared.themeVariables.paddingSm};
 
     .vef-modal-confirm-body-wrapper {
       .vef-modal-confirm-btns {
@@ -50,8 +58,8 @@
     .vef-popconfirm-message {
       > .vef-popconfirm-message-icon {
         .vef-icon {
-          color: ${r.themeVariables.colorPrimary};
-          font-size: ${r.themeVariables.fontSizeLg};
+          color: ${shared.themeVariables.colorPrimary};
+          font-size: ${shared.themeVariables.fontSizeLg};
         }
       }
     }
@@ -74,7 +82,7 @@
             display: flex;
             justify-content: flex-end;
             align-items: center;
-            gap: ${r.themeVariables.padding};
+            gap: ${shared.themeVariables.padding};
 
             .vef-btn + .vef-btn {
               margin-inline-start: 0;
@@ -92,19 +100,20 @@
   .vef-dropdown {
     .vef-dropdown-menu {
       .vef-dropdown-menu-item-icon {
-        font-size: ${r.themeVariables.fontSize};
-        min-width: ${r.themeVariables.fontSizeLg};
+        font-size: ${shared.themeVariables.fontSize};
+        min-width: ${shared.themeVariables.fontSizeLg};
       }
     }
   }
-`,i=e.css`
+`;
+const nprogressStyle = react.css`
   /* Make clicks pass-through */
   #nprogress {
     pointer-events: none;
   }
 
   #nprogress .bar {
-    background: ${r.themeVariables.colorPrimary};
+    background: ${shared.themeVariables.colorPrimary};
 
     position: fixed;
     z-index: 1031;
@@ -122,7 +131,7 @@
     right: 0;
     width: 100px;
     height: 100%;
-    box-shadow: 0 0 10px ${r.themeVariables.colorPrimary}, 0 0 5px ${r.themeVariables.colorPrimary};
+    box-shadow: 0 0 10px ${shared.themeVariables.colorPrimary}, 0 0 5px ${shared.themeVariables.colorPrimary};
     opacity: 1.0;
 
     -webkit-transform: rotate(3deg) translate(0, -4px);
@@ -145,8 +154,8 @@
     box-sizing: border-box;
 
     border: solid 2px transparent;
-    border-top-color: ${r.themeVariables.colorPrimary};
-    border-left-color: ${r.themeVariables.colorPrimary};
+    border-top-color: ${shared.themeVariables.colorPrimary};
+    border-left-color: ${shared.themeVariables.colorPrimary};
     border-radius: 50%;
 
     -webkit-animation: nprogress-spinner 400ms linear infinite;
@@ -171,5 +180,8 @@
     0%   { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
-`;exports.globalStyle=o,exports.nprogressStyle=i;
+`;
+
+exports.globalStyle = globalStyle;
+exports.nprogressStyle = nprogressStyle;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */