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

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.33",
+  "version": "1.0.0-beta.35",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
   "typings": "src/index.ts",
   "files": [
     "dist",
-    "src"
+    "src/packages",
+    "src/index.ts"
   ],
   "scripts": {
     "dev": "cross-env APP_ENV=prod vue-cli-service serve",

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";