plain-design 1.0.0-beta.32 → 1.0.0-beta.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Dropdown/dropdown.public.scss

@@ -22,6 +22,16 @@
       transform-origin: left;
       font-weight: 700;
     }
+
+    &.dropdown-panel-size-equal {
+      width: 100%;
+    }
+
+    .dropdown-separator {
+      height: 1px;
+      background-color: plv(border-color);
+      margin: 2px 0;
+    }
   }
 
   &.dropdown-panel-align-center {

package/src/packages/components/Dropdown/dropdown.utils.tsx

@@ -89,17 +89,19 @@ export function renderDropdownPanel(
     attrs,
     externalClass,
     content,
+    sizeEqual,
   }: {
     size: string,
     align?: string,
     attrs?: any,
     externalClass?: any,
     content: RenderNode,
+    sizeEqual?: boolean,
   }
 ) {
   return (
     <div {...mergeAttrs({
-      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`],
+      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`, sizeEqual ? 'dropdown-panel-size-equal' : ''],
     }, attrs)}>
       {content}
     </div>

package/src/packages/components/Dropdown/index.tsx

@@ -44,7 +44,7 @@ export const Dropdown = designComponent({
   scopeSlots: {
     reference: (scope: { open?: boolean }) => {},
   },
-  setup({ props, slots, event: { emit }, scopeSlots }) {
+  setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
 
     const { styleComputed } = useStyle();
 
@@ -99,7 +99,7 @@ export const Dropdown = designComponent({
         return node?.type?.use?.name === DropdownOption.use.name || node?.type?.use?.name === DropdownGroup.use.name;
       });
 
-      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align };
+      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align, sizeEqual: attrs.sizeEqual };
 
       if (hasScroll || !dropdownOptions || dropdownOptions.length <= props.scrollOptionLength) {
         return renderDropdownPanel({

package/src/packages/components/DropdownSeparator/index.tsx

@@ -0,0 +1,8 @@
+import {designComponent} from "plain-design-composition";
+
+export const DropdownSeparator = designComponent({
+  name: 'dropdown-separator',
+  setup() {
+    return () => (<div className="dropdown-separator"/>);
+  },
+});

package/src/packages/components/ThemeEditor/index.tsx

@@ -8,6 +8,7 @@ import {SelectOption} from "../SelectOption";
 import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
 import ClientZoom from "../ClientZoom";
 import {addWindowListener} from 'plain-utils/dom/addWindowListener';
+import i18n from "../i18n";
 
 export const ThemeEditor = designComponent({
   name: 'theme-editor',
@@ -86,24 +87,24 @@ export const ThemeEditor = designComponent({
         {state.isExpand && (
           <div className="theme-editor-form">
             <div>
-              <div>输入框类型</div>
+              <div>{i18n('theme.inputMode').d('输入框类型')}</div>
               <div>
-                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" placeholder="输入框" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label="输入框:填充" val="flat"/>
-                  <SelectOption label="输入框:描边" val="stroke"/>
+                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
+                  <SelectOption label={i18n('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>主题颜色</div>
+              <div>{i18n('theme.primaryColor').d('主题颜色')}</div>
               <div>
-                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" placeholder="主题色" popperAttrs={publicPopperAttrs}>
+                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" popperAttrs={publicPopperAttrs}>
                   {Object.entries(ThemePrimaryColors).map(([key, value]) => (
-                    <SelectOption label={value!.label} val={key} key={key}>
+                    <SelectOption label={i18n('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
                       <div className={getComponentCls('theme-editor-block-item')}>
                         {!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
-                        <span>{value!.label}</span>
+                        <span>{i18n('colorName.' + value!.label as any).d(value!.label)}</span>
                       </div>
                     </SelectOption>
                   ))}
@@ -112,40 +113,40 @@ export const ThemeEditor = designComponent({
             </div>
 
             <div>
-              <div>大小尺寸</div>
+              <div>{i18n('theme.size').d('大小尺寸')}</div>
               <div>
-                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label="大尺寸" val="large"/>
-                  <SelectOption label="中等尺寸" val="normal"/>
-                  <SelectOption label="小尺寸" val="small"/>
-                  <SelectOption label="极小尺寸" val="mini"/>
+                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.sizeLarge').d('大尺寸')} val="large"/>
+                  <SelectOption label={i18n('theme.sizeNormal').d('中等尺寸')} val="normal"/>
+                  <SelectOption label={i18n('theme.sizeSmall').d('小尺寸')} val="small"/>
+                  <SelectOption label={i18n('theme.sizeMini').d('极小尺寸')} val="mini"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>黑白主题</div>
+              <div>{i18n('theme.darkMode').d('黑白主题')}</div>
               <div>
-                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label="黑色主题" val="dark"/>
-                  <SelectOption label="白色主题" val="light"/>
+                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.darkModeOn').d('黑色主题')} val="dark"/>
+                  <SelectOption label={i18n('theme.darkModeOff').d('白色主题')} val="light"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>圆角类型</div>
+              <div>{i18n('theme.radiusMode').d('圆角类型')}</div>
               <div>
-                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
-                  <SelectOption label="圆角" val="round"/>
-                  <SelectOption label="小圆角" val="square"/>
-                  <SelectOption label="无圆角" val="none"/>
+                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.radiusModeRound').d('圆角')} val="round"/>
+                  <SelectOption label={i18n('theme.radiusModeNormal').d('小圆角')} val="square"/>
+                  <SelectOption label={i18n('theme.radiusModeNone').d('无圆角')} val="none"/>
                 </Select>
               </div>
             </div>
 
             <div>
-              <div>大小缩放</div>
+              <div>{i18n('theme.scale').d('大小缩放')}</div>
               <Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
                 <SelectOption label="0.6" val={0.6}/>
                 <SelectOption label="0.7" val={0.7}/>

package/src/packages/entry.tsx

@@ -27,6 +27,7 @@ export {RadioGroup} from "./components/RadioGroup";
 export {DropdownOption} from "./components/DropdownOption";
 export {Dropdown} from "./components/Dropdown";
 export {DropdownGroup} from "./components/DropdownGroup";
+export {DropdownSeparator} from "./components/DropdownSeparator";
 export {VirtualList} from "./components/VirtualList";
 export {Segment} from "./components/Segment";
 export {SegmentGroup} from "./components/SegmentGroup";

package/src/packages/i18n/lang/en-us.ts

@@ -244,4 +244,40 @@ export const EnUsLocale: tZhCnLocale = {
     queryTotal: 'query total',
     columnTitle: 'column title',
   },
+  theme: {
+    inputMode: 'INPUT MODE',
+    inputModeFlat: 'flat',
+    inputModelStroke: 'stroke',
+    primaryColor: 'PRIMARY COLOR',
+    size: 'SIZE',
+    sizeLarge: 'large',
+    sizeNormal: 'normal',
+    sizeSmall: 'small',
+    sizeMini: 'mini',
+    darkMode: 'DARK MODE',
+    darkModeOn: 'dark',
+    darkModeOff: 'light',
+    radiusMode: 'RADIUS MODE',
+    radiusModeRound: 'round',
+    radiusModeNormal: 'filet',
+    radiusModeNone: 'none',
+    scale: 'SCALE'
+  },
+  colorName: {
+    默认主题: 'Default',
+    薄暮: 'Twilight',
+    火山: 'Volcano',
+    日暮: 'Sunset',
+    金盏花: 'MarigoldFlower',
+    日出: 'sunrise',
+    青柠: 'GreenLime',
+    极光绿: 'AuroraGreen',
+    明青: 'MingQing',
+    拂晓蓝: 'FuXiaolan',
+    极客蓝: 'GeekBlue',
+    酱紫: 'SaucePurple',
+    洋红: 'Magenta',
+    极昼: 'Light',
+    黑夜: 'Dark',
+  }
 };

package/src/packages/i18n/lang/zh-cn.ts

@@ -242,6 +242,42 @@ export const ZhCnLocale = {
     queryTotal: '查询总数',
     columnTitle: '列标题',
   },
+  theme: {
+    inputMode: '输入框类型',
+    inputModeFlat: '填充',
+    inputModelStroke: '描边',
+    primaryColor: '主题色',
+    size: '大小尺寸',
+    sizeLarge: '大尺寸',
+    sizeNormal: '中等尺寸',
+    sizeSmall: '小尺寸',
+    sizeMini: '极小尺寸',
+    darkMode: '黑白主题',
+    darkModeOn: '黑色主题',
+    darkModeOff: '白色主题',
+    radiusMode: '圆角类型',
+    radiusModeRound: '圆角',
+    radiusModeNormal: '小圆角',
+    radiusModeNone: '无圆角',
+    scale: '大小缩放'
+  },
+  colorName: {
+    默认主题: '默认主题',
+    薄暮: '薄暮',
+    火山: '火山',
+    日暮: '日暮',
+    金盏花: '金盏花',
+    日出: '日出',
+    青柠: '青柠',
+    极光绿: '极光绿',
+    明青: '明青',
+    拂晓蓝: '拂晓蓝',
+    极客蓝: '极客蓝',
+    酱紫: '酱紫',
+    洋红: '洋红',
+    极昼: '极昼',
+    黑夜: '黑夜',
+  }
 } as const;
 
 type ZhCnLocaleUtils<T> = { [k in keyof T]: T[k] extends string ? string : ZhCnLocaleUtils<T[k]> }

package/src/pages/index/components/normal/DemoDropdown.tsx

@@ -1,17 +1,18 @@
 import {designPage} from "plain-design-composition";
 import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ButtonGroup, Dropdown, DropdownGroup, DropdownOption, Scroll, VirtualList} from "../../../../packages";
+import {$message, Button, ButtonGroup, Dropdown, DropdownGroup, DropdownOption, DropdownSeparator, Scroll, VirtualList} from "../../../../packages";
 import AddressData from '../../../data/address.json';
 
 export const demo1 = designPage(() => {
   return () => (
     <DemoRow title="基本用法">
-      <Dropdown onSelect={(data) => $message('select ' + data.props.val)}>
+      <Dropdown onSelect={(data) => $message('select ' + data.props.val)} sizeEqual>
         {{
           default: () => <Button label="Click to open dropdown"/>,
           popper: () => <>
             <DropdownOption label="选项一" val="tag-1" onClick={() => $message('click tag-1')}/>
             <DropdownOption label="选项二" val="tag-2" onClick={() => $message('click tag-2')}/>
+            <DropdownSeparator/>
             <DropdownOption label="选项三" val="tag-3" onClick={() => $message('click tag-3')}/>
           </>
         }}