cdui-js 1.0.13 → 1.0.14

package/src/components/Icon.tsx

@@ -1,6 +1,7 @@
 import { splitProps } from 'solid-js';
 
 import { JSX } from '../jsx';
+import { combineClass } from '../reactive';
 
 /**
  * 图标组件
@@ -9,7 +10,7 @@ export const Icon = (props?: JSX.SvgSVGAttributes<never> & { name: string }) =>
   let [thisProps, restProps] = splitProps(props, ['class', 'name']);
 
   return (
-    <svg class={['icon', thisProps.class].filter((item) => item).join(' ')} aria-hidden={true} {...restProps}>
+    <svg class={combineClass('icon', thisProps.class)} aria-hidden={true} {...restProps}>
       <use href={'#icon-' + thisProps.name}></use>
     </svg>
   );

package/src/components/Popup.tsx

@@ -0,0 +1,220 @@
+import { JSX } from '../jsx';
+import { layout } from '../layout';
+import { combineClass, splitProps } from '../reactive';
+import { disableAutoCloseEvent, hideMaskLayer, registerAutoClose, showMaskLayer } from '../dom';
+
+const POPUP_TOP_CLASS = 'popup-top';
+const POPUP_RIGHT_CLASS = 'popup-right';
+
+/**
+ * 当前弹出层
+ */
+const currentPopup = {
+  /**
+   * 当前 DOM 对象
+   */
+  dom: null as HTMLElement,
+  /**
+   * 是否显示了遮罩层
+   */
+  mask: false,
+};
+
+/**
+ * 是否使用下拉动画
+ */
+let useDropdownTransition = true;
+
+/**
+ * 显示遮罩层方法
+ */
+let showMaskLayerFn = () => layout['le-480'];
+
+/**
+ * 设置是否使用下拉动画
+ *
+ * @param use 是否使用
+ */
+export const setUseDropdownTransition = (use: boolean) => {
+  useDropdownTransition = use;
+};
+
+/**
+ * 设置显示遮罩层的方法
+ *
+ * @param fn 显示遮罩层的方法
+ */
+export const setShowMaskLayerFn = (fn: () => boolean) => {
+  showMaskLayerFn = fn || showMaskLayerFn;
+};
+
+const showPopup = (dom: HTMLElement, onPopup?: (dom: HTMLElement) => void | false) => {
+  // 下拉钩子
+  if (onPopup && onPopup(dom) === false) {
+    return;
+  }
+
+  let windowWidth = window.innerWidth;
+  let windowHeight = window.innerHeight;
+  let classList = dom.classList;
+  let style = dom.style;
+
+  // 有下拉
+  if (currentPopup.dom) {
+    // 先关闭
+    hidePopup();
+  }
+
+  // 记录当前弹出层
+  currentPopup.dom = dom;
+
+  if ((currentPopup.mask = showMaskLayerFn())) {
+    showMaskLayer(closePopup);
+  }
+
+  let host = dom.parentNode as HTMLElement;
+
+  // 先显示
+  style.width = host.offsetWidth + 'px';
+  style.height = 'auto';
+  style.display = 'block';
+
+  // 获取宽高及计算位置
+  let width = (dom.firstElementChild as HTMLElement).offsetWidth;
+  let height = dom.offsetHeight;
+  let rect = host.getBoundingClientRect();
+
+  // 同步子组件宽度
+  style.width = width + 'px';
+
+  if (windowHeight - rect.top - rect.height < height + 4 && rect.top >= height) {
+    classList.add(POPUP_TOP_CLASS);
+  } else {
+    classList.remove(POPUP_TOP_CLASS);
+  }
+
+  if (windowWidth - rect.left - rect.width > width + 4 && rect.left >= width) {
+    classList.add(POPUP_RIGHT_CLASS);
+  } else {
+    classList.remove(POPUP_RIGHT_CLASS);
+  }
+
+  // 过渡动画
+  if (useDropdownTransition) {
+    style.height = '0';
+
+    setTimeout(() => {
+      style.height = height + 'px';
+    });
+  }
+};
+
+const hidePopup = () => {
+  let popup = currentPopup;
+  let dom = popup.dom;
+  let style = dom.style;
+
+  currentPopup.dom = null;
+
+  if (popup.mask) {
+    hideMaskLayer();
+  }
+
+  // 过渡动画
+  if (useDropdownTransition) {
+    style.height = dom.offsetHeight + 'px';
+
+    setTimeout(() => {
+      style.height = '0';
+    });
+  } else {
+    style.display = 'none';
+  }
+};
+
+const togglePopup = (dom: HTMLElement, onPopup?: (dom: HTMLElement) => void | false, event?: Event) => {
+  // 有显示下拉
+  if (currentPopup.dom) {
+    // 不是当前下拉框
+    if (currentPopup.dom !== dom) {
+      // 先关闭
+      closePopup();
+    }
+
+    showPopup(dom, onPopup);
+  } else {
+    showPopup(dom, onPopup);
+  }
+
+  event && event.stopPropagation();
+};
+
+/**
+ * 弹出层外部访问接口
+ */
+export interface PopupApi {
+  /**
+   * 打开弹出框
+   */
+  openPopup(): void;
+  /**
+   * 关闭弹出框
+   */
+  closePupup(): void;
+  /**
+   * 显示或关闭弹出层
+   */
+  togglePopup(): void;
+}
+
+/**
+ * 弹出层属性
+ */
+export interface PopupProps {
+  /**
+   * 弹出对话框钩子
+   */
+  onPopup?: (dom: HTMLElement) => void | false;
+  /**
+   * 外部调用接口
+   */
+  api?: (api: PopupApi) => void;
+}
+
+/**
+ * 弹出层组件
+ */
+export const Popup = (props?: JSX.HTMLAttributes<never> & PopupProps) => {
+  let [thisProps, restProps] = splitProps(props, ['onPopup', 'api', 'children']);
+  let popup: HTMLElement;
+
+  // 初始化外部调用接口
+  props.api &&
+    props.api({
+      openPopup: () => showPopup(popup, thisProps.onPopup),
+      closePupup: () => currentPopup.dom === popup && hidePopup(),
+      togglePopup: () => togglePopup(popup, thisProps.onPopup),
+    });
+
+  return (
+    <div
+      ref={popup as any}
+      class="popup"
+      style={{ display: 'none' }}
+      {...disableAutoCloseEvent}
+      ontransitionend={() => currentPopup.dom === popup || (popup.style.display = 'none')}
+    >
+      <div {...restProps}>{thisProps.children}</div>
+    </div>
+  );
+};
+
+/**
+ * 关闭当前弹出层
+ */
+export const closePopup = () => {
+  currentPopup.dom && hidePopup();
+};
+
+// 注册点击关闭弹出层的方法
+registerAutoClose(closePopup);

package/src/components/Pulldown.tsx

@@ -1,6 +1,5 @@
-// import { onCleanup, onMount, splitProps } from 'solid-js';
-
 // import { JSX } from '../jsx';
+// import { combineClass, onCleanup, onMount, splitProps } from '../reactive';
 // import { addEventListener, removeEventListener } from '../dom';
 
 // /**
@@ -143,7 +142,7 @@
 //   });
 
 //   return (
-//     <div ref={ref} class={['pulldown', thisProps.class].join(' ')} {...restProps}>
+//     <div ref={ref} class={combineClass('pulldown', thisProps.class)} {...restProps}>
 //       {props.children ||
 //         pulldownChildren ||
 //         (pulldownChildren = (

package/src/components/TextBox.tsx

@@ -0,0 +1,8 @@
+import { JSX } from '../jsx';
+import { combineClass, splitProps } from '../reactive';
+
+export const TextBox = (props?: JSX.SvgSVGAttributes<never>) => {
+  let [thisProps, restProps] = splitProps(props, ['class']);
+
+  return <input type="text" class={combineClass('textbox', thisProps.class)} {...restProps}></input>;
+};

package/src/dom.ts

@@ -44,50 +44,52 @@ if (isBrowser) {
 
   root.addEventListener('wheel', disableGlobalScroll, { passive: false });
   root.addEventListener('touchmove', disableGlobalScroll, { passive: false });
-}
 
-/**
- * 显示遮罩层
- */
-export const showMaskLayer = (onclick?: () => void) => {
-  if (isBrowser) {
-    if (!maskLayers.length) {
-      if (!maskLayer) {
-        let div = (maskLayer = document.createElement('div'));
+  document.addEventListener('DOMContentLoaded', () => {
+    let div = (maskLayer = document.createElement('div'));
 
-        div.className = 'mask-layer';
-        div.style.cssText =
-          'position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,0.4);z-index:8';
+    div.className = 'mask-layer';
+    div.style.cssText =
+      'position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,0.4);z-index:8';
 
-        // 点击遮罩层方法
-        div.addEventListener('click', (event) => {
-          let callbackFn = maskLayers[maskLayers.length - 1];
+    // 点击遮罩层方法
+    div.addEventListener('click', (event) => {
+      let callbackFn = maskLayers[maskLayers.length - 1];
 
-          callbackFn && callbackFn(event);
-        });
+      callbackFn && callbackFn(event);
+    });
 
-        document.body.appendChild(div);
-      }
+    document.body.appendChild(div);
+  });
+}
 
+/**
+ * 空函数
+ */
+const noop = () => {};
+
+/**
+ * 显示遮罩层
+ */
+export const showMaskLayer = isBrowser
+  ? (onclick?: () => void) => {
       maskLayer.style.display = 'block';
+      maskLayers.push(onclick);
     }
-
-    maskLayers.push(onclick);
-  }
-};
+  : noop;
 
 /**
  * 隐藏遮罩层
  */
-export const hideMaskLayer = () => {
-  if (isBrowser) {
-    maskLayers.pop();
+export const hideMaskLayer = isBrowser
+  ? () => {
+      maskLayers.pop();
 
-    if (!maskLayers.length) {
-      maskLayer.style.display = 'none';
+      if (!maskLayers.length) {
+        maskLayer.style.display = 'none';
+      }
     }
-  }
-};
+  : noop;
 
 const autocloseList = [];
 
@@ -117,21 +119,35 @@ export const unregisterAutoClose = (onclose: () => void) => {
 };
 
 /**
- * 侦听自动关闭事件（一般设置到 solid-js 的 App 节点上，且只能侦听一次）
+ * 是否禁止自动关闭
  */
-export const listenAutoCloseEvent = {
-  onpointerdown: () => {
-    for (let i = 0, l = autocloseList.length; i < l; i++) {
-      autocloseList[i]();
+let disableAutoClose = false;
+
+/**
+ * 开始侦听自动关闭事件
+ */
+export const startAutoCloseEvent = isBrowser
+  ? () => {
+      // 延迟注册解决 solidjs 事件顺序问题
+      setTimeout(() => {
+        document.addEventListener('pointerdown', () => {
+          if (disableAutoClose) {
+            disableAutoClose = false;
+          } else {
+            for (let i = 0, l = autocloseList.length; i < l; i++) {
+              autocloseList[i]();
+            }
+          }
+        });
+      });
     }
-  },
-};
+  : noop;
 
 /**
  * 禁止自动关闭事件
  */
 export const disableAutoCloseEvent = {
-  onpointerdown: (event: Event) => {
-    event.stopPropagation();
+  onpointerdown: () => {
+    disableAutoClose = true;
   },
 };

package/src/http.ts

@@ -10,7 +10,7 @@ export interface ResponseResult {
   /**
    * 自定义响应结果（type === 'custom' 时有效）
    */
-  custom?: Promise<any>;
+  custom?: any;
 }
 
 /**
@@ -25,7 +25,7 @@ export const httpInterceptor = {
   /**
    * 响应拦截（返回 Promise true 表示需要重新发送请求，返回 Promise false 抛出默认异常）
    */
-  response: (() => {}) as (response: Response, options?: RequestInit) => ResponseResult | void,
+  response: (() => {}) as (response: Response, options?: RequestInit) => Promise<ResponseResult> | void,
 };
 
 /**
@@ -73,30 +73,34 @@ Object.defineProperty(Promise.prototype, 'data', {
   },
 });
 
+const respondDefault = (response: Response, json: boolean) => {
+  // 失败返回异常
+  return response.ok
+    ? json
+      ? response.json()
+      : response
+    : Promise.reject(response.status + ' ' + response.statusText);
+};
+
 const handleResponse = (response: Response, url: string, json: boolean, options?: RequestInit) => {
   // 响应拦截
   let result = httpInterceptor.response(response, options);
 
   // 返回了异步对象
-  if (result) {
-    switch (result.type) {
-      case 'custom':
-        if (result.custom) {
-          return result.custom;
-        }
-        break;
+  return result
+    ? result.then((result) => {
+        switch (result.type) {
+          case 'custom':
+            return result.custom || respondDefault(response, json);
 
-      default:
-        return sendInternal(url, json, options);
-    }
-  }
+          case 'retry':
+            return sendInternal(url, json, options);
 
-  // 失败返回异常
-  return response.ok
-    ? json
-      ? response.json()
-      : response
-    : Promise.reject(response.status + ' ' + response.statusText);
+          default:
+            return respondDefault(response, json);
+        }
+      })
+    : respondDefault(response, json);
 };
 
 /**

package/src/i18n/languages/en.json

@@ -13,9 +13,9 @@
   },
   "Form": {
     "Required": "不能为空",
-    "NotLessThan": "不能小于 ${min}",
-    "NotGreaterThan": "不能大于 ${max}",
+    "NotLessThan": "不能小于 ${value}",
+    "NotGreaterThan": "不能大于 ${value}",
     "Between": "必须在 ${min} -> ${max} 之间",
-    "NotDate": "${label}: \"${value}\" 不是一个有效的日期值"
+    "NotDate": "\"${value}\" 不是一个有效的日期值"
   }
 }

package/src/index.ts

@@ -13,8 +13,12 @@ export * from './components/If';
 export * from './components/Switch';
 export * from './components/For';
 export * from './components/Icon';
-export * from './components/CollapsiblePanel';
+export * from './components/TextBox';
+export * from './components/Button';
 export * from './components/ComboBox';
+export * from './components/Canlendar';
+export * from './components/DatePicker';
+export * from './components/CollapsiblePanel';
 export * from './components/Carousel';
 export * from './components/KeepAlive';
 export * from './components/Dialog';

package/src/reactive.ts

@@ -299,6 +299,15 @@ export const toRaw = <T>(proxy: T): T => {
   return (proxy && proxy.__raw__) || proxy;
 };
 
+/**
+ * 合并 class
+ *
+ * @param classList class 列表
+ */
+export const combineClass = (...classList: (string | null | void)[]) => {
+  return classList.filter((item) => item).join(' ');
+};
+
 /**
  * 观测响应式属性变化
  *

package/demo/App.tsx

@@ -1,31 +0,0 @@
-import { reactive } from '../src/reactive';
-import { CanlendarPage } from './pages/Canlendar';
-import { ComboBoxPage } from './pages/ComboBox';
-import { FormPage } from './pages/Form';
-
-const Test = (props: { value: number; text: string }) => {
-  return (
-    <div>
-      <span>{props.value}</span>
-      <span>{props.text}</span>
-    </div>
-  );
-};
-
-export const App = () => {
-  const state = reactive({
-    value: 111,
-  });
-
-  const a = { text: '222' };
-
-  return (
-    <div>
-      <CanlendarPage></CanlendarPage>
-      <ComboBoxPage></ComboBoxPage>
-      <FormPage></FormPage>
-      <Test value={state.value} text={'222' + a.text}></Test>
-      <button onclick={() => (state.value = Math.random())}></button>
-    </div>
-  );
-};

package/demo/main.ts

@@ -1,7 +0,0 @@
-import '../css/all.css';
-
-import { render } from '../src';
-import { App } from './App';
-
-// 客户端渲染
-render(App, document.body);

package/demo/pages/ComboBox.tsx

@@ -1,10 +0,0 @@
-import { ComboBox } from '../../src/components/ComboBox';
-
-export const ComboBoxPage = () => {
-  return (
-    <ComboBox>
-      <div>111</div>
-      <div>222</div>
-    </ComboBox>
-  );
-};

package/demo/pages/Form.tsx

@@ -1,32 +0,0 @@
-import { reactive } from '../../src/reactive';
-import { For } from '../../src/components/For';
-import { Form, FormItem } from '../../src/components/Form';
-
-export const FormPage = () => {
-  const state = reactive({
-    align: 'right' as 'right' | 'left',
-    width: '100px',
-  });
-
-  return (
-    <Form data={{}} rules={{}} align={state.align} labelWidth={state.width}>
-      <FormItem field="a" label="111">
-        <input></input>
-      </FormItem>
-      <FormItem
-        field="b"
-        label={
-          <>
-            <span>123</span>
-            <span>456</span>
-          </>
-        }
-      >
-        <input></input>
-      </FormItem>
-      <button type="button" onclick={() => (state.align = state.align === 'left' ? 'right' : 'left')}>
-        align
-      </button>
-    </Form>
-  );
-};

package/icons/build.ts

@@ -1,24 +0,0 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-import { loadIconFile, loadIconsDirectory, saveIconsModule, saveIconsToHtml } from 'cdui-js/build/icons';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const icons = [
-  // 加载 cdui-js/icons 下的图标
-  loadIconsDirectory(path.join(__dirname, '../../../node_modules/cdui-js/icons'), 'both'),
-
-  loadIconFile(path.join(__dirname, 'logo.svg')),
-  loadIconsDirectory(path.join(__dirname, 'common/both')),
-  loadIconsDirectory(path.join(__dirname, 'common/stroke'), 'stroke'),
-  loadIconsDirectory(path.join(__dirname, 'header'), 'stroke'),
-
-  loadIconsDirectory(path.join(__dirname, 'menu'), 'both'),
-  loadIconsDirectory(path.join(__dirname, 'menu/color')),
-
-  loadIconsDirectory(path.join(__dirname, 'my'), 'both'),
-];
-
-saveIconsToHtml(path.join(__dirname, '../index.html'), icons.join('\n'));