@vef-framework/components 1.0.122 → 1.0.124

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

@@ -0,0 +1,58 @@
+"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 };

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

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

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

@@ -0,0 +1,144 @@
+"use strict";
+import { css } from '@emotion/react';
+import { themeVariables } from '@vef-framework/shared';
+
+"use strict";
+const editorStyle = css`
+  & > .cm-editor {
+    border-width: ${themeVariables.lineWidth};
+    border-style: ${themeVariables.lineType};
+    border-radius: ${themeVariables.borderRadius};
+    overflow: hidden;
+
+    &:not(.cm-focused) {
+      border-color: ${themeVariables.colorBorder};
+
+      &:hover {
+        border-color: ${themeVariables.colorPrimaryHover};
+      }
+    }
+
+    &.cm-focused {
+      outline: none;
+      border-color: ${themeVariables.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};
+
+      &.cm-tooltip-autocomplete {
+        & > ul > li {
+          border-radius: ${themeVariables.borderRadiusSm};
+          padding: ${themeVariables.paddingXxs};
+
+          &[aria-selected="true"] {
+            background-color: ${themeVariables.colorPrimary};
+          }
+        }
+      }
+
+      .cm-tooltip-section:not(:first-of-type) {
+        border-top: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
+      }
+
+      .cm-tooltip-arrow::before {
+        border-top-color: ${themeVariables.colorBorder};
+        border-bottom-color: ${themeVariables.colorBorder};
+      }
+    }
+
+    .cm-panels-bottom {
+      border-top: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorder};
+
+      /* Search panel style */
+      .cm-panel.cm-search {
+        background-color: ${themeVariables.colorBgContainer};
+        padding: ${themeVariables.paddingXs} ${themeVariables.paddingSm};
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${themeVariables.marginXs};
+        align-items: center;
+
+        /* Close button */
+        button[name="close"] {
+          position: absolute;
+          right: ${themeVariables.paddingXs};
+          top: ${themeVariables.paddingXs};
+          background: transparent;
+          border: none;
+          cursor: pointer;
+          color: ${themeVariables.colorTextSecondary};
+          font-size: ${themeVariables.fontSizeSm};
+          padding: 0 6px;
+          border-radius: ${themeVariables.borderRadiusSm};
+
+          &:hover {
+            color: ${themeVariables.colorPrimary};
+            background-color: ${themeVariables.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};
+          outline: none;
+          width: 200px;
+
+          &:focus {
+            border-color: ${themeVariables.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};
+          cursor: pointer;
+          color: ${themeVariables.colorText};
+
+          &:hover {
+            background-color: ${themeVariables.colorBgTextHover};
+            border-color: ${themeVariables.colorPrimaryHover};
+          }
+
+          &:active {
+            background-color: ${themeVariables.colorBgTextActive};
+          }
+        }
+
+        /* Checkbox style */
+        label {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: ${themeVariables.fontSizeSm};
+          color: ${themeVariables.colorTextSecondary};
+          cursor: pointer;
+
+          &:hover {
+            color: ${themeVariables.colorPrimary};
+          }
+
+          input[type="checkbox"] {
+            margin: 0;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export { editorStyle };

package/esm/vef-col/index.js

@@ -0,0 +1,12 @@
+"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 };

package/esm/vef-col/props.js

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

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

@@ -0,0 +1,47 @@
+"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 };

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

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

package/esm/vef-compact/index.js

@@ -0,0 +1,16 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Space } from 'antd';
+import '../internal/index.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const { Compact } = Space;
+function VefCompact({
+  size,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(Compact, { size: convertBasicSizeToUiSize(size), ...restProps });
+}
+
+export { VefCompact as default };

package/esm/vef-compact/props.js

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

package/esm/vef-config-provider/global-style.js

@@ -0,0 +1,182 @@
+"use strict";
+import { css } from '@emotion/react';
+import { themeVariables } from '@vef-framework/shared';
+import normalizedStyle from '../internal/modern-normalize.css.js';
+
+"use strict";
+const globalStyle = css`
+  ${normalizedStyle}
+  
+  html, body, #root, .vef-app {
+    height: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+
+  .vef-message {
+    .vef-message-notice-wrapper {
+      .vef-message-custom-content {
+        .vef-icon {
+          font-size: ${themeVariables.fontSizeXl};
+        }
+      }
+    }
+  }
+
+  .vef-modal {
+    --vef-modal-confirm-icon-margin-inline-end: ${themeVariables.paddingSm};
+
+    .vef-modal-confirm-body-wrapper {
+      .vef-modal-confirm-btns {
+        text-align: initial;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+  }
+
+  .vef-tree-select-dropdown {
+    .vef-select-tree {
+      .vef-select-tree-checkbox {
+        margin-top: calc(var(--vef-tree-select-title-height) / 4);
+      }
+    }
+  }
+
+  .vef-popconfirm {
+    .vef-popconfirm-message {
+      > .vef-popconfirm-message-icon {
+        .vef-icon {
+          color: ${themeVariables.colorPrimary};
+          font-size: ${themeVariables.fontSizeLg};
+        }
+      }
+    }
+    .vef-popconfirm-buttons {
+      text-align: initial;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .vef-modal-root {
+    > .vef-modal-wrap {
+      overflow: hidden !important;
+
+      .vef-modal {
+        .vef-modal-content {
+          .vef-modal-footer {
+            text-align: initial;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: ${themeVariables.padding};
+
+            .vef-btn + .vef-btn {
+              margin-inline-start: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .vef-picker-range {
+    display: flex;
+  }
+
+  .vef-dropdown {
+    .vef-dropdown-menu {
+      .vef-dropdown-menu-item-icon {
+        font-size: ${themeVariables.fontSize};
+        min-width: ${themeVariables.fontSizeLg};
+      }
+    }
+  }
+`;
+const nprogressStyle = css`
+  /* Make clicks pass-through */
+  #nprogress {
+    pointer-events: none;
+  }
+
+  #nprogress .bar {
+    background: ${themeVariables.colorPrimary};
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+  }
+
+  /* Fancy blur effect */
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px ${themeVariables.colorPrimary}, 0 0 5px ${themeVariables.colorPrimary};
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0, -4px);
+        -ms-transform: rotate(3deg) translate(0, -4px);
+            transform: rotate(3deg) translate(0, -4px);
+  }
+
+  /* Remove these to get rid of the spinner */
+  #nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+  }
+
+  #nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: ${themeVariables.colorPrimary};
+    border-left-color: ${themeVariables.colorPrimary};
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+            animation: nprogress-spinner 400ms linear infinite;
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .nprogress-custom-parent #nprogress .spinner,
+  .nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+  }
+
+  @-webkit-keyframes nprogress-spinner {
+    0%   { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+  @keyframes nprogress-spinner {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+
+export { globalStyle, nprogressStyle };

package/esm/vef-config-provider/hooks/use-ui-config.js

@@ -0,0 +1,127 @@
+"use strict";
+import { useDeepMemo } from '@vef-framework/hooks';
+import { isValidColor, assign } from '@vef-framework/shared';
+import { theme } from 'antd';
+import locale from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import dayjsLocale from 'dayjs/locale/zh-cn';
+
+"use strict";
+dayjs.locale(dayjsLocale);
+const colorMap = {
+  blue: "#3b82f6",
+  purple: "#8b5cf6",
+  cyan: "#06b6d4",
+  green: "#22c55e",
+  pink: "#ec4899",
+  red: "#ef4444",
+  orange: "#f97316",
+  yellow: "#eab308",
+  volcano: "#f43f5e",
+  lime: "#84cc16",
+  gold: "#fbbf24",
+  geekblue: "#6366f1",
+  magenta: "#eb2f96"
+};
+const fontSizeConfigMap = {
+  medium: {
+    fontSize: 14,
+    controlHeight: 32
+  },
+  large: {
+    fontSize: 16,
+    controlHeight: 36
+  }
+};
+const fontSizeComponentsConfigMap = {
+  medium: {
+    Button: {
+      contentFontSizeSM: 12
+    }
+  },
+  large: {
+    Button: {
+      contentFontSizeSM: 14
+    },
+    Menu: {
+      itemHeight: 50
+    }
+  }
+};
+function generateUiConfig({
+  primaryColor = "#0064fa",
+  fontSize = "medium"
+}) {
+  if (!Reflect.has(colorMap, primaryColor) && !isValidColor(primaryColor)) {
+    throw new Error(`Invalid primary color: ${primaryColor}`);
+  }
+  if (!(fontSize in fontSizeConfigMap)) {
+    throw new Error(`Invalid font size: ${fontSize}`);
+  }
+  const fontSizeConfig = fontSizeConfigMap[fontSize];
+  const componentsConfig = fontSizeComponentsConfigMap[fontSize];
+  return {
+    messageFoldThreshold: 1,
+    messageDuration: 3,
+    notificationFoldThreshold: 3,
+    notificationDuration: 5,
+    locale: Reflect.has(locale, "default") ? Reflect.get(locale, "default") : locale,
+    iconPrefixCls: "vef-icon",
+    prefixCls: "vef",
+    virtual: true,
+    componentSize: "middle",
+    variant: "outlined",
+    theme: {
+      cssVar: {
+        prefix: "vef"
+      },
+      hashed: false,
+      algorithm: theme.defaultAlgorithm,
+      token: {
+        borderRadius: 6,
+        colorBgBase: "#ffffff",
+        colorPrimary: Reflect.has(colorMap, primaryColor) ? colorMap[primaryColor] : primaryColor,
+        colorInfo: "#0ea5e9",
+        colorSuccess: "#22c55e",
+        colorWarning: "#f97316",
+        colorError: "#ef4444",
+        colorLink: "#6366f1",
+        colorTextBase: "#171717",
+        colorBgLayout: "#f5f6fb",
+        colorBgSpotlight: "rgba(23, 23, 23, 0.8)",
+        zIndexPopupBase: 10,
+        wireframe: true,
+        ...fontSizeConfig,
+        ...colorMap
+      },
+      components: assign({
+        Table: {
+          // headerBorderRadius: 0,
+        },
+        Tooltip: {
+          paddingSM: 16,
+          paddingXS: 12
+        },
+        Button: {
+          // onlyIconSize: 24,
+          // onlyIconSizeSM: 18,
+          // onlyIconSizeLG: 30,
+        },
+        TreeSelect: {
+          titleHeight: fontSizeConfig.controlHeight
+        },
+        Spin: {
+          contentHeight: "auto"
+        }
+      }, componentsConfig)
+    }
+  };
+}
+function useUiConfig(config) {
+  return useDeepMemo(
+    () => generateUiConfig(config),
+    [config]
+  );
+}
+
+export { useUiConfig };