cdui-js 1.0.13 → 1.0.14

package/demo/src/main.ts

@@ -0,0 +1,10 @@
+import './css/all.css';
+
+import { startAutoCloseEvent, render } from '../../src';
+import { App } from './App';
+
+// 客户端渲染
+render(App, document.body);
+
+// 开始侦听自动关闭事件
+startAutoCloseEvent();

package/demo/{pages → src/pages}/Canlendar.tsx

@@ -1,4 +1,4 @@
-import { Canlendar } from '../../src/components/Canlendar';
+import { Canlendar } from '../../../src/components/Canlendar';
 
 export const CanlendarPage = () => {
   return (

package/demo/src/pages/ComboBox.tsx

@@ -0,0 +1,10 @@
+import { ComboBox } from '../../../src/components/ComboBox';
+
+export const ComboBoxPage = () => {
+  return (
+    <ComboBox popup={{ style: { width: '200px', padding: '8px 0' } }}>
+      <div>111</div>
+      <div>222</div>
+    </ComboBox>
+  );
+};

package/demo/src/pages/DatePicker.tsx

@@ -0,0 +1,5 @@
+import { DatePicker } from '../../../src/components/DatePicker';
+
+export const DatePickerPage = () => {
+  return <DatePicker></DatePicker>;
+};

package/demo/src/pages/Form.tsx

@@ -0,0 +1,66 @@
+import { reactive } from '../../../src/reactive';
+import { For } from '../../../src/components/For';
+import { TextBox } from '../../../src/components/TextBox';
+import { Form, FormApi, FormItem, ValidateRules } from '../../../src/components/Form';
+
+const rules: ValidateRules = {
+  a: {
+    type: 'number',
+  },
+};
+
+export const FormPage = () => {
+  const state = reactive({
+    align: 'left' as 'top' | 'left',
+    labelWidth: '60px',
+    items: [
+      {
+        field: 'a',
+        label: '111',
+        required: true,
+      },
+      {
+        field: 'b',
+        label: '222',
+        required: true,
+        labelWidth: '100px',
+      },
+    ],
+  });
+
+  let form: FormApi;
+
+  return (
+    <Form data={{}} 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}>
+            <TextBox></TextBox>
+          </FormItem>
+        )}
+      </For>
+      <button
+        type="button"
+        onclick={() =>
+          state.items.push({
+            field: '?',
+            label: '???',
+            required: false,
+            labelWidth: '100px',
+          })
+        }
+      >
+        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>
+    </Form>
+  );
+};

package/{vite.config.ts → demo/vite.config.ts}

@@ -2,7 +2,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
 
-import VitePlugin from './vite-plugin.js';
+import VitePlugin from '../vite-plugin.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -32,7 +32,7 @@ export default defineConfig({
   build: {
     // target: 'es2015',
     modulePreload: false,
-    outDir: path.join(__dirname, '../../dist/www'),
+    outDir: path.join(__dirname, 'dist'),
     emptyOutDir: true,
     rollupOptions: {
       input: path.join(__dirname, 'index.html'),

package/icons/backward.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.7793 2.22668L4.97596 5.78516C4.5268 6.20541 4.5268 6.89309 4.97596 7.31334L8.7793 10.8718" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3661 2.72003L6.01942 7.0667C5.50609 7.58003 5.50609 8.42003 6.01942 8.93336L10.3661 13.28" stroke="#1B212D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/close.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.750078 11.3565L11.3567 0.749922M11.3567 11.3565L0.750078 0.749922" stroke="#8693B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.16709 17.8331L17.8333 6.16689M17.8333 17.8331L6.16709 6.16689" stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons/dropdown.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5573 6.03015L8.44707 10.4231C7.96166 10.942 7.16737 10.942 6.68196 10.4231L2.57178 6.03015" stroke="#8693B6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.72 5.63428L7.06667 9.98094C7.58 10.4943 8.42 10.4943 8.93333 9.98094L13.28 5.63428" stroke="#1B212D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/forward.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.2207 2.22668L9.02404 5.78516C9.4732 6.20541 9.4732 6.89309 9.02404 7.31334L5.2207 10.8718" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.63391 2.72003L9.98058 7.0667C10.4939 7.58003 10.4939 8.42003 9.98058 8.93336L5.63391 13.28" stroke="#1B212D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "cdui-js",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "type": "module",
   "main": "src/index.ts",
   "bin": {
     "cdui-js": "./cli/bin.js"
   },
   "scripts": {
-    "dev": "vite --config vite.config.ts"
+    "dev": "vite --config demo/vite.config.ts",
+    "icons": "npx tsx demo/icons/build.ts",
+    "css": "npx tsx demo/css/build.ts"
   },
   "dependencies": {
     "chalk": "^5.6.2",

package/src/components/Button.tsx

@@ -0,0 +1,5 @@
+import { JSX } from '../jsx';
+
+export const Button = (props?: JSX.SvgSVGAttributes<never>) => {
+  return <button type="button" {...props}></button>;
+};

package/src/components/Canlendar.tsx

@@ -1,13 +1,10 @@
-import { createSignal, splitProps } from '../reactive';
+import { createSignal, combineClass, splitProps } from '../reactive';
 
 import { JSX } from '../jsx';
 import { Canleandar as i18n } from '../i18n';
 import { replaceTemplate } from '../template';
 import { For } from './For';
 
-// const equalsDay = (  today: Date,
-//   selected?: Date,)
-
 // 渲染日期项
 const renderDates = (
   items: string[],
@@ -111,28 +108,16 @@ const renderItems = (
   return items.join('');
 };
 
-const SwitchMonth = (props: { onclick: () => void }) => {
-  return (
-    <svg
-      class="canlendar-switch"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      onclick={props.onclick}
-    >
-      <path
-        d="M10.3661 2.72003L6.01942 7.0667C5.50609 7.58003 5.50609 8.42003 6.01942 8.93336L10.3661 13.28"
-        stroke-miterlimit="10"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
+const switchMonth = (value: Date, offset: 1 | -1) => {
+  let date = new Date(value.getTime());
+  let month = value.getMonth();
+
+  date.setMonth(month + offset);
+
+  return date;
 };
 
-const parseDate = (value: Date | string | number) => {
+export const parseDate = (value: Date | string | number) => {
   if (value) {
     switch (typeof value) {
       case 'number':
@@ -153,15 +138,6 @@ const formatMonth = (value: Date) => {
   return month > 9 ? month : '0' + month;
 };
 
-const switchMonth = (value: Date, offset: 1 | -1) => {
-  let date = new Date(value.getTime());
-  let month = value.getMonth();
-
-  date.setMonth(month + offset);
-
-  return date;
-};
-
 export const Canlendar = (
   props: Omit<JSX.HTMLAttributes<never>, 'children'> & {
     /**
@@ -183,16 +159,21 @@ export const Canlendar = (
   let domMonth: HTMLElement;
   let domBody: HTMLElement;
 
-  const [date, setDate] = createSignal(parseDate(thisProps.value) || new Date());
+  const [selectedDate, setSelectedDate] = createSignal(parseDate(thisProps.value));
+  const [showDate, setShowDate] = createSignal(selectedDate() || new Date());
 
   return (
-    <div class={['canlendar', thisProps.class].filter((item) => item).join(' ')} {...restProps}>
+    <div class={combineClass('canlendar', thisProps.class)} {...restProps}>
       <div class="canlendar-header">
         <div ref={domMonth as any} class="canlendar-month">
-          {replaceTemplate(i18n.Month, date().getFullYear(), formatMonth(date()))}
+          {replaceTemplate(i18n.Month, showDate().getFullYear(), formatMonth(showDate()))}
         </div>
-        <SwitchMonth onclick={() => setDate(switchMonth(date(), -1))}></SwitchMonth>
-        <SwitchMonth onclick={() => setDate(switchMonth(date(), 1))}></SwitchMonth>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setShowDate(switchMonth(showDate(), -1))}>
+          <use href="#icon-backward"></use>
+        </svg>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => setShowDate(switchMonth(showDate(), 1))}>
+          <use href="#icon-forward"></use>
+        </svg>
       </div>
       <div class="canlendar-weeks">
         <For each={i18n.Weeks}>{(item) => <span>{item}</span>}</For>
@@ -209,17 +190,14 @@ export const Canlendar = (
 
             if (dom !== target) {
               date = date.split('|');
-              onValueChange(new Date(date[0] | 0, date[1] | 0, date[2] | 0));
-
-              if (dom) {
-                dom.classList.remove('selected');
-              }
+              date = new Date(date[0] | 0, date[1] | 0, date[2] | 0);
 
-              target.classList.add('selected');
+              setSelectedDate(date);
+              onValueChange(date);
             }
           }
         }}
-        innerHTML={renderItems(date(), parseDate(thisProps.value), thisProps.disableDate)}
+        innerHTML={renderItems(showDate(), selectedDate(), thisProps.disableDate)}
       ></div>
     </div>
   );

package/src/components/Carousel.tsx

@@ -1,9 +1,18 @@
-import { createEffect, createMemo, createSignal, For, onCleanup, onMount, splitProps } from 'solid-js';
-
 import { JSX } from '../jsx';
 import { isBrowser } from '../dom';
 import { animateScrollIntoView } from '../animate-scroll-to';
-import { defineProperty } from '../reactive';
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  combineClass,
+  defineProperty,
+  onCleanup,
+  onMount,
+  splitProps,
+} from '../reactive';
+
+import { For } from './For';
 import { Icon } from './Icon';
 
 const CLASS_NAME = 'carousel-vertical';
@@ -269,7 +278,7 @@ export const Carousel = <T, U extends JSX.Element>(
   });
 
   return (
-    <div ref={ref as any} class={['carousel scrollbar-hidden', thisProps.class].filter(item => item).join(' ')} {...restProps}>
+    <div ref={ref as any} class={combineClass('carousel scrollbar-hidden', thisProps.class)} {...restProps}>
       <For each={fillItems(thisProps.each)}>{thisProps.children}</For>
     </div>
   );

package/src/components/CollapsiblePanel.tsx

@@ -1,7 +1,7 @@
 import { createSignal, splitProps } from 'solid-js';
 
 import { JSX } from '../jsx';
-import { defineProperty } from '../reactive';
+import { combineClass, defineProperty } from '../reactive';
 
 const COLLAPSED_CLASS = 'collapsed';
 
@@ -130,9 +130,7 @@ export const CollapsiblePanel = (
   return (
     <div
       ref={ref as any}
-      class={['collapsed-panel', thisProps.collapsed && COLLAPSED_CLASS, thisProps.class]
-        .filter((item) => item)
-        .join(' ')}
+      class={combineClass('collapsed-panel', thisProps.collapsed && COLLAPSED_CLASS, thisProps.class)}
       {...restProps}
     ></div>
   );

package/src/components/ComboBox.tsx

@@ -1,162 +1,66 @@
-import { splitProps } from '../reactive';
 import { JSX } from '../jsx';
-
-import { disableAutoCloseEvent, registerAutoClose } from '../dom';
-
-const POPUP_TOP_CLASS = 'combobox-popup-top';
-const POPUP_RIGHT_CLASS = 'combobox-popup-right';
-
-/**
- * 当前弹出层
- */
-let currentPopup: ComboBoxApi;
-
-/**
- * 关闭当前弹出层
- */
-export const closePopup = () => {
-  currentPopup && currentPopup.closePupup();
-};
-
-/**
- * 是否使用下拉动画
- */
-export let useDropdownTransition = true;
-
-/**
- * 设置是否使用下拉动画
- *
- * @param use 是否使用
- */
-export const setUseDropdownTransition = (use: boolean) => {
-  useDropdownTransition = use;
-};
-
-// 注册点击关闭弹出层的方法
-registerAutoClose(closePopup);
-
-/**
- * 下拉框组件外部访问接口
- */
-export interface ComboBoxApi {
-  /**
-   * 打开弹出框
-   */
-  openPopup(): void;
-  /**
-   * 关闭弹出框
-   */
-  closePupup(): void;
-}
+import { combineClass, splitProps } from '../reactive';
+import { disableAutoCloseEvent } from '../dom';
+import { Popup, PopupApi, PopupProps } from './Popup';
 
 /**
  * 下拉框组件
  */
-export const ComboBox = <T, U extends JSX.Element>(
-  props?: JSX.HTMLAttributes<never> & {
-    /**
-     * 值
-     */
-    value?: string;
-    /**
-     * 是否只读
-     */
-    readonly?: boolean;
-    /**
-     * 外部调用接口
-     */
-    api?: (api: ComboBoxApi) => void;
-  },
+export const ComboBox = (
+  props?: JSX.HTMLAttributes<never> &
+    PopupProps & {
+      /**
+       * 值
+       */
+      value?: string;
+      /**
+       * 是否只读
+       */
+      readonly?: boolean;
+      /**
+       * 获取焦点时是否自动弹出
+       */
+      popupOnFocus?: boolean;
+      /**
+       * 弹出层属性
+       */
+      popup?: Omit<JSX.HTMLAttributes<never>, 'children'>;
+    },
 ) => {
-  let [thisProps, restProps] = splitProps(props, ['class', 'value', 'readonly', 'api', 'children']);
-  let popup: HTMLElement;
-  let opened: boolean;
-
-  const toggle = (event?: Event) => {
-    if (popup) {
-      let combobox = popup.parentNode as HTMLElement;
-      let rect = combobox.getBoundingClientRect();
-      let style = popup.style;
-
-      if ((opened = !opened)) {
-        let windowWidth = window.innerWidth;
-        let windowHeight = window.innerHeight;
-        let classList = popup.classList;
-
-        if (currentPopup) {
-          currentPopup.closePupup();
-        }
-
-        // 设置当前弹出层
-        currentPopup = api;
-
-        style.height = 'auto';
-        style.display = 'block';
-
-        let height = popup.offsetHeight;
-
-        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 >= 0) {
-          classList.add(POPUP_RIGHT_CLASS);
-        } else {
-          classList.remove(POPUP_RIGHT_CLASS);
-        }
-
-        if (useDropdownTransition) {
-          style.height = '0';
-
-          setTimeout(() => {
-            style.height = height + 'px';
-          });
-        }
-      } else {
-        currentPopup = null;
-
-        if (useDropdownTransition) {
-          style.height = popup.offsetHeight + 'px';
-
-          setTimeout(() => {
-            style.height = '0';
-          });
-        } else {
-          style.display = 'none';
-        }
-      }
-    }
-
-    event && event.stopPropagation();
+  let [thisProps, restProps] = splitProps(props, [
+    'class',
+    'value',
+    'readonly',
+    'popupOnFocus',
+    'popup',
+    'onPopup',
+    'api',
+    'children',
+  ]);
+  let popup: PopupApi;
+
+  const initApi = (api) => {
+    popup = api;
+    thisProps.api && thisProps.api(popup);
   };
 
-  const api = {
-    openPopup: () => opened || toggle(),
-    closePupup: () => opened && toggle(),
-  };
-
-  // 初始化外部调用接口
-  props.api && props.api(api);
-
   return (
-    <div class={['combobox', thisProps.class].filter((item) => item).join(' ')} {...restProps}>
-      <div class="combobox-host" {...disableAutoCloseEvent} onclick={() => thisProps.readonly && toggle()}>
-        <input value={thisProps.value ?? ''} readonly={thisProps.readonly} style={{ border: 'none' }}></input>
-        <svg class="icon icon-s" aria-hidden={true} style={{ height: '100%', padding: '0 4px' }} onclick={toggle}>
+    <div class={combineClass('combobox', thisProps.class)} {...restProps}>
+      <div class="combobox-host" {...disableAutoCloseEvent}>
+        <input
+          class="combobox-input"
+          value={thisProps.value || ''}
+          readonly={thisProps.readonly}
+          onfocus={() => thisProps.popupOnFocus && popup.openPopup()}
+          onclick={() => thisProps.readonly && !thisProps.popupOnFocus && popup.togglePopup()}
+        ></input>
+        <svg class="icon icon-s" aria-hidden={true} onclick={() => popup.togglePopup()}>
           <use href="#icon-dropdown"></use>
         </svg>
       </div>
-      <div
-        ref={popup as any}
-        class="combobox-popup"
-        style={{ display: 'none' }}
-        {...disableAutoCloseEvent}
-        ontransitionend={() => opened || (popup.style.display = 'none')}
-      >
+      <Popup api={initApi} onPopup={thisProps.onPopup} {...thisProps.popup}>
         {thisProps.children}
-      </div>
+      </Popup>
     </div>
   );
 };

package/src/components/DatePicker.tsx

@@ -0,0 +1,91 @@
+import { JSX } from '../jsx';
+import { combineClass, createSignal, splitProps } from '../reactive';
+import { disableAutoCloseEvent } from '../dom';
+import { For } from './For';
+import { Popup, PopupApi } from './Popup';
+import { parseDate } from './Canlendar';
+
+const formatDate = (date: Date, format: string) => {
+  return date ? date.toLocaleString() : '';
+};
+
+const showPopup = () => {};
+
+const MobileTouchScroll = (props: { items: (number | string)[] }) => {
+  return (
+    <div>
+      <For each={props.items}>{(item) => <div>{item}</div>}</For>
+    </div>
+  );
+};
+
+const formatMonth = (value: Date) => {
+  let month = value.getMonth() + 1;
+
+  return month > 9 ? month : '0' + month;
+};
+
+// const computeMobileList = (value: Date) => {
+//   let year = value.getFullYear();
+//   let month = value.getMonth() + 1;
+//   let date = value.getDate();
+
+//   return [
+//     year > 5 ? [year - 2, year - 1, year, year + 1, year + 2]: [1,2,3,4,5],
+//     [formatMonth(month - 2), ]
+//   ];
+// };
+
+// const MobileDatePicker = (yearList: number[], monthList: string[], dateList: string[]) => {
+//   return (
+//     <div>
+//       <MobileTouchScroll items={yearList}></MobileTouchScroll>
+//       <MobileTouchScroll items={monthList}></MobileTouchScroll>
+//       <MobileTouchScroll items={dateList}></MobileTouchScroll>
+//     </div>
+//   );
+// };
+
+/**
+ * 日期选择组件
+ */
+export const DatePicker = (
+  props?: JSX.HTMLAttributes<never> & {
+    /**
+     * 值
+     */
+    value?: string | number | Date;
+    /**
+     * 日期格式
+     */
+    format?: string;
+    /**
+     * 是否只读
+     */
+    readonly?: boolean;
+  },
+) => {
+  let [thisProps, restProps] = splitProps(props, ['class', 'value', 'readonly', 'format', 'children']);
+  let popup: PopupApi;
+
+  const [value, setValue] = createSignal(thisProps.value && parseDate(thisProps.value));
+
+  return (
+    <div class={combineClass('datepicker', thisProps.class)} {...restProps}>
+      <div class="datepicker-host" {...disableAutoCloseEvent}>
+        <input
+          class="datepicker-input"
+          value={formatDate(value(), thisProps.format)}
+          readonly={thisProps.readonly}
+          onclick={() => thisProps.readonly && 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)} onPopup={() => showPopup()}>
+        {thisProps.children}
+      </Popup>
+    </div>
+  );
+};

package/src/components/Dialog.ts

@@ -16,7 +16,7 @@ export type Dialog = HTMLElement & {
  * 显示对话框
  *
  * @param component 对话框组件
- * @returns 关闭对话框方法
+ * @returns 对话框对象
  */
 export const showDialog = (component: () => JSX.Element): Dialog => {
   return createRoot((dispose) => {