Material TreeSelect

apps/showcase/doc/treeselect/FloatLabelDoc.vue

@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel class="w-full md:w-80" variant="in">
-            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -39,7 +39,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel class="w-full md:w-80" variant="in">
-    <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+    <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -57,7 +57,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel class="w-full md:w-80" variant="in">
-            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -95,7 +95,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel class="w-full md:w-80" variant="in">
-            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 

apps/showcase/doc/treeselect/IftaLabelDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <IftaLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
             <label for="t_file">File</label>
         </IftaLabel>
     </div>
@@ -22,7 +22,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel class="w-full md:w-80">
-    <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+    <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
     <label for="t_file">File</label>
 </IftaLabel>
 `,
@@ -30,7 +30,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
             <label for="t_file">File</label>
         </IftaLabel>
     </div>
@@ -56,7 +56,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" variant="filled" />
             <label for="t_file">File</label>
         </IftaLabel>
     </div>

apps/showcase/doc/treeselect/InvalidDoc.vue

@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -15,15 +16,18 @@ export default {
     data() {
         return {
             nodes: null,
-            selectedValue: {},
+            selectedValue1: {},
+            selectedValue2: {},
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+<TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+<TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
     </div>
 </template>
 
@@ -34,7 +38,8 @@ export default {
     data() {
         return {
             nodes: null,
-            selectedValue: {},
+            selectedValue1: {},
+            selectedValue2: {},
         }
     },
     mounted() {
@@ -45,8 +50,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue1" :invalid="Object.keys(selectedValue1).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue2" :invalid="Object.keys(selectedValue2).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" variant="filled" />
     </div>
 </template>
 
@@ -55,7 +61,8 @@ import { ref, onMounted } from 'vue';
 import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
-const selectedValue = ref({});
+const selectedValue1 = ref({});
+const selectedValue2 = ref({});
 
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));

apps/showcase/pages/treeselect/index.vue

@@ -60,6 +60,11 @@ export default {
                     label: 'Filter',
                     component: FilterDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -70,11 +75,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',

packages/primevue/src/treeselect/style/TreeSelectStyle.js

@@ -31,6 +31,10 @@ const theme = ({ dt }) => `
     background: ${dt('treeselect.filled.background')};
 }
 
+.p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('treeselect.filled.hover.background')};
+}
+
 .p-treeselect.p-variant-filled.p-focus {
     background: ${dt('treeselect.filled.focus.background')};
 }

packages/themes/src/presets/material/treeselect/index.js

@@ -3,6 +3,7 @@ export default {
         background: '{form.field.background}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
+        filledHoverBackground: '{form.field.filled.hover.background}',
         filledFocusBackground: '{form.field.filled.focus.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
@@ -43,5 +44,49 @@ export default {
     },
     chip: {
         borderRadius: '{border.radius.sm}'
-    }
+    },
+    style: ({ dt }) => `
+.p-treeselect.p-variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('treeselect.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('treeselect.focus.border.color')}, ${dt('treeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('treeselect.border.color')}, ${dt('treeselect.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+
+.p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('treeselect.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('treeselect.focus.border.color')}, ${dt('treeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('treeselect.hover.border.color')}, ${dt('treeselect.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    outline: 0 none;
+    background: ${dt('treeselect.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('treeselect.focus.border.color')}, ${dt('treeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('treeselect.border.color')}, ${dt('treeselect.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-treeselect.p-variant-filled:not(.p-disabled).p-focus:hover {
+    background-image: linear-gradient(to bottom, ${dt('treeselect.focus.border.color')}, ${dt('treeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('treeselect.hover.border.color')}, ${dt('treeselect.hover.border.color')});
+}
+
+.p-treeselect.p-variant-filled.p-invalid {
+    background-image: linear-gradient(to bottom, ${dt('treeselect.invalid.border.color')}, ${dt('treeselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('treeselect.invalid.border.color')}, ${dt('treeselect.invalid.border.color')});
+}
+
+.p-treeselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus  {
+    background-image: linear-gradient(to bottom, ${dt('treeselect.invalid.border.color')}, ${dt('treeselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('treeselect.invalid.border.color')}, ${dt('treeselect.invalid.border.color')});
+}
+`
 };