Dev calendar up

dev/zui-dev/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "zui-dev",
+    "description": "ZUI dev helpers",
+    "version": "0.0.1",
+    "type": "module",
+    "main": "src/main.ts"
+}

dev/zui-dev/src/dev.ts

@@ -0,0 +1,26 @@
+export type PageLoadListener = () => void;
+export type PageUpdateListener = () => void;
+
+export function onPageLoad(listener: PageLoadListener) {
+    const isLoaded = document.getElementById('libPage')?.classList.contains('is-loaded');
+    if (isLoaded) {
+        listener();
+    } else {
+        document.addEventListener('dev-page-load', listener);
+    }
+}
+
+export function onPageUpdate(listener: PageUpdateListener) {
+    onPageLoad(listener);
+    document.addEventListener('dev-page-update', listener);
+}
+
+Object.assign(globalThis, {
+    onPageLoad,
+    onPageUpdate,
+});
+
+declare global {
+    function onPageLoad(listener: PageLoadListener): void;
+    function onPageUpdate(listener: PageUpdateListener): void;
+}

dev/zui-dev/src/main.ts

@@ -0,0 +1 @@
+export * from './dev';

docs/_/.vitepress/theme-config.ts

@@ -63,7 +63,7 @@ export const extLibs = [...zuiLib.reduce((set, lib) => {
 
 function createNav() {
     return [
-        {text: '指引',        link: '/guide/start/',     activeMatch: '/guide/'},
+        {text: '文档',        link: '/guide/start/',     activeMatch: '/guide/'},
         {text: 'CSS 工具类',  link: '/utilities/skin/utilities/solid', activeMatch: '/utilities/'},
         {text: '组件',        link: '/lib/components/button/',       activeMatch: '/lib/'},
         {text: 'ZUI1',        link: 'https://openzui.com/1/'},

lib/btn-group/src/types/btn-group-options.ts

@@ -3,7 +3,7 @@ import type {CommonListProps, Item} from '@zui/common-list';
 import type {BtnGroupItem} from './btn-group-item';
 
 export interface BtnGroupOptions<T extends Item = BtnGroupItem> extends CommonListProps<T> {
-    size?: 'xs' | 'sm' | 'lg' | 'xl';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     type?: string;
     btnType?: string;
     btnProps?: Partial<ButtonProps>;

lib/button/src/component/button.tsx

@@ -16,12 +16,12 @@ export class Button<P extends ButtonProps = ButtonProps> extends HElement<P> {
     }
 
     protected _getChildren(props: RenderableProps<P>) {
-        const {loading, loadingIcon, loadingText, icon, text, children, trailingIcon, caret} = props;
+        const {loading, loadingIcon, loadingText, icon, iconClass, text, textClass, children, trailingIcon, trailingIconClass, caret} = props;
         return [
-            loading ? <Icon icon={loadingIcon || 'icon-spinner-snake'} className="spin" /> : <Icon icon={icon} />,
-            this._isEmptyText ? null : <span className="text">{loading ? loadingText : text}</span>,
+            loading ? <Icon icon={loadingIcon || 'icon-spinner-snake'} className="spin" /> : <Icon icon={icon} className={iconClass} />,
+            this._isEmptyText ? null : <span className={classes('text', textClass)}>{loading ? loadingText : text}</span>,
             loading ? null : children,
-            loading ? null : <Icon icon={trailingIcon} />,
+            loading ? null : <Icon icon={trailingIcon} className={trailingIconClass} />,
             loading ? null : caret ? <span className={typeof caret === 'string' ? `caret-${caret}` : 'caret'} /> : null,
         ];
     }
@@ -43,7 +43,7 @@ export class Button<P extends ButtonProps = ButtonProps> extends HElement<P> {
 
     protected _getProps(props: RenderableProps<P>) {
         const component = this._getComponent(props);
-        const {url, target, disabled, btnType = 'button', hint} = props;
+        const {url, target, disabled, btnType = 'button', hint, command} = props;
         const asLink = component === 'a';
         const componentProps: Record<string, unknown> = {
             ...super._getProps(props),
@@ -67,6 +67,9 @@ export class Button<P extends ButtonProps = ButtonProps> extends HElement<P> {
             if (target !== undefined) {
                 componentProps[asLink ? 'target' : 'data-target'] = target;
             }
+            if (command) {
+                componentProps['zui-command'] = command;
+            }
         }
         return componentProps;
     }

lib/button/src/types/button-props.ts

@@ -1,5 +1,5 @@
-import type {ComponentChildren, JSX} from 'preact';
-import type {IconType, HElementProps} from '@zui/core';
+import type {JSX, ComponentChildren} from 'preact';
+import type {IconType, HElementProps, ClassNameLike} from '@zui/core';
 
 export interface ButtonProps extends HElementProps {
     type?: string; // primary, secondary ...
@@ -12,12 +12,16 @@ export interface ButtonProps extends HElementProps {
     rounded?: boolean | string;
     active?: boolean;
     icon?: IconType;
+    iconClass?: ClassNameLike;
     text?: ComponentChildren;
+    textClass?: ClassNameLike;
     square?: boolean;
     trailingIcon?: IconType;
+    trailingIconClass?: ClassNameLike;
     caret?: 'up' | 'down' | 'left' | 'right' | boolean;
     hint?: string;
     loading?: boolean;
     loadingIcon?: IconType;
     loadingText?: string;
+    command?: string;
 }

lib/calendar/README.md

@@ -0,0 +1,59 @@
+# Calendar 日历
+
+用于展示和管理事件的日历组件。它允许用户查看日期、添加特定日期的事件来安排日程。提供可配置的事件与日历集。
+
+## 基本使用
+
+使用HTML标签 `<div>` 作为容器来实现日历组件，可使用zui-create-calendar、new zui.Calendar()等指令来配置日历组件。
+
+## 默认样式
+
+<div class="calendar-normal"></div>
+
+## 自定义事件与事件集
+
+ <!-- 日历集和事件在日历中都可以进行自定义配置, 日历集和事件id都需要唯一，否则会导致日历显示异常。
+ 事件与事件集的配置项如下： -->
+ 事件是在日历中添加的具体事件，可自定义事件的颜色、文字、日期、拖拽回调函数、点击回调函数等。事件集是一组事件的集合与事件唯一关联。事件、事件集id都需要唯一。任意一个事件可进行拖拽来修改事件时间,并会触发回调函数。左侧日历集可决定属于该日日历集的事件是否显示。
+<div class='calendar-event'></div>
+
+## 可配置项
+
+### 日历:
+| 参数                   | 类型                                                     | 作用                                       |
+|----------------------|:------------------------------------------------------:|------------------------------------------|
+| `date`               | Date                                                   | 当前日期                                   |
+| `calendarEvents`     | CalendarEvent[]                                        | 当前的日历事件数组                        |
+| `calendarEventGroups`| CalendarEventGroup[]                                   | 当前的事件组数组                          |
+| `mode`               | 'day' \| 'week' \| 'year'                             | 日历的显示模式                            |
+| `showCalendarGroup`  | boolean                                               | 是否显示日历事件组                       |
+| `shrinkFreeWeekend`  | boolean                                               | 是否压缩空闲周末                          |
+| `onDateClick`        | (date: Date) => void                                  | 日期点击时的回调函数                      |
+| `onDragChange`       | (newState: DraggableState, oldState: DraggableState) => void | 拖动状态变化时的回调函数          |
+| `onEventClick`       | (e: CalendarEvent) => void                            | 事件点击时的回调函数                     |
+| `maxVisibleEvents`   | number                                                | 每个日期最大可见事件数量                  |
+                   |
+
+
+### 事件属性:
+calendarEvent:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件的唯一标识符 |
+| `title`         | string | 事件的标题 |
+| `calendarEventGroup`      | string | 事件所属的事件组ID |
+| `date`      | Date | 事件的日期 |
+| `description`           | string | 事件的描述（可选）  |
+
+### 事件集:
+CalendarEventGroups:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件组的唯一标识符 |
+| `title`         | string | 事件组的标题（可选） |
+| `color`         | string | 事件组的颜色（可选） |
+| `checked`       | boolean | 事件组是否被选中（可选） |
+
+

lib/calendar/dev.ts

@@ -0,0 +1,121 @@
+import 'preact/debug';
+import 'zui-dev';
+import {Calendar} from './src/main';
+
+onPageLoad(() => {
+    const calendarNormal = new Calendar('.calendar-normal', {});
+    const calendarEvent = new Calendar('.calendar-event', {
+        maxVisibleEvents:2,
+        shrinkFreeWeekend:true,
+        calendarEvents:[{
+            id: '1',
+            title: '观看天花板',
+            calendarEventGroup: '1',
+            date:new Date(2024, 10, 25, 9, 29, 12, 34),
+            description: '观看天花板',
+        },
+        {
+            id: '2',
+            title: '和绿巨人睡觉',
+            calendarEventGroup: '2',
+            date:new Date(2024, 10, 26, 7, 12, 47),
+            description: '和绿巨人睡觉',
+        },
+        {
+            id: '3',
+            title: '和路人乙捶打',
+            calendarEventGroup: '3',
+            date:new Date(2024, 10, 27, 7, 30, 30),
+            description: '和路人乙捶打',
+        },
+        {
+            id: '4',
+            title: '自言自语',
+            calendarEventGroup: '4',
+            date:new Date(2024, 10, 28, 1, 58, 30),
+            description: '自言自语',
+        },
+        {
+            id: '5',
+            title: '观望天花板',
+            calendarEventGroup: '5',
+            date:new Date(2024, 10, 29, 7, 30, 30),
+            description: '观望天花板',
+        },
+        {
+            id: '6',
+            title: 'event3',
+            calendarEventGroup: '1',
+            date:new Date(2024, 11, 9),
+            description: '你好呀',
+        },
+        ],
+        calendarEventGroups:[{
+            id: '1',
+            title: 'event set 1',
+            color: '#f39988'}, {
+            id: '2',
+            title: 'event set 2',
+            color: '#d4a785'}, {id: '3', title: 'event set 3', color: '#29bcd2'},
+        {id: '4', title: 'event set 4', color: '#7ec67e'},
+        {id: '5', title: 'event set 5', color: '#f1bd73'}]});
+    const calendar = new Calendar('.calendar', {
+        maxVisibleEvents:2,
+        shrinkFreeWeekend:true,
+        calendarEvents:[{
+            id: '1',
+            title: '观看天花板',
+            calendarEventGroup: '1',
+            date:new Date(2024, 8, 25, 9, 29),
+            description: '观看天花板',
+        },
+        {
+            id: '2',
+            title: '和绿巨人睡觉',
+            calendarEventGroup: '2',
+            date:new Date(2024, 8, 26, 7, 12, 47),
+            description: '和绿巨人睡觉',
+        },
+        {
+            id: '3',
+            title: '和路人乙捶打',
+            calendarEventGroup: '3',
+            date:new Date(2024, 8, 27, 7, 30, 30),
+            description: '和路人乙捶打',
+        },
+        {
+            id: '4',
+            title: '自言自语',
+            calendarEventGroup: '4',
+            date:new Date(2024, 8, 28, 1, 58, 30),
+            description: '自言自语',
+        },
+        {
+            id: '5',
+            title: '观望天花板',
+            calendarEventGroup: '5',
+            date:new Date(2024, 8, 29, 7, 30, 30),
+            description: '观望天花板',
+        },
+        {
+            id: '6',
+            title: 'event3',
+            calendarEventGroup: '1',
+            date:new Date(2024, 7, 9),
+            description: '你好呀',
+        },
+        ],
+        calendarEventGroups:[{
+            id: '1',
+            title: 'event set 1',
+            color: '#f39988'}, {
+            id: '2',
+            title: 'event set 2',
+            color: '#d4a785'}, {id: '3', title: 'event set 3', color: '#29bcd2'},
+        {id: '4', title: 'event set 4', color: '#7ec67e'},
+        {id: '5', title: 'event set 5', color: '#f1bd73'}]});
+
+    console.log('> calendar-normal instance created', calendarNormal);
+    console.log('> calendar-event instance created', calendarEvent);
+    console.log('> calendar instance created', calendar);
+});

lib/calendar/docs/lib/components/index.md

@@ -0,0 +1,59 @@
+# Calendar 日历
+
+用于展示和管理事件的日历组件。它允许用户查看日期、添加特定日期的事件来安排日程。提供可配置的事件与日历集。
+
+## 基本使用
+
+使用HTML标签 `<div>` 作为容器来实现日历组件，可使用zui-create-calendar、new zui.Calendar()等指令来配置日历组件。
+
+## 默认样式
+
+<div class="calendar-normal"></div>
+
+## 自定义事件与事件集
+
+ <!-- 日历集和事件在日历中都可以进行自定义配置, 日历集和事件id都需要唯一，否则会导致日历显示异常。
+ 事件与事件集的配置项如下： -->
+ 事件是在日历中添加的具体事件，可自定义事件的颜色、文字、日期、拖拽回调函数、点击回调函数等。事件集是一组事件的集合与事件唯一关联。事件、事件集id都需要唯一。任意一个事件可进行拖拽来修改事件时间,并会触发回调函数。左侧日历集可决定属于该日日历集的事件是否显示。
+<div class='calendar-event'></div>
+
+## 可配置项
+
+### 日历:
+| 参数                   | 类型                                                     | 作用                                       |
+|----------------------|:------------------------------------------------------:|------------------------------------------|
+| `date`               | Date                                                   | 当前日期                                   |
+| `calendarEvents`     | CalendarEvent[]                                        | 当前的日历事件数组                        |
+| `calendarEventGroups`| CalendarEventGroup[]                                   | 当前的事件组数组                          |
+| `mode`               | 'day' \| 'week' \| 'year'                             | 日历的显示模式                            |
+| `showCalendarGroup`  | boolean                                               | 是否显示日历事件组                       |
+| `shrinkFreeWeekend`  | boolean                                               | 是否压缩空闲周末                          |
+| `onDateClick`        | (date: Date) => void                                  | 日期点击时的回调函数                      |
+| `onDragChange`       | (newState: DraggableState, oldState: DraggableState) => void | 拖动状态变化时的回调函数          |
+| `onEventClick`       | (e: CalendarEvent) => void                            | 事件点击时的回调函数                     |
+| `maxVisibleEvents`   | number                                                | 每个日期最大可见事件数量                  |
+                   |
+
+
+### 事件属性:
+calendarEvent:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件的唯一标识符 |
+| `title`         | string | 事件的标题 |
+| `calendarEventGroup`      | string | 事件所属的事件组ID |
+| `date`      | Date | 事件的日期 |
+| `description`           | string | 事件的描述（可选）  |
+
+### 事件集:
+CalendarEventGroups:
+
+| 参数       | 类型           | 作用  |
+| ------------- |:-------------:| ----- |
+| `id`              | string | 事件组的唯一标识符 |
+| `title`         | string | 事件组的标题（可选） |
+| `color`         | string | 事件组的颜色（可选） |
+| `checked`       | boolean | 事件组是否被选中（可选） |
+
+

lib/calendar/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@zui/calendar",
+    "description": "ZUI Calendar",
+    "version": "0.0.1",
+    "keywords": [
+        "js",
+        "cs",
+        "zui:component"
+    ],
+    "main": "src/main.ts",
+    "module": "src/main.ts",
+    "browser": "src/main.ts",
+    "dependencies": {
+        "@zui/core": "workspace:^0.0.1",
+        "@zui/helpers": "workspace:^0.0.1"
+    },
+    "files": [
+        "./src/**/*"
+    ],
+    "devDependencies": {
+        "zui-dev": "workspace:^0.0.1"
+    },
+    "zui": {
+        "type": "component",
+        "displayName": "日历",
+        "notReady": true,
+        "wip": true,
+        "contributes": {
+            "css": [
+                "class",
+                "var"
+            ],
+            "js": [
+                "component"
+            ]
+        }
+    }
+}