snail.vue 2.0.4 → 2.0.6

package/README.md

@@ -54,17 +54,7 @@
 | [Tree](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#tKdSd)    | **树组件；基于 nodes 渲染树，支持节点自定义，集成节点事件和本地搜索**                                                     |
 | [Wrapper](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#gita6) | **包裹层组件；作为常用组件的包裹层，自动实现组件在 page 和 popup 中展现，让内容组件关注核心逻辑即可**                     |
 
-## 3.3. **form 表单组件**
-
-**封装表单专属组件，如 input、文件上传等**
-
-**详细说明：**[https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg](https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg)
-
-| **组件**                                                            | **简介**                                        |
-| ------------------------------------------------------------------- | ----------------------------------------------- |
-| [Input](https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg#lw7O6) | **输入框组件，对原生 input 做美化，支持标题等** |
-
-## 3.4. **popup 弹窗组件**
+## 3.3. **popup 弹窗组件**
 
 **基于 IPopupManager 实现弹窗管理，自动管理弹窗层级、弹窗生命周期；提供基础 popup 弹窗方法；并扩展 dialog、follow、toast、confirm 弹窗方法**
 
@@ -79,7 +69,7 @@
 | [toast](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#FWNH1)    | **消息提示弹窗；模拟 Android 的 Toast 弹窗提示消息**                                   |
 | [confirm](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#wohc0)  | **确认弹窗；模拟实现原生 confirm 弹窗**                                                |
 
-## 3.5. **prompt 提示组件**
+## 3.4. **prompt 提示组件**
 
 **封装一些提示性质的通用组件，如数据加载状态、无数据提醒等等**
 

package/dist/snail.vue.d.ts

@@ -668,6 +668,159 @@ type TableRowOptions = HeightStyle & {};
  */
 type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
 
+/**
+ * 排序组件 配置选项
+ * - 整理部分SortableJs中的配置，不分逻辑不开放
+ */
+type SortOptions<T> = {
+    /**
+     * 变化器
+     * - 在此元素值发生变化时，重新刷新排序面板
+     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
+     */
+    changer: T;
+    /**
+     * 拖动哪个元素
+     * - 传入类样式选择器；如 .table-row
+     */
+    draggable: string;
+    /**
+     * 哪个元素启动拖拽
+     * - 传入类样式选择器；如 .sort-handle
+     * - 不传入则默认 draggable
+     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
+     */
+    handle?: string;
+    /**
+     * 拖动的元素上增加的类样式
+     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
+     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
+     * - 默认：snail-sort-drag
+     */
+    dragClass?: string;
+    /**
+     * 幽灵元素类样式名称
+     * - 拖动时在面板上占位的元素
+     * - 默认：snail-sort-ghost
+     */
+    ghostClass?: string;
+    /**
+     * 过滤器，不需要进行拖动的元素
+     * - 传入类样式选择器；如 .sort-handle
+     * - 实现特定子元素不触发拖动排序功能
+     */
+    filter?: string;
+    /**
+     * 排序组
+     * - 组相同时，可跨组拖拽排序
+     * - 不传入，则内部生成guid
+     * - 为
+     */
+    group?: string | SortGroupOptions;
+    /**
+     * 动画时间
+     * - 单位ms；默认150ms
+     */
+    animation?: number;
+    /**
+     * 禁用排序效果
+     * - 为true时，此容器内元素不能拖动，此不构建sortable实例
+     */
+    disabled?: boolean;
+    /**
+     * 在当前容器内是否禁用拖拽排序
+     * - 为true时，此容器内部不能拖拽，但可拖动到其他同名group内
+     * - 初期想用sort，但作Vue组件属性时，bool类型不传值会自动默认false，和初衷不符
+     */
+    sortDisabled?: boolean;
+};
+/**
+ * 排序组件的Group属性配置选项
+ */
+type SortGroupOptions = {
+    /**
+     * 排序组名称；
+     * - 不传入时自动生成
+     */
+    name: string;
+    /**
+     * 定义从这个列表容器移动出去的设置
+     * - true:列表容器内的列表单元可以被移出；
+     * - false：列表容器内的列表单元不可以被移出；
+     * - "clone"：列表单元移出，移动的为该元素的副本；
+     * - function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
+     * - - 暂时不支持 function
+     */
+    pull: true | false | "clone";
+    /**
+     * 用来定义往这个列表容器放置列表单元的的设置
+     * - true:列表容器可以从其他列表容器内放入列表单元；
+     * - false：与true相反；
+     * - string|string[]：代表的是group配置项里定义的name值。如['foo','bar']
+     * - function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；
+     * - - 暂时不支持 function
+     */
+    put: true | false | string | string[];
+};
+/**
+ * 排序组件 事件
+ */
+type SortEvents = {
+    /**
+     * 开始拖拽
+     */
+    start: [evt: SortEvent];
+    /**
+     * 移动到新容器时
+     */
+    add: [evt: SortEvent];
+    /**
+     * 从当前容器移除时
+     */
+    remove: [evt: SortEvent];
+    /**
+     * 结束拖拽
+     */
+    end: [evt: SortEvent];
+    /**
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
+     */
+    update: [oldIndex: number, newIndex: number];
+};
+/**
+ * 排序事件对象
+ */
+type SortEvent = {
+    /**
+     * 目标容器
+     */
+    to: HTMLElement;
+    /**
+     * 来源容器
+     */
+    from: HTMLElement;
+    /**
+     * 被移动的元素
+     * - 在`group.pull`配置为 clone 时，此值为原始元素，复制元素放到原来位置了
+     */
+    item: HTMLElement;
+    /**
+     * 副本的元素
+     * - 在`group.pull`配置为 clone 时
+     */
+    clone: HTMLElement;
+    /**
+     * 容器中的原序号
+     */
+    oldIndex: number | undefined;
+    /**
+     * 容器中的新序号
+     */
+    newIndex: number | undefined;
+};
+
 /**
  * 布局组件 数据结构
  */
@@ -735,6 +888,20 @@ type ComponentOptions = {
      */
     url?: string;
 };
+/**
+ * 提取组件的props类型
+ * - 有效的 Props 类型：extends Record<string, any>
+ * - 有效类型则返回 Props 自身；否则无效，为undefined
+ */
+type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
+/**
+ * 事件发射器类型
+ * - 将【组件中组件】转换为vue的 defineEmits 类型
+ * - 用于将组件的事件发射器包裹传递到其他组件、class中使用
+ */
+type EmitterType<Events extends Record<string, any[]>> = {
+    <K extends keyof Events>(event: K, ...payload: Events[K]): any;
+};
 /**
  * 提取【组件事件】类型
  * - 将【组件事件】中的key首字母小写，追加上on前缀；key对应的value为监听函数参数
@@ -743,12 +910,6 @@ type ComponentOptions = {
 type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
     [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
 }) : never;
-/**
- * 提取组件的props类型
- * - 有效的 Props 类型：extends Record<string, any>
- * - 有效类型则返回 Props 自身；否则无效，为undefined
- */
-type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
 /**
  * 组件绑定 配置选项
  * - Props、Events、Model 为可选泛型，分别约束 props、events、model 属性
@@ -1320,6 +1481,47 @@ type CloseEvents = {
     close: [];
 };
 
+/**
+ * 输入框配置选项
+ * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
+ * - 暂不提供 disabled 逻辑
+ */
+type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
+    /**
+     * 输入框类型
+     * - text: 文本输入框
+     * - number: 数字输入框
+     * - password: 密码输入框
+     */
+    type?: "text" | "number" | "password";
+    /**
+     * 输入框是否必填
+     * - 必填，则验证不通过时，显示错误信息
+     * - 必填时，显示必填标记，红色 * 号
+     */
+    required?: boolean;
+    /**
+     * 标题区域样式
+     * - 对齐方式
+     * - 标题区域宽度
+     */
+    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
+};
+/**
+ * 输入框事件
+ */
+type InputEvents = {
+    /**
+     * 输入框点击时
+     */
+    click: [];
+    /**
+     * 输入框内容发生改变时
+     * @param value 输入框内容
+     */
+    change: [value: string];
+};
+
 /**
  * 接口：响应式管理器
  */
@@ -1438,73 +1640,6 @@ declare function triggerAppCreated(app: App, type?: AppType): App;
  */
 declare function getSvgDraw(iconType: IconType, draw: string[] | string): string[];
 
-/**
- * 排序组件 配置选项
- * - disabled       禁用排序效果，不能再拖拽元素排序
- * - 整理部分SortableJs中的配置，不分逻辑不开放
- */
-type SortOptions<T> = DisabledOptions & {
-    /**
-     * 变化器
-     * - 在此元素值发生变化时，重新刷新排序面板
-     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
-     */
-    changer: T;
-    /**
-     * 拖动哪个元素
-     * - 传入类样式选择器；如 .table-row
-     */
-    draggable: string;
-    /**
-     * 哪个元素启动拖拽
-     * - 传入类样式选择器；如 .sort-handle
-     * - 不传入则默认 draggable
-     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
-     */
-    handle?: string;
-    /**
-     * 拖动的元素上增加的类样式
-     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
-     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
-     * - 默认：snail-sort-drag
-     */
-    dragClass?: string;
-    /**
-     * 幽灵元素类样式名称
-     * - 拖动时在面板上占位的元素
-     * - 默认：snail-sort-ghost
-     */
-    ghostClass?: string;
-    /**
-     * 过滤器，不需要进行拖动的元素
-     * - 传入类样式选择器；如 .sort-handle
-     * - 实现特定子元素不触发拖动排序功能
-     */
-    filter?: string;
-    /**
-     * 排序组
-     * - 组相同时，可跨组拖拽排序
-     * - 不传入，则内部生成guid
-     */
-    group?: string;
-    /**
-     * 动画时间
-     * - 单位ms；默认150ms
-     */
-    animation?: number;
-};
-/**
- * 排序组件 事件
- */
-type SortEvents = {
-    /**
-     * 元素排序顺序变化
-     * @param oldIndex 旧位置索引值
-     * @param newIndex 新顺序索引值
-     */
-    update: [oldIndex: number, newIndex: number];
-};
-
 /**
  * 动态加载组件 组件配置选项
  */
@@ -1520,47 +1655,6 @@ type DynamicOptions<Props = void> = ComponentOptions & Pick<ComponentBindOptions
  */
 declare function mount<Props>(target: HTMLElement, options: DynamicOptions<Props>, onDestroyed?: (fn: () => void) => void): IScope;
 
-/**
- * 输入框配置选项
- * - title          将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
- * - 暂不提供 disabled 逻辑
- */
-type InputOptions = ReadonlyOptions & /*DisabledOptions & */ PlaceholderOptions & TitleOptions & {
-    /**
-     * 输入框类型
-     * - text: 文本输入框
-     * - number: 数字输入框
-     * - password: 密码输入框
-     */
-    type?: "text" | "number" | "password";
-    /**
-     * 输入框是否必填
-     * - 必填，则验证不通过时，显示错误信息
-     * - 必填时，显示必填标记，红色 * 号
-     */
-    required?: boolean;
-    /**
-     * 标题区域样式
-     * - 对齐方式
-     * - 标题区域宽度
-     */
-    titleStyle?: BaseStyle & WidthStyle & FlexBoxStyle;
-};
-/**
- * 输入框事件
- */
-type InputEvents = {
-    /**
-     * 输入框点击时
-     */
-    click: [];
-    /**
-     * 输入框内容发生改变时
-     * @param value 输入框内容
-     */
-    change: [value: string];
-};
-
 /**
  * 公共通用数据结构：
  *  1、在弹窗、模态弹窗、跟随弹窗的效果下复用
@@ -2262,18 +2356,28 @@ declare const components: {
         };
     });
     Sort: {
-        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
             changer: any;
             draggable: string;
             handle?: string;
             dragClass?: string;
             ghostClass?: string;
             filter?: string;
-            group?: string;
+            group?: string | SortGroupOptions;
             animation?: number;
+            disabled?: boolean;
+            sortDisabled?: boolean;
         }> & Readonly<{
+            onEnd?: (evt: SortEvent) => any;
+            onAdd?: (evt: SortEvent) => any;
+            onStart?: (evt: SortEvent) => any;
+            onRemove?: (evt: SortEvent) => any;
             onUpdate?: (oldIndex: number, newIndex: number) => any;
         }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            end: (evt: SortEvent) => any;
+            add: (evt: SortEvent) => any;
+            start: (evt: SortEvent) => any;
+            remove: (evt: SortEvent) => any;
             update: (oldIndex: number, newIndex: number) => any;
         }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -2282,33 +2386,49 @@ declare const components: {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<DisabledOptions & {
+        }, Readonly<{
             changer: any;
             draggable: string;
             handle?: string;
             dragClass?: string;
             ghostClass?: string;
             filter?: string;
-            group?: string;
+            group?: string | SortGroupOptions;
             animation?: number;
+            disabled?: boolean;
+            sortDisabled?: boolean;
         }> & Readonly<{
+            onEnd?: (evt: SortEvent) => any;
+            onAdd?: (evt: SortEvent) => any;
+            onStart?: (evt: SortEvent) => any;
+            onRemove?: (evt: SortEvent) => any;
             onUpdate?: (oldIndex: number, newIndex: number) => any;
         }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & vue.ComponentOptionsBase<Readonly<DisabledOptions & {
+    } & vue.ComponentOptionsBase<Readonly<{
         changer: any;
         draggable: string;
         handle?: string;
         dragClass?: string;
         ghostClass?: string;
         filter?: string;
-        group?: string;
+        group?: string | SortGroupOptions;
         animation?: number;
+        disabled?: boolean;
+        sortDisabled?: boolean;
     }> & Readonly<{
+        onEnd?: (evt: SortEvent) => any;
+        onAdd?: (evt: SortEvent) => any;
+        onStart?: (evt: SortEvent) => any;
+        onRemove?: (evt: SortEvent) => any;
         onUpdate?: (oldIndex: number, newIndex: number) => any;
     }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        end: (evt: SortEvent) => any;
+        add: (evt: SortEvent) => any;
+        start: (evt: SortEvent) => any;
+        remove: (evt: SortEvent) => any;
         update: (oldIndex: number, newIndex: number) => any;
     }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
@@ -2524,4 +2644,4 @@ declare const components: {
 };
 
 export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive, useTreeContext };
-export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerEvents, DatepickerOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollStatus, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
+export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerEvents, DatepickerOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmitterType, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollStatus, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SortEvent, SortEvents, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };