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

Initiated #6651

pull/6674/head
Cagatay Civici 2024-10-25 23:13:22 +03:00
parent 566625f9fd
commit 25f716a5f4
100 changed files with 2224 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
apps/showcase/doc/autocomplete/SizesDoc.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<DocSectionText v-bind="$attrs">
<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" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
items1: [],
items2: [],
items3: [],
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" />
`,
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" />
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
items1: [],
items2: [],
items3: [],
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
<\/script>
`,
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" />
</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 search = (event) => {
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
<\/script>
`
}
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
</script>

2
apps/showcase/doc/button/SizesDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p> <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap items-center justify-center gap-4"> <div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Small" icon="pi pi-check" size="small" /> <Button label="Small" icon="pi pi-check" size="small" />

299
apps/showcase/doc/cascadeselect/SizesDoc.vue Normal file
View File

@ -0,0 +1,299 @@
<template>
<DocSectionText v-bind="$attrs">
<p>CascadeSelect 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">
<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="small" placeholder="Small" />
<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Normal" />
<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" size="large" placeholder="Large" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: {
basic: `
<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="small" placeholder="Small" />
<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" placeholder="Normal" />
<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="large" placeholder="Large" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="small" placeholder="Small" />
<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" placeholder="Normal" />
<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="large" placeholder="Large" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<CascadeSelect v-model="value1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="small" placeholder="Small" />
<CascadeSelect v-model="value2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" placeholder="Normal" />
<CascadeSelect v-model="value3" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']"
class="w-56" size="large" placeholder="Large" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]);
<\/script>
`
}
};
}
};
</script>

2
apps/showcase/doc/checkbox/GroupDoc.vue
View File

@ -76,7 +76,7 @@ export default {
data() { data() {
return { return {
pizza: null pizza: null
}; }
} }
}; };
<\/script> <\/script>

100
apps/showcase/doc/checkbox/SizesDoc.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Checkbox provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
size: null,
code: {
basic: `
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
`,
options: `
<template>
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
size: null
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const size = ref();
<\/script>
`
}
};
}
};
</script>

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

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<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" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
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" />
`,
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" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
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" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

113
apps/showcase/doc/iconfield/SizesDoc.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<DocSectionText v-bind="$attrs">
<p>IconField is compatible with the size setting of the input field.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Small" size="small" />
</IconField>
<IconField>
<InputText v-model="value2" placeholder="Normal" />
<InputIcon class="pi pi-user" />
</IconField>
<IconField>
<InputIcon class="pi pi-lock" />
<InputText v-model="value3" placeholder="Large" size="large" />
<InputIcon class="pi pi-spin pi-spinner" />
</IconField>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Small" size="small" />
</IconField>
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value2" placeholder="Normal" />
</IconField>
<IconField>
<InputText v-model="value3" placeholder="Large" size="large" />
<InputIcon class="pi pi-spin pi-spinner" />
</IconField>
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Small" size="small" />
</IconField>
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value2" placeholder="Normal" />
</IconField>
<IconField>
<InputText v-model="value3" placeholder="Large" size="large" />
<InputIcon class="pi pi-spin pi-spinner" />
</IconField>
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Small" size="small" />
</IconField>
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value2" placeholder="Normal" />
</IconField>
<IconField>
<InputText v-model="value3" placeholder="Large" size="large" />
<InputIcon class="pi pi-spin pi-spinner" />
</IconField>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

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

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>InputMask 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">
<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
<InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
<InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

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

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>InputNumber 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">
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

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

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>InputOtp 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">
<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<InputOtp v-model="value1" size="small" />
<InputOtp v-model="value2" />
<InputOtp v-model="value3" size="large" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

2
apps/showcase/doc/inputtext/SizesDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p> <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-col items-center gap-4"> <div class="card flex flex-col items-center gap-4">
<InputText v-model="value1" type="text" size="small" placeholder="Small" /> <InputText v-model="value1" type="text" size="small" placeholder="Small" />

89
apps/showcase/doc/multiselect/SizesDoc.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<DocSectionText v-bind="$attrs">
<p>MultiSelect 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">
<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<MultiSelect v-model="value1" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="small" placeholder="Small" />
<MultiSelect v-model="value2" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" placeholder="Normal" />
<MultiSelect v-model="value3" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-80" size="large" placeholder="Large" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const countries = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

70
apps/showcase/doc/password/SizesDoc.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Password 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">
<Password v-model="value1" type="text" size="small" placeholder="Small" />
<Password v-model="value2" type="text" placeholder="Normal" />
<Password v-model="value3" type="text" size="large" placeholder="Large" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<div class="card flex flex-col items-center gap-4">
<Password v-model="value1" type="text" size="small" placeholder="Small" />
<Password v-model="value2" type="text" placeholder="Normal" />
<Password v-model="value3" type="text" size="large" placeholder="Large" />
</div>
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<Password v-model="value1" type="text" size="small" placeholder="Small" />
<Password v-model="value2" type="text" placeholder="Normal" />
<Password v-model="value3" type="text" size="large" placeholder="Large" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<Password v-model="value1" type="text" size="small" placeholder="Small" />
<Password v-model="value2" type="text" placeholder="Normal" />
<Password v-model="value3" type="text" size="large" placeholder="Large" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

106
apps/showcase/doc/radiobutton/SizesDoc.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<DocSectionText v-bind="$attrs">
<p>RadioButton provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
size: null,
code: {
basic: `
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
`,
options: `
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
size: null
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-center">
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_small" name="size" value="Small" size="small" />
<label for="size_small" class="text-sm">Small</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_normal" name="size" value="Normal" />
<label for="size_normal">Normal</label>
</div>
<div class="flex items-center gap-2">
<RadioButton v-model="size" inputId="size_large" name="size" value="Large" size="large" />
<label for="size_large" class="text-lg">Large</label>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const size = ref(null);
<\/script>
`
}
};
}
};
</script>

89
apps/showcase/doc/select/SizesDoc.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Select 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">
<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: {
basic: `
<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<Select v-model="value1" :options="cities" optionLabel="name" size="small" placeholder="Small" class="w-full md:w-56" />
<Select v-model="value2" :options="cities" optionLabel="name" placeholder="Normal" class="w-full md:w-56" />
<Select v-model="value3" :options="cities" optionLabel="name" size="large" placeholder="Large" class="w-full md:w-56" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
<\/script>
`
}
};
}
};
</script>

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

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Textarea 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">
<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
<Textarea v-model="value2" placeholder="Normal" rows="3" />
<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
code: {
basic: `
<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
<Textarea v-model="value2" placeholder="Normal" rows="3" />
<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
<Textarea v-model="value2" placeholder="Normal" rows="3" />
<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
</div>
</template>
<script>
export default {
data() {
return {
value1: null,
value2: null,
value3: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
<Textarea v-model="value2" placeholder="Normal" rows="3" />
<Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`
}
};
}
};
</script>

113
apps/showcase/doc/treeselect/SizesDoc.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<DocSectionText v-bind="$attrs">
<p>TreeSelect 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">
<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
import { NodeService } from '/service/NodeService';
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
nodes: null,
code: {
basic: `
<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
`,
options: `
<template>
<div class="card flex flex-col items-center gap-4">
<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
</div>
</template>
<script>
import { NodeService } from './service/NodeService';
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
nodes: null
}
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center gap-4">
<TreeSelect v-model="value1" :options="nodes" size="small" placeholder="Small" class="md:w-80 w-full" />
<TreeSelect v-model="value2" :options="nodes" placeholder="Normal" class="md:w-80 w-full" />
<TreeSelect v-model="value3" :options="nodes" size="large" placeholder="Large" class="md:w-80 w-full" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { NodeService } from './service/NodeService';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const nodes = ref(null);
onMounted(() => {
NodeService.getTreeNodes().then((data) => (nodes.value = data));
});
<\/script>
`,
data: `
{
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' }]
}
]
},
...`
}
};
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
}
};
</script>

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

@ -21,6 +21,7 @@ import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
import FormsDoc from '@/doc/autocomplete/FormsDoc.vue'; import FormsDoc from '@/doc/autocomplete/FormsDoc.vue';
import GroupDoc from '@/doc/autocomplete/GroupDoc.vue'; import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue';
import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
import ImportDoc from '@/doc/autocomplete/ImportDoc.vue'; import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue'; import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue'; import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
@ -94,6 +95,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'multiple', id: 'multiple',
label: 'Multiple', label: 'Multiple',

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

@ -18,6 +18,7 @@ import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
import FormsDoc from '@/doc/cascadeselect/FormsDoc.vue'; import FormsDoc from '@/doc/cascadeselect/FormsDoc.vue';
import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue';
import SizesDoc from '@/doc/cascadeselect/SizesDoc.vue';
import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue'; import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue'; import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
@ -69,6 +70,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -20,6 +20,7 @@ import FormsDoc from '@/doc/checkbox/FormsDoc.vue';
import GroupDoc from '@/doc/checkbox/GroupDoc.vue'; import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
import ImportDoc from '@/doc/checkbox/ImportDoc.vue'; import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue'; import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue'; import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
import PTComponent from '@/doc/checkbox/pt/index.vue'; import PTComponent from '@/doc/checkbox/pt/index.vue';
import ThemingDoc from '@/doc/checkbox/theming/index.vue'; import ThemingDoc from '@/doc/checkbox/theming/index.vue';
@ -63,6 +64,11 @@ export default {
label: 'Filled', label: 'Filled',
component: FilledDoc component: FilledDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -14,6 +14,7 @@ import FormatDoc from '@/doc/datepicker/FormatDoc.vue';
import FormsDoc from '@/doc/datepicker/FormsDoc.vue'; import FormsDoc from '@/doc/datepicker/FormsDoc.vue';
import IconDoc from '@/doc/datepicker/IconDoc.vue'; import IconDoc from '@/doc/datepicker/IconDoc.vue';
import IftaLabelDoc from '@/doc/datepicker/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/datepicker/IftaLabelDoc.vue';
import SizesDoc from '@/doc/datepicker/SizesDoc.vue';
import ImportDoc from '@/doc/datepicker/ImportDoc.vue'; import ImportDoc from '@/doc/datepicker/ImportDoc.vue';
import InlineDoc from '@/doc/datepicker/InlineDoc.vue'; import InlineDoc from '@/doc/datepicker/InlineDoc.vue';
import InvalidDoc from '@/doc/datepicker/InvalidDoc.vue'; import InvalidDoc from '@/doc/datepicker/InvalidDoc.vue';
@ -127,6 +128,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizez',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/iconfield/AccessibilityDoc.vue';
import BasicDoc from '@/doc/iconfield/BasicDoc.vue'; import BasicDoc from '@/doc/iconfield/BasicDoc.vue';
import FloatLabelDoc from '@/doc/iconfield/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/iconfield/FloatLabelDoc.vue';
import IftaLabelDoc from '@/doc/iconfield/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/iconfield/IftaLabelDoc.vue';
import SizesDoc from '@/doc/iconfield/SizesDoc.vue';
import ImportDoc from '@/doc/iconfield/ImportDoc.vue'; import ImportDoc from '@/doc/iconfield/ImportDoc.vue';
import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue'; import TemplateDoc from '@/doc/iconfield/TemplateDoc.vue';
import PTComponent from '@/doc/iconfield/pt/index.vue'; import PTComponent from '@/doc/iconfield/pt/index.vue';
@ -41,6 +42,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',

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

@ -18,6 +18,7 @@ import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
import FormsDoc from '@/doc/inputmask/FormsDoc.vue'; import FormsDoc from '@/doc/inputmask/FormsDoc.vue';
import IftaLabelDoc from '@/doc/inputmask/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/inputmask/IftaLabelDoc.vue';
import SizesDoc from '@/doc/inputmask/SizesDoc.vue';
import ImportDoc from '@/doc/inputmask/ImportDoc.vue'; import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue'; import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
import MaskDoc from '@/doc/inputmask/MaskDoc.vue'; import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
@ -75,6 +76,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -19,6 +19,7 @@ import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc.vue';
import FormsDoc from '@/doc/inputnumber/FormsDoc.vue'; import FormsDoc from '@/doc/inputnumber/FormsDoc.vue';
import IftaLabelDoc from '@/doc/inputnumber/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/inputnumber/IftaLabelDoc.vue';
import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
import ImportDoc from '@/doc/inputnumber/ImportDoc.vue'; import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue'; import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue'; import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
@ -87,6 +88,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -6,6 +6,7 @@
import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputotp/BasicDoc.vue'; import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
import FilledDoc from '@/doc/inputotp/FilledDoc.vue'; import FilledDoc from '@/doc/inputotp/FilledDoc.vue';
import SizesDoc from '@/doc/inputotp/SizesDoc.vue';
import FormsDoc from '@/doc/inputotp/FormsDoc.vue'; import FormsDoc from '@/doc/inputotp/FormsDoc.vue';
import ImportDoc from '@/doc/inputotp/ImportDoc.vue'; import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
import IntegerOnlyDoc from '@/doc/inputotp/IntegerOnlyDoc.vue'; import IntegerOnlyDoc from '@/doc/inputotp/IntegerOnlyDoc.vue';
@ -49,6 +50,11 @@ export default {
label: 'Filled', label: 'Filled',
component: FilledDoc component: FilledDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'template', id: 'template',
label: 'Template', label: 'Template',

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

@ -21,6 +21,7 @@ import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
import FormsDoc from '@/doc/multiselect/FormsDoc.vue'; import FormsDoc from '@/doc/multiselect/FormsDoc.vue';
import GroupDoc from '@/doc/multiselect/GroupDoc.vue'; import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue';
import SizesDoc from '@/doc/multiselect/SizesDoc.vue';
import ImportDoc from '@/doc/multiselect/ImportDoc.vue'; import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue'; import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
@ -93,6 +94,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -14,6 +14,7 @@ import ImportDoc from '@/doc/password/ImportDoc.vue';
import InvalidDoc from '@/doc/password/InvalidDoc.vue'; import InvalidDoc from '@/doc/password/InvalidDoc.vue';
import LocaleDoc from '@/doc/password/LocaleDoc.vue'; import LocaleDoc from '@/doc/password/LocaleDoc.vue';
import MeterDoc from '@/doc/password/MeterDoc.vue'; import MeterDoc from '@/doc/password/MeterDoc.vue';
import SizesDoc from '@/doc/password/SizesDoc.vue';
import TemplateDoc from '@/doc/password/TemplateDoc.vue'; import TemplateDoc from '@/doc/password/TemplateDoc.vue';
import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue'; import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
import PTComponent from '@/doc/password/pt/index.vue'; import PTComponent from '@/doc/password/pt/index.vue';
@ -73,6 +74,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -18,6 +18,7 @@ import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
import FormsDoc from '@/doc/radiobutton/FormsDoc.vue'; import FormsDoc from '@/doc/radiobutton/FormsDoc.vue';
import GroupDoc from '@/doc/radiobutton/GroupDoc.vue'; import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue'; import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue'; import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
import PTComponent from '@/doc/radiobutton/pt/index.vue'; import PTComponent from '@/doc/radiobutton/pt/index.vue';
import ThemingDoc from '@/doc/radiobutton/theming/index.vue'; import ThemingDoc from '@/doc/radiobutton/theming/index.vue';
@ -51,6 +52,11 @@ export default {
label: 'Filled', label: 'Filled',
component: FilledDoc component: FilledDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

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

@ -15,6 +15,7 @@ import FloatLabelDoc from '@/doc/select/FloatLabelDoc.vue';
import FormsDoc from '@/doc/select/FormsDoc.vue'; import FormsDoc from '@/doc/select/FormsDoc.vue';
import GroupDoc from '@/doc/select/GroupDoc.vue'; import GroupDoc from '@/doc/select/GroupDoc.vue';
import IftaLabelDoc from '@/doc/select/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/select/IftaLabelDoc.vue';
import SizesDoc from '@/doc/select/SizesDoc.vue';
import ImportDoc from '@/doc/select/ImportDoc.vue'; import ImportDoc from '@/doc/select/ImportDoc.vue';
import InvalidDoc from '@/doc/select/InvalidDoc.vue'; import InvalidDoc from '@/doc/select/InvalidDoc.vue';
import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue'; import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue';
@ -103,6 +104,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

17
apps/showcase/pages/textarea/index.vue
View File

@ -20,6 +20,7 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
import FormsDoc from '@/doc/textarea/FormsDoc.vue'; import FormsDoc from '@/doc/textarea/FormsDoc.vue';
import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue'; import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import SizesDoc from '@/doc/textarea/SizesDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue'; import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
import PTComponent from '@/doc/textarea/pt/index.vue'; import PTComponent from '@/doc/textarea/pt/index.vue';
import ThemingDoc from '@/doc/textarea/theming/index.vue'; import ThemingDoc from '@/doc/textarea/theming/index.vue';
@ -48,6 +49,11 @@ export default {
label: 'Auto Resize', label: 'Auto Resize',
component: AutoResizeDoc component: AutoResizeDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'floatlabel', id: 'floatlabel',
label: 'Float Label', label: 'Float Label',
@ -59,9 +65,14 @@ export default {
component: IftaLabelDoc component: IftaLabelDoc
}, },
{ {
id: 'filled', id: 'iftalabel',
label: 'Filled', label: 'Ifta Label',
component: FilledDoc component: IftaLabelDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
}, },
{ {
id: 'invalid', id: 'invalid',

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

@ -20,6 +20,7 @@ import FilterDoc from '@/doc/treeselect/FilterDoc.vue';
import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue'; import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
import FormsDoc from '@/doc/treeselect/FormsDoc.vue'; import FormsDoc from '@/doc/treeselect/FormsDoc.vue';
import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
import SizesDoc from '@/doc/treeselect/SizesDoc.vue';
import ImportDoc from '@/doc/treeselect/ImportDoc.vue'; import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue'; import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
import LazyDoc from '@/doc/treeselect/LazyDoc.vue'; import LazyDoc from '@/doc/treeselect/LazyDoc.vue';
@ -87,6 +88,11 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

4
packages/primevue/src/autocomplete/AutoComplete.d.ts vendored
View File

@ -367,6 +367,10 @@ export interface AutoCompleteProps {
* @defaultValue false * @defaultValue false
*/ */
loading?: boolean | undefined; loading?: boolean | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

1
packages/primevue/src/autocomplete/AutoComplete.vue
View File

@ -13,6 +13,7 @@
:tabindex="!disabled ? tabindex : -1" :tabindex="!disabled ? tabindex : -1"
:fluid="$fluid" :fluid="$fluid"
:disabled="disabled" :disabled="disabled"
:size="size"
:invalid="invalid" :invalid="invalid"
:variant="variant" :variant="variant"
autocomplete="off" autocomplete="off"

4
packages/primevue/src/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -304,6 +304,10 @@ export interface CascadeSelectProps {
* @defaultValue 960px * @defaultValue 960px
*/ */
breakpoint?: string | undefined; breakpoint?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

28
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

@ -208,6 +208,30 @@ const theme = ({ dt }) => `
.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon { .p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.p-cascadeselect-sm .p-cascadeselect-label {
font-size: ${dt('cascadeselect.sm.font.size')};
padding-block: ${dt('cascadeselect.sm.padding.y')};
padding-inline: ${dt('cascadeselect.sm.padding.x')};
}
.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
font-size: ${dt('cascadeselect.sm.font.size')};
width: ${dt('cascadeselect.sm.font.size')};
height: ${dt('cascadeselect.sm.font.size')};
}
.p-cascadeselect-lg .p-cascadeselect-label {
font-size: ${dt('cascadeselect.lg.font.size')};
padding-block: ${dt('cascadeselect.lg.padding.y')};
padding-inline: ${dt('cascadeselect.lg.padding.x')};
}
.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
font-size: ${dt('cascadeselect.lg.font.size')};
width: ${dt('cascadeselect.lg.font.size')};
height: ${dt('cascadeselect.lg.font.size')};
}
`; `;
const inlineStyles = { const inlineStyles = {
@ -226,7 +250,9 @@ const classes = {
'p-inputwrapper-filled': instance.$filled, 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-cascadeselect-open': instance.overlayVisible, 'p-cascadeselect-open': instance.overlayVisible,
'p-cascadeselect-fluid': instance.$fluid 'p-cascadeselect-fluid': instance.$fluid,
'p-cascadeselect-sm p-inputfield-sm': props.size === 'small',
'p-cascadeselect-lg p-inputfield-lg': props.size === 'large'
} }
], ],
label: ({ instance, props }) => [ label: ({ instance, props }) => [

4
packages/primevue/src/checkbox/Checkbox.d.ts vendored
View File

@ -120,6 +120,10 @@ export interface CheckboxProps {
* @default false * @default false
*/ */
indeterminate?: boolean | undefined; indeterminate?: boolean | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

28
packages/primevue/src/checkbox/style/CheckboxStyle.js
View File

@ -112,6 +112,30 @@ const theme = ({ dt }) => `
.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
color: ${dt('checkbox.icon.disabled.color')}; color: ${dt('checkbox.icon.disabled.color')};
} }
.p-checkbox-sm,
.p-checkbox-sm .p-checkbox-box {
width: ${dt('checkbox.sm.width')};
height: ${dt('checkbox.sm.height')};
}
.p-checkbox-sm .p-checkbox-icon {
font-size: ${dt('checkbox.icon.sm.size')};
width: ${dt('checkbox.icon.sm.size')};
height: ${dt('checkbox.icon.sm.size')};
}
.p-checkbox-lg,
.p-checkbox-lg .p-checkbox-box {
width: ${dt('checkbox.lg.width')};
height: ${dt('checkbox.lg.height')};
}
.p-checkbox-lg .p-checkbox-icon {
font-size: ${dt('checkbox.icon.lg.size')};
width: ${dt('checkbox.icon.lg.size')};
height: ${dt('checkbox.icon.lg.size')};
}
`; `;
const classes = { const classes = {
@ -121,7 +145,9 @@ const classes = {
'p-checkbox-checked': instance.checked, 'p-checkbox-checked': instance.checked,
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-invalid': instance.$pcCheckboxGroup ? instance.$pcCheckboxGroup.$invalid : instance.$invalid, 'p-invalid': instance.$pcCheckboxGroup ? instance.$pcCheckboxGroup.$invalid : instance.$invalid,
'p-variant-filled': instance.$variant === 'filled' 'p-variant-filled': instance.$variant === 'filled',
'p-checkbox-sm p-inputfield-sm': props.size === 'small',
'p-checkbox-lg p-inputfield-lg': props.size === 'large'
} }
], ],
box: 'p-checkbox-box', box: 'p-checkbox-box',

4
packages/primevue/src/datepicker/DatePicker.d.ts vendored
View File

@ -703,6 +703,10 @@ export interface DatePickerProps {
* @defaultValue true * @defaultValue true
*/ */
manualInput?: boolean | undefined; manualInput?: boolean | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

1
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -10,6 +10,7 @@
:value="inputFieldValue" :value="inputFieldValue"
:placeholder="placeholder" :placeholder="placeholder"
:name="name" :name="name"
:size="size"
:invalid="invalid" :invalid="invalid"
:variant="variant" :variant="variant"
:fluid="fluid" :fluid="fluid"

14
packages/primevue/src/iconfield/style/IconFieldStyle.js
View File

@ -28,6 +28,20 @@ const theme = ({ dt }) => `
.p-iconfield .p-inputtext:not(:last-child) { .p-iconfield .p-inputtext:not(:last-child) {
padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')}); padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
} }
.p-iconfield:has(.p-inputfield-sm) .p-inputicon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
margin-top: calc(-1 * (${dt('form.field.sm.font.size')} / 2));
}
.p-iconfield:has(.p-inputfield-lg) .p-inputicon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
margin-top: calc(-1 * (${dt('form.field.lg.font.size')} / 2));
}
`; `;
const classes = { const classes = {

4
packages/primevue/src/inputmask/InputMask.d.ts vendored
View File

@ -156,6 +156,10 @@ export interface InputMaskProps {
* Name of the input element. * Name of the input element.
*/ */
name?: string | undefined; name?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* Specifies the input variant of the component. * Specifies the input variant of the component.
* @defaultValue outlined * @defaultValue outlined

1
packages/primevue/src/inputmask/InputMask.vue
View File

@ -6,6 +6,7 @@
:readonly="readonly" :readonly="readonly"
:disabled="disabled" :disabled="disabled"
:invalid="invalid" :invalid="invalid"
:size="size"
:name="name" :name="name"
:variant="variant" :variant="variant"
:placeholder="placeholder" :placeholder="placeholder"

4
packages/primevue/src/inputnumber/InputNumber.d.ts vendored
View File

@ -323,6 +323,10 @@ export interface InputNumberProps {
* @defaultValue false * @defaultValue false
*/ */
highlightOnFocus?: boolean | undefined; highlightOnFocus?: boolean | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

1
packages/primevue/src/inputnumber/InputNumber.vue
View File

@ -16,6 +16,7 @@
:placeholder="placeholder" :placeholder="placeholder"
:aria-labelledby="ariaLabelledby" :aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel" :aria-label="ariaLabel"
:size="size"
:invalid="invalid" :invalid="invalid"
:variant="variant" :variant="variant"
@input="onUserInput" @input="onUserInput"

4
packages/primevue/src/inputotp/InputOtp.d.ts vendored
View File

@ -151,6 +151,10 @@ export interface InputOtpProps {
* The name attribute for the element, typically used in form submissions. * The name attribute for the element, typically used in form submissions.
*/ */
name?: string | undefined; name?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

1
packages/primevue/src/inputotp/InputOtp.vue
View File

@ -11,6 +11,7 @@
:variant="variant" :variant="variant"
:readonly="readonly" :readonly="readonly"
:disabled="disabled" :disabled="disabled"
:size="size"
:invalid="invalid" :invalid="invalid"
:tabindex="tabindex" :tabindex="tabindex"
:unstyled="unstyled" :unstyled="unstyled"

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

@ -11,6 +11,16 @@ const theme = ({ dt }) => `
text-align: center; text-align: center;
width: 2.5rem; width: 2.5rem;
} }
.p-inputotp-input.p-inputtext-sm {
text-align: center;
width: 2rem;
}
.p-inputotp-input.p-inputtext-lg {
text-align: center;
width: 3rem;
}
`; `;
const classes = { const classes = {

4
packages/primevue/src/inputtext/style/InputTextStyle.js
View File

@ -78,8 +78,8 @@ const classes = {
'p-inputtext p-component', 'p-inputtext p-component',
{ {
'p-filled': instance.$filled, 'p-filled': instance.$filled,
'p-inputtext-sm': props.size === 'small', 'p-inputtext-sm p-inputfield-sm': props.size === 'small',
'p-inputtext-lg': props.size === 'large', 'p-inputtext-lg p-inputfield-lg': props.size === 'large',
'p-invalid': instance.$invalid, 'p-invalid': instance.$invalid,
'p-variant-filled': instance.$variant === 'filled', 'p-variant-filled': instance.$variant === 'filled',
'p-inputtext-fluid': instance.$fluid 'p-inputtext-fluid': instance.$fluid

4
packages/primevue/src/multiselect/MultiSelect.d.ts vendored
View File

@ -357,6 +357,10 @@ export interface MultiSelectProps {
* Label to display when there are no selections. * Label to display when there are no selections.
*/ */
placeholder?: string | undefined; placeholder?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

28
packages/primevue/src/multiselect/style/MultiSelectStyle.js
View File

@ -198,6 +198,30 @@ const theme = ({ dt }) => `
.p-multiselect-fluid { .p-multiselect-fluid {
display: flex; display: flex;
} }
.p-multiselect-sm .p-multiselect-label {
font-size: ${dt('multiselect.sm.font.size')};
padding-block: ${dt('multiselect.sm.padding.y')};
padding-inline: ${dt('multiselect.sm.padding.x')};
}
.p-multiselect-sm .p-multiselect-dropdown .p-icon {
font-size: ${dt('multiselect.sm.font.size')};
width: ${dt('multiselect.sm.font.size')};
height: ${dt('multiselect.sm.font.size')};
}
.p-multiselect-lg .p-multiselect-label {
font-size: ${dt('multiselect.lg.font.size')};
padding-block: ${dt('multiselect.lg.padding.y')};
padding-inline: ${dt('multiselect.lg.padding.x')};
}
.p-multiselect-lg .p-multiselect-dropdown .p-icon {
font-size: ${dt('multiselect.lg.font.size')};
width: ${dt('multiselect.lg.font.size')};
height: ${dt('multiselect.lg.font.size')};
}
`; `;
const inlineStyles = { const inlineStyles = {
@ -216,7 +240,9 @@ const classes = {
'p-inputwrapper-filled': instance.$filled, 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-multiselect-open': instance.overlayVisible, 'p-multiselect-open': instance.overlayVisible,
'p-multiselect-fluid': instance.$fluid 'p-multiselect-fluid': instance.$fluid,
'p-multiselect-sm p-inputfield-sm': props.size === 'small',
'p-multiselect-lg p-inputfield-lg': props.size === 'large'
} }
], ],
labelContainer: 'p-multiselect-label-container', labelContainer: 'p-multiselect-label-container',

4
packages/primevue/src/password/Password.d.ts vendored
View File

@ -231,6 +231,10 @@ export interface PasswordProps extends InputHTMLAttributes {
* Icon to show displaying the password as plain text. * Icon to show displaying the password as plain text.
*/ */
unmaskIcon?: string | undefined; unmaskIcon?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

1
packages/primevue/src/password/Password.vue
View File

@ -19,6 +19,7 @@
:disabled="disabled" :disabled="disabled"
:variant="variant" :variant="variant"
:invalid="invalid" :invalid="invalid"
:size="size"
:autofocus="autofocus" :autofocus="autofocus"
@input="onInput" @input="onInput"
@focus="onFocus" @focus="onFocus"

4
packages/primevue/src/radiobutton/RadioButton.d.ts vendored
View File

@ -114,6 +114,10 @@ export interface RadioButtonProps {
* @default false * @default false
*/ */
binary?: boolean; binary?: boolean;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

28
packages/primevue/src/radiobutton/style/RadioButtonStyle.js
View File

@ -117,6 +117,30 @@ const theme = ({ dt }) => `
.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon { .p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
background: ${dt('radiobutton.icon.disabled.color')}; background: ${dt('radiobutton.icon.disabled.color')};
} }
.p-radiobutton-sm,
.p-radiobutton-sm .p-radiobutton-box {
width: ${dt('radiobutton.sm.width')};
height: ${dt('radiobutton.sm.height')};
}
.p-radiobutton-sm .p-radiobutton-icon {
font-size: ${dt('radiobutton.icon.sm.size')};
width: ${dt('radiobutton.icon.sm.size')};
height: ${dt('radiobutton.icon.sm.size')};
}
.p-radiobutton-lg,
.p-radiobutton-lg .p-radiobutton-box {
width: ${dt('radiobutton.lg.width')};
height: ${dt('radiobutton.lg.height')};
}
.p-radiobutton-lg .p-radiobutton-icon {
font-size: ${dt('radiobutton.icon.lg.size')};
width: ${dt('radiobutton.icon.lg.size')};
height: ${dt('radiobutton.icon.lg.size')};
}
`; `;
const classes = { const classes = {
@ -126,7 +150,9 @@ const classes = {
'p-radiobutton-checked': instance.checked, 'p-radiobutton-checked': instance.checked,
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-invalid': instance.$pcRadioButtonGroup ? instance.$pcRadioButtonGroup.$invalid : instance.$invalid, 'p-invalid': instance.$pcRadioButtonGroup ? instance.$pcRadioButtonGroup.$invalid : instance.$invalid,
'p-variant-filled': instance.$variant === 'filled' 'p-variant-filled': instance.$variant === 'filled',
'p-radiobutton-sm p-inputfield-sm': props.size === 'small',
'p-radiobutton-lg p-inputfield-lg': props.size === 'large'
} }
], ],
box: 'p-radiobutton-box', box: 'p-radiobutton-box',

4
packages/primevue/src/select/Select.d.ts vendored
View File

@ -359,6 +359,10 @@ export interface SelectProps {
* Default text to display when no option is selected. * Default text to display when no option is selected.
*/ */
placeholder?: string | undefined; placeholder?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

28
packages/primevue/src/select/style/SelectStyle.js
View File

@ -195,6 +195,30 @@ input.p-select-label {
.p-select-fluid { .p-select-fluid {
display: flex; display: flex;
} }
.p-select-sm .p-select-label {
font-size: ${dt('select.sm.font.size')};
padding-block: ${dt('select.sm.padding.y')};
padding-inline: ${dt('select.sm.padding.x')};
}
.p-select-sm .p-select-dropdown .p-icon {
font-size: ${dt('select.sm.font.size')};
width: ${dt('select.sm.font.size')};
height: ${dt('select.sm.font.size')};
}
.p-select-lg .p-select-label {
font-size: ${dt('select.lg.font.size')};
padding-block: ${dt('select.lg.padding.y')};
padding-inline: ${dt('select.lg.padding.x')};
}
.p-select-lg .p-select-dropdown .p-icon {
font-size: ${dt('select.lg.font.size')};
width: ${dt('select.lg.font.size')};
height: ${dt('select.lg.font.size')};
}
`; `;
const classes = { const classes = {
@ -208,7 +232,9 @@ const classes = {
'p-inputwrapper-filled': instance.$filled, 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': state.focused || state.overlayVisible, 'p-inputwrapper-focus': state.focused || state.overlayVisible,
'p-select-open': state.overlayVisible, 'p-select-open': state.overlayVisible,
'p-select-fluid': instance.$fluid 'p-select-fluid': instance.$fluid,
'p-select-sm p-inputfield-sm': props.size === 'small',
'p-select-lg p-inputfield-lg': props.size === 'large'
} }
], ],
label: ({ instance, props }) => [ label: ({ instance, props }) => [

4
packages/primevue/src/textarea/Textarea.d.ts vendored
View File

@ -105,6 +105,10 @@ export interface TextareaProps extends TextareaHTMLAttributes {
* @defaultValue false * @defaultValue false
*/ */
autoResize?: boolean | undefined; autoResize?: boolean | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

14
packages/primevue/src/textarea/style/TextareaStyle.js
View File

@ -60,6 +60,18 @@ const theme = ({ dt }) => `
overflow: hidden; overflow: hidden;
resize: none; resize: none;
} }
.p-textarea-sm {
font-size: ${dt('textarea.sm.font.size')};
padding-block: ${dt('textarea.sm.padding.y')};
padding-inline: ${dt('textarea.sm.padding.x')};
}
.p-textarea-lg {
font-size: ${dt('textarea.lg.font.size')};
padding-block: ${dt('textarea.lg.padding.y')};
padding-inline: ${dt('textarea.lg.padding.x')};
}
`; `;
const classes = { const classes = {
@ -68,6 +80,8 @@ const classes = {
{ {
'p-filled': instance.$filled, 'p-filled': instance.$filled,
'p-textarea-resizable ': props.autoResize, 'p-textarea-resizable ': props.autoResize,
'p-textarea-sm p-inputfield-sm': props.size === 'small',
'p-textarea-lg p-inputfield-lg': props.size === 'large',
'p-invalid': instance.$invalid, 'p-invalid': instance.$invalid,
'p-variant-filled': instance.$variant === 'filled', 'p-variant-filled': instance.$variant === 'filled',
'p-textarea-fluid': instance.$fluid 'p-textarea-fluid': instance.$fluid

4
packages/primevue/src/treeselect/TreeSelect.d.ts vendored
View File

@ -198,6 +198,10 @@ export interface TreeSelectProps {
* Label to display when there are no selections. * Label to display when there are no selections.
*/ */
placeholder?: string | undefined; placeholder?: string | undefined;
/**
* Defines the size of the component.
*/
size?: 'small' | 'large' | undefined;
/** /**
* When present, it specifies that the component should have invalid state style. * When present, it specifies that the component should have invalid state style.
* @defaultValue false * @defaultValue false

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

@ -137,6 +137,30 @@ const theme = ({ dt }) => `
.p-treeselect-label:has(.p-chip) { .p-treeselect-label:has(.p-chip) {
padding: calc(${dt('treeselect.padding.y')} / 2) calc(${dt('treeselect.padding.x')} / 2); padding: calc(${dt('treeselect.padding.y')} / 2) calc(${dt('treeselect.padding.x')} / 2);
} }
.p-treeselect-sm .p-treeselect-label {
font-size: ${dt('treeselect.sm.font.size')};
padding-block: ${dt('treeselect.sm.padding.y')};
padding-inline: ${dt('treeselect.sm.padding.x')};
}
.p-treeselect-sm .p-treeselect-dropdown .p-icon {
font-size: ${dt('treeselect.sm.font.size')};
width: ${dt('treeselect.sm.font.size')};
height: ${dt('treeselect.sm.font.size')};
}
.p-treeselect-lg .p-treeselect-label {
font-size: ${dt('treeselect.lg.font.size')};
padding-block: ${dt('treeselect.lg.padding.y')};
padding-inline: ${dt('treeselect.lg.padding.x')};
}
.p-treeselect-lg .p-treeselect-dropdown .p-icon {
font-size: ${dt('treeselect.lg.font.size')};
width: ${dt('treeselect.lg.font.size')};
height: ${dt('treeselect.lg.font.size')};
}
`; `;
const inlineStyles = { const inlineStyles = {
@ -155,7 +179,9 @@ const classes = {
'p-inputwrapper-filled': instance.$filled, 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible, 'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-treeselect-open': instance.overlayVisible, 'p-treeselect-open': instance.overlayVisible,
'p-treeselect-fluid': instance.$fluid 'p-treeselect-fluid': instance.$fluid,
'p-treeselect-sm p-inputfield-sm': props.size === 'small',
'p-treeselect-lg p-inputfield-lg': props.size === 'large'
} }
], ],
labelContainer: 'p-treeselect-label-container', labelContainer: 'p-treeselect-label-container',

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

@ -59,6 +59,16 @@ export default {
formField: { formField: {
paddingX: '0.75rem', paddingX: '0.75rem',
paddingY: '0.5rem', paddingY: '0.5rem',
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.375rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '0.875rem',
paddingY: '0.625rem'
},
borderRadius: '{border.radius.md}', borderRadius: '{border.radius.md}',
focusRing: { focusRing: {
width: '0', width: '0',

12
packages/themes/src/presets/aura/button/index.js
View File

@ -7,14 +7,14 @@ export default {
paddingY: '{form.field.padding.y}', paddingY: '{form.field.padding.y}',
iconOnlyWidth: '2.5rem', iconOnlyWidth: '2.5rem',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.375rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.625rem' paddingY: '{form.field.lg.padding.y}'
}, },
label: { label: {
fontWeight: '500' fontWeight: '500'

12
packages/themes/src/presets/aura/cascadeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

18
packages/themes/src/presets/aura/checkbox/index.js
View File

@ -24,13 +24,27 @@ export default {
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '1rem',
height: '1rem'
},
lg: {
width: '1.5rem',
height: '1.5rem'
}
}, },
icon: { icon: {
size: '0.875rem', size: '0.875rem',
color: '{form.field.color}', color: '{form.field.color}',
checkedColor: '{primary.contrast.color}', checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}', checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.75rem'
},
lg: {
size: '1rem'
}
} }
}; };

12
packages/themes/src/presets/aura/inputtext/index.js
View File

@ -25,14 +25,14 @@ export default {
}, },
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.375rem' paddingY: '{form.field.sm.padding.y}',
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.625rem' paddingY: '{form.field.lg.padding.y}',
} }
} }
}; };

12
packages/themes/src/presets/aura/multiselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

18
packages/themes/src/presets/aura/radiobutton/index.js
View File

@ -23,12 +23,26 @@ export default {
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '1rem',
height: '1rem'
},
lg: {
width: '1.5rem',
height: '1.5rem'
}
}, },
icon: { icon: {
size: '0.75rem', size: '0.75rem',
checkedColor: '{primary.contrast.color}', checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}', checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.5rem'
},
lg: {
size: '1rem'
}
} }
}; };

12
packages/themes/src/presets/aura/select/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

12
packages/themes/src/presets/aura/textarea/index.js
View File

@ -22,6 +22,16 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
} }
}; };

12
packages/themes/src/presets/aura/treeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

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

@ -58,6 +58,16 @@ export default {
formField: { formField: {
paddingX: '0.75rem', paddingX: '0.75rem',
paddingY: '0.625rem', paddingY: '0.625rem',
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.5rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '0.875rem',
paddingY: '0.75rem'
},
borderRadius: '{border.radius.md}', borderRadius: '{border.radius.md}',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',

12
packages/themes/src/presets/lara/button/index.js
View File

@ -7,14 +7,14 @@ export default {
paddingY: '{form.field.padding.y}', paddingY: '{form.field.padding.y}',
iconOnlyWidth: '2.75rem', iconOnlyWidth: '2.75rem',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.5rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.75rem' paddingY: '{form.field.lg.padding.y}'
}, },
label: { label: {
fontWeight: '600' fontWeight: '600'

12
packages/themes/src/presets/lara/cascadeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

18
packages/themes/src/presets/lara/checkbox/index.js
View File

@ -24,13 +24,27 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '1.25rem',
height: '1.25rem'
},
lg: {
width: '1.75rem',
height: '1.75rem'
}
}, },
icon: { icon: {
size: '1rem', size: '1rem',
color: '{form.field.color}', color: '{form.field.color}',
checkedColor: '{primary.contrast.color}', checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}', checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.75rem'
},
lg: {
size: '1.25rem'
}
} }
}; };

12
packages/themes/src/presets/lara/inputtext/index.js
View File

@ -25,14 +25,14 @@ export default {
}, },
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.5rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.75rem' paddingY: '{form.field.lg.padding.y}'
} }
} }
}; };

12
packages/themes/src/presets/lara/multiselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

18
packages/themes/src/presets/lara/radiobutton/index.js
View File

@ -23,12 +23,26 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '1.25rem',
height: '1.25rem'
},
lg: {
width: '1.75rem',
height: '1.75rem'
}
}, },
icon: { icon: {
size: '1rem', size: '1rem',
checkedColor: '{primary.contrast.color}', checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}', checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.75rem'
},
lg: {
size: '1.25rem'
}
} }
}; };

12
packages/themes/src/presets/lara/select/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

12
packages/themes/src/presets/lara/textarea/index.js
View File

@ -22,6 +22,16 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
} }
}; };

12
packages/themes/src/presets/lara/treeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

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

@ -58,6 +58,16 @@ export default {
formField: { formField: {
paddingX: '0.75rem', paddingX: '0.75rem',
paddingY: '0.75rem', paddingY: '0.75rem',
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.625rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '1rem',
paddingY: '1rem'
},
borderRadius: '{border.radius.sm}', borderRadius: '{border.radius.sm}',
focusRing: { focusRing: {
width: '2px', width: '2px',

12
packages/themes/src/presets/material/button/index.js
View File

@ -7,14 +7,14 @@ export default {
paddingY: '0.625rem', paddingY: '0.625rem',
iconOnlyWidth: '3rem', iconOnlyWidth: '3rem',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.5rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '1.125rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.75rem' paddingY: '{form.field.lg.padding.y}'
}, },
label: { label: {
fontWeight: '500' fontWeight: '500'

12
packages/themes/src/presets/material/cascadeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

46
packages/themes/src/presets/material/checkbox/index.js
View File

@ -24,14 +24,28 @@ export default {
offset: '0', offset: '0',
shadow: 'none' shadow: 'none'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '14px',
height: '14px'
},
lg: {
width: '22px',
height: '22px'
}
}, },
icon: { icon: {
size: '0.875rem', size: '0.875rem',
color: '{form.field.color}', color: '{form.field.color}',
checkedColor: '{primary.contrast.color}', checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}', checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.75rem'
},
lg: {
size: '1rem'
}
}, },
css: ({ dt }) => ` css: ({ dt }) => `
.p-checkbox { .p-checkbox {
@ -62,7 +76,7 @@ export default {
.p-checkbox-checked .p-checkbox-box:before { .p-checkbox-checked .p-checkbox-box:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 8px; top: var(--p-md-check-icon-t);
left: 2px; left: 2px;
border-right: 2px solid transparent; border-right: 2px solid transparent;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@ -75,6 +89,24 @@ export default {
display: none; display: none;
} }
.p-checkbox {
--p-md-check-icon-t: 8px;
--p-md-check-icon-w: 4px;
--p-md-check-icon-h: 10px;
}
.p-checkbox-sm {
--p-md-check-icon-t: 6px;
--p-md-check-icon-w: 2px;
--p-md-check-icon-h: 8px;
}
.p-checkbox-lg {
--p-md-check-icon-t: 10px;
--p-md-check-icon-w: 6px;
--p-md-check-icon-h: 14px;
}
@keyframes p-md-check { @keyframes p-md-check {
0%{ 0%{
width: 0; width: 0;
@ -83,15 +115,15 @@ export default {
transform: translate3d(0,0,0) rotate(45deg); transform: translate3d(0,0,0) rotate(45deg);
} }
33%{ 33%{
width: 4px; width: var(--p-md-check-icon-w);
height: 0; height: 0;
transform: translate3d(0,0,0) rotate(45deg); transform: translate3d(0,0,0) rotate(45deg);
} }
100%{ 100%{
width: 4px; width: var(--p-md-check-icon-w);
height: 10px; height: var(--p-md-check-icon-h);
border-color: ${dt('checkbox.icon.checked.color')}; border-color: ${dt('checkbox.icon.checked.color')};
transform: translate3d(0,-10px,0) rotate(45deg); transform: translate3d(0,calc(-1 * var(--p-md-check-icon-h)),0) rotate(45deg);
} }
} }
` `

12
packages/themes/src/presets/material/inputtext/index.js
View File

@ -25,14 +25,14 @@ export default {
}, },
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.625rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '1rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '1rem' paddingY: '{form.field.lg.padding.y}'
} }
}, },
css: ({ dt }) => ` css: ({ dt }) => `

12
packages/themes/src/presets/material/multiselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

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

@ -23,13 +23,27 @@ export default {
offset: '0', offset: '0',
shadow: 'none' shadow: 'none'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '16px',
height: '16px'
},
lg: {
width: '24px',
height: '24px'
}
}, },
icon: { icon: {
size: '10px', size: '10px',
checkedColor: '{primary.color}', checkedColor: '{primary.color}',
checkedHoverColor: '{primary.color}', checkedHoverColor: '{primary.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '8px'
},
lg: {
size: '12px'
}
}, },
css: ({ dt }) => ` css: ({ dt }) => `
.p-radiobutton { .p-radiobutton {

12
packages/themes/src/presets/material/select/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

12
packages/themes/src/presets/material/textarea/index.js
View File

@ -22,6 +22,16 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
} }
}; };

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

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

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

@ -59,6 +59,16 @@ export default {
formField: { formField: {
paddingX: '0.75rem', paddingX: '0.75rem',
paddingY: '0.5rem', paddingY: '0.5rem',
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.375rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '0.875rem',
paddingY: '0.625rem'
},
borderRadius: '{border.radius.xs}', borderRadius: '{border.radius.xs}',
focusRing: { focusRing: {
width: '2px', width: '2px',

12
packages/themes/src/presets/nora/button/index.js
View File

@ -7,14 +7,14 @@ export default {
paddingY: '{form.field.padding.y}', paddingY: '{form.field.padding.y}',
iconOnlyWidth: '2.5rem', iconOnlyWidth: '2.5rem',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.375rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.625rem' paddingY: '{form.field.lg.padding.y}'
}, },
label: { label: {
fontWeight: '700' fontWeight: '700'

12
packages/themes/src/presets/nora/cascadeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

18
packages/themes/src/presets/nora/checkbox/index.js
View File

@ -24,13 +24,27 @@ export default {
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '1rem',
height: '1rem'
},
lg: {
width: '1.5rem',
height: '1.5rem'
}
}, },
icon: { icon: {
size: '0.875rem', size: '0.875rem',
color: '{form.field.color}', color: '{form.field.color}',
checkedColor: '{primary.contrast.color}', checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}', checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.75rem'
},
lg: {
size: '1rem'
}
} }
}; };

12
packages/themes/src/presets/nora/inputtext/index.js
View File

@ -25,14 +25,14 @@ export default {
}, },
transitionDuration: '{form.field.transition.duration}', transitionDuration: '{form.field.transition.duration}',
sm: { sm: {
fontSize: '0.875rem', fontSize: '{form.field.sm.font.size}',
paddingX: '0.625rem', paddingX: '{form.field.sm.padding.x}',
paddingY: '0.375rem' paddingY: '{form.field.sm.padding.y}'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '{form.field.lg.font.size}',
paddingX: '0.875rem', paddingX: '{form.field.lg.padding.x}',
paddingY: '0.625rem' paddingY: '{form.field.lg.padding.y}'
} }
} }
}; };

12
packages/themes/src/presets/nora/multiselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

18
packages/themes/src/presets/nora/radiobutton/index.js
View File

@ -23,12 +23,26 @@ export default {
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
width: '1rem',
height: '1rem'
},
lg: {
width: '1.5rem',
height: '1.5rem'
}
}, },
icon: { icon: {
size: '0.75rem', size: '0.75rem',
checkedColor: '{primary.color}', checkedColor: '{primary.color}',
checkedHoverColor: '{primary.color}', checkedHoverColor: '{primary.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}',
sm: {
size: '0.5rem'
},
lg: {
size: '1rem'
}
} }
}; };

12
packages/themes/src/presets/nora/select/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',

12
packages/themes/src/presets/nora/textarea/index.js
View File

@ -22,6 +22,16 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
} }
}; };

12
packages/themes/src/presets/nora/treeselect/index.js
View File

@ -23,7 +23,17 @@ export default {
offset: '{form.field.focus.ring.offset}', offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{form.field.focus.ring.shadow}'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '{form.field.sm.font.size}',
paddingX: '{form.field.sm.padding.x}',
paddingY: '{form.field.sm.padding.y}'
},
lg: {
fontSize: '{form.field.lg.font.size}',
paddingX: '{form.field.lg.padding.x}',
paddingY: '{form.field.lg.padding.y}'
}
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',