TreeNodePicker

This component allows you to can used as a quick menu or even like a select for discoverable content

Example

TreeNodePicker

export default {
  name: "App",
  data() {
    return {
      form: {
        servicesDefinition: {
          type: TreeNodePicker,
          "field-wrapper": { class: "is-12" },
          "field-input": {
            label: this.$tc("location", 1),
            expanded: true,
            horizontal: true,
            placeholder: this.$t("placeholder", {
              key: this.$tc("location", 1).toLowerCase(),
            }),
            propertyNames: { text: "name" },
            treeData: this.$store.state.locationNodes,
            maxHeight: 220,
            itemNoChildrenIcon: "tag-text",
            itemCollapsedIcon: "office-building-marker",
            itemExpandedIcon: "office-building-marker-outline",
            isRequired: false,
          },
        },
      },
    };
  },
};

Props

NameDescriptionTypeRequiredDefault
vid-Stringfalseundefined
value-falsenull
treeData-Array / Promisefalse
propertyNamesRedefines internal tree structure Ex: {'text': 'customName','children': 'kids'}Objectfalse-
pathSeparator-Stringfalse"/"
labelInside-Booleanfalsefalse
labelOnBorder-Booleanfalsefalse
validationMode-Stringfalse"aggressive"
hideValidation-Booleanfalsefalse
isRequired-Booleanfalsefalse
mobileModal-Booleanfalsetrue
maxHeight-Numberfalse300
isScrollable-Booleanfalsetrue
showClearIcon-Booleanfalsefalse
clearIconSize-Stringfalse"is-small"
clearIconCustomClass-Stringfalse""
itemNoChildrenIcon-Stringfalse"folder-outline"
itemCollapsedIcon-Stringfalse"folder"
itemExpandedIcon-Stringfalse"folder-open"
iconSize-Stringfalse"is-small"
localeLocale string {en, es ...} for display language on componentStringfalse"en"

Events

Event NameDescriptionParameters
input--