feat(TreeSelect): Base Support

Author: sfxcode

src/components/app/AppTopbar.vue

@@ -58,9 +58,10 @@ const items = ref([
             { label: 'Dropdown', icon: 'pi pi-fw pi-user-edit', route: '/demo/dropdown' },
             { label: 'Listbox', icon: 'pi pi-fw pi-user-edit', route: '/demo/listbox' },
             { label: 'MultiSelect', icon: 'pi pi-fw pi-user-edit', route: '/demo/multiSelect' },
+            { label: 'RadioButton', icon: 'pi pi-fw pi-user-edit', route: '/demo/radioButton' },
             { label: 'SelectButton', icon: 'pi pi-fw pi-user-edit', route: '/demo/selectButton' },
             { label: 'ToggleButton', icon: 'pi pi-fw pi-user-edit', route: '/demo/toggleButton' },
-            { label: 'RadioButton', icon: 'pi pi-fw pi-user-edit', route: '/demo/radioButton' },
+            { label: 'TreeSelect', icon: 'pi pi-fw pi-user-edit', route: '/demo/treeSelect' },
           ],
         },
         {

src/formkit/PrimeTreeSelect.vue

@@ -0,0 +1,37 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <TreeSelect
+      v-model="context._value"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? false"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      :tabindex="attrs.tabindex"
+      :aria-label="attrs.ariaLabel"
+      :aria-labelledby="attrs.ariaLabelledby"
+      :options="attrs?.options"
+      :placeholder="attrs.placeholder"
+      :selection-mode="attrs.selectionMode"
+      :pt="attrs.pt"
+      :pt-options="attrs.ptOptions"
+      :unstyled="attrs.unstyled ?? false"
+      @change="handleInput"
+    />
+  </div>
+</template>

src/formkit/index.ts

@@ -22,6 +22,7 @@ import PrimeRadioButton from './PrimeRadioButton.vue'
 import PrimeRating from './PrimeRating.vue'
 import PrimeSlider from './PrimeSlider.vue'
 import PrimeToggleButton from './PrimeToggleButton.vue'
+import PrimeTreeSelect from './PrimeTreeSelect.vue'
 import PrimeSelectButton from './PrimeSelectButton.vue'
 import PrimeTriStateCheckbox from './PrimeTriStateCheckbox.vue'
 
@@ -112,6 +113,9 @@ export const primeTriStateCheckboxDefinition: FormKitTypeDefinition = createInpu
 export const primeCascadeSelectDefinition: FormKitTypeDefinition = createInput(PrimeCascadeSelect, {
   props: [],
 })
+export const primeTreeSelectDefinition: FormKitTypeDefinition = createInput(PrimeTreeSelect, {
+  props: [],
+})
 
 export const primeInputs = {
   primeAutoComplete: primeAutoCompleteDefinition,
@@ -137,4 +141,5 @@ export const primeInputs = {
   primeSelectButton: primeSelectButtonDefinition,
   primeTriStateCheckbox: primeTriStateCheckboxDefinition,
   primeCascadeSelect: primeCascadeSelectDefinition,
+  primeTreeSelect: primeTreeSelectDefinition,
 }

src/modules/primevue.ts

@@ -75,6 +75,7 @@ import TabPanel from 'primevue/tabpanel'
 import ToggleButton from 'primevue/togglebutton'
 import Tree from 'primevue/tree'
 import TreeTable from 'primevue/treetable'
+import TreeSelect from 'primevue/treeselect'
 import TriStateCheckbox from 'primevue/tristatecheckbox'
 
 import 'primevue/resources/primevue.min.css'
@@ -181,6 +182,7 @@ export const install: UserModule = ({ app, router, isClient }) => {
   app.component('ToggleButton', ToggleButton)
   app.component('Tree', Tree)
   app.component('TreeTable', TreeTable)
+  app.component('TreeSelect', TreeSelect)
   app.component('TriStateCheckbox', TriStateCheckbox)
 
   app.use(PrimeVue, { ripple: false })

src/pages/demo/TreeSelect.vue

@@ -0,0 +1,67 @@
+<script setup lang='ts'>
+import PrimeInput from '@/components/demo/PrimeInput.vue'
+
+const primeAttributes = 'placeholder, options'
+
+const options = ref([
+  {
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+      {
+        key: '0-0',
+        label: 'Work',
+        data: 'Work Folder',
+        icon: 'pi pi-fw pi-cog',
+        children: [
+          { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+          { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' },
+        ],
+      },
+      {
+        key: '0-1',
+        label: 'Home',
+        data: 'Home Folder',
+        icon: 'pi pi-fw pi-home',
+        children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }],
+      },
+    ],
+  },
+  {
+    key: '1',
+    label: 'Events',
+    data: 'Events Folder',
+    icon: 'pi pi-fw pi-calendar',
+    children: [
+      { key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
+      { key: '1-1', label: 'Product Launch', icon: 'pi pi-fw pi-calendar-plus', data: 'Product Launch' },
+      { key: '1-2', label: 'Report Review', icon: 'pi pi-fw pi-calendar-plus', data: 'Report Review' },
+    ],
+  },
+])
+
+const schema
+  = [
+    {
+      $formkit: 'primeTreeSelect',
+      name: 'treeSelectValue',
+      label: 'Tree Select',
+      selectionMode: 'multiple',
+      options,
+      placeholder: 'Make your selection',
+    },
+  ]
+
+const data = { }
+</script>
+
+<template>
+  <div>
+    <PrimeInput
+      header="TreeSelect" :schema="schema" :data="data"
+      :prime-attributes="primeAttributes"
+    />
+  </div>
+</template>