Add defineExpose to Treeselect component

[elizabeth011685]

Integrated defineExpose to the Treeselect component to expose the clear method. This change facilitates external access to the method, improving component flexibility and reusability.

[Alexbrazdasilva]

@elizabeth011685
Wouldn't it be a case of exposing the instance?

const instance = computed(() => ({
  name: props.name || 'vue-treeselect',
  hasValue: hasValue,
  trigger: state.trigger,
  forest: state.forest,
  localSearch: state.localSearch,
  remoteSearch: state.remoteSearch,
  isReady: state.isReady,
  rootOptionsStates: state.rootOptionsStates,
  internalValue: internalValue,
  selectedNodes: selectedNodes,
  $slots: slots,
  $refs: {
    control: control.value,
    wrapper: wrapper.value,
    portal: portal.value,
    menu: rmenu.value,
  },
  menu: state.menu,
  single: single,
  verifyProps,
  resetFlags,
  initialize,
  getInstanceId,
  getValue,
  getNode,
  createFallbackNode,
  extractCheckedNodeIdsFromValue,
  extractNodeFromValue,
  fixSelectedNodeIds,
  keepDataOfSelectedNodes,
  isSelected,
  traverseDescendantsBFS,
  traverseDescendantsDFS,
  traverseAllNodesDFS,
  traverseAllNodesByIndex,
  toggleClickOutsideEvent,
  getValueContainer,
  getInput,
  focusInput,
  blurInput,
  handleMouseDown,
  handleClickOutside,
  handleLocalSearch,
  getRemoteSearchEntry,
  shouldExpand,
  shouldOptionBeIncludedInSearchResult,
  shouldShowOptionInMenu,
  getControl,
  getMenu,
  setCurrentHighlightedOption,
  resetHighlightedOptionWhenNecessary,
  highlightFirstOption,
  highlightPrevOption,
  highlightNextOption,
  highlightLastOption,
  resetSearchQuery,
  closeMenu,
  openMenu,
  toggleMenu,
  toggleExpanded,
  buildForestState,
  enhancedNormalizer,
  normalize,
  loadRootOptions,
  loadChildrenOptions,
  callLoadOptionsProp,
  checkDuplication,
  verifyNodeShape,
  select,
  clear,
  _selectNode,
  _deselectNode,
  addValue,
  removeValue,
  removeLastValue,
  saveMenuScrollPosition,
  restoreMenuScrollPosition,
  handleRemoteSearch,
  allowClearingDisabled: props.allowClearingDisabled,
  allowSelectingDisabledDescendants: props.allowSelectingDisabledDescendants,
  alwaysOpen: props.alwaysOpen,
  appendToBody: props.appendToBody,
  async: props.async,
  autoFocus: props.autoFocus,
  autoLoadRootOptions: props.autoLoadRootOptions,
  autoDeselectAncestors: props.autoDeselectAncestors,
  autoDeselectDescendants: props.autoDeselectDescendants,
  autoSelectAncestors: props.autoSelectAncestors,
  autoSelectDescendants: props.autoSelectDescendants,
  backspaceRemoves: props.backspaceRemoves,
  beforeClearAll: props.beforeClearAll,
  branchNodesFirst: props.branchNodesFirst,
  cacheOptions: props.cacheOptions,
  clearable: props.clearable,
  clearAllText: props.clearAllText,
  clearOnSelect: props.clearOnSelect,
  clearValueText: props.clearValueText,
  closeOnSelect: props.closeOnSelect,
  defaultExpandLevel: props.defaultExpandLevel,
  defaultOptions: props.defaultOptions,
  deleteRemoves: props.deleteRemoves,
  delimiter: props.delimiter,
  flattenSearchResults: props.flattenSearchResults,
  disableBranchNodes: props.disableBranchNodes,
  disabled: props.disabled,
  disableFuzzyMatching: props.disableFuzzyMatching,
  flat: props.flat,
  instanceId: instanceId,
  joinValues: props.joinValues,
  limit: props.limit,
  limitText: props.limitText,
  loadingText: props.loadingText,
  loadOptions: props.loadOptions,
  matchKeys: props.matchKeys,
  maxHeight: props.maxHeight,
  multiple: props.multiple,
  noChildrenText: props.noChildrenText,
  noOptionsText: props.noOptionsText,
  noResultsText: props.noResultsText,
  normalizer: props.normalizer,
  openDirection: props.openDirection,
  openOnClick: props.openOnClick,
  openOnFocus: props.openOnFocus,
  options: props.options,
}))

[r2rka1]

I think we should look for a better way to expose API. For instance - one possible solution would be to return an API object on @ready event.

@elizabeth011685 @Alexbrazdasilva

<tree-select @ready="handleOnReady" />
// ...

const treeselectApi = ref(null);

const handleOnReady = (api) => { 
  treeselectApi.value = api
}

// ...
const myMethod = () => {
  // ...
  treeselectApi.value.clear()
}

[Alexbrazdasilva]

@r2rka1

I think it's "cleaner" to use defineExpose and const select = useTemplateRef("my-select"). Just my opinion, of course.

<template>
  <tree-select ref="my-select" />
</template>

<script setup>
const mySelect = useTemplateRef("my-select");

const myMethod = () => {
  // ...
  mySelect.value?.clear()
}

[Alexbrazdasilva]

@r2rka1

Would a PR on this be welcome?