@vef-framework/components 1.0.127 → 1.0.129

package/esm/vef-checkbox/index.js

@@ -1,89 +1,4 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { themeVariables, isFunction } from '@vef-framework/shared';
-import { Checkbox } from 'antd';
-import { useMemo, memo, forwardRef } from 'react';
-import VefLoadingPlaceholder from '../vef-loading-placeholder/index.js';
-import VefTooltip from '../vef-tooltip/index.js';
-import { useCheckboxInstance } from './hooks/use-checkbox-instance.js';
-import { useDataOptions } from './hooks/use-data-options.js';
-
-"use strict";
-const { Group } = Checkbox;
-const loadingPlaceholder = /* @__PURE__ */ jsx(
-  "div",
-  {
-    css: css`
-      height: ${themeVariables.controlHeight}
-    `,
-    children: /* @__PURE__ */ jsx(VefLoadingPlaceholder, {})
-  }
-);
-function VefCheckboxBase({
-  defaultValue,
-  value,
-  disabled,
-  renderCheckboxes,
-  onChange,
-  ...restProps
-}, ref) {
-  const {
-    optionsMap,
-    normalizedOptions,
-    isLoading
-  } = useDataOptions({
-    value,
-    onChange,
-    ...restProps
-  });
-  const checkboxRef = useCheckboxInstance(ref, normalizedOptions);
-  const handleChange = useMemo(() => {
-    if (isFunction(onChange)) {
-      return (value2) => {
-        onChange(value2, value2.map((option) => optionsMap.get(option)));
-      };
-    }
-  }, [onChange, optionsMap]);
-  const content = useMemo(() => {
-    if (isLoading) {
-      return;
-    }
-    const checkboxes = normalizedOptions.map((option) => {
-      const {
-        value: value2,
-        label,
-        disabled: disabled2,
-        description
-      } = option;
-      if (description) {
-        return /* @__PURE__ */ jsx(VefTooltip, { content: description, children: /* @__PURE__ */ jsx(Checkbox, { disabled: disabled2, value: value2, children: label }) }, value2);
-      }
-      return /* @__PURE__ */ jsx(Checkbox, { disabled: disabled2, value: value2, children: label }, value2);
-    });
-    if (isFunction(renderCheckboxes)) {
-      return renderCheckboxes(checkboxes);
-    }
-    return checkboxes;
-  }, [isLoading, normalizedOptions, renderCheckboxes]);
-  if (isLoading) {
-    return loadingPlaceholder;
-  }
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      ref: checkboxRef,
-      defaultValue,
-      disabled,
-      onChange: handleChange,
-      ...value === void 0 ? {} : { value },
-      children: content
-    }
-  );
-}
-const VefCheckbox = memo(
-  forwardRef(VefCheckboxBase)
-);
-VefCheckbox.displayName = "VefCheckbox";
-
-export { VefCheckbox as default };
+import{jsx as e}from"@emotion/react/jsx-runtime";import{css as M}from"@emotion/react";import{themeVariables as N,isFunction as p}from"@vef-framework/shared";import{Checkbox as l}from"antd";import{useMemo as h,memo as O,forwardRef as R}from"react";import $ from"../vef-loading-placeholder/index.js";import j from"../vef-tooltip/index.js";import{useCheckboxInstance as w}from"./hooks/use-checkbox-instance.js";import{useDataOptions as z}from"./hooks/use-data-options.js";const{Group:D}=l,E=e("div",{css:M`
+      height: ${N.controlHeight}
+    `,children:e($,{})});function F({defaultValue:v,value:n,disabled:C,renderCheckboxes:t,onChange:r,...g},x){const{optionsMap:m,normalizedOptions:a,isLoading:s}=z({value:n,onChange:r,...g}),k=w(x,a),V=h(()=>{if(p(r))return o=>{r(o,o.map(d=>m.get(d)))}},[r,m]),y=h(()=>{if(s)return;const o=a.map(d=>{const{value:i,label:u,disabled:c,description:f}=d;return f?e(j,{content:f,children:e(l,{disabled:c,value:i,children:u})},i):e(l,{disabled:c,value:i,children:u},i)});return p(t)?t(o):o},[s,a,t]);return s?E:e(D,{ref:k,defaultValue:v,disabled:C,onChange:V,...n===void 0?{}:{value:n},children:y})}const b=O(R(F));b.displayName="VefCheckbox";export{b as default};

package/esm/vef-code-editor/hooks/use-change-handler.js

@@ -1,11 +1,2 @@
 "use strict";
-import { useCallback } from 'react';
-
-"use strict";
-function useChangeHandler(onChange) {
-  return useCallback((value) => {
-    onChange?.(value);
-  }, [onChange]);
-}
-
-export { useChangeHandler };
+import{useCallback as t}from"react";function n(e){return t(r=>{e?.(r)},[e])}export{n as useChangeHandler};

package/esm/vef-code-editor/hooks/use-config-extensions.js

@@ -1,49 +1,2 @@
 "use strict";
-import { EditorState } from '@codemirror/state';
-import { useMemo } from 'react';
-
-"use strict";
-const chinesePhrases = {
-  // @codemirror/view
-  "Control character": "控制字符",
-  // @codemirror/commands
-  "Selection deleted": "选择已删除",
-  // @codemirror/language
-  "Folded lines": "折叠的行",
-  "Unfolded lines": "展开的行",
-  "to": "到",
-  "folded code": "折叠的代码",
-  "unfold": "展开",
-  "Fold line": "折叠行",
-  "Unfold line": "展开行",
-  // @codemirror/search
-  "Go to line": "跳转到行",
-  "go": "确定",
-  "Find": "查找",
-  "Replace": "替换",
-  "next": "下一个",
-  "previous": "上一个",
-  "all": "全部",
-  "match case": "大小写匹配",
-  "by word": "整个单词",
-  "replace": "替换",
-  "replace all": "全部替换",
-  "regexp": "正则匹配",
-  "close": "关闭",
-  "current match": "当前匹配",
-  "replaced $ matches": "$ 个匹配已替换",
-  "replaced match on line $": "行 $ 的匹配已替换",
-  "on line": "在行",
-  // @codemirror/autocomplete
-  "Completions": "补全",
-  // @codemirror/lint
-  "Diagnostics": "诊断",
-  "No diagnostics": "没有诊断"
-};
-function useConfigExtensions() {
-  return useMemo(() => [
-    EditorState.phrases.of(chinesePhrases)
-  ], []);
-}
-
-export { useConfigExtensions };
+import{EditorState as e}from"@codemirror/state";import{useMemo as o}from"react";const n={"Control character":"控制字符","Selection deleted":"选择已删除","Folded lines":"折叠的行","Unfolded lines":"展开的行",to:"到","folded code":"折叠的代码",unfold:"展开","Fold line":"折叠行","Unfold line":"展开行","Go to line":"跳转到行",go:"确定",Find:"查找",Replace:"替换",next:"下一个",previous:"上一个",all:"全部","match case":"大小写匹配","by word":"整个单词",replace:"替换","replace all":"全部替换",regexp:"正则匹配",close:"关闭","current match":"当前匹配","replaced $ matches":"$ 个匹配已替换","replaced match on line $":"行 $ 的匹配已替换","on line":"在行",Completions:"补全",Diagnostics:"诊断","No diagnostics":"没有诊断"};function l(){return o(()=>[e.phrases.of(n)],[])}export{l as useConfigExtensions};

package/esm/vef-code-editor/hooks/use-height-props.js

@@ -1,21 +1,2 @@
 "use strict";
-import { getStringLength, isNullish } from '@vef-framework/shared';
-import { useMemo } from 'react';
-
-"use strict";
-function useHeightProps(height, maxHeight, minHeight) {
-  return useMemo(() => {
-    const props = {
-      height: getStringLength(height)
-    };
-    if (!isNullish(minHeight)) {
-      props.minHeight = getStringLength(minHeight);
-    }
-    if (!isNullish(maxHeight)) {
-      props.maxHeight = getStringLength(maxHeight);
-    }
-    return props;
-  }, [height, maxHeight, minHeight]);
-}
-
-export { useHeightProps };
+import{getStringLength as e,isNullish as s}from"@vef-framework/shared";import{useMemo as g}from"react";function h(o,t,r){return g(()=>{const i={height:e(o)};return s(r)||(i.minHeight=e(r)),s(t)||(i.maxHeight=e(t)),i},[o,t,r])}export{h as useHeightProps};

package/esm/vef-code-editor/hooks/use-language-extensions.js

@@ -1,118 +1,2 @@
 "use strict";
-import { json, jsonParseLinter, jsonLanguage } from '@codemirror/lang-json';
-import { yaml, yamlLanguage } from '@codemirror/lang-yaml';
-import { linter } from '@codemirror/lint';
-import { hoverTooltip } from '@codemirror/view';
-import { loadLanguage } from '@uiw/codemirror-extensions-langs';
-import { isString, isEmpty, isObject, isJsonSchemaValid } from '@vef-framework/shared';
-import { json5, json5ParseLinter, json5Language } from 'codemirror-json5';
-import { jsonSchemaLinter, handleRefresh, jsonCompletion, jsonSchemaHover, stateExtensions } from 'codemirror-json-schema';
-import { json5SchemaLinter, json5Completion, json5SchemaHover } from 'codemirror-json-schema/json5';
-import { yamlSchemaLinter, yamlCompletion, yamlSchemaHover } from 'codemirror-json-schema/yaml';
-import { useMemo } from 'react';
-
-"use strict";
-function useLanguageExtensions(language, jsonSchema) {
-  const extensions = useMemo(() => {
-    if (!language) {
-      return [];
-    }
-    const extensions2 = loadLanguageExtensions(language, jsonSchema);
-    if (extensions2.length === 0) {
-      const lang = loadLanguage(language);
-      if (!lang) {
-        console.warn(`Language ${language} is not supported by VefCodeEditor`);
-        return [];
-      }
-      extensions2.push(lang);
-    }
-    return extensions2;
-  }, [jsonSchema, language]);
-  return extensions;
-}
-function loadLanguageExtensions(language, jsonSchema) {
-  if (language === "json") {
-    const extensions = [
-      json(),
-      linter(
-        jsonParseLinter(),
-        {
-          delay: 300
-        }
-      )
-    ];
-    if (isString(jsonSchema) && !isEmpty(jsonSchema) || isObject(jsonSchema)) {
-      if (isString(jsonSchema) && !isJsonSchemaValid(jsonSchema)) {
-        console.warn(`JSON schema is invalid: ${jsonSchema}`);
-        return extensions;
-      }
-      extensions.push(
-        linter(
-          jsonSchemaLinter(),
-          {
-            needsRefresh: handleRefresh
-          }
-        ),
-        jsonLanguage.data.of({
-          autocomplete: jsonCompletion()
-        }),
-        hoverTooltip(jsonSchemaHover()),
-        stateExtensions(isString(jsonSchema) ? JSON.parse(jsonSchema) : jsonSchema)
-      );
-    }
-    return extensions;
-  } else if (language === "yaml") {
-    const extensions = [
-      yaml()
-    ];
-    if (isString(jsonSchema) && !isEmpty(jsonSchema) || isObject(jsonSchema)) {
-      if (isString(jsonSchema) && !isJsonSchemaValid(jsonSchema)) {
-        console.warn(`JSON schema is invalid: ${jsonSchema}`);
-        return extensions;
-      }
-      extensions.push(
-        linter(
-          yamlSchemaLinter(),
-          {
-            needsRefresh: handleRefresh
-          }
-        ),
-        yamlLanguage.data.of({
-          autocomplete: yamlCompletion()
-        }),
-        hoverTooltip(yamlSchemaHover()),
-        stateExtensions(isString(jsonSchema) ? JSON.parse(jsonSchema) : jsonSchema)
-      );
-    }
-    return extensions;
-  } else if (language === "json5") {
-    const extensions = [
-      json5(),
-      linter(
-        json5ParseLinter(),
-        {
-          delay: 300
-        }
-      )
-    ];
-    if (isString(jsonSchema) && !isEmpty(jsonSchema) || isObject(jsonSchema)) {
-      extensions.push(
-        linter(
-          json5SchemaLinter(),
-          {
-            needsRefresh: handleRefresh
-          }
-        ),
-        json5Language.data.of({
-          autocomplete: json5Completion()
-        }),
-        hoverTooltip(json5SchemaHover()),
-        stateExtensions(isString(jsonSchema) ? JSON.parse(jsonSchema) : jsonSchema)
-      );
-    }
-    return extensions;
-  }
-  return [];
-}
-
-export { useLanguageExtensions };
+import{json as l,jsonParseLinter as c,jsonLanguage as h}from"@codemirror/lang-json";import{yaml as d,yamlLanguage as j}from"@codemirror/lang-yaml";import{linter as t}from"@codemirror/lint";import{hoverTooltip as s}from"@codemirror/view";import{loadLanguage as g}from"@uiw/codemirror-extensions-langs";import{isString as e,isEmpty as a,isObject as i,isJsonSchemaValid as p}from"@vef-framework/shared";import{json5 as S,json5ParseLinter as L,json5Language as y}from"codemirror-json5";import{jsonSchemaLinter as v,handleRefresh as m,jsonCompletion as J,jsonSchemaHover as O,stateExtensions as f}from"codemirror-json-schema";import{json5SchemaLinter as N,json5Completion as C,json5SchemaHover as E}from"codemirror-json-schema/json5";import{yamlSchemaLinter as R,yamlCompletion as w,yamlSchemaHover as x}from"codemirror-json-schema/yaml";import{useMemo as H}from"react";function $(n,o){return H(()=>{if(!n)return[];const r=b(n,o);if(r.length===0){const u=g(n);if(!u)return console.warn(`Language ${n} is not supported by VefCodeEditor`),[];r.push(u)}return r},[o,n])}function b(n,o){if(n==="json"){const r=[l(),t(c(),{delay:300})];if(e(o)&&!a(o)||i(o)){if(e(o)&&!p(o))return console.warn(`JSON schema is invalid: ${o}`),r;r.push(t(v(),{needsRefresh:m}),h.data.of({autocomplete:J()}),s(O()),f(e(o)?JSON.parse(o):o))}return r}else if(n==="yaml"){const r=[d()];if(e(o)&&!a(o)||i(o)){if(e(o)&&!p(o))return console.warn(`JSON schema is invalid: ${o}`),r;r.push(t(R(),{needsRefresh:m}),j.data.of({autocomplete:w()}),s(x()),f(e(o)?JSON.parse(o):o))}return r}else if(n==="json5"){const r=[S(),t(L(),{delay:300})];return(e(o)&&!a(o)||i(o))&&r.push(t(N(),{needsRefresh:m}),y.data.of({autocomplete:C()}),s(E()),f(e(o)?JSON.parse(o):o)),r}return[]}export{$ as useLanguageExtensions};

package/esm/vef-code-editor/hooks/use-setup-options.js

@@ -1,38 +1,2 @@
 "use strict";
-import { useMemo } from 'react';
-
-"use strict";
-function useSetupOptions(tabSize, showLineNumbers) {
-  return useMemo(
-    () => ({
-      tabSize,
-      allowMultipleSelections: true,
-      autocompletion: true,
-      bracketMatching: true,
-      closeBrackets: true,
-      closeBracketsKeymap: true,
-      highlightActiveLine: true,
-      highlightActiveLineGutter: true,
-      highlightSelectionMatches: true,
-      completionKeymap: true,
-      drawSelection: true,
-      history: true,
-      historyKeymap: true,
-      highlightSpecialChars: true,
-      indentOnInput: true,
-      lintKeymap: true,
-      rectangularSelection: true,
-      searchKeymap: true,
-      syntaxHighlighting: true,
-      crosshairCursor: true,
-      defaultKeymap: true,
-      dropCursor: true,
-      foldGutter: true,
-      foldKeymap: true,
-      lineNumbers: showLineNumbers
-    }),
-    [tabSize, showLineNumbers]
-  );
-}
-
-export { useSetupOptions };
+import{useMemo as i}from"react";function o(e,t){return i(()=>({tabSize:e,allowMultipleSelections:!0,autocompletion:!0,bracketMatching:!0,closeBrackets:!0,closeBracketsKeymap:!0,highlightActiveLine:!0,highlightActiveLineGutter:!0,highlightSelectionMatches:!0,completionKeymap:!0,drawSelection:!0,history:!0,historyKeymap:!0,highlightSpecialChars:!0,indentOnInput:!0,lintKeymap:!0,rectangularSelection:!0,searchKeymap:!0,syntaxHighlighting:!0,crosshairCursor:!0,defaultKeymap:!0,dropCursor:!0,foldGutter:!0,foldKeymap:!0,lineNumbers:t}),[e,t])}export{o as useSetupOptions};

package/esm/vef-code-editor/index.js

@@ -1,58 +1,2 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { materialLight } from '@uiw/codemirror-theme-material';
-import CodeMirror from '@uiw/react-codemirror';
-import { useMemo, memo } from 'react';
-import { useChangeHandler } from './hooks/use-change-handler.js';
-import { useConfigExtensions } from './hooks/use-config-extensions.js';
-import { useHeightProps } from './hooks/use-height-props.js';
-import { useLanguageExtensions } from './hooks/use-language-extensions.js';
-import { useSetupOptions } from './hooks/use-setup-options.js';
-import { editorStyle } from './styles.js';
-
-"use strict";
-function VefCodeEditorBase({
-  value,
-  language,
-  disabled,
-  height = 320,
-  minHeight,
-  maxHeight,
-  placeholder,
-  tabSize = 4,
-  autoFocus,
-  jsonSchema,
-  onChange,
-  showLineNumbers = true
-}) {
-  const configExtensions = useConfigExtensions();
-  const languageExtensions = useLanguageExtensions(language, jsonSchema);
-  const extensions = useMemo(() => [
-    ...configExtensions,
-    ...languageExtensions
-  ], [configExtensions, languageExtensions]);
-  const heightProps = useHeightProps(height, maxHeight, minHeight);
-  const handleChange = useChangeHandler(onChange);
-  const setupOptions = useSetupOptions(tabSize, showLineNumbers);
-  return /* @__PURE__ */ jsx(
-    CodeMirror,
-    {
-      indentWithTab: true,
-      autoFocus,
-      basicSetup: setupOptions,
-      css: editorStyle,
-      editable: !disabled,
-      extensions,
-      placeholder,
-      theme: materialLight,
-      value,
-      width: "auto",
-      onChange: handleChange,
-      ...heightProps
-    }
-  );
-}
-const VefCodeEditor = memo(VefCodeEditorBase);
-VefCodeEditor.displayName = "VefCodeEditor";
-
-export { VefCodeEditor as default };
+import{jsx as C}from"@emotion/react/jsx-runtime";import{materialLight as S}from"@uiw/codemirror-theme-material";import E from"@uiw/react-codemirror";import{useMemo as H,memo as L}from"react";import{useChangeHandler as j}from"./hooks/use-change-handler.js";import{useConfigExtensions as v}from"./hooks/use-config-extensions.js";import{useHeightProps as w}from"./hooks/use-height-props.js";import{useLanguageExtensions as y}from"./hooks/use-language-extensions.js";import{useSetupOptions as F}from"./hooks/use-setup-options.js";import{editorStyle as N}from"./styles.js";function O({value:i,language:r,disabled:m,height:s=320,minHeight:a,maxHeight:n,placeholder:u,tabSize:p=4,autoFocus:h,jsonSchema:l,onChange:f,showLineNumbers:d=!0}){const e=v(),o=y(r,l),g=H(()=>[...e,...o],[e,o]),c=w(s,n,a),b=j(f),x=F(p,d);return C(E,{indentWithTab:!0,autoFocus:h,basicSetup:x,css:N,editable:!m,extensions:g,placeholder:u,theme:S,value:i,width:"auto",onChange:b,...c})}const t=L(O);t.displayName="VefCodeEditor";export{t as default};

package/esm/vef-code-editor/styles.js

@@ -1,120 +1,116 @@
 "use strict";
-import { css } from '@emotion/react';
-import { themeVariables } from '@vef-framework/shared';
-
-"use strict";
-const editorStyle = css`
+import{css as r}from"@emotion/react";import{themeVariables as o}from"@vef-framework/shared";const e=r`
   & > .cm-editor {
-    border-width: ${themeVariables.lineWidth};
-    border-style: ${themeVariables.lineType};
-    border-radius: ${themeVariables.borderRadius};
+    border-width: ${o.lineWidth};
+    border-style: ${o.lineType};
+    border-radius: ${o.borderRadius};
     overflow: hidden;
 
     &:not(.cm-focused) {
-      border-color: ${themeVariables.colorBorder};
+      border-color: ${o.colorBorder};
 
       &:hover {
-        border-color: ${themeVariables.colorPrimaryHover};
+        border-color: ${o.colorPrimaryHover};
       }
     }
 
     &.cm-focused {
       outline: none;
-      border-color: ${themeVariables.colorPrimary};
+      border-color: ${o.colorPrimary};
       box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
     }
 
     .cm-tooltip {
       background-color: "#f5f5f5";
-      border: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
-      border-radius: ${themeVariables.borderRadius};
-      box-shadow: ${themeVariables.boxShadowSecondary};
-      padding: ${themeVariables.paddingXxs};
+      border: ${o.lineWidth} ${o.lineType} ${o.colorBorder};
+      border-radius: ${o.borderRadius};
+      box-shadow: ${o.boxShadowSecondary};
+      padding: ${o.paddingXxs};
 
       &.cm-tooltip-autocomplete {
         & > ul > li {
-          border-radius: ${themeVariables.borderRadiusSm};
-          padding: ${themeVariables.paddingXxs};
+          border-radius: ${o.borderRadiusSm};
+          padding: ${o.paddingXxs};
 
           &[aria-selected="true"] {
-            background-color: ${themeVariables.colorPrimary};
+            background-color: ${o.colorPrimary};
           }
         }
       }
 
       .cm-tooltip-section:not(:first-of-type) {
-        border-top: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
+        border-top: ${o.lineWidth} ${o.lineType} ${o.colorBorder};
       }
 
       .cm-tooltip-arrow::before {
-        border-top-color: ${themeVariables.colorBorder};
-        border-bottom-color: ${themeVariables.colorBorder};
+        border-top-color: ${o.colorBorder};
+        border-bottom-color: ${o.colorBorder};
       }
     }
 
     .cm-panels-bottom {
-      border-top: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
+      border-top: ${o.lineWidth} ${o.lineType} ${o.colorBorder};
 
       /* Search panel style */
       .cm-panel.cm-search {
-        background-color: ${themeVariables.colorBgContainer};
-        padding: ${themeVariables.paddingXs} ${themeVariables.paddingSm};
+        background-color: ${o.colorBgContainer};
+        padding: ${o.paddingXs} ${o.paddingSm};
         display: flex;
         flex-wrap: wrap;
-        gap: ${themeVariables.marginXs};
+        gap: ${o.marginXs};
         align-items: center;
 
         /* Close button */
         button[name="close"] {
           position: absolute;
-          right: ${themeVariables.paddingXs};
-          top: ${themeVariables.paddingXs};
+          right: ${o.paddingXs};
+          top: ${o.paddingXs};
           background: transparent;
           border: none;
           cursor: pointer;
-          color: ${themeVariables.colorTextSecondary};
-          font-size: ${themeVariables.fontSizeSm};
+          color: ${o.colorTextSecondary};
+          font-size: ${o.fontSizeSm};
           padding: 0 6px;
-          border-radius: ${themeVariables.borderRadiusSm};
+          border-radius: ${o.borderRadiusSm};
 
           &:hover {
-            color: ${themeVariables.colorPrimary};
-            background-color: ${themeVariables.colorBgTextHover};
+            color: ${o.colorPrimary};
+            background-color: ${o.colorBgTextHover};
           }
         }
 
         /* Input style */
         input.cm-textfield {
-          border: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
-          border-radius: ${themeVariables.borderRadius};
-          padding: ${themeVariables.paddingXs} ${themeVariables.paddingSm};
-          font-size: ${themeVariables.fontSize};
+          border: ${o.lineWidth} ${o.lineType} ${o.colorBorder};
+          border-radius: ${o.borderRadius};
+          padding: ${o.paddingXs} ${o.paddingSm};
+          font-size: ${o.fontSize};
           outline: none;
           width: 200px;
 
           &:focus {
-            border-color: ${themeVariables.colorPrimary};
+            border-color: ${o.colorPrimary};
             box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
           }
         }
 
         /* Button style */
         button.cm-button {
-          background-color: ${themeVariables.colorBgContainer};
-          border: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
-          border-radius: ${themeVariables.borderRadiusSm};
-          padding: ${themeVariables.paddingXs} ${themeVariables.paddingSm};
-          font-size: ${themeVariables.fontSizeSm};
+          background-color: ${o.colorBgContainer};
+          border: ${o.lineWidth} ${o.lineType} ${o.colorBorder};
+          border-radius: ${o.borderRadiusSm};
+          padding: ${o.paddingXs} ${o.paddingSm};
+          font-size: ${o.fontSizeSm};
           cursor: pointer;
-          color: ${themeVariables.colorText};
+          color: ${o.colorText};
 
           &:hover {
-            background-color: ${themeVariables.colorBgTextHover};
-            border-color: ${themeVariables.colorPrimaryHover};
+            background-color: ${o.colorBgTextHover};
+            border-color: ${o.colorPrimaryHover};
           }
 
           &:active {
-            background-color: ${themeVariables.colorBgTextActive};
+            background-color: ${o.colorBgTextActive};
           }
         }
 
@@ -123,12 +119,12 @@ const editorStyle = css`
           display: flex;
           align-items: center;
           gap: 4px;
-          font-size: ${themeVariables.fontSizeSm};
-          color: ${themeVariables.colorTextSecondary};
+          font-size: ${o.fontSizeSm};
+          color: ${o.colorTextSecondary};
           cursor: pointer;
 
           &:hover {
-            color: ${themeVariables.colorPrimary};
+            color: ${o.colorPrimary};
           }
 
           input[type="checkbox"] {
@@ -139,6 +135,4 @@ const editorStyle = css`
       }
     }
   }
-`;
-
-export { editorStyle };
+`;export{e as editorStyle};

package/esm/vef-col/index.js

@@ -1,12 +1,2 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Col } from 'antd';
-
-"use strict";
-function VefCol({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Col, { ...props });
-}
-
-export { VefCol as default };
+import{jsx as t}from"@emotion/react/jsx-runtime";import{Col as o}from"antd";function e({...r}){return t(o,{...r})}export{e as default};

package/esm/vef-color-picker/index.js

@@ -1,47 +1,2 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { isFunction } from '@vef-framework/shared';
-import { ColorPicker } from 'antd';
-import { useMemo } from 'react';
-import '../internal/index.js';
-import { convertBasicSizeToUiSize } from '../internal/utils.js';
-
-"use strict";
-const mode = ["single", "gradient"];
-function VefColorPicker({
-  clearable,
-  disabled,
-  format,
-  size,
-  showText,
-  trigger,
-  defaultValue,
-  value,
-  onChange
-}) {
-  const handleChange = useMemo(() => {
-    if (isFunction(onChange)) {
-      return (color) => {
-        onChange(color.toCssString(), color);
-      };
-    }
-  }, [onChange]);
-  return /* @__PURE__ */ jsx(
-    ColorPicker,
-    {
-      allowClear: clearable,
-      arrow: false,
-      defaultValue,
-      disabled,
-      format,
-      mode,
-      showText,
-      size: convertBasicSizeToUiSize(size),
-      trigger,
-      value,
-      onChangeComplete: handleChange
-    }
-  );
-}
-
-export { VefColorPicker as default };
+import{jsx as f}from"@emotion/react/jsx-runtime";import{isFunction as c}from"@vef-framework/shared";import{ColorPicker as d}from"antd";import{useMemo as g}from"react";import"../internal/index.js";import{convertBasicSizeToUiSize as p}from"../internal/utils.js";const C=["single","gradient"];function h({clearable:o,disabled:t,format:i,size:a,showText:s,trigger:l,defaultValue:m,value:n,onChange:e}){const u=g(()=>{if(c(e))return r=>{e(r.toCssString(),r)}},[e]);return f(d,{allowClear:o,arrow:!1,defaultValue:m,disabled:t,format:i,mode:C,showText:s,size:p(a),trigger:l,value:n,onChangeComplete:u})}export{h as default};