antd-solid 0.0.11 → 0.0.13

package/es/Compact/index.js

@@ -0,0 +1,32 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from 'solid-js';
+import cs from 'classnames';
+import Element from '../Element/index.js';
+import './index.scss.js';
+import CompactContext from './context.js';
+
+function Compact(_props) {
+  const props = mergeProps({
+    direction: 'horizontal'
+  }, _props);
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs('ant-compact', `ant-compact-${props.direction}`, props.block ? 'flex w-full' : 'inline-flex', props.class);
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return createComponent(CompactContext.Provider, {
+        value: {
+          compact: true
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+}
+
+export { Compact as default };

package/es/Compact/index.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ant-compact:not(.ant-compact-vertical) > *:not(:first-child) {\n  margin-left: -1px;\n}\n.ant-compact.ant-compact-vertical {\n  flex-direction: column;\n}\n.ant-compact.ant-compact-vertical > *:not(:first-child) {\n  margin-top: -1px;\n}\n\n.ant-compact :hover,\n.ant-compact :focus,\n.ant-compact :focus-within {\n  z-index: 10;\n}\n.ant-compact > :not(:first-child).ant-compact-item, .ant-compact > :not(:first-child) .ant-compact-item {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.ant-compact > :not(:last-child).ant-compact-item, .ant-compact > :not(:last-child) .ant-compact-item {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/ConfigProvider/context.d.ts

@@ -0,0 +1,11 @@
+import { type Accessor } from 'solid-js';
+import { type CssVariables } from './types';
+import { type Locale } from '../locale';
+declare const ConfigProviderContext: import("solid-js").Context<{
+    theme: Accessor<"light" | "dark">;
+    cssVariablesClass: string;
+    cssVariables: Accessor<CssVariables>;
+    componentSize: Accessor<"small" | "middle" | "large">;
+    locale: Accessor<Locale>;
+}>;
+export default ConfigProviderContext;

package/es/ConfigProvider/context.js

@@ -0,0 +1,15 @@
+import { createContext } from 'solid-js';
+import { createCssVariables, getCssVariablesClass } from './utils/index.js';
+import { lightSeedToken } from './seed.js';
+import locale from '../locale/zh_CN.js';
+
+const defaultCssVariables = createCssVariables(lightSeedToken);
+const ConfigProviderContext = createContext({
+  theme: () => 'light',
+  cssVariablesClass: getCssVariablesClass(),
+  cssVariables: () => defaultCssVariables,
+  componentSize: () => 'middle',
+  locale: () => locale
+});
+
+export { ConfigProviderContext as default };

package/es/ConfigProvider/dark/colorAlgorithm.d.ts

@@ -0,0 +1,2 @@
+export declare const getAlphaColor: (baseColor: string, alpha: number) => string;
+export declare const getSolidColor: (baseColor: string, brightness: number) => string;

package/es/ConfigProvider/dark/colorAlgorithm.js

@@ -0,0 +1,9 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+const getAlphaColor = (baseColor, alpha) => new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+const getSolidColor = (baseColor, brightness) => {
+  const instance = new TinyColor(baseColor);
+  return instance.lighten(brightness).toHexString();
+};
+
+export { getAlphaColor, getSolidColor };

package/es/ConfigProvider/dark/colors.d.ts

@@ -0,0 +1,3 @@
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../types';
+export declare const generateColorPalettes: GenerateColorMap;
+export declare const generateNeutralColorPalettes: GenerateNeutralColorMap;

package/es/ConfigProvider/dark/colors.js

@@ -0,0 +1,47 @@
+import { generate } from '@ant-design/colors';
+import { getAlphaColor, getSolidColor } from './colorAlgorithm.js';
+
+const generateColorPalettes = baseColor => {
+  const colors = generate(baseColor, {
+    theme: 'dark'
+  });
+  return {
+    1: colors[0],
+    2: colors[1],
+    3: colors[2],
+    4: colors[3],
+    5: colors[6],
+    6: colors[5],
+    7: colors[4],
+    8: colors[6],
+    9: colors[5],
+    10: colors[4]
+  };
+};
+const generateNeutralColorPalettes = (bgBaseColor, textBaseColor) => {
+  const colorBgBase = bgBaseColor || '#000';
+  const colorTextBase = textBaseColor || '#fff';
+  return {
+    colorBgBase,
+    colorTextBase,
+    colorText: getAlphaColor(colorTextBase, 0.85),
+    colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
+    colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
+    colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
+    colorFill: getAlphaColor(colorTextBase, 0.18),
+    colorFillSecondary: getAlphaColor(colorTextBase, 0.12),
+    colorFillTertiary: getAlphaColor(colorTextBase, 0.08),
+    colorFillQuaternary: getAlphaColor(colorTextBase, 0.04),
+    colorBgElevated: getSolidColor(colorBgBase, 12),
+    colorBgContainer: getSolidColor(colorBgBase, 8),
+    colorBgContainerSecondary: getSolidColor(colorBgBase, 12),
+    colorBgContainerTertiary: getSolidColor(colorBgBase, 16),
+    colorBgLayout: getSolidColor(colorBgBase, 0),
+    colorBgSpotlight: getSolidColor(colorBgBase, 26),
+    colorBgBlur: getAlphaColor(colorTextBase, 0.04),
+    colorBorder: getSolidColor(colorBgBase, 26),
+    colorBorderSecondary: getSolidColor(colorBgBase, 19)
+  };
+};
+
+export { generateColorPalettes, generateNeutralColorPalettes };

package/es/ConfigProvider/dark/index.d.ts

@@ -0,0 +1,2 @@
+import { type SeedToken } from '../types';
+export default function (token: SeedToken): import("../types").ColorMapToken;

package/es/ConfigProvider/dark/index.js

@@ -0,0 +1,11 @@
+import genColorMapToken from '../utils/genColorMapToken.js';
+import { generateColorPalettes, generateNeutralColorPalettes } from './colors.js';
+
+function genDarkColorMapToken (token) {
+  return genColorMapToken(token, {
+    generateColorPalettes,
+    generateNeutralColorPalettes
+  });
+}
+
+export { genDarkColorMapToken as default };

package/es/ConfigProvider/index.d.ts

@@ -0,0 +1,32 @@
+import { type ParentProps, type Component } from 'solid-js';
+import { type SeedToken } from './types';
+import { type Locale } from '../locale';
+interface ConfigProviderProps extends ParentProps {
+    /**
+     * 主题
+     * 默认 'light'
+     */
+    theme?: 'light' | 'dark';
+    token?: SeedToken;
+    /**
+     * 设置 antd 组件大小
+     * 默认 'middle'
+     */
+    componentSize?: 'small' | 'middle' | 'large';
+    locale?: Locale;
+    /**
+     * 初始化时样式是否挂载 body 上
+     */
+    mountBodyStyle?: boolean;
+}
+declare function useConfig(): {
+    theme: import("solid-js").Accessor<"light" | "dark">;
+    cssVariablesClass: string;
+    cssVariables: import("solid-js").Accessor<import("./types").CssVariables>;
+    componentSize: import("solid-js").Accessor<"small" | "middle" | "large">;
+    locale: import("solid-js").Accessor<Locale>;
+};
+declare const ConfigProvider: Component<ConfigProviderProps> & {
+    useConfig: typeof useConfig;
+};
+export default ConfigProvider;

package/es/ConfigProvider/index.js

@@ -0,0 +1,44 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps, untrack, createMemo, onMount, useContext } from 'solid-js';
+import ConfigProviderContext from './context.js';
+import { createCssVariables, getCssVariablesClass } from './utils/index.js';
+import { darkSeedToken, lightSeedToken } from './seed.js';
+
+function useConfig() {
+  return useContext(ConfigProviderContext);
+}
+const ConfigProvider = _props => {
+  const config = useConfig();
+  const props = mergeProps({
+    theme: untrack(config.theme),
+    locale: untrack(config.locale),
+    componentSize: 'middle'
+  }, _props);
+  const mergedToken = createMemo(() => ({
+    ...(props.theme === 'dark' ? darkSeedToken : lightSeedToken),
+    ...props.token
+  }));
+  const cssVariables = createMemo(() => createCssVariables(mergedToken(), props.theme));
+  const locale = createMemo(() => props.locale);
+  const cssVariablesClass = getCssVariablesClass();
+  onMount(() => {
+    if (props.mountBodyStyle) {
+      document.body.classList.add(cssVariablesClass);
+    }
+  });
+  return createComponent(ConfigProviderContext.Provider, {
+    value: {
+      theme: () => props.theme,
+      cssVariablesClass,
+      cssVariables,
+      componentSize: () => props.componentSize,
+      locale
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+ConfigProvider.useConfig = useConfig;
+
+export { ConfigProvider as default };

package/es/ConfigProvider/light/colorAlgorithm.d.ts

@@ -0,0 +1,2 @@
+export declare const getAlphaColor: (baseColor: string, alpha: number) => string;
+export declare const getSolidColor: (baseColor: string, brightness: number) => string;

package/es/ConfigProvider/light/colorAlgorithm.js

@@ -0,0 +1,9 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+const getAlphaColor = (baseColor, alpha) => new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+const getSolidColor = (baseColor, brightness) => {
+  const instance = new TinyColor(baseColor);
+  return instance.darken(brightness).toHexString();
+};
+
+export { getAlphaColor, getSolidColor };

package/es/ConfigProvider/light/colors.d.ts

@@ -0,0 +1,3 @@
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../types';
+export declare const generateColorPalettes: GenerateColorMap;
+export declare const generateNeutralColorPalettes: GenerateNeutralColorMap;

package/es/ConfigProvider/light/colors.js

@@ -0,0 +1,45 @@
+import { generate } from '@ant-design/colors';
+import { getAlphaColor, getSolidColor } from './colorAlgorithm.js';
+
+const generateColorPalettes = baseColor => {
+  const colors = generate(baseColor);
+  return {
+    1: colors[0],
+    2: colors[1],
+    3: colors[2],
+    4: colors[3],
+    5: colors[4],
+    6: colors[5],
+    7: colors[6],
+    8: colors[4],
+    9: colors[5],
+    10: colors[6]
+  };
+};
+const generateNeutralColorPalettes = (bgBaseColor, textBaseColor) => {
+  const colorBgBase = bgBaseColor || '#fff';
+  const colorTextBase = textBaseColor || '#000';
+  return {
+    colorBgBase,
+    colorTextBase,
+    colorText: getAlphaColor(colorTextBase, 0.88),
+    colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
+    colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
+    colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
+    colorFill: getAlphaColor(colorTextBase, 0.15),
+    colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
+    colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
+    colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
+    colorBgElevated: getSolidColor(colorBgBase, 0),
+    colorBgContainer: getSolidColor(colorBgBase, 0),
+    colorBgLayout: getSolidColor(colorBgBase, 4),
+    colorBgContainerSecondary: getSolidColor(colorBgBase, 0),
+    colorBgContainerTertiary: getSolidColor(colorBgBase, 0),
+    colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
+    colorBgBlur: 'transparent',
+    colorBorder: getSolidColor(colorBgBase, 15),
+    colorBorderSecondary: getSolidColor(colorBgBase, 6)
+  };
+};
+
+export { generateColorPalettes, generateNeutralColorPalettes };

package/es/ConfigProvider/light/index.d.ts

@@ -0,0 +1,2 @@
+import { type SeedToken } from '../types';
+export default function (token: SeedToken): import("../types").ColorMapToken;

package/es/ConfigProvider/light/index.js

@@ -0,0 +1,11 @@
+import genColorMapToken from '../utils/genColorMapToken.js';
+import { generateColorPalettes, generateNeutralColorPalettes } from './colors.js';
+
+function genLightColorMapToken (token) {
+  return genColorMapToken(token, {
+    generateColorPalettes,
+    generateNeutralColorPalettes
+  });
+}
+
+export { genLightColorMapToken as default };

package/es/ConfigProvider/seed.d.ts

@@ -0,0 +1,3 @@
+import { type SeedToken } from './types';
+export declare const lightSeedToken: SeedToken;
+export declare const darkSeedToken: SeedToken;

package/es/ConfigProvider/seed.js

@@ -0,0 +1,22 @@
+const lightSeedToken = {
+  colorPrimary: '#1677ff',
+  colorSuccess: '#52c41a',
+  colorWarning: '#faad14',
+  colorError: '#ff4d4f',
+  colorInfo: '#1677ff',
+  colorTextBase: '#000',
+  colorBgBase: '#fff',
+  colorLink: '#1677ff'
+};
+const darkSeedToken = {
+  colorPrimary: '#1677ff',
+  colorSuccess: '#52c41a',
+  colorWarning: '#faad14',
+  colorError: '#ff4d4f',
+  colorInfo: '#1677ff',
+  colorTextBase: '#fff',
+  colorBgBase: '#000',
+  colorLink: '#1677ff'
+};
+
+export { darkSeedToken, lightSeedToken };