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

Initiated material design preset

pull/6493/head
Cagatay Civici 2024-09-28 12:38:20 +03:00
parent 76a4227fc1
commit 880e8d1789
16 changed files with 171 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
</DocSectionText>
<div class="card flex justify-center">
<IftaLabel>
<InputText id="username" v-model="value" autocomplete="off" />
<InputText id="username" v-model="value" autocomplete="off" variant="filled" />
<label for="username">Username</label>
</IftaLabel>
</div>
@ -19,7 +19,7 @@ export default {
code: {
basic: `
<IftaLabel>
<InputText id="username" v-model="value" />
<InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label>
</IftaLabel>
`,
@ -27,7 +27,7 @@ export default {
<template>
<div class="card flex justify-center">
<IftaLabel>
<InputText id="username" v-model="value" />
<InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label>
</IftaLabel>
</div>
@ -47,7 +47,7 @@ export default {
<template>
<div class="card flex justify-center">
<IftaLabel>
<InputText id="username" v-model="value" />
<InputText id="username" v-model="value" variant="filled" />
<label for="username">Username</label>
</IftaLabel>
</div>

27
apps/showcase/doc/inputtext/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">
<InputText v-model="value" :invalid="value === ''" />
<div class="card flex flex-wrap justify-center gap-4">
<InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
@ -12,15 +13,18 @@
export default {
data() {
return {
value: '',
value1: '',
value2: '',
code: {
basic: `
<InputText v-model="value" :invalid="value === null" />
<InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
`,
options: `
<template>
<div class="card flex justify-center">
<InputText v-model="value" :invalid="value === null" />
<div class="card flex flex-wrap justify-center gap-4">
<InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
</div>
</template>
@ -28,7 +32,8 @@ export default {
export default {
data() {
return {
value: ''
value1: '',
value2: ''
}
}
}
@ -36,15 +41,17 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-center">
<InputText v-model="value" :invalid="value === null" />
<div class="card flex flex-wrap justify-center gap-4">
<InputText v-model="value1" :invalid="!value1" />
<InputText v-model="value2" :invalid="!value2" variant="filled" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref('');
const value1 = ref('');
const value2 = ref('');
<\/script>
`
}

12
apps/showcase/pages/inputtext/index.vue
View File

@ -8,8 +8,8 @@ import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
@ -30,6 +30,11 @@ export default {
label: 'Basic',
component: BasicDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'floatlabel',
label: 'Float Label',
@ -50,11 +55,6 @@ export default {
label: 'Help Text',
component: HelpTextDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'invalid',
label: 'Invalid',

1
packages/primevue/src/floatlabel/style/FloatLabelStyle.js
View File

@ -83,6 +83,7 @@ const theme = ({ dt }) => `
.p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label {
padding-top: ${dt('floatlabel.in.input.padding.top')};
padding-bottom: ${dt('floatlabel.in.input.padding.bottom')};
}
.p-floatlabel-in:has(input:focus) label,

1
packages/primevue/src/iftalabel/style/IftaLabelStyle.js
View File

@ -28,6 +28,7 @@ const theme = ({ dt }) => `
.p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label {
padding-top: ${dt('iftalabel.input.padding.top')};
padding-bottom: ${dt('iftalabel.input.padding.bottom')};
}
.p-iftalabel:has(.p-invalid) label {

3
packages/themes/src/presets/aura/floatlabel/index.js
View File

@ -20,7 +20,8 @@ export default {
},
in: {
input: {
paddingTop: '1.5rem'
paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
},
active: {
top: '{form.field.padding.y}'

3
packages/themes/src/presets/aura/iftalabel/index.js
View File

@ -10,6 +10,7 @@ export default {
fontWeight: '400'
},
input: {
paddingTop: '1.5rem'
paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
}
};

3
packages/themes/src/presets/lara/floatlabel/index.js
View File

@ -20,7 +20,8 @@ export default {
},
in: {
input: {
paddingTop: '1.875rem'
paddingTop: '1.875rem',
paddingBottom: '{form.field.padding.y}'
},
active: {
top: '{form.field.padding.y}'

3
packages/themes/src/presets/lara/iftalabel/index.js
View File

@ -10,6 +10,7 @@ export default {
fontWeight: '400'
},
input: {
paddingTop: '1.875rem'
paddingTop: '1.875rem',
paddingBottom: '{form.field.padding.y}'
}
};

145
packages/themes/src/presets/material/base/index.js
View File

@ -34,15 +34,15 @@ export default {
semantic: {
transitionDuration: '0.2s',
focusRing: {
width: '1px',
style: 'solid',
color: '{primary.color}',
offset: '2px',
width: '0',
style: 'none',
color: 'transparent',
offset: '0',
shadow: 'none'
},
disabledOpacity: '0.6',
disabledOpacity: '0.38',
iconSize: '1rem',
anchorGutter: '2px',
anchorGutter: '0',
primary: {
50: '{emerald.50}',
100: '{emerald.100}',
@ -58,51 +58,51 @@ export default {
},
formField: {
paddingX: '0.75rem',
paddingY: '0.5rem',
borderRadius: '{border.radius.md}',
paddingY: '0.75rem',
borderRadius: '{border.radius.sm}',
focusRing: {
width: '0',
style: 'none',
color: 'transparent',
offset: '0',
width: '2px',
style: 'solid',
color: '{primary.color}',
offset: '-2px',
shadow: 'none'
},
transitionDuration: '{transition.duration}'
},
list: {
padding: '0.25rem 0.25rem',
gap: '2px',
padding: '0.5rem 0',
gap: '0',
header: {
padding: '0.5rem 1rem 0.25rem 1rem'
padding: '0.75rem 0.75rem'
},
option: {
padding: '0.5rem 0.75rem',
borderRadius: '{border.radius.sm}'
padding: '0.75rem 0.75rem',
borderRadius: '{border.radius.none}'
},
optionGroup: {
padding: '0.5rem 0.75rem',
fontWeight: '600'
padding: '0.75rem 0.75rem',
fontWeight: '700'
}
},
content: {
borderRadius: '{border.radius.md}'
borderRadius: '{border.radius.sm}'
},
mask: {
transitionDuration: '0.15s'
},
navigation: {
list: {
padding: '0.25rem 0.25rem',
gap: '2px'
padding: '0.5rem 0',
gap: '0'
},
item: {
padding: '0.5rem 0.75rem',
borderRadius: '{border.radius.sm}',
padding: '0.75rem 0.75rem',
borderRadius: '{border.radius.none}',
gap: '0.5rem'
},
submenuLabel: {
padding: '0.5rem 0.75rem',
fontWeight: '600'
padding: '0.75rem 0.75rem',
fontWeight: '700'
},
submenuIcon: {
size: '0.875rem'
@ -110,21 +110,21 @@ export default {
},
overlay: {
select: {
borderRadius: '{border.radius.md}',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
borderRadius: '{border.radius.sm}',
shadow: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)'
},
popover: {
borderRadius: '{border.radius.md}',
padding: '0.75rem',
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
borderRadius: '{border.radius.sm}',
padding: '1rem',
shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
},
modal: {
borderRadius: '{border.radius.xl}',
padding: '1.25rem',
shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
borderRadius: '{border.radius.sm}',
padding: '1.5rem',
shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
},
navigation: {
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
shadow: '0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)'
}
},
colorScheme: {
@ -146,65 +146,66 @@ export default {
primary: {
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
activeColor: '{primary.700}'
hoverColor: 'color-mix(in srgb, {primary.color}, transparent 8%)',
activeColor: 'color-mix(in srgb, {primary.color}, transparent 32%)'
},
highlight: {
background: '{primary.50}',
focusBackground: '{primary.100}',
background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
color: '{primary.700}',
focusColor: '{primary.800}'
},
mask: {
background: 'rgba(0,0,0,0.4)',
background: 'rgba(0,0,0,0.32)',
color: '{surface.200}'
},
formField: {
background: '{surface.0}',
disabledBackground: '{surface.200}',
filledBackground: '{surface.50}',
filledFocusBackground: '{surface.50}',
borderColor: '{surface.300}',
hoverBorderColor: '{surface.400}',
disabledBackground: '{surface.300}',
filledBackground: '{surface.100}',
filledHoverBackground: '{surface.200}',
filledFocusBackground: '{surface.100}',
borderColor: '{surface.400}',
hoverBorderColor: '{surface.900}',
focusBorderColor: '{primary.color}',
invalidBorderColor: '{red.400}',
color: '{surface.700}',
disabledColor: '{surface.500}',
placeholderColor: '{surface.500}',
floatLabelColor: '{surface.500}',
invalidBorderColor: '{red.800}',
color: '{surface.900}',
disabledColor: '{surface.600}',
placeholderColor: '{surface.600}',
floatLabelColor: '{surface.600}',
floatLabelFocusColor: '{primary.600}',
floatLabelActiveColor: '{surface.500}',
floatLabelInvalidColor: '{red.400}',
iconColor: '{surface.400}',
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
floatLabelActiveColor: '{surface.600}',
floatLabelInvalidColor: '{red.800}',
iconColor: '{surface.600}',
shadow: 'none'
},
text: {
color: '{surface.700}',
hoverColor: '{surface.800}',
mutedColor: '{surface.500}',
color: '{surface.900}',
hoverColor: '{surface.900}',
mutedColor: '{surface.600}',
hoverMutedColor: '{surface.600}'
},
content: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
borderColor: '{surface.300}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
},
overlay: {
select: {
background: '{surface.0}',
borderColor: '{surface.200}',
borderColor: '{surface.0}',
color: '{text.color}'
},
popover: {
background: '{surface.0}',
borderColor: '{surface.200}',
borderColor: '{surface.0}',
color: '{text.color}'
},
modal: {
background: '{surface.0}',
borderColor: '{surface.200}',
borderColor: '{surface.0}',
color: '{text.color}'
}
},
@ -218,36 +219,36 @@ export default {
selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.focus.color}',
icon: {
color: '{surface.400}',
focusColor: '{surface.500}'
color: '{surface.600}',
focusColor: '{surface.600}'
}
},
optionGroup: {
background: 'transparent',
color: '{text.muted.color}'
color: '{text.color}'
}
},
navigation: {
item: {
focusBackground: '{surface.100}',
activeBackground: '{surface.100}',
activeBackground: '{surface.200}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.400}',
focusColor: '{surface.500}',
activeColor: '{surface.500}'
color: '{surface.600}',
focusColor: '{surface.600}',
activeColor: '{surface.600}'
}
},
submenuLabel: {
background: 'transparent',
color: '{text.muted.color}'
color: '{text.color}'
},
submenuIcon: {
color: '{surface.400}',
focusColor: '{surface.500}',
activeColor: '{surface.500}'
color: '{surface.600}',
focusColor: '{surface.600}',
activeColor: '{surface.600}'
}
}
},

18
packages/themes/src/presets/material/floatlabel/index.js
View File

@ -8,30 +8,28 @@ export default {
positionX: '{form.field.padding.x}',
positionY: '{form.field.padding.y}',
fontWeight: '500',
focus: {
active: {
fontSize: '0.75rem',
fontWeight: '400'
}
},
over: {
focus: {
active: {
top: '-1.25rem'
}
},
in: {
input: {
paddingTop: '1.5rem'
paddingTop: '1.5rem',
paddingBottom: '0.5rem'
},
focus: {
top: '{form.field.padding.y}'
active: {
top: '0.5rem'
}
},
on: {
input: {
paddingTop: '1rem',
paddingBottom: '1rem'
},
focus: {
borderRadius: '{border.radius.xs}',
active: {
background: '{form.field.background}',
padding: '0 0.125rem'
}

5
packages/themes/src/presets/material/iftalabel/index.js
View File

@ -5,11 +5,12 @@ export default {
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s',
positionX: '{form.field.padding.x}',
top: '{form.field.padding.y}',
top: '0.5rem',
fontSize: '0.75rem',
fontWeight: '400'
},
input: {
paddingTop: '1.5rem'
paddingTop: '1.5rem',
paddingBottom: '0.5rem'
}
};

6
packages/themes/src/presets/material/index.js
View File

@ -178,11 +178,7 @@ export default {
tooltip,
ripple
},
// @todo: REMOVE THIS BLOCK
style: ({ dt }) => `
.p-button {
background: blue !important;
padding: ${dt('inputtext.test')} ${dt('inputtext.test')} !important;
}
`
};

54
packages/themes/src/presets/material/inputtext/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}',
@ -14,7 +15,6 @@ export default {
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
test: '2rem', // @todo: REMOVE THIS LINE
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
@ -27,20 +27,56 @@ export default {
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.375rem'
paddingY: '0.625rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '0.875rem',
paddingY: '0.625rem'
paddingX: '1rem',
paddingY: '1rem'
}
},
// @todo: REMOVE THIS BLOCK
style: ({ dt }) => `
.p-inputtext {
background: yellow;
padding: ${dt('inputtext.test')} ${dt('inputtext.test')};
border: 5px solid red;
.p-inputtext.p-variant-filled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: ${dt('inputtext.filled.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.border.color')}, ${dt('inputtext.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-inputtext.p-variant-filled:enabled:hover {
background: ${dt('inputtext.filled.hover.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.hover.border.color')}, ${dt('inputtext.hover.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-inputtext.p-variant-filled:enabled:focus {
outline: 0 none;
background: ${dt('inputtext.filled.focus.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.border.color')}, ${dt('inputtext.border.color')});
background-size: 100% 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-inputtext.p-variant-filled:enabled:hover:focus {
background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.hover.border.color')}, ${dt('inputtext.hover.border.color')});
}
.p-inputtext.p-variant-filled.p-invalid {
background-image: linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')}), linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')});
}
.p-inputtext.p-variant-filled.p-invalid:enabled:focus {
background-image: linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')}), linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')});
}
`
};

3
packages/themes/src/presets/nora/floatlabel/index.js
View File

@ -20,7 +20,8 @@ export default {
},
in: {
input: {
paddingTop: '1.5rem'
paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
},
active: {
top: '{form.field.padding.y}'

3
packages/themes/src/presets/nora/iftalabel/index.js
View File

@ -10,6 +10,7 @@ export default {
fontWeight: '400'
},
input: {
paddingTop: '1.5rem'
paddingTop: '1.5rem',
paddingBottom: '{form.field.padding.y}'
}
};