plain-design 1.0.0-beta.146 → 1.0.0-beta.147

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

@@ -1,174 +1,174 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useModel} from "@peryl/react-compose";
-import './dropdown.scss';
-import {DropdownContextProvider, DropdownOptionAlign, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownContext, iDropdownOptionContext, renderDropdownPanel} from "./dropdown.utils";
-import {findReactElement} from "../../utils/findReactElement";
-import {StyleProps, useStyle} from "../../uses/useStyle";
-import {Scroll} from "../Scroll";
-import {delay} from "@peryl/utils/delay";
-import {debounce} from "@peryl/utils/debounce";
-import {DropdownOption} from "../DropdownOption";
-import {DropdownGroup} from "../DropdownGroup";
-import {unit} from "@peryl/utils/unit";
-import {Popup} from "../Popup";
-import {ePopupTrigger, iPopupAnimation, iPopupPlacement, iPopupTrigger} from "../usePopup/utils/popup.utils";
-import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
-import {removeUnit} from "@peryl/utils/removeUnit";
-
-export const Dropdown = designComponent({
-  name: '-dropdown',
-  inheritPropsType: Popup,
-  props: {
-    /*---------------------------------------external attrs-------------------------------------------*/
-    disableCloseOnClickOption: { type: Boolean },                                         // 是否禁用点击option的时候自动关闭
-    align: { type: String as PropType<typeof DropdownOptionAlign.TYPE> },                 // dropdown option的内容对其方式
-    size: StyleProps.size,
-    scrollOptionLength: { type: Number, default: 6 },                                     // dropdown option超过一定数量时使用滚动容器
-    /*---------------------------------------popper attrs-------------------------------------------*/
-    modelValue: { type: Boolean },
-    trigger: { type: String as PropType<iPopupTrigger>, default: 'click' },
-    animation: { type: String as PropType<iPopupAnimation>, default: 'drop' },
-    noArrow: { type: Boolean, default: true, },
-    placement: { type: String as PropType<iPopupPlacement>, default: 'bottom-start' },
-
-    id: { type: String },                                                                 // 调试plain-popper标识
-    optionWidth: {},                                                                      // option选项宽度
-    scrollHeight: { type: Number },                                                       // 选项过多时自定义滚动高度
-  },
-  emits: {
-    onUpdateModelValue: (val?: boolean) => true,
-    onSelect: (optionContext: iDropdownOptionContext) => true,
-
-    onClose: () => true,
-  },
-  slots: [
-    'default',
-    'popper',
-  ],
-  scopeSlots: {
-    reference: (scope: { open?: boolean }) => {},
-  },
-  setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
-
-    const configuration = ApplicationConfigurationProvider.inject();
-
-    const { styleComputed } = useStyle();
-
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-
-    const state = reactive({
-      cascadeOptions: [] as iDropdownOptionContext[]
-    });
-
-    const trigger = computed(() => props.trigger || ePopupTrigger.click);
-
-    const dropdownContentWidth = computed(() => !props.optionWidth ? undefined : unit(props.optionWidth as any)!);
-
-    const scrollHeight = computed((): number => {
-      if (props.scrollHeight != null) {return props.scrollHeight;}
-      const fontSize = Number(removeUnit(configuration.value.theme.vars[`font-size-${styleComputed.value.size}`]));
-      const paddingY = Number(removeUnit(configuration.value.theme.vars[`dropdown-size-${styleComputed.value.size}-padding-y`]));
-      const itemHeight = fontSize + paddingY * 2 + 6 + 2;
-      return itemHeight * 6;
-    });
-
-    const handler: iDropdownContext["handler"] = {
-      onClickOption: (optionContext) => {
-        if (optionContext.hasChildren.value) {
-          return;
-        }
-        if (!props.disableCloseOnClickOption) {
-          model.value = false;
-        }
-      },
-      openDropdownOption: debounce((optionContext) => {
-        emit.onSelect(optionContext);
-        if (optionContext.hasChildren.value) {
-          /*有子节点*/
-          const cascadeOptions = [] as iDropdownOptionContext[];
-          let optCtx: iDropdownOptionContext | null = optionContext;
-          while (!!optCtx) {
-            cascadeOptions.unshift(optCtx);
-            optCtx = optCtx.parentOption;
-          }
-          setTimeout(() => {state.cascadeOptions = cascadeOptions;}, 23);
-        }
-      }, trigger.value === DropdownOptionTrigger.hover ? 300 : 0, trigger.value === DropdownOptionTrigger.hover),
-      onPopperClose: () => {
-        emit.onClose();
-        delay(23).then(() => state.cascadeOptions = []);
-      },
-    };
-
-    DropdownContextProvider.provide({ handler, state, trigger, props });
-
-    const renderDropdownContent = (children: any, key: string) => {
-
-      let hasScroll = false;
-      const dropdownOptions = findReactElement(children, (node: any) => {
-        if (node?.type?.use?.name === Scroll.use.name) {
-          hasScroll = true;
-          return false;
-        }
-        return node?.type?.use?.name === DropdownOption.use.name || node?.type?.use?.name === DropdownGroup.use.name;
-      });
-
-      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align, sizeEqual: attrs.sizeEqual };
-
-      if (hasScroll || !dropdownOptions || dropdownOptions.length <= props.scrollOptionLength) {
-        return renderDropdownPanel({
-          ...publicDropdownPanelParams,
-          attrs: { style: { width: dropdownContentWidth.value }, key },
-          content: children
-        });
-      } else {
-        return renderDropdownPanel({
-          ...publicDropdownPanelParams,
-          attrs: { style: { height: scrollHeight.value + 'px', width: dropdownContentWidth.value, }, key },
-          content: <>
-            <Scroll>
-              {children}
-            </Scroll>
-          </>
-        });
-      }
-    };
-
-    return () => {
-      const slotsPopper = slots.popper();
-      return (
-        <Popup
-          v-model={model.value}
-          externalClass={getComponentCls('dropdown')}
-          noPadding
-          trigger={trigger.value}
-          animation={props.animation}
-          noArrow={props.noArrow}
-          placement={props.placement}
-
-          onClose={handler.onPopperClose}
-        >
-          {{
-            default: () => scopeSlots.reference({ open: model.value }, slots.default()),
-            popper: () => (
-              <>
-                {renderDropdownContent(slotsPopper, '_1')}
-                {state.cascadeOptions.length > 0 && (
-                  state.cascadeOptions.map((dropdownOptionContext) => (
-                    renderDropdownContent(
-                      <DropdownOptionContextProvider.Provider value={dropdownOptionContext}>
-                        {dropdownOptionContext.slots.content()}
-                      </DropdownOptionContextProvider.Provider>,
-                      dropdownOptionContext.id
-                    )
-                  ))
-                )}
-              </>
-            ),
-          }}
-        </Popup>
-      );
-    };
-  },
-});
-
-export default Dropdown;
+import {computed, designComponent, getComponentCls, PropType, reactive, useModel} from "@peryl/react-compose";
+import './dropdown.scss';
+import {DropdownContextProvider, DropdownOptionAlign, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownContext, iDropdownOptionContext, renderDropdownPanel} from "./dropdown.utils";
+import {findReactElement} from "../../utils/findReactElement";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {Scroll} from "../Scroll";
+import {delay} from "@peryl/utils/delay";
+import {debounce} from "@peryl/utils/debounce";
+import {DropdownOption} from "../DropdownOption";
+import {DropdownGroup} from "../DropdownGroup";
+import {unit} from "@peryl/utils/unit";
+import {Popup} from "../Popup";
+import {ePopupTrigger, iPopupAnimation, iPopupPlacement, iPopupTrigger} from "../usePopup/utils/popup.utils";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {removeUnit} from "@peryl/utils/removeUnit";
+
+export const Dropdown = designComponent({
+  name: '-dropdown',
+  inheritPropsType: Popup,
+  props: {
+    /*---------------------------------------external attrs-------------------------------------------*/
+    disableCloseOnClickOption: { type: Boolean },                                         // 是否禁用点击option的时候自动关闭
+    align: { type: String as PropType<typeof DropdownOptionAlign.TYPE> },                 // dropdown option的内容对其方式
+    size: StyleProps.size,
+    scrollOptionLength: { type: Number, default: 6 },                                     // dropdown option超过一定数量时使用滚动容器
+    /*---------------------------------------popper attrs-------------------------------------------*/
+    modelValue: { type: Boolean },
+    trigger: { type: String as PropType<iPopupTrigger>, default: 'click' },
+    animation: { type: String as PropType<iPopupAnimation>, default: 'drop' },
+    noArrow: { type: Boolean, default: true, },
+    placement: { type: String as PropType<iPopupPlacement>, default: 'bottom-start' },
+
+    id: { type: String },                                                                 // 调试plain-popper标识
+    optionWidth: {},                                                                      // option选项宽度
+    scrollHeight: { type: Number },                                                       // 选项过多时自定义滚动高度
+  },
+  emits: {
+    onUpdateModelValue: (val?: boolean) => true,
+    onSelect: (optionContext: iDropdownOptionContext) => true,
+
+    onClose: () => true,
+  },
+  slots: [
+    'default',
+    'popper',
+  ],
+  scopeSlots: {
+    reference: (scope: { open?: boolean }) => {},
+  },
+  setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
+
+    const configuration = ApplicationConfigurationProvider.inject();
+
+    const { styleComputed } = useStyle();
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const state = reactive({
+      cascadeOptions: [] as iDropdownOptionContext[]
+    });
+
+    const trigger = computed(() => props.trigger || ePopupTrigger.click);
+
+    const dropdownContentWidth = computed(() => !props.optionWidth ? undefined : unit(props.optionWidth as any)!);
+
+    const scrollHeight = computed((): number => {
+      if (props.scrollHeight != null) {return props.scrollHeight;}
+      const fontSize = Number(removeUnit(configuration.value.theme.vars[`font-size-${styleComputed.value.size}`]));
+      const paddingY = Number(removeUnit(configuration.value.theme.vars[`dropdown-size-${styleComputed.value.size}-padding-y`]));
+      const itemHeight = fontSize + paddingY * 2 + 6 + 2;
+      return itemHeight * 6;
+    });
+
+    const handler: iDropdownContext["handler"] = {
+      onClickOption: (optionContext) => {
+        if (optionContext.hasChildren.value) {
+          return;
+        }
+        if (!props.disableCloseOnClickOption) {
+          model.value = false;
+        }
+      },
+      openDropdownOption: debounce((optionContext) => {
+        emit.onSelect(optionContext);
+        if (optionContext.hasChildren.value) {
+          /*有子节点*/
+          const cascadeOptions = [] as iDropdownOptionContext[];
+          let optCtx: iDropdownOptionContext | null = optionContext;
+          while (!!optCtx) {
+            cascadeOptions.unshift(optCtx);
+            optCtx = optCtx.parentOption;
+          }
+          setTimeout(() => {state.cascadeOptions = cascadeOptions;}, 23);
+        }
+      }, trigger.value === DropdownOptionTrigger.hover ? 300 : 0, trigger.value === DropdownOptionTrigger.hover),
+      onPopperClose: () => {
+        emit.onClose();
+        delay(23).then(() => state.cascadeOptions = []);
+      },
+    };
+
+    DropdownContextProvider.provide({ handler, state, trigger, props });
+
+    const renderDropdownContent = (children: any, key: string) => {
+
+      let hasScroll = false;
+      const dropdownOptions = findReactElement(children, (node: any) => {
+        if (node?.type?.use?.name === Scroll.use.name) {
+          hasScroll = true;
+          return false;
+        }
+        return node?.type?.use?.name === DropdownOption.use.name || node?.type?.use?.name === DropdownGroup.use.name;
+      });
+
+      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align, sizeEqual: attrs.sizeEqual };
+
+      if (hasScroll || !dropdownOptions || dropdownOptions.length <= props.scrollOptionLength) {
+        return renderDropdownPanel({
+          ...publicDropdownPanelParams,
+          attrs: { style: { width: dropdownContentWidth.value }, key },
+          content: children
+        });
+      } else {
+        return renderDropdownPanel({
+          ...publicDropdownPanelParams,
+          attrs: { style: { height: scrollHeight.value + 'px', width: dropdownContentWidth.value, }, key },
+          content: <>
+            <Scroll>
+              {children}
+            </Scroll>
+          </>
+        });
+      }
+    };
+
+    return () => {
+      const slotsPopper = slots.popper();
+      return (
+        <Popup
+          v-model={model.value}
+          externalClass={getComponentCls('dropdown')}
+          noPadding
+          trigger={trigger.value}
+          animation={props.animation}
+          noArrow={props.noArrow}
+          placement={props.placement}
+
+          onClose={handler.onPopperClose}
+        >
+          {{
+            default: () => scopeSlots.reference({ open: model.value }, slots.default()),
+            popper: () => (
+              <>
+                {renderDropdownContent(slotsPopper, '_1')}
+                {state.cascadeOptions.length > 0 && (
+                  state.cascadeOptions.map((dropdownOptionContext) => (
+                    renderDropdownContent(
+                      <DropdownOptionContextProvider.Provider value={dropdownOptionContext}>
+                        {dropdownOptionContext.slots.content()}
+                      </DropdownOptionContextProvider.Provider>,
+                      dropdownOptionContext.id
+                    )
+                  ))
+                )}
+              </>
+            ),
+          }}
+        </Popup>
+      );
+    };
+  },
+});
+
+export default Dropdown;

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

@@ -1,18 +1,18 @@
-import {designComponent} from "@peryl/react-compose";
-
-export const DropdownGroup = designComponent({
-  name: 'dropdown-group',
-  props: {
-    title: { type: String },
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-    return () => (
-      <div className="dropdown-group">
-        {slots.default(props.title)}
-      </div>
-    );
-  },
-});
-
-export default DropdownGroup;
+import {designComponent} from "@peryl/react-compose";
+
+export const DropdownGroup = designComponent({
+  name: 'dropdown-group',
+  props: {
+    title: { type: String },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+    return () => (
+      <div className="dropdown-group">
+        {slots.default(props.title)}
+      </div>
+    );
+  },
+});
+
+export default DropdownGroup;

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

@@ -1,74 +1,74 @@
-import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
-import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
-import Icon from "../Icon";
-import {createCounter} from "@peryl/utils/createCounter";
-import {ePopupTrigger} from "../usePopup/utils/popup.utils";
-
-const nextOptionId = createCounter('dropdown-option');
-
-export const DropdownOption = designComponent({
-  name: 'dropdown-option',
-  props: {
-    label: { type: [String, Number] },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
-    icon: { type: String },
-    val: {},
-    trigger: { type: String as PropType<typeof DropdownOptionTrigger.TYPE> },
-  },
-  slots: ['default', 'content'],
-  emits: {
-    onClick: (e: iMouseEvent) => true,
-  },
-  setup({ props, event: { emit }, slots }) {
-
-    const dropdown = DropdownContextProvider.inject();
-    const parentOption = DropdownOptionContextProvider.inject(null);
-
-    const id = nextOptionId();
-    const hasChildren = computed(() => !!slots.content.isExist() && !!slots.content());
-    const trigger = computed(() => dropdown.trigger.value === ePopupTrigger.hover ? DropdownOptionTrigger.hover : DropdownOptionTrigger.click);
-
-    const dropdownOptionContext: iDropdownOptionContext = {
-      props,
-      slots,
-      hasChildren,
-      parentOption,
-      id,
-    };
-
-    const handler = {
-      onClick: (e: iMouseEvent) => {
-        if (props.disabled || props.readonly) {return;}
-        emit.onClick(e);
-        dropdown.handler.onClickOption(dropdownOptionContext);
-        if (trigger.value !== DropdownOptionTrigger.click) {return;}
-        dropdown.handler.openDropdownOption(dropdownOptionContext);
-      },
-      onMouseenter: () => {
-        if (props.disabled || props.readonly) {return;}
-        if (trigger.value !== DropdownOptionTrigger.hover) {return;}
-        dropdown.handler.openDropdownOption(dropdownOptionContext);
-      },
-    };
-
-    return () => renderDropdownOption({
-      disabled: props.disabled,
-      icon: props.icon,
-      externalClass: {
-        'dropdown-option-has-children': hasChildren.value,
-        'dropdown-option-expanded': !!dropdown.state.cascadeOptions.find(i => i.id === dropdownOptionContext.id),
-      },
-      attrs: {
-        onClick: handler.onClick,
-        onMouseEnter: handler.onMouseenter,
-      },
-      content: <>
-        {slots.default(props.label)}
-        {hasChildren.value && <div className="dropdown-option-arrow"><Icon icon="pi-right"/></div>}
-      </>
-    });
-  },
-});
-
-export default DropdownOption;
+import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
+import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
+import Icon from "../Icon";
+import {createCounter} from "@peryl/utils/createCounter";
+import {ePopupTrigger} from "../usePopup/utils/popup.utils";
+
+const nextOptionId = createCounter('dropdown-option');
+
+export const DropdownOption = designComponent({
+  name: 'dropdown-option',
+  props: {
+    label: { type: [String, Number] },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    icon: { type: String },
+    val: {},
+    trigger: { type: String as PropType<typeof DropdownOptionTrigger.TYPE> },
+  },
+  slots: ['default', 'content'],
+  emits: {
+    onClick: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit }, slots }) {
+
+    const dropdown = DropdownContextProvider.inject();
+    const parentOption = DropdownOptionContextProvider.inject(null);
+
+    const id = nextOptionId();
+    const hasChildren = computed(() => !!slots.content.isExist() && !!slots.content());
+    const trigger = computed(() => dropdown.trigger.value === ePopupTrigger.hover ? DropdownOptionTrigger.hover : DropdownOptionTrigger.click);
+
+    const dropdownOptionContext: iDropdownOptionContext = {
+      props,
+      slots,
+      hasChildren,
+      parentOption,
+      id,
+    };
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {
+        if (props.disabled || props.readonly) {return;}
+        emit.onClick(e);
+        dropdown.handler.onClickOption(dropdownOptionContext);
+        if (trigger.value !== DropdownOptionTrigger.click) {return;}
+        dropdown.handler.openDropdownOption(dropdownOptionContext);
+      },
+      onMouseenter: () => {
+        if (props.disabled || props.readonly) {return;}
+        if (trigger.value !== DropdownOptionTrigger.hover) {return;}
+        dropdown.handler.openDropdownOption(dropdownOptionContext);
+      },
+    };
+
+    return () => renderDropdownOption({
+      disabled: props.disabled,
+      icon: props.icon,
+      externalClass: {
+        'dropdown-option-has-children': hasChildren.value,
+        'dropdown-option-expanded': !!dropdown.state.cascadeOptions.find(i => i.id === dropdownOptionContext.id),
+      },
+      attrs: {
+        onClick: handler.onClick,
+        onMouseEnter: handler.onMouseenter,
+      },
+      content: <>
+        {slots.default(props.label)}
+        {hasChildren.value && <div className="dropdown-option-arrow"><Icon icon="pi-right"/></div>}
+      </>
+    });
+  },
+});
+
+export default DropdownOption;

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

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

package/src/packages/components/Empty/empty.scss

@@ -1,14 +1,14 @@
-@include prefix(empty) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: plv(text-3);
-  font-size: 12px;
-
-  & > svg {
-    fill: currentColor;
-    height: inherit;
-    width: inherit;
-  }
-}
+@include prefix(empty) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: plv(text-3);
+  font-size: 12px;
+
+  & > svg {
+    fill: currentColor;
+    height: inherit;
+    width: inherit;
+  }
+}