plain-design 1.0.0-beta.65 → 1.0.0-beta.67

package/package.json

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

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import {ThemeColor} from "../ThemeColor";
 import PageThemeUtils from "../PageThemeUtils";
@@ -9,6 +9,12 @@ export const ThemeColorSelector = designComponent({
   name: 'theme-color-selector',
   inheritPropsType: Dropdown,
   setup({}) {
+
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-color-selector'),
+    ]);
+
     return () => (
       <Dropdown
         trigger="hover"
@@ -16,7 +22,7 @@ export const ThemeColorSelector = designComponent({
         placement="bottom"
         v-slots={{
           default: () => (
-            <div className="theme-color-selector">
+            <div className={classes.value}>
               <ThemeColor primaryKey={PageThemeUtils.state.primaryKey!}/>
             </div>
           ),

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import i18n from "../i18n";
 import Tooltip from "../Tooltip";
 import PageThemeUtils from "../PageThemeUtils";
@@ -9,9 +9,13 @@ export const ThemeDarkSelector = designComponent({
   name: 'theme-dark-selector',
   setup() {
     const toggleDarkTheme = () => {PageThemeUtils.toggle();};
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-dark-selector'),
+    ]);
     return () => (
       <Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>
-        <div className={getComponentCls('theme-dark-selector')} onClick={toggleDarkTheme}>
+        <div className={classes.value} onClick={toggleDarkTheme}>
           <Icon icon={PageThemeUtils.state.dark ? 'pi-sun' : 'pi-moon'}/>
         </div>
       </Tooltip>

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import Icon from "../Icon";
@@ -11,13 +11,17 @@ export const ThemeLocaleSelector = designComponent({
     i18nManager: {},
   },
   setup({}) {
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-locale-selector'),
+    ]);
     return () => (
       <Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
         popper: () => i18n.state.localeOptions.map(opt => (
           <DropdownOption label={opt.label} key={opt.label} onClick={() => i18n.switchTo(opt.key, () => opt.lang)}/>
         )),
         default: () => (
-          <div className={getComponentCls('theme-locale-selector')}>
+          <div className={classes.value}>
             <Icon icon="pi-language"/>
           </div>
         )

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import i18n from "../i18n";
@@ -19,6 +19,11 @@ export const ThemeShapeSelector = designComponent({
 
     const toggleShape = (val: any) => {PageThemeUtils.shape(val);};
 
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-shape-selector'),
+    ]);
+
     return () => (
       <Dropdown
         trigger="hover"
@@ -26,7 +31,7 @@ export const ThemeShapeSelector = designComponent({
         placement="bottom"
         v-slots={{
           default: () => (
-            <div className={getComponentCls('theme-shape-selector')}>
+            <div className={classes.value}>
               <Icon icon="pi-copy"/>
             </div>
           ),

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClassCache} from "plain-design-composition";
 import Dropdown from "../Dropdown";
 import DropdownOption from "../DropdownOption";
 import i18n from "../i18n";
@@ -20,13 +20,17 @@ export const ThemeSizeSelector = designComponent({
 
     const toggleSize = (val: any) => {PageThemeUtils.size(val);};
 
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-size-selector'),
+    ]);
     return () => (
       <Dropdown trigger="hover" align="center" placement="bottom" hideOnClickReference={false} v-slots={{
         popper: () => sizeOptions.value.map(opt => (
           <DropdownOption label={opt.label} val={opt.val} key={opt.val} onClick={() => toggleSize(opt.val)}/>
         )),
         default: () => (
-          <div className={getComponentCls('theme-size-selector')}>
+          <div className={classes.value}>
             <Icon icon="pi-font-colors"/>
           </div>
         )

package/src/packages/components/createRequestInterceptor/index.ts

@@ -0,0 +1,139 @@
+import {pathJoin} from "plain-utils/string/pathJoin";
+import {PlainObject} from "plain-utils/utils/event";
+import qs from "qs";
+
+/**
+ * 拦截ajax请求，模拟数据mock
+ * @author  韦胜健
+ * @date    2024/5/6 14:34
+ */
+export function createRequestInterceptor({ baseURL }: { baseURL?: string }) {
+
+  baseURL = pathJoin(baseURL, '/');
+
+  const requestInterceptors: iRequestInterceptor[] = [];
+
+  /*拦截send方法，如果检测到url需要mock，则返回mock结果*/
+  const _send = XMLHttpRequest.prototype.send;
+  /*在调用xhr.open的时候保存url，因为在send的时候xhr.responseURL是空的*/
+  const _open = XMLHttpRequest.prototype.open;
+
+  // @ts-ignore
+  XMLHttpRequest.prototype.open = function (method, url, async, username, password) {
+    // @ts-ignore
+    this._openData = { method, url, async, username, password };
+    return _open.apply(this, [method, url, async, username, password]);
+  };
+
+  XMLHttpRequest.prototype.send = function (data: any) {
+    // @ts-ignore
+    const responseURL: string = this._openData.url;
+    // console.log('xhr send interceptor -> ', this, `(${responseURL})`, data);
+
+    /*计算请求url以及url参数，此时url为完整的可能带baseURL的完整路径*/
+    let { url: _url, param } = ((): { url: string, param: PlainObject | undefined } => {
+      const separatorIndex = responseURL.indexOf('?');
+      if (separatorIndex === -1) {
+        return {
+          url: responseURL,
+          param: undefined
+        };
+      } else {
+        return {
+          url: responseURL.slice(0, separatorIndex),
+          param: qs.parse(responseURL.slice(separatorIndex + 1))
+        };
+      }
+    })();
+
+    // console.log({ _url, param });
+
+    _url = pathJoin(_url, '/');
+
+    // console.log({ _url, param });
+
+    /*计算url相对于baseURL的相对路径，以及标识isMatchBaseURL，是否匹配baseURL*/
+    const { url, isMatchBaseURL } = ((): { url: string, isMatchBaseURL: boolean } => {
+      if (!baseURL) {
+        return { url: _url, isMatchBaseURL: false };
+      } else {
+        if (_url == baseURL) {
+          return { url: '/', isMatchBaseURL: true };
+        } else {
+          if (_url.indexOf(baseURL) === 0) {
+            return {
+              url: _url.slice(baseURL.length),
+              isMatchBaseURL: true,
+            };
+          } else {
+            return {
+              url: _url,
+              isMatchBaseURL: false,
+            };
+          }
+        }
+      }
+    })();
+
+    // console.log({ url, isMatchBaseURL });
+
+    /*判断本次请求是否需要mock*/
+    const requestInterceptor = requestInterceptors.find(i => {return typeof i.url === "string" ? i.url == url : i.url.test(url);});
+
+    if (!!requestInterceptor) {
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (e) {
+          try {
+            data = qs.parse(data);
+          } catch (e) {
+            data = undefined;
+          }
+        }
+      }
+      Promise.resolve(requestInterceptor.handler({ url, isMatchBaseURL, param, data })).then((respData: any) => {
+        // @ts-ignore
+        // this.readyState = 4;
+        // @ts-ignore
+        // this.responseText = JSON.stringify(respData);
+        // @ts-ignore
+        Object.defineProperty(this, 'responseText', {
+          get(): any {
+            return respData;
+          }
+        });
+        // @ts-ignore
+        this.onloadend();
+      });
+    } else {
+      return _send.apply(this, [data]);
+    }
+  };
+
+  function intercept(url: iRequestInterceptor['url'], handler: iRequestInterceptor['handler']): () => void
+  function intercept(config: iRequestInterceptor): () => void
+  function intercept(config: iRequestInterceptor | iRequestInterceptor['url'], handler?: iRequestInterceptor["handler"]) {
+    const _config: iRequestInterceptor = typeof config === "string" || config instanceof RegExp ?
+      { url: config, handler: handler! } :
+      config;
+    requestInterceptors.push(_config);
+    return () => {
+      const index = requestInterceptors.indexOf(_config);
+      index > -1 && requestInterceptors.splice(index, 1);
+    };
+  };
+
+  return {
+    intercept,
+  };
+}
+
+export interface iRequestInterceptor {
+  /*要拦截的url，可以是字符串，也可以是正则表达式*/
+  url: string | RegExp,
+  /*自定义处理请求并且返回请求结果，支持异步*/
+  handler: (requestConfig: { url: string, isMatchBaseURL: boolean, param: PlainObject | undefined, data: PlainObject | undefined }) => PlainObject | Promise<PlainObject>
+}
+
+export default createRequestInterceptor;

package/src/packages/components/usePopup/popup-item.scss

@@ -226,4 +226,27 @@
     @include whenShow {.popup-item-body{transform: initial}}
     /*@formatter:on*/
   }
+
+  &.popup-item-animation-clip {
+    /*@formatter:off*/
+    &,& .popup-item-content {transition: all ease 200ms;}
+    &[data-direction=top] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 100%,-0% 100%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(-0% 100%,100% 100%,100% 100%,-0% 100%); } }
+    }
+    &[data-direction=bottom] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 100%,-0% 100%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 0,-0% 0); } }
+    }
+    &[data-direction=left] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(100% 0,100% 100%,-0% 100%,-0% 0%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(100% 0%,100% 100%,100% 100%,100% 0%); } }
+    }
+    &[data-direction=right] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(0% 0,0% 100%,100% 100%,100% 0%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(0% 0%,0% 100%,0% 100%,0% 0%); } }
+    }
+    /*@formatter:on*/
+  }
 }
+

package/src/packages/components/usePopup/utils/popup.utils.ts

@@ -43,7 +43,7 @@ export type iPopupTrigger = typeof ePopupTrigger.TYPE
  * @author  韦胜健
  * @date    2023.5.13 22:11
  */
-export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide'] as const);
+export const ePopupAnimation = createEnum(['fade', 'drop', 'scale', 'scale-y', 'slide', 'clip'] as const);
 export type iPopupAnimation = typeof ePopupAnimation.TYPE
 
 /*---------------------------------------popup utils-------------------------------------------*/

package/src/packages/entry.tsx

@@ -218,6 +218,8 @@ export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/u
 export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
 export {AutoLoadingObserver} from './components/AutoLoadingObserver';
 export {lighter, darken} from './utils/color.utils';
+export {createRequestInterceptor} from './components/createRequestInterceptor';
+export type{iRequestInterceptor} from './components/createRequestInterceptor';
 
 // @ts-ignore
 setComponentPrefix(globalComponentPrefix);

package/src/packages/uses/useCollapseStyles.tsx

@@ -35,6 +35,7 @@ export function useCollapseStyles(
       if (!state.isMount) {
         return;
       }
+      await delay(23);
       state.styles = inactive();
       state.onTransitionEnd = () => {
         state.isMount = false;