cdui-js 1.0.22 → 1.0.24

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

@@ -1,4 +1,5 @@
 .datewidget {
+  position: relative;
   max-width: 380px;
   height: 320px;
   border-radius: 12px;
@@ -7,6 +8,11 @@
   font-size: 16px;
 }
 
+.datewidget:has(.datewidget) > .datewidget-header,
+.datewidget:has(.datewidget) > .datewidget-body {
+  display: none;
+}
+
 .datewidget-header {
   display: flex;
   align-items: center;
@@ -41,6 +47,7 @@
   width: 25%;
   height: 25%;
   cursor: pointer;
+  z-index: 1;
 }
 
 .datewidget-item.disabled {
@@ -66,6 +73,8 @@
   flex: auto;
   text-align: center;
   vertical-align: middle;
+  font-weight: 400;
+  font-size: 10px;
 }
 
 .canlendar-body {

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,52 @@
 .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;
 }
 
-.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,30 @@
+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';
-import { MobileDatePickerPage } from './pages/MobileDatePicker';
+
+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 (
@@ -11,7 +32,6 @@ export const App = () => {
       <CarouselPage></CarouselPage>
       <CanlendarPage></CanlendarPage>
       <DatePickerPage></DatePickerPage>
-      <MobileDatePickerPage></MobileDatePickerPage>
       <ComboBoxPage></ComboBoxPage>
       <FormPage></FormPage>
     </div>

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,12 +7,12 @@ export const CanlendarPage = () => {
     <div>
       <Canlendar
         value={new Date()}
-        onValueChange={(date) => {
-          console.log(date);
+        onchange={(event) => {debugger
+          console.log(event.detail);
         }}
       ></Canlendar>
-      <MonthWidget></MonthWidget>
-      <YearWidget></YearWidget>
+      {/* <MonthWidget></MonthWidget>
+      <YearWidget></YearWidget> */}
     </div>
   );
 };

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,64 +33,89 @@ 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>
           );
         },
       },
     ],
     a: 1,
     b: 2,
+
+    form: {
+      username: '',
+    },
   });
 
   let form: 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
-      </button>
-      <button type="button" onclick={() => form.validate()}>
-        validate
-      </button>
-      <button type="button" onclick={() => form.clearErrors()}>
-        clearErrors
+        click
       </button>
-    </Form>
+    </>
   );
 };

package/package.json

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