Feat v4 theme editor

site/src/components/antdv-token-previewer/ColorPanel.tsx

@@ -1,5 +1,5 @@
 import type { InputProps } from 'ant-design-vue';
-import { Input, InputNumber, Select, theme } from 'ant-design-vue';
+import { ConfigProvider, Input, InputNumber, Select, theme } from 'ant-design-vue';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import type { PropType } from 'vue';
 import { defineComponent, watchEffect, watch, computed, toRefs, ref } from 'vue';
@@ -175,32 +175,32 @@ const RgbColorInput = defineComponent({
     return () => {
       return (
         <div class="color-panel-rgba-input">
-          {/* <ConfigProvider theme={{ components: { InputNumber: { handleWidth: 12 } } }}> */}
-          <div class="color-panel-rgba-input-part">
-            <InputNumber min={0} max={255} size="small" v-model={[value.value.r, 'value']} />
-            <div class="color-panel-mode-title">R</div>
-          </div>
-          <div class="color-panel-rgba-input-part">
-            <InputNumber min={0} max={255} size="small" v-model={[value.value.g, 'value']} />
-            <div class="color-panel-mode-title">G</div>
-          </div>
-          <div class="color-panel-rgba-input-part">
-            <InputNumber min={0} max={255} size="small" v-model={[value.value.b, 'value']} />
-            <div class="color-panel-mode-title">B</div>
-          </div>
-          {alpha && (
+          <ConfigProvider theme={{ components: { InputNumber: { handleWidth: 12 } } }}>
             <div class="color-panel-rgba-input-part">
-              <InputNumber
-                min={0}
-                max={1}
-                step={0.01}
-                size="small"
-                v-model={[value.value.a, 'value']}
-              />
-              <div class="color-panel-mode-title">A</div>
+              <InputNumber min={0} max={255} size="small" v-model={[value.value.r, 'value']} />
+              <div class="color-panel-mode-title">R</div>
             </div>
-          )}
-          {/* </ConfigProvider> */}
+            <div class="color-panel-rgba-input-part">
+              <InputNumber min={0} max={255} size="small" v-model={[value.value.g, 'value']} />
+              <div class="color-panel-mode-title">G</div>
+            </div>
+            <div class="color-panel-rgba-input-part">
+              <InputNumber min={0} max={255} size="small" v-model={[value.value.b, 'value']} />
+              <div class="color-panel-mode-title">B</div>
+            </div>
+            {alpha.value && (
+              <div class="color-panel-rgba-input-part">
+                <InputNumber
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  size="small"
+                  v-model={[value.value.a, 'value']}
+                />
+                <div class="color-panel-mode-title">A</div>
+              </div>
+            )}
+          </ConfigProvider>
         </div>
       );
     };
@@ -282,7 +282,7 @@ const ColorPanel = defineComponent({
           {(colorMode.value === 'RGBA' || colorMode.value === 'HEX8') && (
             <RgbaColorPicker
               style={{ height: '160px' }}
-              color={tinycolor(color).toRgb()}
+              color={tinycolor(color.value).toRgb()}
               onChange={value => {
                 props.onChange(getColorStr(value, colorMode.value));
               }}

site/src/components/antdv-token-previewer/PreviewDemo.tsx

@@ -0,0 +1,35 @@
+import type { CSSProperties, PropType } from 'vue';
+import { defineComponent, toRefs } from 'vue';
+import { antdComponents } from './component-panel';
+import type { Theme } from './interface';
+import ComponentDemoPro from './token-panel-pro/ComponentDemoPro';
+
+export type PreviewDemoProps = {
+  theme: Theme;
+};
+
+const PreviewDemo = defineComponent({
+  name: 'PreviewDemo',
+  props: {
+    theme: { type: Object as PropType<Theme> },
+  },
+  setup(props, { attrs }) {
+    const { theme } = toRefs(props);
+
+    return () => {
+      return (
+        <div {...attrs} style={{ ...(attrs.style as CSSProperties), overflow: 'auto' }}>
+          <ComponentDemoPro
+            theme={theme.value}
+            components={antdComponents}
+            componentDrawer={false}
+            showAll
+            style={{ minHeight: '100%' }}
+          />
+        </div>
+      );
+    };
+  },
+});
+
+export default PreviewDemo;

site/src/components/antdv-token-previewer/ThemeSelect.tsx

@@ -0,0 +1,240 @@
+import type { PropType } from 'vue';
+import { defineComponent, toRefs, computed } from 'vue';
+import makeStyle from './utils/makeStyle';
+import classNames from 'ant-design-vue/es/_util/classNames';
+import { Button, Dropdown, Menu } from 'ant-design-vue';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import type { Theme } from './interface';
+
+interface ThemeItem extends Theme {
+  icon?: any;
+  closable?: boolean;
+  fixed?: boolean;
+}
+
+export type ThemeSelectProps = {
+  onEnabledThemeChange: (themes: string[]) => void;
+  onShownThemeChange: (
+    themes: string[],
+    selectTheme: string,
+    info: { type: 'select' | 'deselect' },
+  ) => void;
+  enabledThemes: string[];
+  shownThemes: string[];
+  themes: ThemeItem[];
+  showAddTheme?: boolean;
+};
+
+const useStyle = makeStyle('ThemeSelect', token => ({
+  '.previewer-theme-select': {
+    padding: `${token.paddingXXS}px ${token.paddingXS}px`,
+    borderRadius: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.02)',
+    height: token.controlHeight,
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+
+    [`${token.rootCls}-btn.previewer-theme-select-add-btn`]: {
+      minWidth: 0,
+      width: 16,
+      height: 16,
+      fontSize: 8,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginInlineStart: token.marginSM,
+      boxShadow: 'none',
+    },
+
+    '.previewer-theme-select-tag': {
+      height: 22,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSizing: 'border-box',
+      borderRadius: 4,
+      backgroundColor: token.colorBgContainer,
+      border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+      paddingInline: 10,
+      fontSize: token.fontSizeSM,
+      position: 'relative',
+      cursor: 'pointer',
+      // transition: `all ${token.motionDurationMid}`,
+
+      '&:not(:last-child)': {
+        marginInlineEnd: token.marginXS,
+      },
+
+      '&.previewer-theme-select-tag-active': {
+        border: `${token.lineWidth}px ${token.lineType} ${token['blue-1']}`,
+        backgroundColor: 'rgba(22,119,255,0.10)',
+        color: token.colorPrimary,
+
+        '&::after': {
+          content: '""',
+          borderStartEndRadius: 2,
+          position: 'absolute',
+          insetInlineEnd: 2,
+          top: 2,
+          width: 6,
+          height: 6,
+          background: `linear-gradient(to right top, transparent, transparent 50%, ${token.colorPrimary} 50%, ${token.colorPrimary} 100%)`,
+        },
+      },
+
+      '.previewer-theme-select-tag-close-btn': {
+        position: 'absolute',
+        top: -2,
+        insetInlineEnd: -2,
+        width: 12,
+        height: 12,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: token.colorBgContainer,
+        boxShadow:
+          '0 2px 8px -2px rgba(0,0,0,0.05), 0 1px 4px -1px rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
+        borderRadius: '50%',
+        opacity: 0,
+        pointerEvents: 'none',
+        zIndex: 2,
+        color: token.colorIcon,
+
+        '> .anticon': {
+          fontSize: 6,
+        },
+      },
+
+      '&:hover': {
+        '.previewer-theme-select-tag-close-btn': {
+          opacity: 1,
+          pointerEvents: 'initial',
+        },
+      },
+    },
+  },
+
+  '.previewer-theme-select-dropdown': {
+    '.previewer-theme-select-dropdown-title': {
+      [`${token.rootCls}-dropdown-menu-item-group-title`]: {
+        fontSize: token.fontSizeSM,
+        paddingBottom: token.padding,
+        paddingTop: 10,
+      },
+    },
+  },
+}));
+
+const ThemeSelect = defineComponent({
+  name: 'ThemeSelect',
+  inheritAttrs: false,
+  props: {
+    onEnabledThemeChange: { type: Function as PropType<(themes: string[]) => void> },
+    onShownThemeChange: {
+      type: Function as PropType<
+        (themes: string[], selectTheme: string, info: { type: 'select' | 'deselect' }) => void
+      >,
+    },
+    enabledThemes: { type: Array as PropType<string[]> },
+    shownThemes: { type: Array as PropType<string[]> },
+    themes: { type: Array as PropType<ThemeItem[]> },
+    showAddTheme: { type: Boolean },
+  },
+  setup(props, { attrs }) {
+    const { enabledThemes, shownThemes, themes, showAddTheme } = toRefs(props);
+
+    const [wrapSSR, hashId] = useStyle();
+
+    const dropdownItems = computed(() => [
+      {
+        disabled: true,
+        label: '添加主题即可预览',
+        className: 'previewer-theme-select-dropdown-title',
+        type: 'group',
+        key: 'add-theme-to-preview',
+      },
+      ...themes.value
+        .filter(theme => !shownThemes.value.includes(theme.key))
+        .map(theme => ({
+          icon: theme.icon,
+          value: theme.key,
+          label: theme.name,
+          key: theme.key,
+          onClick: () => {
+            props.onShownThemeChange([...shownThemes.value, theme.key], theme.key, {
+              type: 'select',
+            });
+          },
+        })),
+    ]);
+
+    const shownThemeEntities = computed(() =>
+      themes.value.filter(theme => shownThemes.value.includes(theme.key)),
+    );
+
+    return () => {
+      return wrapSSR(
+        <div {...attrs} class={classNames('previewer-theme-select', hashId.value, attrs.class)}>
+          {shownThemeEntities.value.map(theme => (
+            <span
+              onClick={() => {
+                if (theme.fixed) {
+                  return;
+                }
+                props.onEnabledThemeChange(
+                  enabledThemes.value.includes(theme.key)
+                    ? enabledThemes.value.filter(item => item !== theme.key)
+                    : [...enabledThemes.value, theme.key],
+                );
+              }}
+              key={theme.key}
+              class={classNames('previewer-theme-select-tag', {
+                'previewer-theme-select-tag-active': enabledThemes.value.includes(theme.key),
+              })}
+            >
+              {theme.name}
+              {theme.closable && (
+                <span
+                  class="previewer-theme-select-tag-close-btn"
+                  onClick={e => {
+                    e.stopPropagation();
+                    props.onEnabledThemeChange(
+                      enabledThemes.value.filter(item => item !== theme.key),
+                    );
+                    props.onShownThemeChange(
+                      shownThemes.value.filter(item => item !== theme.key),
+                      theme.key,
+                      { type: 'deselect' },
+                    );
+                  }}
+                >
+                  <CloseOutlined />
+                </span>
+              )}
+            </span>
+          ))}
+          {showAddTheme.value && (
+            <Dropdown
+              placement="bottomRight"
+              trigger={['click']}
+              overlayClassName={classNames('previewer-theme-select-dropdown', hashId.value)}
+              v-slots={{
+                overlay: () => <Menu items={dropdownItems.value} />,
+              }}
+            >
+              <Button
+                type="primary"
+                shape="circle"
+                class="previewer-theme-select-add-btn"
+                icon={<PlusOutlined />}
+              />
+            </Dropdown>
+          )}
+        </div>,
+      );
+    };
+  },
+});
+
+export default ThemeSelect;

site/src/components/antdv-token-previewer/TokenInput.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown, Input, InputNumber } from 'ant-design-vue';
+import { Button, Popover, Input, InputNumber } from 'ant-design-vue';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import type { PropType } from 'vue';
 import { defineComponent, toRefs, computed, ref, watch } from 'vue';
@@ -171,17 +171,23 @@ const TokenInput = defineComponent({
             value={String(tokenValue.value)}
             disabled={readonly.value}
             addonBefore={
-              <Dropdown
-                trigger={['click']}
-                overlay={
-                  <ColorPanel
-                    alpha
-                    color={String(tokenValue.value)}
-                    onChange={(v: string) => {
-                      handleTokenChange(v);
-                    }}
-                  />
-                }
+              <Popover
+                trigger="click"
+                placement="bottomRight"
+                arrow-point-at-center
+                overlayInnerStyle={{ padding: 0 }}
+                v-slots={{
+                  content: () => (
+                    <ColorPanel
+                      alpha
+                      color={String(tokenValue.value)}
+                      style={{ border: 'none' }}
+                      onChange={(v: string) => {
+                        handleTokenChange(v);
+                      }}
+                    />
+                  ),
+                }}
               >
                 <ColorPreview
                   color={String(tokenValue.value)}
@@ -192,7 +198,7 @@ const TokenInput = defineComponent({
                     verticalAlign: 'top',
                   }}
                 />
-              </Dropdown>
+              </Popover>
             }
             onChange={e => {
               handleTokenChange(e.target.value);