plain-design 1.0.0-beta.66 → 1.0.0-beta.68

package/package.json

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

package/src/packages/components/Form/form.scss

@@ -209,6 +209,7 @@
       }
     }
   }
+
   &:not(.form-vertical-label) {
     @include prefix(form-item) {
       .form-item-label {
@@ -216,4 +217,10 @@
       }
     }
   }
+
+  &.form-hide-label {
+    .form-item-label {
+      display: none;
+    }
+  }
 }

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

@@ -43,6 +43,7 @@ export const Form = designComponent({
       {
         ['form-vertical-label']: !!props.verticalLabel,
         ['form-column-center']: !!props.singleColumnCenter,
+        ['form-hide-label']: !!props.hideLabel,
       },
     ]);
 

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -42,6 +42,7 @@ export const FormLayoutPropsOption = {
   gutter: { type: Number },                                                               // 列间隔
   rowGutter: { type: Number },                                                            // 行间隔
   validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
+  hideLabel: { type: Boolean },                                                           // 隐藏form-item的label
 } as const;
 
 /**
@@ -152,6 +153,9 @@ export const useFormLayout = (() => {
      * @date    2022.9.4 23:21
      */
     const labelWidth = computed((): number | string => {
+      if (form.props.hideLabel) {
+        return 0;
+      }
       /*纵向文本表单情况下，文本宽度占用整行*/
       if (form.props.verticalLabel) {
         return '100%';
@@ -233,7 +237,7 @@ export const useFormLayout = (() => {
      */
     const labelStyles = useStyles(style => {
       if (!form.isSingleColumn.value) {
-        if (!!labelWidth.value && !form.props.verticalLabel) {
+        if (labelWidth.value != null && !form.props.verticalLabel) {
           style.width = unit(labelWidth.value);
         }
       }
@@ -245,7 +249,7 @@ export const useFormLayout = (() => {
      */
     const contentStyles = useStyles(style => {
       if (!form.isSingleColumn.value) {
-        if (!!labelWidth.value && !form.props.verticalLabel) {
+        if (labelWidth.value != null && !form.props.verticalLabel) {
           style.width = `calc(100% - ${unit(labelWidth.value)})`;
         }
       } else {

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

@@ -7,9 +7,6 @@ import './theme-locale-selector.scss';
 
 export const ThemeLocaleSelector = designComponent({
   name: 'theme-locale-selector',
-  props: {
-    i18nManager: {},
-  },
   setup({}) {
     const classes = useClassCache(() => [
       getComponentCls('theme-selector'),

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/i18n/i18n.utils.ts

@@ -131,7 +131,7 @@ export const i18n = (() => {
    */
   const use = (lang: string, locale: any) => {
     state.currentLang = lang;
-    state.langs[lang] = deepmerge(state.langs[lang], locale);
+    if (!!locale) {state.langs[lang] = deepmerge(state.langs[lang], locale);}
     hooks.onChangeLang.exec(undefined);
   };
   /**
@@ -140,7 +140,7 @@ export const i18n = (() => {
    * @date    2023/10/11 9:30
    */
   const switchTo = async (lang: string, loadMethod?: () => any) => {
-    let locale = !loadMethod ? state.langs[lang] : await loadMethod();
+    let locale = !loadMethod ? undefined : await loadMethod();
     use(lang, locale);
   };
   /**
@@ -148,9 +148,7 @@ export const i18n = (() => {
    * @author  韦胜健
    * @date    2023/10/11 9:30
    */
-  const getCurrentLanguage = () => {
-    return state.currentLang;
-  };
+  const getCurrentLanguage = () => {return state.currentLang;};
   /**
    * 设置语言
    * @author  韦胜健
@@ -213,9 +211,11 @@ export const i18n = (() => {
     return result;
   };
 
-  const cache = createCache<string>('@@I18N_LANG');
-
-  if (cache.get()) {switchTo(cache.get()!);}
+  const applyCache = () => {
+    const cache = createCache<string>('@@I18N_LANG');
+    if (cache.get()) {switchTo(cache.get()!);}
+    hooks.onChangeLang.use(() => {cache.set(state.currentLang);});
+  };
 
   return {
     $t,
@@ -228,6 +228,7 @@ export const i18n = (() => {
     DEFAULT_LANG,
     state,
     hooks,
+    applyCache,
   };
 })();
 

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;