styles(tree-menu): [tree-menu] add tree-menu types (#1316)

packages/renderless/src/tree-menu/index.ts

@@ -9,9 +9,10 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
+import type { ITreeMenuApi, ITreeMenuState, ITreeMenuProps, ITreeMenuData, ITreeMenuNewData } from '@/types'
 
 export const initData =
-  ({ state, props, service, api }) =>
+  ({ state, props, service, api }: { state: ITreeMenuState; props: ITreeMenuProps; service: any; api: ITreeMenuApi }) =>
   () => {
     if (props.data) {
       state.data = props.data
@@ -26,11 +27,11 @@ export const initData =
   }
 
 export const setMenuKey =
-  (api) =>
-  ({ newData, menuData }) => {
+  (api: ITreeMenuApi) =>
+  ({ newData, menuData }: { newData: ITreeMenuNewData[]; menuData: ITreeMenuData[] }) => {
     Array.isArray(menuData) &&
       menuData.forEach((data) => {
-        const item = {}
+        const item: Partial<ITreeMenuNewData> = {}
 
         Object.keys(data).forEach((key) => {
           if (key === 'name') {
@@ -45,7 +46,7 @@ export const setMenuKey =
             }
           } else if (key === 'children' && data[key]) {
             item.children = api.setMenuKey({
-              newData: [],
+              newData: [] as ITreeMenuNewData[],
               menuData: data.children
             })
           } else {
@@ -53,7 +54,7 @@ export const setMenuKey =
           }
         })
 
-        newData.push({ ...data, ...item })
+        newData.push({ ...data, ...item } as ITreeMenuNewData)
       })
 
     return newData
@@ -136,7 +137,7 @@ export const collapseMenu =
   }
 
 export const expandMenu =
-  ({ state, props, api }) =>
+  ({ state, props, api }: { state: ITreeMenuState; props: ITreeMenuProps; api: ITreeMenuApi }) =>
   () => {
     if (props.menuCollapsible && state.isCollapsed) {
       api.collapseChange()

packages/renderless/src/tree-menu/vue.ts

@@ -35,6 +35,13 @@ import {
   setCurrentNode,
   getCurrentNode
 } from './index'
+import type {
+  ISharedRenderlessParamUtils,
+  ISharedRenderlessFunctionParams,
+  ITreeMenuProps,
+  ITreeMenuState,
+  ITreeMenuApi
+} from '@/types'
 
 export const api = [
   'state',
@@ -63,11 +70,15 @@ export const api = [
   'getCurrentNode'
 ]
 
-export const renderless = (props, { watch, reactive, onMounted }, { t, service, emit, vm }) => {
+export const renderless = (
+  props: ITreeMenuProps,
+  { watch, reactive, onMounted }: ISharedRenderlessFunctionParams,
+  { t, service, emit, vm }: ISharedRenderlessParamUtils
+) => {
   service = service || { base: {} }
   service = { getMenuDataSync: props.getMenuDataSync || service.base.getMenuDataSync }
-
-  const state = reactive({
+  const api: Partial<ITreeMenuApi> = {}
+  const state = reactive<ITreeMenuState>({
     data: [],
     filterText: '',
     isCollapsed: false
@@ -90,11 +101,11 @@ export const renderless = (props, { watch, reactive, onMounted }, { t, service,
     currentChange: currentChange(emit),
     watchFilterText: watchFilterText({ vm }),
     getTitle: getTitle(props),
-    setMenuKey: setMenuKey(api),
-    initData: initData({ state, props, service, api }),
+    setMenuKey: setMenuKey(api as ITreeMenuApi),
+    initData: initData({ state, props, service, api: api as ITreeMenuApi }),
     collapseChange: collapseChange({ state, props, emit }),
     collapseMenu: collapseMenu({ state, props, api }),
-    expandMenu: expandMenu({ state, props, api }),
+    expandMenu: expandMenu({ state, props, api: api as ITreeMenuApi }),
     setCurrentKey: setCurrentKey({ vm }),
     getCurrentKey: getCurrentKey({ vm }),
     setCurrentNode: setCurrentNode({ vm }),
@@ -107,9 +118,9 @@ export const renderless = (props, { watch, reactive, onMounted }, { t, service,
     { immediate: true }
   )
 
-  watch(() => state.filterText, api.watchFilterText, { deep: true })
+  watch(() => state.filterText, (api as ITreeMenuApi).watchFilterText, { deep: true })
 
-  onMounted(api.initData)
+  onMounted((api as ITreeMenuApi).initData)
 
-  return api
+  return api as ITreeMenuApi
 }

packages/renderless/types/tree-menu.type.ts

@@ -0,0 +1,75 @@
+import type { ExtractPropTypes } from 'vue'
+import type { treeMenuProps } from '@/tree-menu/src'
+import type {
+  initData,
+  setMenuKey,
+  filterNode,
+  watchFilterText,
+  nodeDragStart,
+  nodeDragEnter,
+  nodeDragOver,
+  nodeDragEnd,
+  nodeDrop,
+  nodeExpand,
+  nodeCollapse,
+  nodeClick,
+  checkChange,
+  check,
+  currentChange,
+  getTitle,
+  collapseChange,
+  collapseMenu,
+  expandMenu,
+  setCurrentKey,
+  getCurrentKey,
+  setCurrentNode,
+  getCurrentNode
+} from '../src/tree-menu'
+import type { ISharedRenderlessParamUtils } from './shared.type'
+
+export interface ITreeMenuState {
+  data?: unknown[]
+  filterText: string
+  isCollapsed: boolean
+}
+export type ITreeMenuProps = ExtractPropTypes<typeof treeMenuProps>
+export interface ITreeMenuApi {
+  t: ISharedRenderlessParamUtils['t']
+  state: ITreeMenuState
+  check: ReturnType<typeof check>
+  filterNode: ReturnType<typeof filterNode>
+  nodeDrop: ReturnType<typeof nodeDrop>
+  nodeClick: ReturnType<typeof nodeClick>
+  nodeExpand: ReturnType<typeof nodeExpand>
+  nodeDragEnd: ReturnType<typeof nodeDragEnd>
+  checkChange: ReturnType<typeof checkChange>
+  nodeCollapse: ReturnType<typeof nodeCollapse>
+  nodeDragOver: ReturnType<typeof nodeDragOver>
+  nodeDragStart: ReturnType<typeof nodeDragStart>
+  nodeDragEnter: ReturnType<typeof nodeDragEnter>
+  currentChange: ReturnType<typeof currentChange>
+  watchFilterText: ReturnType<typeof watchFilterText>
+  getTitle: ReturnType<typeof getTitle>
+  setMenuKey: ReturnType<typeof setMenuKey>
+  initData: ReturnType<typeof initData>
+  collapseChange: ReturnType<typeof collapseChange>
+  collapseMenu: ReturnType<typeof collapseMenu>
+  expandMenu: ReturnType<typeof expandMenu>
+  setCurrentKey: ReturnType<typeof setCurrentKey>
+  getCurrentKey: ReturnType<typeof getCurrentKey>
+  setCurrentNode: ReturnType<typeof setCurrentNode>
+  getCurrentNode: ReturnType<typeof getCurrentNode>
+}
+
+export interface ITreeMenuData {
+  name: string
+  siteNodeId: string
+  url: string
+  children: ITreeMenuData[]
+}
+export interface ITreeMenuNewData extends ITreeMenuData {
+  label: string
+  id: string
+  url: string
+  children: ITreeMenuNewData[]
+}

packages/vue/src/tree-menu/src/index.ts

@@ -0,0 +1,93 @@
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc|mobile-first'
+import { iconSearch } from '@opentiny/vue-icon'
+
+export const treeMenuProps = {
+  $props,
+  placeholder: {
+    default: '',
+    type: String
+  },
+  data: Array,
+  nodeKey: String,
+  defaultExpandAll: Boolean,
+  suffixIcon: Object,
+  prefixIcon: Object,
+  searchIcon: {
+    type: Object,
+    default: () => iconSearch()
+  },
+  props: Object,
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  emptyText: {
+    type: String,
+    default: ''
+  },
+  checkStrictly: Boolean,
+  lazy: {
+    type: Boolean,
+    default: false
+  },
+  load: Function,
+  showCheckbox: Boolean,
+  filterNodeMethod: Function,
+  defaultCheckedKeys: Array,
+  defaultExpandedKeys: Array,
+  defaultExpandedKeysHighlight: [Number, String],
+  indent: {
+    type: Number,
+    default: 16
+  },
+  allowDrag: Function,
+  allowDrop: Function,
+  expandOnClickNode: {
+    type: Boolean,
+    default: true
+  },
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  wrap: {
+    type: Boolean,
+    default: false
+  },
+  getMenuDataSync: Function,
+  accordion: Boolean,
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
+  showFilter: {
+    type: Boolean,
+    default: true
+  },
+  collapsible: {
+    type: Boolean,
+    default: true
+  },
+  showNumber: {
+    type: Boolean,
+    default: false
+  },
+  nodeHeight: Number,
+  onlyCheckChildren: {
+    type: Boolean,
+    default: false
+  },
+  menuCollapsible: {
+    type: Boolean,
+    default: false
+  }
+}
+
+export default defineComponent({
+  name: $prefix + 'TreeMenu',
+  props: treeMenuProps,
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})