cdui-js 1.0.23 → 1.0.25

package/css/all.css

@@ -7,9 +7,8 @@
 @import url(button.css);
 @import url(textbox.css);
 @import url(popup.css);
-@import url(combobox.css);
 @import url(datewidget.css);
-@import url(datepicker.css);
+@import url(dropdown.css);
 @import url(mobile-datepicker.css);
 @import url(form.css);
 @import url(carousel.css);

package/css/datewidget.css

@@ -47,6 +47,7 @@
   width: 25%;
   height: 25%;
   cursor: pointer;
+  z-index: 1;
 }
 
 .datewidget-item.disabled {

package/css/{datepicker.css → dropdown.css}

@@ -1,18 +1,13 @@
+.combobox,
 .datepicker {
-  position: relative;
-  width: 100px;
-  height: 32px;
-  overflow: visible;
-}
-
-.datepicker-host {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
+  width: 120px;
+  height: 32px;
 }
 
+.combobox-input,
 .datepicker-input {
   flex: auto;
   width: 100%;
@@ -26,7 +21,8 @@
   font-size: inherit;
 }
 
-.datepicker-host > .icon {
+.combobox-icon,
+.datepicker-icon {
   display: flex;
   justify-items: center;
   align-items: center;

package/css/popup.css

@@ -1,33 +1,54 @@
 .popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: -1px;
-  z-index: 100;
-  /* 不允许内边距，否则动画的高度不能小于内边距 */
+  position: fixed;
+  z-index: 9;
+  /* 不允许边框和内边距，否则动画的高度不能小于内边距 */
+  border: none !important;
   padding: 0 !important;
   will-change: height;
   transition: height 0.2s linear;
   overflow: hidden;
 }
 
-.popup-top {
-  top: auto;
-  bottom: calc(100% + 4px);
+.popup-fixed-left,
+.popup-fixed-right {
+  display: flex;
+  align-items: center;
+  top: 0;
+  height: 100%;
+}
+
+.popup-fixed-left > *,
+.popup-fixed-right > * {
+  height: 100 !important;
+  max-height: 100% !important;
 }
 
-.popup-right {
-  left: auto;
+.popup-fixed-left {
+  left: 0;
+}
+
+.popup-fixed-right {
   right: 0;
 }
 
-.le-480 .popup {
-  position: fixed;
-  top: auto;
-  bottom: 0;
-  left: -1px;
-  right: -1px;
+.popup-fixed-top,
+.popup-fixed-bottom {
+  display: flex;
+  justify-content: center;
+  left: 0;
+  width: 100%;
+}
+
+.popup-fixed-top > *,
+.popup-fixed-bottom > * {
   width: 100% !important;
   max-width: 100% !important;
-  max-height: 80%;
-  border-radius: 12px 12px 0 0;
+}
+
+.popup-fixed-top {
+  top: 0;
+}
+
+.popup-fixed-bottom {
+  bottom: 0;
 }

package/demo/css/css.md

@@ -283,18 +283,19 @@
 
 # combobox 下拉框
 
-.combobox { border: 1px solid #e4e4e4; background: white; }
+.combobox { border: 1px solid #e4e4e4; background: #ffffff; }
 .combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
+.combobox-popup { border: 1px solid #e4e4e4; background: #ffffff; }
 
 
 # canlendar monthwidget yearwidget 日历 年月 年
 
-.datewidget { border: 1px solid #e4e4e4; }
+.datewidget { border: 1px solid #e4e4e4; background: #ffffff; }
 .datewidget-header > .icon { stroke: #1b212d; }
 .datewidget-item.disabled { color: #e4e4e4; }
 .datewidget-item.prev-block, .datewidget-item.next-block { color: #888f97; }
 .datewidget-item.today::before { background: #f5f5f5; }
-.datewidget-item.selected { color: white; }
+.datewidget-item.selected { color: #ffffff; }
 .datewidget-item.selected::before { background: #ff4000; }
 
 .canlendar-weeks > span { color: #888f97; }
@@ -302,17 +303,12 @@
 
 # datepicker 日期选择
 
-.datepicker { border: 1px solid #e4e4e4; background: white; }
+.datepicker { border: 1px solid #e4e4e4; background: #ffffff; }
 .datepicker:has(.datepicker-input:focus) { border: 1px solid #1b212d; }
 
 
-# popup 弹出层
-
-.popup { border: 1px solid #e4e4e4; background: white; }
-
-
 # carousel 轮播
 
 .carousel-backward, .carousel-forward { background: rgba(255, 255, 255, 0.1); }
 .carousel-dot { background: rgba(65, 72, 90, 1); }
-.carousel-dot.selected { background: white; }
+.carousel-dot.selected { background: #ffffff; }

package/demo/src/App.tsx

@@ -1,9 +1,31 @@
+import { showPopup } from '../../src/popup';
 import { CanlendarPage } from './pages/Canlendar';
 import { CarouselPage } from './pages/Carousel';
 import { ComboBoxPage } from './pages/ComboBox';
 import { DatePickerPage } from './pages/DatePicker';
 import { FormPage } from './pages/Form';
 
+let objects = [];
+for (let i = 0; i < 1000000; i++) {
+  objects[i] = {};
+}
+
+let map = new WeakMap();
+let now = performance.now();
+
+for (let i = 0; i < 1000000; i++) {
+  map.set(objects[i], i);
+}
+
+console.log(performance.now() - now);
+
+const openDropdown = (align: HTMLElement) => {
+  const popup = showPopup(<div style={{ padding: '100px 0', background: 'silver' }}>11111111111111111111</div>, {
+    align,
+    transition: true,
+  });
+};
+
 export const App = () => {
   return (
     <div style={{ 'min-height': '100%' }}>

package/demo/src/css/atomic.css

@@ -909,27 +909,25 @@ body { stroke: #A2A7AD; fill: #A2A7AD; }
 .textbox:focus { border: 1px solid #1b212d; }
 
 
-.combobox { border: 1px solid #e4e4e4; background: white; }
+.combobox { border: 1px solid #e4e4e4; background: #ffffff; }
 .combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
+.combobox-popup { border: 1px solid #e4e4e4; background: #ffffff; }
 
 
-.datewidget { border: 1px solid #e4e4e4; }
+.datewidget { border: 1px solid #e4e4e4; background: #ffffff; }
 .datewidget-header > .icon { stroke: #1b212d; }
 .datewidget-item.disabled { color: #e4e4e4; }
 .datewidget-item.prev-block, .datewidget-item.next-block { color: #888f97; }
 .datewidget-item.today::before { background: #f5f5f5; }
-.datewidget-item.selected { color: white; }
+.datewidget-item.selected { color: #ffffff; }
 .datewidget-item.selected::before { background: #ff4000; }
 .canlendar-weeks > span { color: #888f97; }
 
 
-.datepicker { border: 1px solid #e4e4e4; background: white; }
+.datepicker { border: 1px solid #e4e4e4; background: #ffffff; }
 .datepicker:has(.datepicker-input:focus) { border: 1px solid #1b212d; }
 
 
-.popup { border: 1px solid #e4e4e4; background: white; }
-
-
 .carousel-backward, .carousel-forward { background: rgba(255, 255, 255, 0.1); }
 .carousel-dot { background: rgba(65, 72, 90, 1); }
-.carousel-dot.selected { background: white; }
+.carousel-dot.selected { background: #ffffff; }

package/demo/src/pages/Canlendar.tsx

@@ -7,7 +7,7 @@ export const CanlendarPage = () => {
     <div>
       <Canlendar
         value={new Date()}
-        onchange={(event) => {
+        onchange={(event) => {debugger
           console.log(event.detail);
         }}
       ></Canlendar>

package/demo/src/pages/ComboBox.tsx

@@ -1,8 +1,9 @@
-import { reactive } from '../../../src';
+import { reactive } from '../../../src/reactive';
+import { PopupApi } from '../../../src/popup';
 import { ComboBox } from '../../../src/components/ComboBox';
 
 export const ComboBoxPage = () => {
-  let combobox;
+  let combobox: PopupApi;
 
   const state = reactive({
     value: '111',
@@ -10,18 +11,20 @@ export const ComboBoxPage = () => {
 
   return (
     <ComboBox
-      api={(api) => (combobox = api)}
       value={state.value}
-      popup={{
-        style: { width: '200px', padding: '8px 0' },
-        onclick: (event) => {
-          state.value = event.target.textContent;
-          combobox.closePopup();
-        },
-      }}
-    >
-      <div>111</div>
-      <div>222</div>
-    </ComboBox>
+      api={(api) => (combobox = api)}
+      popup={() => (
+        <div
+          style={{ width: '200px', padding: '8px 0' }}
+          onclick={(event) => {
+            state.value = event.target.textContent;
+            combobox.closePopup();
+          }}
+        >
+          <div>111</div>
+          <div>222</div>
+        </div>
+      )}
+    ></ComboBox>
   );
 };

package/demo/src/pages/DatePicker.tsx

@@ -1,5 +1,10 @@
+import { reactive } from '../../../src/reactive';
 import { DatePicker } from '../../../src/components/DatePicker';
 
 export const DatePickerPage = () => {
-  return <DatePicker></DatePicker>;
+  let state = reactive({
+    value: null,
+  });
+
+  return <DatePicker value={state.value} onchange={(event) => (state.value = event.detail)}></DatePicker>;
 };

package/demo/src/pages/Form.tsx

@@ -33,16 +33,18 @@ export const FormPage = () => {
             <ComboBox
               api={(api) => (combobox = api)}
               value={state.b}
-              popup={{
-                onclick: (event) => {
-                  state.b = +event.target.textContent;
-                  combobox.closePopup();
-                },
-              }}
-            >
-              <div>1</div>
-              <div>2</div>
-            </ComboBox>
+              popup={() => (
+                <div
+                  onclick={(event) => {
+                    state.b = +event.target.textContent;
+                    combobox.closePopup();
+                  }}
+                >
+                  <div>1</div>
+                  <div>2</div>
+                </div>
+              )}
+            ></ComboBox>
           );
         },
       },
@@ -51,65 +53,69 @@ export const FormPage = () => {
     b: 2,
 
     form: {
-      username: ''
-    }
+      username: '',
+    },
   });
 
   let form: FormApi;
 
-  let form2: FormApi
+  let form2: FormApi;
 
   return (
     <>
-    <Form data={state} rules={{}} align={state.align} labelWidth={state.labelWidth} api={(api) => (form = api)}>
-      <For each={state.items}>
-        {(item) => (
-          <FormItem field={item.field} label={item.label} required={item.required}>
-            <div>
-              <item.Input></item.Input>
-            </div>
-          </FormItem>
-        )}
-      </For>
-      <div>{`a: ${state.a}  b: ${state.b}`}</div>
+      <Form data={state} rules={{}} align={state.align} labelWidth={state.labelWidth} api={(api) => (form = api)}>
+        <For each={state.items}>
+          {(item) => (
+            <FormItem field={item.field} label={item.label} required={item.required}>
+              <div>
+                <item.Input></item.Input>
+              </div>
+            </FormItem>
+          )}
+        </For>
+        <div>{`a: ${state.a}  b: ${state.b}`}</div>
+        <button
+          type="button"
+          onclick={() =>
+            state.items.push({
+              field: '?',
+              label: '???',
+              required: false,
+              labelWidth: '100px',
+              Input: () => <TextBox></TextBox>,
+            })
+          }
+        >
+          append
+        </button>
+        <button type="button" onclick={() => (state.align = state.align === 'left' ? 'top' : 'left')}>
+          align
+        </button>
+        <button type="button" onclick={() => (state.labelWidth = parseInt(state.labelWidth) + 10 + 'px')}>
+          labelWidth
+        </button>
+        <button type="button" onclick={() => form.validate()}>
+          validate
+        </button>
+        <button type="button" onclick={() => form.clearErrors()}>
+          clearErrors
+        </button>
+      </Form>
+
+      <Form data={state.form} rules={{}} api={(api) => (form2 = api)}>
+        <FormItem label="username" required field="username">
+          <input value={state.form.username} onchange={(e) => (state.form.username = e.target.value)} />
+        </FormItem>
+      </Form>
+
       <button
-        type="button"
-        onclick={() =>
-          state.items.push({
-            field: '?',
-            label: '???',
-            required: false,
-            labelWidth: '100px',
-            Input: () => <TextBox></TextBox>,
-          })
-        }
+        onclick={async () => {
+          const valid = await form2.validate();
+          console.log(valid);
+        }}
       >
-        append
-      </button>
-      <button type="button" onclick={() => (state.align = state.align === 'left' ? 'top' : 'left')}>
-        align
-      </button>
-      <button type="button" onclick={() => (state.labelWidth = parseInt(state.labelWidth) + 10 + 'px')}>
-        labelWidth
+        click
       </button>
-      <button type="button" onclick={() => form.validate()}>
-        validate
-      </button>
-      <button type="button" onclick={() => form.clearErrors()}>
-        clearErrors
-      </button>
-    </Form>
-
-    <Form data={state.form} rules={{}}  api={(api) => (form2 = api)}>
-      <FormItem label="username" required field='username'>
-        <input value={state.form.username} onchange={e => state.form.username = e.target.value} />
-      </FormItem>
-    </Form>
-
-    <button onclick={async() => {
-      const valid = await form2.validate()
-      console.log(valid)
-    }}>click</button>
     </>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdui-js",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "type": "module",
   "main": "src/index.ts",
   "bin": {

package/src/components/ComboBox.tsx

@@ -1,43 +1,49 @@
 import { JSX } from '../jsx';
 import { combineClass, omitProps, useContext, watch } from '../reactive';
 import { disableAutoCloseEvent } from '../dom';
-import { Popup, PopupApi, PopupProps } from './Popup';
+import { PopupApi, initDropdown } from '../popup';
+
 import { FormItemContext } from './provider';
 
-const OMIT_PROPS = ['class', 'value', 'readonly', 'popupOnFocus', 'popup', 'onPopup', 'api', 'children'] as const;
+const OMIT_PROPS = ['class', 'value', 'format', /*'readonly', */ 'popup', 'popupOnFocus', 'api'] as const;
 
 /**
  * 下拉框组件
  */
 export const ComboBox = (
-  props?: JSX.HTMLAttributes<never> &
-    PopupProps & {
-      /**
-       * 值
-       */
-      value?: any;
-      /**
-       * 值样式
-       *
-       * @param value 当前值
-       */
-      format?(value: any): string;
-      /**
-       * 是否只读
-       */
-      readonly?: boolean;
-      /**
-       * 获取焦点时是否自动弹出
-       */
-      popupOnFocus?: boolean;
-      /**
-       * 弹出层属性
-       */
-      popup?: Omit<JSX.HTMLAttributes<never>, 'children'>;
-    },
+  props?: Omit<JSX.HTMLAttributes<never>, 'children'> & {
+    /**
+     * 弹出层
+     */
+    popup: () => JSX.Element;
+    /**
+     * 值
+     */
+    value?: any;
+    /**
+     * 值样式
+     *
+     * @param value 当前值
+     */
+    format?(value: any): string;
+    // /**
+    //  * 是否只读
+    //  */
+    // readonly?: boolean;
+    /**
+     * 获取焦点时是否自动弹出
+     */
+    popupOnFocus?: boolean;
+    /**
+     * 值变更事件
+     */
+    onchange?: (event: CustomEvent<Date>) => void;
+    /**
+     * 外部调用接口
+     */
+    api: (api: PopupApi) => void;
+  },
 ) => {
-  let popup: PopupApi;
-
   const formItem = useContext(FormItemContext);
 
   const initFormItem = (dom: HTMLInputElement) => {
@@ -49,31 +55,29 @@ export const ComboBox = (
     formItem.init(dom);
   };
 
+  let api: PopupApi;
+
   return (
-    <div class={combineClass('combobox', props.class)} {...omitProps(props, OMIT_PROPS)}>
-      <div class="combobox-host" {...disableAutoCloseEvent}>
-        <input
-          ref={formItem && initFormItem}
-          class="combobox-input"
-          value={props.format ? props.format(props.value) : '' + (props.value || '')}
-          readonly={props.readonly}
-          onfocus={() => props.popupOnFocus && popup.openPopup()}
-          onclick={() => props.readonly && !props.popupOnFocus && popup.togglePopup()}
-        ></input>
-        <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
-          <use href="#icon-dropdown"></use>
-        </svg>
-      </div>
-      <Popup
-        api={(api) => {
-          popup = api;
-          props.api && props.api(popup);
-        }}
-        onPopup={props.onPopup}
-        {...props.popup}
-      >
-        {props.children}
-      </Popup>
+    <div
+      ref={(dom) => {
+        api = initDropdown(dom, () => <div class="combobox-popup">{props.popup()}</div>);
+        props.api && props.api(api);
+      }}
+      class={combineClass('combobox', props.class)}
+      {...disableAutoCloseEvent}
+      {...omitProps(props, OMIT_PROPS)}
+    >
+      <input
+        ref={formItem && initFormItem}
+        class="combobox-input"
+        value={props.format ? props.format(props.value) : '' + (props.value || '')}
+        readonly={true}
+        onfocus={() => props.popupOnFocus && api.openPopup()}
+        onclick={() => !props.popupOnFocus && api.togglePopup()}
+      ></input>
+      <svg class="combobox-icon icon icon-s" aria-hidden={true} onclick={() => api.togglePopup()}>
+        <use href="#icon-dropdown"></use>
+      </svg>
     </div>
   );
 };