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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.33",
+  "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/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/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')}/>
           </>
         }}