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

More work on #6651

pull/6674/head
Cagatay Civici 2024-10-26 13:41:04 +03:00
parent 25ac573fef
commit b34c4eca27
43 changed files with 456 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
apps/showcase/doc/autocomplete/SizesDoc.vue
View File

@ -3,9 +3,9 @@
<p>AutoComplete provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,24 +14,22 @@
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
items1: [],
items2: [],
items3: [],
value1: null,
value2: null,
value3: null,
items: [],
code: {
basic: `
<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
</div>
</template>
@ -39,17 +37,15 @@ export default {
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
items1: [],
items2: [],
items3: [],
value1: null,
value2: null,
value3: null,
items: [],
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
search() {
this.items = [];
}
}
};
@ -58,24 +54,22 @@ export default {
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<AutoComplete v-model="value1" :suggestions="items1" @complete="search" size="small" placeholder="Small" />
<AutoComplete v-model="value2" :suggestions="items2" @complete="search" placeholder="Normal" />
<AutoComplete v-model="value3" :suggestions="items3" @complete="search" size="large" placeholder="Large" />
<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />
</div>
</template>
<script setup>
import { ref } from "vue";
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const items1 = ref([]);
const items2 = ref([]);
const items3 = ref([]);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const items = ref([]);
const search = (event) => {
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
const search = () => {
items.value = [];
}
<\/script>
`
@ -83,8 +77,8 @@ const search = (event) => {
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
search() {
this.items = [];
}
}
};

24
apps/showcase/doc/datepicker/SizesDoc.vue
View File

@ -3,9 +3,9 @@
<p>DatePicker provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<DatePicker v-model="value1" size="small" placeholder="Small" />
<DatePicker v-model="value2" placeholder="Normal" />
<DatePicker v-model="value3" size="large" placeholder="Large" />
<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
</div>
<DocSectionCode :code="code" />
</template>
@ -19,16 +19,16 @@ export default {
value3: null,
code: {
basic: `
<DatePicker v-model="value1" size="small" placeholder="Small" />
<DatePicker v-model="value2" placeholder="Normal" />
<DatePicker v-model="value3" size="large" placeholder="Large" />
<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<DatePicker v-model="value1" size="small" placeholder="Small" />
<DatePicker v-model="value2" placeholder="Normal" />
<DatePicker v-model="value3" size="large" placeholder="Large" />
<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
</div>
</template>
@ -47,9 +47,9 @@ export default {
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<DatePicker v-model="value1" size="small" placeholder="Small" />
<DatePicker v-model="value2" placeholder="Normal" />
<DatePicker v-model="value3" size="large" placeholder="Large" />
<DatePicker v-model="value1" size="small" placeholder="Small" showIcon iconDisplay="input" />
<DatePicker v-model="value2" placeholder="Normal" showIcon iconDisplay="input" />
<DatePicker v-model="value3" size="large" placeholder="Large" showIcon iconDisplay="input" />
</div>
</template>

8
apps/showcase/doc/selectbutton/BasicDoc.vue
View File

@ -6,7 +6,7 @@
</p>
</DocSectionText>
<div class="card flex justify-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
<SelectButton v-model="value" :options="options" />
</div>
<DocSectionCode :code="code" />
</template>
@ -19,12 +19,12 @@ export default {
options: ['One-Way', 'Return'],
code: {
basic: `
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
<SelectButton v-model="value" :options="options" />
`,
options: `
<template>
<div class="card flex justify-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
<SelectButton v-model="value" :options="options" />
</div>
</template>
@ -42,7 +42,7 @@ export default {
composition: `
<template>
<div class="card flex justify-center">
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
<SelectButton v-model="value" :options="options" />
</div>
</template>

71
apps/showcase/doc/selectbutton/SizesDoc.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<DocSectionText v-bind="$attrs">
<p>SelectButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<SelectButton v-model="value1" :options="options" size="small" />
<SelectButton v-model="value2" :options="options" />
<SelectButton v-model="value3" :options="options" size="large" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: 'Beginner',
value3: 'Expert',
options: ['Beginner', 'Expert'],
code: {
basic: `
<SelectButton v-model="value1" :options="options" size="small" />
<SelectButton v-model="value2" :options="options" />
<SelectButton v-model="value3" :options="options" size="large" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<SelectButton v-model="value1" :options="options" size="small" />
<SelectButton v-model="value2" :options="options" />
<SelectButton v-model="value3" :options="options" size="large" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: 'Beginner',
value3: 'Expert',
options: ['Beginner', 'Expert'],
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<SelectButton v-model="value1" :options="options" size="small" />
<SelectButton v-model="value2" :options="options" />
<SelectButton v-model="value3" :options="options" size="large" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref('Beginner');
const value3 = ref('Expert');
const options = ref(['Beginner', 'Expert']);
<\/script>
`
}
};
}
};
</script>

68
apps/showcase/doc/togglebutton/SizesDoc.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>ToggleButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: false,
value2: false,
value3: false,
code: {
basic: `
<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
</div>
</template>
<script>
export default {
data() {
return {
value1: false,
value2: false,
value3: false
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
<\/script>
`
}
};
}
};
</script>

2
apps/showcase/pages/datepicker/index.vue
View File

@ -129,7 +129,7 @@ export default {
component: IftaLabelDoc
},
{
id: 'sizez',
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},

6
apps/showcase/pages/selectbutton/index.vue
View File

@ -16,6 +16,7 @@ import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
import FormsDoc from '@/doc/selectbutton/FormsDoc.vue';
import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
@ -51,6 +52,11 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',

6
apps/showcase/pages/togglebutton/index.vue
View File

@ -17,6 +17,7 @@ import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
import FormsDoc from '@/doc/togglebutton/FormsDoc.vue';
import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
import PTComponent from '@/doc/togglebutton/pt/index.vue';
import ThemingDoc from '@/doc/togglebutton/theming/index.vue';
@ -45,6 +46,11 @@ export default {
label: 'Customized',
component: CustomizedDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',

20
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -241,6 +241,26 @@ const theme = ({ dt }) => `
.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
width: 1%;
}
.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown {
width: ${dt('autocomplete.dropdown.sm.width')};
}
.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown .p-icon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
}
.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown {
width: ${dt('autocomplete.dropdown.lg.width')};
}
.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown .p-icon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
}
`;
const inlineStyles = {

22
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -378,6 +378,28 @@ const theme = ({ dt }) => `
.p-datepicker-timeonly .p-datepicker-time-picker {
border-block-start: 0 none;
}
.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {
width: ${dt('datepicker.dropdown.sm.width')};
}
.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,
.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
}
.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {
width: ${dt('datepicker.dropdown.lg.width')};
}
.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,
.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
}
`;
const inlineStyles = {

12
packages/primevue/src/inputnumber/style/InputNumberStyle.js
View File

@ -147,6 +147,18 @@ const theme = ({ dt }) => `
.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
width: 100%;
}
.p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
}
.p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
}
`;
const classes = {

8
packages/primevue/src/inputotp/style/InputOtpStyle.js
View File

@ -4,22 +4,22 @@ const theme = ({ dt }) => `
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
gap: ${dt('inputotp.gap')};
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
width: ${dt('inputotp.input.width')};
}
.p-inputotp-input.p-inputtext-sm {
text-align: center;
width: 2rem;
width: ${dt('inputotp.input.sm.width')};
}
.p-inputotp-input.p-inputtext-lg {
text-align: center;
width: 3rem;
width: ${dt('inputotp.input.lg.width')};
}
`;

4
packages/primevue/src/selectbutton/BaseSelectButton.vue
View File

@ -19,6 +19,10 @@ export default {
ariaLabelledby: {
type: String,
default: null
},
size: {
type: String,
default: null
}
},
style: SelectButtonStyle,

4
packages/primevue/src/selectbutton/SelectButton.d.ts vendored
View File

@ -181,6 +181,10 @@ export interface SelectButtonProps {
* Identifier of the underlying element.
*/
ariaLabelledby?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/**
* Form control object, typically used for handling validation and form state.
*/

1
packages/primevue/src/selectbutton/SelectButton.vue
View File

@ -7,6 +7,7 @@
:offLabel="getOptionLabel(option)"
:disabled="disabled || isOptionDisabled(option)"
:unstyled="unstyled"
:size="size"
@change="onOptionSelect($event, option, index)"
:pt="ptm('pcToggleButton')"
>

4
packages/primevue/src/togglebutton/BaseToggleButton.vue
View File

@ -35,6 +35,10 @@ export default {
ariaLabel: {
type: String,
default: null
},
size: {
type: String,
default: null
}
},
style: ToggleButtonStyle,

4
packages/primevue/src/togglebutton/ToggleButton.d.ts vendored
View File

@ -158,6 +158,10 @@ export interface ToggleButtonProps {
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
ariaLabelledby?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/**
* Form control object, typically used for handling validation and form state.
*/

14
packages/primevue/src/togglebutton/style/ToggleButtonStyle.js
View File

@ -99,6 +99,16 @@ const theme = ({ dt }) => `
.p-togglebutton:disabled .p-togglebutton-icon {
color: ${dt('togglebutton.icon.disabled.color')};
}
.p-togglebutton-sm {
padding: ${dt('togglebutton.sm.padding')};
font-size: ${dt('togglebutton.sm.font.size')};
}
.p-togglebutton-lg {
padding: ${dt('togglebutton.lg.padding')};
font-size: ${dt('togglebutton.lg.font.size')};
}
`;
const classes = {
@ -106,7 +116,9 @@ const classes = {
'p-togglebutton p-component',
{
'p-togglebutton-checked': instance.active,
'p-invalid': instance.$invalid
'p-invalid': instance.$invalid,
'p-togglebutton-sm p-inputfield-sm': props.size === 'small',
'p-togglebutton-lg p-inputfield-lg': props.size === 'large'
}
],
content: 'p-togglebutton-content',

6
packages/themes/src/presets/aura/autocomplete/index.js
View File

@ -55,6 +55,12 @@ export default {
},
dropdown: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
},
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',

6
packages/themes/src/presets/aura/datepicker/index.js
View File

@ -24,6 +24,12 @@ export default {
},
dropdown: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
},
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',

2
packages/themes/src/presets/aura/index.js
View File

@ -36,6 +36,7 @@ import inplace from '@primevue/themes/aura/inplace';
import inputchips from '@primevue/themes/aura/inputchips';
import inputgroup from '@primevue/themes/aura/inputgroup';
import inputnumber from '@primevue/themes/aura/inputnumber';
import inputotp from '@primevue/themes/aura/inputotp';
import inputtext from '@primevue/themes/aura/inputtext';
import knob from '@primevue/themes/aura/knob';
import listbox from '@primevue/themes/aura/listbox';
@ -127,6 +128,7 @@ export default {
inputchips,
inputgroup,
inputnumber,
inputotp,
inputtext,
knob,
listbox,

14
packages/themes/src/presets/aura/inputotp/index.js Normal file
View File

@ -0,0 +1,14 @@
export default {
root: {
gap: '0.5rem'
},
input: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
}
}
};

5
packages/themes/src/presets/aura/inputotp/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/knob/index.d.ts"
}

10
packages/themes/src/presets/aura/togglebutton/index.js
View File

@ -15,7 +15,15 @@ export default {
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
padding: '0.375rem 0.75rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
padding: '0.625rem 1.25rem'
}
},
icon: {
disabledColor: '{form.field.disabled.color}'

6
packages/themes/src/presets/lara/autocomplete/index.js
View File

@ -55,6 +55,12 @@ export default {
},
dropdown: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
},
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',

6
packages/themes/src/presets/lara/datepicker/index.js
View File

@ -22,6 +22,12 @@ export default {
},
dropdown: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
},
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',

2
packages/themes/src/presets/lara/index.js
View File

@ -36,6 +36,7 @@ import inplace from '@primevue/themes/lara/inplace';
import inputchips from '@primevue/themes/lara/inputchips';
import inputgroup from '@primevue/themes/lara/inputgroup';
import inputnumber from '@primevue/themes/lara/inputnumber';
import inputotp from '@primevue/themes/lara/inputotp';
import inputtext from '@primevue/themes/lara/inputtext';
import knob from '@primevue/themes/lara/knob';
import listbox from '@primevue/themes/lara/listbox';
@ -127,6 +128,7 @@ export default {
inputchips,
inputgroup,
inputnumber,
inputotp,
inputtext,
knob,
listbox,

14
packages/themes/src/presets/lara/inputotp/index.js Normal file
View File

@ -0,0 +1,14 @@
export default {
root: {
gap: '0.5rem'
},
input: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
}
}
};

5
packages/themes/src/presets/lara/inputotp/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/knob/index.d.ts"
}

10
packages/themes/src/presets/lara/togglebutton/index.js
View File

@ -22,7 +22,15 @@ export default {
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
padding: '0.5rem 0.75rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
padding: '0.75rem 1.25rem'
}
},
icon: {
color: '{text.muted.color}',

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

@ -55,6 +55,12 @@ export default {
},
dropdown: {
width: '3rem',
sm: {
width: '2.5rem'
},
lg: {
width: '3.5rem'
},
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',

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

@ -65,8 +65,8 @@ export default {
},
lg: {
fontSize: '1.125rem',
paddingX: '1rem',
paddingY: '1rem'
paddingX: '0.825rem',
paddingY: '0.825rem'
},
borderRadius: '{border.radius.sm}',
focusRing: {

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

@ -24,6 +24,12 @@ export default {
},
dropdown: {
width: '3rem',
sm: {
width: '2.5rem'
},
lg: {
width: '3.5rem'
},
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',

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

@ -36,6 +36,7 @@ import inplace from '@primevue/themes/material/inplace';
import inputchips from '@primevue/themes/material/inputchips';
import inputgroup from '@primevue/themes/material/inputgroup';
import inputnumber from '@primevue/themes/material/inputnumber';
import inputotp from '@primevue/themes/material/inputotp';
import inputtext from '@primevue/themes/material/inputtext';
import knob from '@primevue/themes/material/knob';
import listbox from '@primevue/themes/material/listbox';
@ -127,6 +128,7 @@ export default {
inputchips,
inputgroup,
inputnumber,
inputotp,
inputtext,
knob,
listbox,

14
packages/themes/src/presets/material/inputotp/index.js Normal file
View File

@ -0,0 +1,14 @@
export default {
root: {
gap: '0.5rem'
},
input: {
width: '3rem',
sm: {
width: '2.5rem'
},
lg: {
width: '3.5rem'
}
}
};

5
packages/themes/src/presets/material/inputotp/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/knob/index.d.ts"
}

10
packages/themes/src/presets/material/togglebutton/index.js
View File

@ -21,7 +21,15 @@ export default {
color: 'unset',
shadow: 'none'
},
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
padding: '0.625rem 0.75rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
padding: '0.875rem 1.25rem'
}
},
icon: {
color: '{text.muted.color}',

6
packages/themes/src/presets/nora/autocomplete/index.js
View File

@ -55,6 +55,12 @@ export default {
},
dropdown: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
},
background: '{form.field.background}',
color: '{form.field.icon.color}',
hoverColor: '{form.field.icon.color}',

6
packages/themes/src/presets/nora/datepicker/index.js
View File

@ -24,6 +24,12 @@ export default {
},
dropdown: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
},
background: '{form.field.background}',
color: '{form.field.icon.color}',
hoverColor: '{form.field.icon.color}',

2
packages/themes/src/presets/nora/index.js
View File

@ -36,6 +36,7 @@ import inplace from '@primevue/themes/nora/inplace';
import inputchips from '@primevue/themes/nora/inputchips';
import inputgroup from '@primevue/themes/nora/inputgroup';
import inputnumber from '@primevue/themes/nora/inputnumber';
import inputotp from '@primevue/themes/nora/inputotp';
import inputtext from '@primevue/themes/nora/inputtext';
import knob from '@primevue/themes/nora/knob';
import listbox from '@primevue/themes/nora/listbox';
@ -127,6 +128,7 @@ export default {
inputchips,
inputgroup,
inputnumber,
inputotp,
inputtext,
knob,
listbox,

14
packages/themes/src/presets/nora/inputotp/index.js Normal file
View File

@ -0,0 +1,14 @@
export default {
root: {
gap: '0.5rem'
},
input: {
width: '2.5rem',
sm: {
width: '2rem'
},
lg: {
width: '3rem'
}
}
};

5
packages/themes/src/presets/nora/inputotp/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/knob/index.d.ts"
}

10
packages/themes/src/presets/nora/togglebutton/index.js
View File

@ -22,7 +22,15 @@ export default {
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
padding: '0.375rem 0.625rem'
},
lg: {
fontSize: '{form.field.lg.font.size}',
padding: '0.625rem 0.875rem'
}
},
icon: {
color: '{text.muted.color}',