vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Material TreeSelect

pull/6494/head
Cagatay Civici 2024-09-29 01:47:57 +03:00
parent f02f1d0bb1
commit 57dcf2c466
6 changed files with 82 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/treeselect/FloatLabelDoc.vue
View File

@ -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>

8
apps/showcase/doc/treeselect/IftaLabelDoc.vue
View File

@ -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>

27
apps/showcase/doc/treeselect/InvalidDoc.vue
View File

@ -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">
<TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
<div class="card flex flex-wrap justify-center gap-4">
<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">
<TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
<div class="card flex flex-wrap justify-center gap-4">
<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">
<TreeSelect v-model="selectedValue" :invalid="Object.keys(selectedValue).length === 0" class="md:w-80 w-full" :options="nodes" placeholder="TreeSelect" />
<div class="card flex flex-wrap justify-center gap-4">
<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));

10
apps/showcase/pages/treeselect/index.vue
View File

@ -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',

4
packages/primevue/src/treeselect/style/TreeSelectStyle.js
View File

@ -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')};
}

47
packages/themes/src/presets/material/treeselect/index.js
View File

@ -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')});
}
`
};