diff --git a/package.json b/package.json index c6f967b..9ac5cc5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cool-unix", - "version": "8.0.19", + "version": "8.0.20", "license": "MIT", "scripts": { "build-ui": "node ./uni_modules/cool-ui/scripts/generate-types.js", diff --git a/pages.json b/pages.json index 22866f1..44b5961 100644 --- a/pages.json +++ b/pages.json @@ -316,6 +316,12 @@ "navigationBarTitleText": "FilterBar 筛选栏" } }, + { + "path": "data/tree", + "style": { + "navigationBarTitleText": "Tree 树形结构" + } + }, { "path": "status/badge", "style": { diff --git a/pages/demo/data/tree.uvue b/pages/demo/data/tree.uvue new file mode 100644 index 0000000..fb93527 --- /dev/null +++ b/pages/demo/data/tree.uvue @@ -0,0 +1,373 @@ + + + diff --git a/pages/index/home.uvue b/pages/index/home.uvue index 4b5a9c4..50ed958 100644 --- a/pages/index/home.uvue +++ b/pages/index/home.uvue @@ -322,6 +322,11 @@ const data = computed(() => { label: t("筛选栏"), icon: "filter-line", path: "/pages/demo/data/filter-bar" + }, + { + label: t("树形结构"), + icon: "node-tree", + path: "/pages/demo/data/tree" } ] }, diff --git a/uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.uvue b/uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.uvue new file mode 100644 index 0000000..c7411aa --- /dev/null +++ b/uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.uvue @@ -0,0 +1,179 @@ + + + + + diff --git a/uni_modules/cool-ui/components/cl-tree-item/props.ts b/uni_modules/cool-ui/components/cl-tree-item/props.ts new file mode 100644 index 0000000..3fd13f4 --- /dev/null +++ b/uni_modules/cool-ui/components/cl-tree-item/props.ts @@ -0,0 +1,21 @@ +import type { ClTreeItem, PassThroughProps } from "../../types"; +import type { ClIconProps } from "../cl-icon/props"; + +export type ClTreeItemPassThrough = { + className?: string; + wrapper?: PassThroughProps; + expand?: PassThroughProps; + expandIcon?: ClIconProps; + checkbox?: PassThroughProps; + checkedIcon?: ClIconProps; + halfCheckedIcon?: ClIconProps; + uncheckedIcon?: ClIconProps; + label?: PassThroughProps; +}; + +export type ClTreeItemProps = { + className?: string; + pt?: ClTreeItemPassThrough; + item?: ClTreeItem; + level?: number; +}; diff --git a/uni_modules/cool-ui/components/cl-tree/cl-tree.uvue b/uni_modules/cool-ui/components/cl-tree/cl-tree.uvue new file mode 100644 index 0000000..2eee936 --- /dev/null +++ b/uni_modules/cool-ui/components/cl-tree/cl-tree.uvue @@ -0,0 +1,491 @@ + + + diff --git a/uni_modules/cool-ui/components/cl-tree/props.ts b/uni_modules/cool-ui/components/cl-tree/props.ts new file mode 100644 index 0000000..8896a15 --- /dev/null +++ b/uni_modules/cool-ui/components/cl-tree/props.ts @@ -0,0 +1,11 @@ +import type { ClTreeItem, ClTreeNodeInfo } from "../../types"; + +export type ClTreeProps = { + className?: string; + pt?: any; + list?: ClTreeItem[]; + icon?: string; + expandIcon?: string; + showCheckbox?: boolean; + checkStrictly?: boolean; +}; diff --git a/uni_modules/cool-ui/hooks/component.ts b/uni_modules/cool-ui/hooks/component.ts index 518d8ce..e235989 100644 --- a/uni_modules/cool-ui/hooks/component.ts +++ b/uni_modules/cool-ui/hooks/component.ts @@ -1,5 +1,5 @@ import { parse } from "@/cool"; -import type { ClCascaderOption, ClListViewItem } from "../types"; +import type { ClCascaderOption, ClListViewItem, ClTreeItem } from "../types"; export function useListView(data: UTSJSONObject[]) { return data.map((e) => { @@ -13,3 +13,12 @@ export function useListView(data: UTSJSONObject[]) { export function useCascader(data: UTSJSONObject[]) { return data.map((e) => parse(e)!); } + +export function useTree(data: UTSJSONObject[]) { + return data.map((e) => { + return parse({ + ...e, + value: e + })!; + }); +} diff --git a/uni_modules/cool-ui/index.d.ts b/uni_modules/cool-ui/index.d.ts index d28ffe5..1a31132 100644 --- a/uni_modules/cool-ui/index.d.ts +++ b/uni_modules/cool-ui/index.d.ts @@ -1,4 +1,4 @@ -import type { ClActionSheetItem, ClActionSheetOptions, PassThroughProps, Type, ClButtonType, Size, ClListViewItem, ClFilterItemType, ClSelectOption, ClFormLabelPosition, ClFormRule, ClFormValidateError, ClInputType, ClListItem, Justify, ClListViewGroup, ClListViewVirtualItem, ClListViewRefresherStatus, ClConfirmAction, ClConfirmOptions, ClToastOptions, ClPopupDirection, ClQrcodeMode, ClSelectDateShortcut, ClTabsItem, ClTextType, ClUploadItem } from "./types"; +import type { ClActionSheetItem, ClActionSheetOptions, PassThroughProps, Type, ClButtonType, Size, ClListViewItem, ClFilterItemType, ClSelectOption, ClFormLabelPosition, ClFormRule, ClFormValidateError, ClInputType, ClListItem, Justify, ClListViewGroup, ClListViewVirtualItem, ClListViewRefresherStatus, ClConfirmAction, ClConfirmOptions, ClToastOptions, ClPopupDirection, ClQrcodeMode, ClSelectDateShortcut, ClTabsItem, ClTextType, ClTreeItem, ClTreeNodeInfo, ClUploadItem } from "./types"; import { type UiInstance } from "./hooks"; import { type QrcodeOptions } from "./draw"; @@ -67,6 +67,8 @@ import type { ClTimelineProps, ClTimelinePassThrough } from "./components/cl-tim import type { ClTimelineItemProps, ClTimelineItemPassThrough } from "./components/cl-timeline-item/props"; import type { ClToastProps } from "./components/cl-toast/props"; import type { ClTopbarProps, ClTopbarPassThrough } from "./components/cl-topbar/props"; +import type { ClTreeProps } from "./components/cl-tree/props"; +import type { ClTreeItemProps, ClTreeItemPassThrough } from "./components/cl-tree-item/props"; import type { ClUploadProps, ClUploadPassThrough } from "./components/cl-upload/props"; import type { ClWaterfallProps, ClWaterfallPassThrough } from "./components/cl-waterfall/props"; @@ -140,6 +142,8 @@ declare module "vue" { "cl-timeline-item": (typeof import('./components/cl-timeline-item/cl-timeline-item.uvue')['default']) & import('vue').DefineComponent; "cl-toast": (typeof import('./components/cl-toast/cl-toast.uvue')['default']) & import('vue').DefineComponent; "cl-topbar": (typeof import('./components/cl-topbar/cl-topbar.uvue')['default']) & import('vue').DefineComponent; + "cl-tree": (typeof import('./components/cl-tree/cl-tree.uvue')['default']) & import('vue').DefineComponent; + "cl-tree-item": (typeof import('./components/cl-tree-item/cl-tree-item.uvue')['default']) & import('vue').DefineComponent; "cl-upload": (typeof import('./components/cl-upload/cl-upload.uvue')['default']) & import('vue').DefineComponent; "cl-waterfall": (typeof import('./components/cl-waterfall/cl-waterfall.uvue')['default']) & import('vue').DefineComponent; } diff --git a/uni_modules/cool-ui/types/component.d.ts b/uni_modules/cool-ui/types/component.d.ts index dba4cc3..8016a11 100644 --- a/uni_modules/cool-ui/types/component.d.ts +++ b/uni_modules/cool-ui/types/component.d.ts @@ -206,3 +206,21 @@ declare type ClSlideVerifyComponentPublicInstance = { init: () => void; reset: () => void; }; + +declare type ClTreeComponentPublicInstance = { + icon: string; + expandIcon: string; + showCheckbox: boolean; + checkStrictly: boolean; + accordion: boolean; + clearChecked: () => void; + setChecked: (key: string | number, flag: boolean) => void; + setCheckedKeys: (keys: (string | number)[]) => void; + getCheckedKeys: () => (string | number)[]; + getHalfCheckedKeys: () => (string | number)[]; + setExpanded: (key: string | number, flag: boolean) => void; + setExpandedKeys: (keys: (string | number)[]) => void; + getExpandedKeys: () => (string | number)[]; + expandAll: () => void; + collapseAll: () => void; +}; diff --git a/uni_modules/cool-ui/types/index.ts b/uni_modules/cool-ui/types/index.ts index 2212cf7..48244bd 100644 --- a/uni_modules/cool-ui/types/index.ts +++ b/uni_modules/cool-ui/types/index.ts @@ -181,3 +181,20 @@ export type ClFilterItem = { type: ClFilterItemType; options?: ClSelectOption[]; }; + +export type ClTreeItem = { + id: string | number; + label: string; + disabled?: boolean; + children?: ClTreeItem[]; + value?: UTSJSONObject; + isExpand?: boolean; + isChecked?: boolean; + isHalfChecked?: boolean; +}; + +export type ClTreeNodeInfo = { + node: ClTreeItem; + parent?: ClTreeItem; + index: number; +};