Merge branch 'primefaces:master' into fix/filter-with-columngroup-type
Uros
GitHub
commit
afcea2dee1
|
|
@ -95,9 +95,15 @@
|
|||
"name": "Editor",
|
||||
"to": "/editor"
|
||||
},
|
||||
{
|
||||
"name": "IftaLabel",
|
||||
"to": "/iftalabel",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "FloatLabel",
|
||||
"to": "/floatlabel"
|
||||
"to": "/floatlabel",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "IconField",
|
||||
|
|
|
|||
|
|
@ -442,7 +442,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-color: var(--p-content-border-color);
|
||||
border-color: var(--border-color);
|
||||
border-width: 0 1px 0 0;
|
||||
padding: 1rem;
|
||||
width: 75%;
|
||||
|
|
@ -461,16 +461,13 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--p-content-hover-background);
|
||||
background-color: var(--hover-background);
|
||||
}
|
||||
|
||||
.doc-ptoption-text {
|
||||
color: var(--p-text-muted-color);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
.doc-ptoption-text:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@
|
|||
<template v-if="docs[0].data">
|
||||
<template v-for="doc of docs" :key="doc.key">
|
||||
<div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
|
||||
<span>{{ item.label }}</span>
|
||||
<span class="doc-ptoption-text">{{ item.label }} element of {{ doc.key }} component</span>
|
||||
<span class="doc-ptoption-text">
|
||||
{{ item.label }}
|
||||
<template v-if="docs.length > 1">| {{ doc.key }}</template>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -32,6 +34,7 @@ export default {
|
|||
cmpName = componentName;
|
||||
|
||||
if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
|
||||
else if (componentName === 'ScrollTop') cmpName = 'Button';
|
||||
|
||||
if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
|
||||
else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;
|
||||
|
|
@ -42,18 +45,18 @@ export default {
|
|||
if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO:
|
||||
|
||||
this.hoveredElements?.forEach((el) => {
|
||||
addClass(el, '!ring !ring-red-500 !z-10');
|
||||
addClass(el, '!ring !ring-blue-500 !z-10');
|
||||
});
|
||||
},
|
||||
leaveSection() {
|
||||
this.hoveredElements.forEach((el) => {
|
||||
removeClass(el, '!ring !ring-red-500 !z-10');
|
||||
removeClass(el, '!ring !ring-blue-500 !z-10');
|
||||
});
|
||||
|
||||
this.hoveredElements = [];
|
||||
},
|
||||
handleData(doc) {
|
||||
return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition');
|
||||
return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition' && !item.label.includes('hidden'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@
|
|||
<div class="block-content flex-1 p-6 flex flex-col">
|
||||
<div class="block-main h-full flex justify-center items-center flex-col">
|
||||
<div class="block-item block-item-active animation-2 mx-4 w-32 text-center flex flex-col items-center overflow-visible">
|
||||
<div class="-mt-6">
|
||||
<div>
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" />
|
||||
</div>
|
||||
<div class="bar w-8 mt-2"></div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<section class="landing-users py-20 px-4 lg:px-20">
|
||||
<div class="section-header">Who Uses</div>
|
||||
<p class="section-detail">
|
||||
PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
|
||||
PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>200 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
|
||||
</p>
|
||||
<div class="flex justify-center items-center mt-6">
|
||||
<span class="ml-2"> </span>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/breadcrumb.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
home: {
|
||||
icon: 'pi pi-home'
|
||||
},
|
||||
items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Breadcrumb'),
|
||||
key: 'Breadcrumb'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.breadcrumb',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: null,
|
||||
chartOptions: null,
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Chart'),
|
||||
key: 'Chart'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('dark-mode-toggle-complete', this.redrawListener);
|
||||
EventBus.off('theme-palette-change', this.redrawListener);
|
||||
},
|
||||
mounted() {
|
||||
this.chartData = this.setChartData();
|
||||
this.chartOptions = this.setChartOptions();
|
||||
|
||||
this.redrawListener = () => {
|
||||
this.chartOptions = this.setChartOptions();
|
||||
};
|
||||
|
||||
EventBus.on('theme-palette-change', this.redrawListener);
|
||||
EventBus.on('dark-mode-toggle-complete', this.redrawListener);
|
||||
},
|
||||
methods: {
|
||||
setChartData() {
|
||||
return {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
data: [540, 325, 702, 620],
|
||||
backgroundColor: ['rgba(249, 115, 22, 0.2)', 'rgba(6, 182, 212, 0.2)', 'rgb(107, 114, 128, 0.2)', 'rgba(139, 92, 246, 0.2)'],
|
||||
borderColor: ['rgb(249, 115, 22)', 'rgb(6, 182, 212)', 'rgb(107, 114, 128)', 'rgb(139, 92, 246)'],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
setChartOptions() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const textColor = documentStyle.getPropertyValue('--p-text-color');
|
||||
const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color');
|
||||
const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');
|
||||
|
||||
return {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.chart',
|
||||
|
|
|
|||
|
|
@ -27377,10 +27377,10 @@
|
|||
}
|
||||
},
|
||||
"floatlabel": {
|
||||
"description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primevue.org/floatlabel/)",
|
||||
"description": "FloatLabel visually integrates a label with its form element.\n\n[Live Demo](https://www.primevue.org/floatlabel/)",
|
||||
"components": {
|
||||
"default": {
|
||||
"description": "FloatLabel appears on top of the input field when focused.",
|
||||
"description": "FloatLabel visually integrates a label with its form element.",
|
||||
"methods": {
|
||||
"description": "Defines methods that can be accessed by the component's reference.",
|
||||
"values": []
|
||||
|
|
@ -27511,6 +27511,14 @@
|
|||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "When enabled, it removes component related styles in the core."
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "\"in\" | \"over\" | \"on\"",
|
||||
"default": "false",
|
||||
"description": "Defines the positioning of the label relative to the input."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
|
|
@ -27582,7 +27590,7 @@
|
|||
}
|
||||
},
|
||||
"floatlabelstyle": {
|
||||
"description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primevue.org/inputtext/)",
|
||||
"description": "FloatLabel visually integrates a label with its form element.\n\n[Live Demo](https://www.primevue.org/floatlabel/)",
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
|
|
@ -29457,6 +29465,251 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"iftalabel": {
|
||||
"description": "IftaLabel visually integrates a label within its form element.\n\n[Live Demo](https://www.primevue.org/iftalabel/)",
|
||||
"components": {
|
||||
"default": {
|
||||
"description": "IftaLabel visually integrates a label within its form element.",
|
||||
"methods": {
|
||||
"description": "Defines methods that can be accessed by the component's reference.",
|
||||
"values": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"IftaLabelPassThroughMethodOptions": {
|
||||
"description": "Custom passthrough(pt) option method.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "instance",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines instance."
|
||||
},
|
||||
{
|
||||
"name": "props",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "IftaLabelProps",
|
||||
"default": "",
|
||||
"description": "Defines valid properties."
|
||||
},
|
||||
{
|
||||
"name": "attrs",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines valid attributes."
|
||||
},
|
||||
{
|
||||
"name": "parent",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines parent options."
|
||||
},
|
||||
{
|
||||
"name": "global",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "undefined | object",
|
||||
"default": "",
|
||||
"description": "Defines passthrough(pt) options in global config."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"IftaLabelPassThroughOptions": {
|
||||
"description": "Custom passthrough(pt) options.",
|
||||
"relatedProp": "IftaLabelProps.pt",
|
||||
"props": [
|
||||
{
|
||||
"name": "root",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "IftaLabelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "hooks",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Used to manage all lifecycle hooks."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"IftaLabelPassThroughAttributes": {
|
||||
"description": "Custom passthrough attributes for each DOM elements",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "[key: string]",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any"
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"IftaLabelProps": {
|
||||
"description": "Defines valid properties in IftaLabel component.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "dt",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "It generates scoped CSS variables using design tokens for the component."
|
||||
},
|
||||
{
|
||||
"name": "pt",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PassThrough<IftaLabelPassThroughOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to DOM elements inside the component."
|
||||
},
|
||||
{
|
||||
"name": "ptOptions",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Used to configure passthrough(pt) options of the component."
|
||||
},
|
||||
{
|
||||
"name": "unstyled",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "When enabled, it removes component related styles in the core."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"IftaLabelSlots": {
|
||||
"description": "Defines valid slots in IftaLabel component.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "default",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"IftaLabelEmitsOptions": {
|
||||
"description": "Defines valid emits in IftaLabel component.",
|
||||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"tokens": {
|
||||
"description": "Define design tokens used by the component.",
|
||||
"values": {
|
||||
"IftaLabelPassThroughMethodOptions": {
|
||||
"description": "Custom passthrough(pt) option method.",
|
||||
"props": []
|
||||
},
|
||||
"IftaLabelPassThroughOptions": {
|
||||
"description": "Custom passthrough(pt) options.",
|
||||
"props": []
|
||||
},
|
||||
"IftaLabelPassThroughAttributes": {
|
||||
"description": "Custom passthrough attributes for each DOM elements",
|
||||
"props": []
|
||||
},
|
||||
"IftaLabelProps": {
|
||||
"description": "Defines valid properties in IftaLabel component.",
|
||||
"props": []
|
||||
},
|
||||
"IftaLabelSlots": {
|
||||
"description": "Defines valid slots in IftaLabel component.",
|
||||
"props": []
|
||||
},
|
||||
"IftaLabelEmitsOptions": {
|
||||
"description": "Defines valid emits in IftaLabel component.",
|
||||
"props": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"types": {
|
||||
"description": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"IftaLabelPassThroughOptionType": {
|
||||
"values": "IftaLabelPassThroughAttributes | (options: IftaLabelPassThroughMethodOptions) => undefined | string | null | undefined"
|
||||
},
|
||||
"IftaLabelPassThroughTransitionType": {
|
||||
"values": "TransitionProps | (options: IftaLabelPassThroughMethodOptions) => TransitionProps | undefined"
|
||||
},
|
||||
"IftaLabelEmits": {
|
||||
"values": "EmitFn<IftaLabelEmitsOptions>"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"iftalabelstyle": {
|
||||
"description": "IftaLabel visually integrates a label within its form element.\n\n[Live Demo](https://www.primevue.org/iftalabel/)",
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"IftaLabelStyle": {
|
||||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": [],
|
||||
"extendedTypes": "default"
|
||||
}
|
||||
}
|
||||
},
|
||||
"tokens": {
|
||||
"description": "Define design tokens used by the component.",
|
||||
"values": {
|
||||
"IftaLabelStyle": {
|
||||
"props": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"enumerations": {
|
||||
"values": {
|
||||
"IftaLabelClasses": {
|
||||
"members": [
|
||||
{
|
||||
"name": "root",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"value": "\"p-iftalabel\"",
|
||||
"description": "Class name of the root element"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"image": {
|
||||
"description": "Displays an image with preview and tranformation options. For multiple image, see Galleria.\n\n[Live Demo](https://www.primevue.org/image/)",
|
||||
"components": {
|
||||
|
|
@ -36389,6 +36642,14 @@
|
|||
"default": "",
|
||||
"description": "Used to pass attributes to the mobile popup menu button's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "buttonIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "MegaMenuPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the mobile popup menu button icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "start",
|
||||
"optional": true,
|
||||
|
|
@ -44817,7 +45078,7 @@
|
|||
"description": "Used to pass attributes to the root list's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "menuitem",
|
||||
"name": "item",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PanelMenuPassThroughOptionType",
|
||||
|
|
@ -48508,7 +48769,7 @@
|
|||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "spinner",
|
||||
"name": "spin",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ProgressSpinnerPassThroughOptionType",
|
||||
|
|
@ -79214,6 +79475,22 @@
|
|||
"default": "",
|
||||
"description": "Used to pass tokens of the root section"
|
||||
},
|
||||
{
|
||||
"name": "in",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Object",
|
||||
"default": "",
|
||||
"description": "Used to pass tokens of the in section"
|
||||
},
|
||||
{
|
||||
"name": "on",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Object",
|
||||
"default": "",
|
||||
"description": "Used to pass tokens of the on section"
|
||||
},
|
||||
{
|
||||
"name": "colorScheme",
|
||||
"optional": true,
|
||||
|
|
@ -79250,6 +79527,15 @@
|
|||
"default": "",
|
||||
"description": "Focus color of root"
|
||||
},
|
||||
{
|
||||
"name": "root.activeColor",
|
||||
"token": "floatlabel.active.color",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Active color of root"
|
||||
},
|
||||
{
|
||||
"name": "root.invalidColor",
|
||||
"token": "floatlabel.invalid.color",
|
||||
|
|
@ -79267,6 +79553,105 @@
|
|||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Transition duration of root"
|
||||
},
|
||||
{
|
||||
"name": "root.positionX",
|
||||
"token": "floatlabel.position.x",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Position x of root"
|
||||
},
|
||||
{
|
||||
"name": "root.fontWeight",
|
||||
"token": "floatlabel.font.weight",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Font weight of root"
|
||||
},
|
||||
{
|
||||
"name": "focus.top",
|
||||
"token": "floatlabel.focus.top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus top of root"
|
||||
},
|
||||
{
|
||||
"name": "focus.fontSize",
|
||||
"token": "floatlabel.focus.font.size",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus font size of root"
|
||||
},
|
||||
{
|
||||
"name": "focus.fontWeight",
|
||||
"token": "floatlabel.focus.font.weight",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus font weight of root"
|
||||
},
|
||||
{
|
||||
"name": "input.paddingTop",
|
||||
"token": "floatlabel.in.input.padding.top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Input padding top of in"
|
||||
},
|
||||
{
|
||||
"name": "focus.top",
|
||||
"token": "floatlabel.in.focus.top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus top of in"
|
||||
},
|
||||
{
|
||||
"name": "input.paddingTop",
|
||||
"token": "floatlabel.on.input.padding.top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Input padding top of on"
|
||||
},
|
||||
{
|
||||
"name": "input.paddingBottom",
|
||||
"token": "floatlabel.on.input.padding.bottom",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Input padding bottom of on"
|
||||
},
|
||||
{
|
||||
"name": "focus.background",
|
||||
"token": "floatlabel.on.focus.background",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus background of on"
|
||||
},
|
||||
{
|
||||
"name": "focus.padding",
|
||||
"token": "floatlabel.on.focus.padding",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus padding of on"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -80073,6 +80458,137 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"themes/iftalabel": {
|
||||
"description": "IftaLabel Design Tokens\n\n[Live Demo](https://www.primevue.org/iftalabel/)",
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"IftaLabelDesignTokens": {
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "root",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Object",
|
||||
"default": "",
|
||||
"description": "Used to pass tokens of the root section"
|
||||
},
|
||||
{
|
||||
"name": "input",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Object",
|
||||
"default": "",
|
||||
"description": "Used to pass tokens of the input section"
|
||||
},
|
||||
{
|
||||
"name": "colorScheme",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Object",
|
||||
"default": ""
|
||||
}
|
||||
],
|
||||
"methods": [],
|
||||
"extendedTypes": "ColorSchemeDesignToken<IftaLabelDesignTokens>"
|
||||
}
|
||||
}
|
||||
},
|
||||
"tokens": {
|
||||
"description": "Define design tokens used by the component.",
|
||||
"values": {
|
||||
"IftaLabelDesignTokens": {
|
||||
"props": [
|
||||
{
|
||||
"name": "root.color",
|
||||
"token": "iftalabel.color",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Color of root"
|
||||
},
|
||||
{
|
||||
"name": "root.focusColor",
|
||||
"token": "iftalabel.focus.color",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Focus color of root"
|
||||
},
|
||||
{
|
||||
"name": "root.invalidColor",
|
||||
"token": "iftalabel.invalid.color",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Invalid color of root"
|
||||
},
|
||||
{
|
||||
"name": "root.transitionDuration",
|
||||
"token": "iftalabel.transition.duration",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Transition duration of root"
|
||||
},
|
||||
{
|
||||
"name": "root.positionX",
|
||||
"token": "iftalabel.position.x",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Position x of root"
|
||||
},
|
||||
{
|
||||
"name": "root.top",
|
||||
"token": "iftalabel.top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Top of root"
|
||||
},
|
||||
{
|
||||
"name": "root.fontSize",
|
||||
"token": "iftalabel.font.size",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Font size of root"
|
||||
},
|
||||
{
|
||||
"name": "root.fontWeight",
|
||||
"token": "iftalabel.font.weight",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Font weight of root"
|
||||
},
|
||||
{
|
||||
"name": "input.paddingTop",
|
||||
"token": "iftalabel.input.padding.top",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Padding top of input"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"themes/image": {
|
||||
"description": "Image Design Tokens\n\n[Live Demo](https://www.primevue.org/image/)",
|
||||
"interfaces": {
|
||||
|
|
@ -80393,7 +80909,7 @@
|
|||
}
|
||||
],
|
||||
"methods": [],
|
||||
"extendedBy": "AccordionDesignTokens,AutoCompleteDesignTokens,AvatarDesignTokens,BadgeDesignTokens,BlockUIDesignTokens,BreadcrumbDesignTokens,ButtonDesignTokens,CardDesignTokens,CarouselDesignTokens,CascadeSelectDesignTokens,CheckboxDesignTokens,ChipDesignTokens,ColorPickerDesignTokens,ConfirmDialogDesignTokens,ConfirmPopupDesignTokens,ContextMenuDesignTokens,DataTableDesignTokens,DataViewDesignTokens,DatePickerDesignTokens,DialogDesignTokens,DividerDesignTokens,DockDesignTokens,DrawerDesignTokens,EditorDesignTokens,FieldsetDesignTokens,FileUploadDesignTokens,FloatLabelDesignTokens,GalleriaDesignTokens,IconFieldDesignTokens,ImageDesignTokens,InlineMessageDesignTokens,InplaceDesignTokens,InputChipsDesignTokens,InputGroupDesignTokens,InputNumberDesignTokens,InputTextDesignTokens,KnobDesignTokens,ListboxDesignTokens,MegaMenuDesignTokens,MenuDesignTokens,MenubarDesignTokens,MessageDesignTokens,MeterGroupDesignTokens,MultiSelectDesignTokens,OrderListDesignTokens,OrganizationChartDesignTokens,OverlayBadgeDesignTokens,PaginatorDesignTokens,PanelDesignTokens,PanelMenuDesignTokens,PasswordDesignTokens,PickListDesignTokens,PopoverDesignTokens,ProgressBarDesignTokens,ProgressSpinnerDesignTokens,RadioButtonDesignTokens,RatingDesignTokens,RippleDesignTokens,ScrollPanelDesignTokens,SelectDesignTokens,SelectButtonDesignTokens,SkeletonDesignTokens,SliderDesignTokens,SpeedDialDesignTokens,SplitButtonDesignTokens,SplitterDesignTokens,StepperDesignTokens,StepsDesignTokens,TabmenuDesignTokens,TabsDesignTokens,TabViewDesignTokens,TagDesignTokens,TerminalDesignTokens,TextareaDesignTokens,TieredMenuDesignTokens,TimelineDesignTokens,ToastDesignTokens,ToggleButtonDesignTokens,ToggleSwitchDesignTokens,ToolbarDesignTokens,TooltipDesignTokens,TreeDesignTokens,TreeSelectDesignTokens,TreeTableDesignTokens,VirtualScrollerDesignTokens"
|
||||
"extendedBy": "AccordionDesignTokens,AutoCompleteDesignTokens,AvatarDesignTokens,BadgeDesignTokens,BlockUIDesignTokens,BreadcrumbDesignTokens,ButtonDesignTokens,CardDesignTokens,CarouselDesignTokens,CascadeSelectDesignTokens,CheckboxDesignTokens,ChipDesignTokens,ColorPickerDesignTokens,ConfirmDialogDesignTokens,ConfirmPopupDesignTokens,ContextMenuDesignTokens,DataTableDesignTokens,DataViewDesignTokens,DatePickerDesignTokens,DialogDesignTokens,DividerDesignTokens,DockDesignTokens,DrawerDesignTokens,EditorDesignTokens,FieldsetDesignTokens,FileUploadDesignTokens,FloatLabelDesignTokens,GalleriaDesignTokens,IconFieldDesignTokens,IftaLabelDesignTokens,ImageDesignTokens,InlineMessageDesignTokens,InplaceDesignTokens,InputChipsDesignTokens,InputGroupDesignTokens,InputNumberDesignTokens,InputTextDesignTokens,KnobDesignTokens,ListboxDesignTokens,MegaMenuDesignTokens,MenuDesignTokens,MenubarDesignTokens,MessageDesignTokens,MeterGroupDesignTokens,MultiSelectDesignTokens,OrderListDesignTokens,OrganizationChartDesignTokens,OverlayBadgeDesignTokens,PaginatorDesignTokens,PanelDesignTokens,PanelMenuDesignTokens,PasswordDesignTokens,PickListDesignTokens,PopoverDesignTokens,ProgressBarDesignTokens,ProgressSpinnerDesignTokens,RadioButtonDesignTokens,RatingDesignTokens,RippleDesignTokens,ScrollPanelDesignTokens,SelectDesignTokens,SelectButtonDesignTokens,SkeletonDesignTokens,SliderDesignTokens,SpeedDialDesignTokens,SplitButtonDesignTokens,SplitterDesignTokens,StepperDesignTokens,StepsDesignTokens,TabmenuDesignTokens,TabsDesignTokens,TabViewDesignTokens,TagDesignTokens,TerminalDesignTokens,TextareaDesignTokens,TieredMenuDesignTokens,TimelineDesignTokens,ToastDesignTokens,ToggleButtonDesignTokens,ToggleSwitchDesignTokens,ToolbarDesignTokens,TooltipDesignTokens,TreeDesignTokens,TreeSelectDesignTokens,TreeTableDesignTokens,VirtualScrollerDesignTokens"
|
||||
},
|
||||
"PaletteDesignToken": {
|
||||
"relatedProp": "",
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/contextmenu.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
|
||||
<ContextMenu ref="menu" appendTo="#logo" :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ label: 'Copy', icon: 'pi pi-copy' },
|
||||
{ label: 'Rename', icon: 'pi pi-file-edit' }
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('ContextMenu'),
|
||||
key: 'ContextMenu'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.contextmenu',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/dock.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<div class="relative w-full h-[400px]">
|
||||
<Dock :model="items">
|
||||
<template #itemicon="{ item }">
|
||||
<img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
|
||||
</template>
|
||||
</Dock>
|
||||
</div>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Finder',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
|
||||
},
|
||||
{
|
||||
label: 'App Store',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
|
||||
},
|
||||
{
|
||||
label: 'Photos',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
|
||||
},
|
||||
{
|
||||
label: 'Trash',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Dock'),
|
||||
key: 'Dock'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.dock',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<FloatLabel>
|
||||
<InputText id="username" v-model="value" />
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
<label for="username">Username</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>When the form element is invalid, the label is also highlighted.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center items-center gap-4">
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="value2" v-model="value2" autocomplete="off" :invalid="!value2" />
|
||||
<label for="value2">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="value3" v-model="value3" autocomplete="off" :invalid="!value3" />
|
||||
<label for="value3">Username</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
code: {
|
||||
basic: `
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="value2" v-model="value2" :invalid="!value2" />
|
||||
<label for="value2">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="value3" v-model="value3" :invalid="!value3" />
|
||||
<label for="value3">Username</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center items-center gap-4">
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="value2" v-model="value2" :invalid="!value2" />
|
||||
<label for="value2">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="value3" v-model="value3" :invalid="!value3" />
|
||||
<label for="value3">Username</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center items-center gap-4">
|
||||
<FloatLabel>
|
||||
<InputText id="value1" v-model="value1" :invalid="!value1" />
|
||||
<label for="value1">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="value2" v-model="value2" :invalid="!value2" />
|
||||
<label for="value2">Username</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="value3" v-model="value3" :invalid="!value3" />
|
||||
<label for="value3">Username</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>variant</i> property defines the position of the label. Default value is <i>over</i>, whereas <i>in</i> and <i>on</i> are the alternatives.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" autocomplete="off" />
|
||||
<label for="inlabel">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" autocomplete="off" />
|
||||
<label for="onlabel">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null,
|
||||
code: {
|
||||
basic: `
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" />
|
||||
<label for="inlabel">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" />
|
||||
<label for="onlabel">On Label</label>
|
||||
</FloatLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" />
|
||||
<label for="inlabel">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" />
|
||||
<label for="onlabel">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: null,
|
||||
value2: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<FloatLabel variant="in">
|
||||
<InputText id="inlabel" v-model="value1" />
|
||||
<label for="inlabel">In Label</label>
|
||||
</FloatLabel>
|
||||
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="onlabel" v-model="value2" />
|
||||
<label for="onlabel">On Label</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>IftaLabel does not require any roles and attributes.</p>
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>IftaLabel is used by wrapping the input and its label.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import IftaLabel from 'primevue/iftalabel';
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>When the form element is invalid, the label is also highlighted.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" autocomplete="off" :invalid="!value" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
code: {
|
||||
basic: `
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" :invalid="!value" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" :invalid="!value" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<IftaLabel>
|
||||
<InputText id="username" v-model="value" :invalid="!value" />
|
||||
<label for="username">Username</label>
|
||||
</IftaLabel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref('');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>IftaLabel Pass Through</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.iftalabel',
|
||||
label: 'IftaLabel PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('IftaLabel')
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
|
||||
PrimeVue components with Tailwind CSS.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>IftaLabel Theming</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'theming.styled',
|
||||
label: 'Styled',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('IftaLabel')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('IftaLabel')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'theming.unstyled',
|
||||
label: 'Unstyled',
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/megamenu.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<MegaMenu :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Furniture',
|
||||
icon: 'pi pi-box',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Living Room',
|
||||
items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Kitchen',
|
||||
items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
|
||||
},
|
||||
{
|
||||
label: 'Bathroom',
|
||||
items: [{ label: 'Accessories' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
icon: 'pi pi-mobile',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Computer',
|
||||
items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Home Theater',
|
||||
items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Sports',
|
||||
icon: 'pi pi-clock',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Football',
|
||||
items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Running',
|
||||
items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('MegaMenu'),
|
||||
key: 'MegaMenu'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.megamenu',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/menu.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Menu :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Documents',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-search'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Logout',
|
||||
icon: 'pi pi-sign-out'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Menu'),
|
||||
key: 'Menu'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.menu',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/menubar.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Menubar :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'pi pi-home'
|
||||
},
|
||||
{
|
||||
label: 'Features',
|
||||
icon: 'pi pi-star'
|
||||
},
|
||||
{
|
||||
label: 'Projects',
|
||||
icon: 'pi pi-search',
|
||||
items: [
|
||||
{
|
||||
label: 'Components',
|
||||
icon: 'pi pi-bolt'
|
||||
},
|
||||
{
|
||||
label: 'Blocks',
|
||||
icon: 'pi pi-server'
|
||||
},
|
||||
{
|
||||
label: 'UI Kit',
|
||||
icon: 'pi pi-pencil'
|
||||
},
|
||||
{
|
||||
label: 'Templates',
|
||||
icon: 'pi pi-palette',
|
||||
items: [
|
||||
{
|
||||
label: 'Apollo',
|
||||
icon: 'pi pi-palette'
|
||||
},
|
||||
{
|
||||
label: 'Ultima',
|
||||
icon: 'pi pi-palette'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
icon: 'pi pi-envelope'
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Menubar'),
|
||||
key: 'Menubar'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.menubar',
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/panelmenu.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<PanelMenu :model="items" class="w-full md:w-80" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Files',
|
||||
icon: 'pi pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'Documents',
|
||||
icon: 'pi pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'Invoices',
|
||||
icon: 'pi pi-file-pdf',
|
||||
items: [
|
||||
{
|
||||
label: 'Pending',
|
||||
icon: 'pi pi-stop'
|
||||
},
|
||||
{
|
||||
label: 'Paid',
|
||||
icon: 'pi pi-check-circle'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Clients',
|
||||
icon: 'pi pi-users'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Images',
|
||||
icon: 'pi pi-image',
|
||||
items: [
|
||||
{
|
||||
label: 'Logos',
|
||||
icon: 'pi pi-image'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Cloud',
|
||||
icon: 'pi pi-cloud',
|
||||
items: [
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-cloud-upload'
|
||||
},
|
||||
{
|
||||
label: 'Download',
|
||||
icon: 'pi pi-cloud-download'
|
||||
},
|
||||
{
|
||||
label: 'Sync',
|
||||
icon: 'pi pi-refresh'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Devices',
|
||||
icon: 'pi pi-desktop',
|
||||
items: [
|
||||
{
|
||||
label: 'Phone',
|
||||
icon: 'pi pi-mobile'
|
||||
},
|
||||
{
|
||||
label: 'Desktop',
|
||||
icon: 'pi pi-desktop'
|
||||
},
|
||||
{
|
||||
label: 'Tablet',
|
||||
icon: 'pi pi-tablet'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('PanelMenu'),
|
||||
key: 'PanelMenu'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.panelmenu',
|
||||
|
|
|
|||
|
|
@ -26,10 +26,16 @@
|
|||
</p>
|
||||
|
||||
<h3>Best Practices</h3>
|
||||
<p class="mb-0">
|
||||
<p>
|
||||
Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific
|
||||
component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeVue components using style classes is not a best practice and should be the last resort,
|
||||
design tokens are the suggested approach.
|
||||
</p>
|
||||
|
||||
<h3>Video Tutorial</h3>
|
||||
<p>Watch the <b>PrimeVue Theming Demystified</b> video to learn more about the architecture with examples.</p>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/J3KFw5sih98" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue uses the <i>system</i> as the default <i>darkModeSelector</i> in theme configuration. If you have a dark mode switch in your application, set the <i>darkModeSelector</i> to the selector you utilize such as <i>.my-app-dark</i> so
|
||||
that PrimeVue can fit in seamlessly with your light-dark toggle.
|
||||
that PrimeVue can fit in seamlessly with your color scheme.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<p>
|
||||
|
|
@ -12,6 +12,9 @@
|
|||
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||
<p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
|
||||
<DocSectionCode :code="code4" hideToggleCode hideStackBlitz />
|
||||
<p>It is also possible to disable dark mode completely using <i>false</i> or <i>none</i> as the value of the selector.</p>
|
||||
<DocSectionCode :code="code5" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,8 +48,22 @@ app.use(PrimeVue, {
|
|||
code3: {
|
||||
basic: `
|
||||
function toggleDarkMode() {
|
||||
const element = document.querySelector('html');
|
||||
element.classList.toggle('my-app-dark');
|
||||
document.documentElement.classList.toggle('my-app-dark');
|
||||
}
|
||||
`
|
||||
},
|
||||
code4: {
|
||||
basic: `
|
||||
<html class="my-app-dark">
|
||||
`
|
||||
},
|
||||
code5: {
|
||||
basic: `
|
||||
theme: {
|
||||
preset: Aura,
|
||||
options: {
|
||||
darkModeSelector: false || 'none',
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tieredmenu.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<TieredMenu :model="items" />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Document',
|
||||
icon: 'pi pi-file'
|
||||
},
|
||||
{
|
||||
label: 'Image',
|
||||
icon: 'pi pi-image'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Open',
|
||||
icon: 'pi pi-folder-open'
|
||||
},
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-file-edit',
|
||||
items: [
|
||||
{
|
||||
label: 'Copy',
|
||||
icon: 'pi pi-copy'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-search'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Share',
|
||||
icon: 'pi pi-share-alt',
|
||||
items: [
|
||||
{
|
||||
label: 'Slack',
|
||||
icon: 'pi pi-slack'
|
||||
},
|
||||
{
|
||||
label: 'Whatsapp',
|
||||
icon: 'pi pi-whatsapp'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('TieredMenu'),
|
||||
key: 'TieredMenu'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,16 +11,16 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTImage from './PTImage.vue';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.tieredmenu',
|
||||
|
|
|
|||
|
|
@ -12,6 +12,14 @@ const alias = {
|
|||
'@primevue/icons': path.resolve(__dirname, '../../packages/icons/src')
|
||||
};
|
||||
|
||||
let PROCESS_ENV = {};
|
||||
|
||||
try {
|
||||
PROCESS_ENV = process?.env || {};
|
||||
} catch {
|
||||
// NOOP
|
||||
}
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
typescript: false,
|
||||
|
|
@ -35,10 +43,17 @@ export default defineNuxtConfig({
|
|||
'/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
|
||||
'/installation': { redirect: { to: '/vite', statusCode: 301 } }
|
||||
},
|
||||
primevue: {
|
||||
autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
|
||||
importTheme: { from: '@/themes/app-theme.js' }
|
||||
},
|
||||
primevue:
|
||||
PROCESS_ENV.DEV_ENV === 'hot'
|
||||
? {
|
||||
usePrimeVue: false,
|
||||
autoImport: true,
|
||||
loadStyles: false
|
||||
}
|
||||
: {
|
||||
autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
|
||||
importTheme: { from: '@/themes/app-theme.js' }
|
||||
},
|
||||
app: {
|
||||
baseURL: baseUrl,
|
||||
head: {
|
||||
|
|
@ -79,7 +94,8 @@ export default defineNuxtConfig({
|
|||
},
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
contextPath: baseUrl
|
||||
contextPath: baseUrl,
|
||||
DEV_ENV: PROCESS_ENV.DEV_ENV
|
||||
}
|
||||
},
|
||||
gtag: {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
|
||||
<DocComponent title="Vue Float Label" header="FloatLabel" description="FloatLabel visually integrates a label with its form element." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['FloatLabel']" :themingDocs="themingDoc" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/floatlabel/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/floatlabel/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/floatlabel/ImportDoc.vue';
|
||||
import InvalidDoc from '@/doc/floatlabel/InvalidDoc.vue';
|
||||
import PTComponent from '@/doc/floatlabel/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/floatlabel/theming/index.vue';
|
||||
import VariantsDoc from '@/doc/floatlabel/VariantsDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -23,6 +25,16 @@ export default {
|
|||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'variants',
|
||||
label: 'Variants',
|
||||
component: VariantsDoc
|
||||
},
|
||||
{
|
||||
id: 'invalid',
|
||||
label: 'Invalid',
|
||||
component: InvalidDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Ifta Label" header="IftaLabel" description="IftaLabel visually integrates a label within its form element." :componentDocs="docs" :ptTabComponent="ptComponent" :apiDocs="['IftaLabel']" :themingDocs="themingDoc" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/iftalabel/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/iftalabel/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/iftalabel/ImportDoc.vue';
|
||||
import InvalidDoc from '@/doc/iftalabel/InvalidDoc.vue';
|
||||
import PTComponent from '@/doc/iftalabel/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/iftalabel/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'invalid',
|
||||
label: 'Invalid',
|
||||
component: InvalidDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -16,6 +16,15 @@ const $appState = {
|
|||
}
|
||||
};
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
export default defineNuxtPlugin(async (nuxtApp) => {
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
|
||||
nuxtApp.vueApp.use($appState);
|
||||
|
||||
if (runtimeConfig.public.DEV_ENV === 'hot') {
|
||||
const { default: PrimeVue } = await import('primevue/config');
|
||||
const { default: Noir } = await import('@/themes/app-theme');
|
||||
|
||||
nuxtApp.vueApp.use(PrimeVue, { theme: Noir });
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -27,9 +27,10 @@
|
|||
"build:lib": "pnpm --filter primevue build",
|
||||
"build:themes": "pnpm --filter themes build",
|
||||
"build:icons": "pnpm --filter icons build",
|
||||
"build:showcase": "pnpm --filter showcase build:prebuild",
|
||||
"build:showcase": "pnpm --filter showcase build",
|
||||
"build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc",
|
||||
"dev": "pnpm --filter showcase dev",
|
||||
"hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
|
||||
"module:dev": "pnpm --filter @primevue/nuxt-module dev",
|
||||
"security:check": "pnpm audit --prod --audit-level high",
|
||||
"format": "prettier --write \"**/*.{vue,js,mjs,ts,d.ts}\" --cache",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export const form: MetaType[] = toMeta([
|
|||
'FloatLabel',
|
||||
'Fluid',
|
||||
'IconField',
|
||||
'IftaLabel',
|
||||
'InputChips',
|
||||
'InputGroup',
|
||||
'InputGroupAddon',
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||
//cssLayerOrder: undefined,
|
||||
importPT: undefined,
|
||||
importTheme: undefined,
|
||||
loadStyles: true,
|
||||
options: {},
|
||||
components: {
|
||||
prefix: '',
|
||||
|
|
@ -47,7 +48,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||
|
||||
const resolver = createResolver(import.meta.url);
|
||||
const registered = register(moduleOptions);
|
||||
const { autoImport, importPT, importTheme, options } = moduleOptions;
|
||||
const { autoImport, importPT, importTheme, options, loadStyles } = moduleOptions;
|
||||
const hasTheme = (importTheme || options?.theme) && !options?.unstyled;
|
||||
|
||||
nuxt.options.runtimeConfig.public.primevue = {
|
||||
|
|
@ -84,6 +85,8 @@ export default defineNuxtModule<ModuleOptions>({
|
|||
}
|
||||
|
||||
const styleContent = () => {
|
||||
if (!loadStyles) return `export const styles = [], stylesToTop = [], themes = [];`;
|
||||
|
||||
const uniqueRegisteredStyles = Array.from(new Map(registeredStyles?.map((m: MetaType) => [m.name, m])).values());
|
||||
|
||||
return `
|
||||
|
|
@ -102,11 +105,11 @@ const { options = {} } = config;
|
|||
|
||||
const stylesToTop = [${registered.injectStylesAsStringToTop.join('')}].join('');
|
||||
const styleProps = {
|
||||
${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''}
|
||||
${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''}
|
||||
}
|
||||
const styles = [
|
||||
${registered.injectStylesAsString.join('')},
|
||||
${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')}
|
||||
${registered.injectStylesAsString.join('')},
|
||||
${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')}
|
||||
].join('');
|
||||
|
||||
${hasTheme ? `Theme.setTheme(${importTheme?.as} || options?.theme)` : ''}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export interface ModuleOptions {
|
|||
/*cssLayerOrder?: string;*/
|
||||
importPT?: ImportOptions;
|
||||
importTheme?: ImportOptions;
|
||||
loadStyles?: boolean;
|
||||
options?: PrimeVueOptions;
|
||||
components?: ConstructsType;
|
||||
directives?: ConstructsType;
|
||||
|
|
|
|||
|
|
@ -138,6 +138,8 @@
|
|||
"./galleria/style": "./src/galleria/style/GalleriaStyle.js",
|
||||
"./iconfield": "./src/iconfield/IconField.vue",
|
||||
"./iconfield/style": "./src/iconfield/style/IconFieldStyle.js",
|
||||
"./iftalabel": "./src/iftalabel/IftaLabel.vue",
|
||||
"./iftalabel/style": "./src/iftalabel/style/IftaLabelStyle.js",
|
||||
"./image": "./src/image/Image.vue",
|
||||
"./image/style": "./src/image/style/ImageStyle.js",
|
||||
"./inlinemessage": "./src/inlinemessage/InlineMessage.vue",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { h } from 'vue';
|
||||
import Button from './Button.vue';
|
||||
|
||||
describe('Button.vue', () => {
|
||||
|
|
@ -70,15 +69,3 @@ describe('Button.vue', () => {
|
|||
expect(wrapper.find('.p-button-loading').exists()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Button.vue', () => {
|
||||
it('should render default slot', () => {
|
||||
const wrapper = mount(Button, {
|
||||
slots: {
|
||||
default: h('span', { class: 'ml-2 font-bold' }, 'Default PrimeVue Button')
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-p-disabled="false" data-pc-section="root" pc7=""><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@ import FloatLabelStyle from 'primevue/floatlabel/style';
|
|||
export default {
|
||||
name: 'BaseFloatLabel',
|
||||
extends: BaseComponent,
|
||||
props: {},
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'over'
|
||||
}
|
||||
},
|
||||
style: FloatLabelStyle,
|
||||
provide() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* FloatLabel appears on top of the input field when focused.
|
||||
* FloatLabel visually integrates a label with its form element.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/floatlabel/)
|
||||
*
|
||||
|
|
@ -88,6 +88,11 @@ export interface FloatLabelProps {
|
|||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
/**
|
||||
* Defines the positioning of the label relative to the input.
|
||||
* @defaultValue false
|
||||
*/
|
||||
variant?: 'over' | 'in' | 'on' | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -110,7 +115,7 @@ export declare type FloatLabelEmits = EmitFn<FloatLabelEmitsOptions>;
|
|||
/**
|
||||
* **PrimeVue - FloatLabel**
|
||||
*
|
||||
* _FloatLabel appears on top of the input field when focused._
|
||||
* _FloatLabel visually integrates a label with its form element._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/inputtext/)
|
||||
* --- ---
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
*
|
||||
* FloatLabel appears on top of the input field when focused.
|
||||
* FloatLabel visually integrates a label with its form element.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/inputtext/)
|
||||
* [Live Demo](https://www.primevue.org/floatlabel/)
|
||||
*
|
||||
* @module floatlabelstyle
|
||||
*
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ const theme = ({ dt }) => `
|
|||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
line-height: 1;
|
||||
left: 0.75rem;
|
||||
font-weight: ${dt('floatlabel.font.weight')};
|
||||
left: ${dt('floatlabel.position.x')};
|
||||
color: ${dt('floatlabel.color')};
|
||||
transition-duration: ${dt('floatlabel.transition.duration')};
|
||||
}
|
||||
|
|
@ -23,6 +24,10 @@ const theme = ({ dt }) => `
|
|||
top: 1rem;
|
||||
}
|
||||
|
||||
.p-floatlabel:has(.p-invalid) label {
|
||||
color: ${dt('floatlabel.invalid.color')};
|
||||
}
|
||||
|
||||
.p-floatlabel:has(input:focus) label,
|
||||
.p-floatlabel:has(input.p-filled) label,
|
||||
.p-floatlabel:has(input:-webkit-autofill) label,
|
||||
|
|
@ -30,8 +35,22 @@ const theme = ({ dt }) => `
|
|||
.p-floatlabel:has(textarea.p-filled) label,
|
||||
.p-floatlabel:has(.p-inputwrapper-focus) label,
|
||||
.p-floatlabel:has(.p-inputwrapper-filled) label {
|
||||
top: -.75rem;
|
||||
font-size: 12px;
|
||||
top: ${dt('floatlabel.focus.top')};
|
||||
margin-top: 0;
|
||||
font-size: ${dt('floatlabel.focus.font.size')};
|
||||
font-weight: ${dt('floatlabel.label.focus.font.weight')};
|
||||
}
|
||||
|
||||
.p-floatlabel:has(input.p-filled) label,
|
||||
.p-floatlabel:has(textarea.p-filled) label,
|
||||
.p-floatlabel:has(.p-inputwrapper-filled) label {
|
||||
color: ${dt('floatlabel.active.color')};
|
||||
}
|
||||
|
||||
.p-floatlabel:has(input:focus) label ,
|
||||
.p-floatlabel:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel:has(textarea:focus) label ,
|
||||
.p-floatlabel:has(.p-inputwrapper-focus) label {
|
||||
color: ${dt('floatlabel.focus.color')};
|
||||
}
|
||||
|
||||
|
|
@ -51,13 +70,48 @@ const theme = ({ dt }) => `
|
|||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.p-floatlabel > .p-invalid + label {
|
||||
color: ${dt('floatlabel.invalid.color')};
|
||||
.p-floatlabel-in .p-inputtext {
|
||||
padding-top: ${dt('floatlabel.in.input.padding.top')};
|
||||
}
|
||||
|
||||
.p-floatlabel-in:has(input:focus) label,
|
||||
.p-floatlabel-in:has(input.p-filled) label,
|
||||
.p-floatlabel-in:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel-in:has(textarea:focus) label,
|
||||
.p-floatlabel-in:has(textarea.p-filled) label,
|
||||
.p-floatlabel-in:has(.p-inputwrapper-focus) label,
|
||||
.p-floatlabel-in:has(.p-inputwrapper-filled) label {
|
||||
top: ${dt('floatlabel.in.focus.top')};
|
||||
}
|
||||
|
||||
.p-floatlabel-on .p-inputtext {
|
||||
padding-top: ${dt('floatlabel.on.input.padding.top')};
|
||||
padding-bottom: ${dt('floatlabel.on.input.padding.bottom')};
|
||||
}
|
||||
|
||||
.p-floatlabel-on:has(input:focus) label,
|
||||
.p-floatlabel-on:has(input.p-filled) label,
|
||||
.p-floatlabel-on:has(input:-webkit-autofill) label,
|
||||
.p-floatlabel-on:has(textarea:focus) label,
|
||||
.p-floatlabel-on:has(textarea.p-filled) label,
|
||||
.p-floatlabel-on:has(.p-inputwrapper-focus) label,
|
||||
.p-floatlabel-on:has(.p-inputwrapper-filled) label {
|
||||
top: 0;
|
||||
transform: translateY(-50%);
|
||||
background: ${dt('floatlabel.on.focus.background')};
|
||||
padding: ${dt('floatlabel.on.focus.padding')};
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-floatlabel'
|
||||
root: ({ instance, props }) => [
|
||||
'p-floatlabel',
|
||||
{
|
||||
'p-floatlabel-over': props.variant === 'over',
|
||||
'p-floatlabel-on': props.variant === 'on',
|
||||
'p-floatlabel-in': props.variant === 'in'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import BaseComponent from '@primevue/core/basecomponent';
|
||||
import IftaLabelStyle from 'primevue/iftalabel/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseIftaLabel',
|
||||
extends: BaseComponent,
|
||||
style: IftaLabelStyle,
|
||||
provide() {
|
||||
return {
|
||||
$pcIftaLabel: this,
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
/**
|
||||
*
|
||||
* IftaLabel visually integrates a label within its form element.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/iftalabel/)
|
||||
*
|
||||
* @module iftalabel
|
||||
*
|
||||
*/
|
||||
import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
|
||||
import type { ComponentHooks } from '@primevue/core/basecomponent';
|
||||
import type { PassThroughOptions } from 'primevue/passthrough';
|
||||
import { TransitionProps, VNode } from 'vue';
|
||||
|
||||
export declare type IftaLabelPassThroughOptionType = IftaLabelPassThroughAttributes | ((options: IftaLabelPassThroughMethodOptions) => IftaLabelPassThroughAttributes | string) | string | null | undefined;
|
||||
|
||||
export declare type IftaLabelPassThroughTransitionType = TransitionProps | ((options: IftaLabelPassThroughMethodOptions) => TransitionProps) | undefined;
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) option method.
|
||||
*/
|
||||
export interface IftaLabelPassThroughMethodOptions {
|
||||
/**
|
||||
* Defines instance.
|
||||
*/
|
||||
instance: any;
|
||||
/**
|
||||
* Defines valid properties.
|
||||
*/
|
||||
props: IftaLabelProps;
|
||||
/**
|
||||
* Defines valid attributes.
|
||||
*/
|
||||
attrs: any;
|
||||
/**
|
||||
* Defines parent options.
|
||||
*/
|
||||
parent: any;
|
||||
/**
|
||||
* Defines passthrough(pt) options in global config.
|
||||
*/
|
||||
global: object | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough(pt) options.
|
||||
* @see {@link IftaLabelProps.pt}
|
||||
*/
|
||||
export interface IftaLabelPassThroughOptions {
|
||||
/**
|
||||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: IftaLabelPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
*/
|
||||
hooks?: ComponentHooks;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom passthrough attributes for each DOM elements
|
||||
*/
|
||||
export interface IftaLabelPassThroughAttributes {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in IftaLabel component.
|
||||
*/
|
||||
export interface IftaLabelProps {
|
||||
/**
|
||||
* It generates scoped CSS variables using design tokens for the component.
|
||||
*/
|
||||
dt?: DesignToken<any>;
|
||||
/**
|
||||
* Used to pass attributes to DOM elements inside the component.
|
||||
* @type {IftaLabelPassThroughOptions}
|
||||
*/
|
||||
pt?: PassThrough<IftaLabelPassThroughOptions>;
|
||||
/**
|
||||
* Used to configure passthrough(pt) options of the component.
|
||||
* @type {PassThroughOptions}
|
||||
*/
|
||||
ptOptions?: PassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in IftaLabel component.
|
||||
*/
|
||||
export interface IftaLabelSlots {
|
||||
/**
|
||||
* Default content slot.
|
||||
*/
|
||||
default: () => VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid emits in IftaLabel component.
|
||||
*/
|
||||
export interface IftaLabelEmitsOptions {}
|
||||
|
||||
export declare type IftaLabelEmits = EmitFn<IftaLabelEmitsOptions>;
|
||||
|
||||
/**
|
||||
* **PrimeVue - IftaLabel**
|
||||
*
|
||||
* _IftaLabel visually integrates a label within its form element._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/inputtext/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare const IftaLabel: DefineComponent<IftaLabelProps, IftaLabelSlots, IftaLabelEmits>;
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
IftaLabel: GlobalComponentConstructor<IftaLabelProps, IftaLabelSlots, IftaLabelEmits>;
|
||||
}
|
||||
}
|
||||
|
||||
export default IftaLabel;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<span :class="cx('root')" v-bind="ptmi('root')">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseIftaLabel from './BaseIftaLabel.vue';
|
||||
|
||||
export default {
|
||||
name: 'IftaLabel',
|
||||
extends: BaseIftaLabel,
|
||||
inheritAttrs: false
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"main": "./IftaLabel.vue",
|
||||
"module": "./IftaLabel.vue",
|
||||
"types": "./IftaLabel.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./IftaLabel.vue"
|
||||
},
|
||||
"sideEffects": [
|
||||
"*.vue"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
*
|
||||
* IftaLabel visually integrates a label within its form element.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/iftalabel/)
|
||||
*
|
||||
* @module iftalabelstyle
|
||||
*
|
||||
*/
|
||||
import type { BaseStyle } from '@primevue/core/base/style';
|
||||
|
||||
export enum IftaLabelClasses {
|
||||
/**
|
||||
* Class name of the root element
|
||||
*/
|
||||
root = 'p-iftalabel'
|
||||
}
|
||||
|
||||
export interface IftaLabelStyle extends BaseStyle {}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import BaseStyle from '@primevue/core/base/style';
|
||||
|
||||
const theme = ({ dt }) => `
|
||||
.p-iftalabel {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-iftalabel label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: ${dt('iftalabel.top')};
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
line-height: 1;
|
||||
font-size: ${dt('iftalabel.font.size')};
|
||||
font-weight: ${dt('iftalabel.font.weight')};
|
||||
left: ${dt('iftalabel.position.x')};
|
||||
color: ${dt('iftalabel.color')};
|
||||
transition-duration: ${dt('iftalabel.transition.duration')};
|
||||
}
|
||||
|
||||
.p-iftalabel .p-inputtext {
|
||||
padding-top: ${dt('iftalabel.input.padding.top')};
|
||||
}
|
||||
|
||||
.p-iftalabel:has(textarea) label {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.p-iftalabel:has(.p-invalid) label {
|
||||
color: ${dt('iftalabel.invalid.color')};
|
||||
}
|
||||
|
||||
.p-iftalabel:has(input:focus) label ,
|
||||
.p-iftalabel:has(input:-webkit-autofill) label,
|
||||
.p-iftalabel:has(textarea:focus) label ,
|
||||
.p-iftalabel:has(.p-inputwrapper-focus) label {
|
||||
color: ${dt('iftalabel.focus.color')};
|
||||
}
|
||||
|
||||
.p-iftalabel .p-placeholder,
|
||||
.p-iftalabel input::placeholder,
|
||||
.p-iftalabel .p-inputtext::placeholder {
|
||||
opacity: 0;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.p-iftalabel .p-focus .p-placeholder,
|
||||
.p-iftalabel input:focus::placeholder,
|
||||
.p-iftalabel .p-inputtext:focus::placeholder {
|
||||
opacity: 1;
|
||||
transition-property: all;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-iftalabel'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'iftalabel',
|
||||
theme,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"main": "./IftaLabelStyle.js",
|
||||
"module": "./IftaLabelStyle.js",
|
||||
"types": "./IftaLabelStyle.d.ts",
|
||||
"sideEffects": false
|
||||
}
|
||||
|
|
@ -534,7 +534,7 @@ export default {
|
|||
return [this.cx('root'), this.class];
|
||||
},
|
||||
rootPTOptions() {
|
||||
return mergeProps(this.ptmi('root', this.ptmParams), this.ptm('pcInputText', this.ptmParams));
|
||||
return mergeProps(this.ptm('pcInputText', this.ptmParams), this.ptmi('root', this.ptmParams));
|
||||
},
|
||||
ptmParams() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -114,6 +114,10 @@ export interface MegaMenuPassThroughOptions {
|
|||
* Used to pass attributes to the mobile popup menu button's DOM element.
|
||||
*/
|
||||
button?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the mobile popup menu button icon's DOM element.
|
||||
*/
|
||||
buttonIcon?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the start of the component.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
>
|
||||
<!--TODO: menubuttonicon deprecated since v4.0. Use buttonicon-->
|
||||
<slot :name="$slots.buttonicon ? 'buttonicon' : 'menubuttonicon'">
|
||||
<BarsIcon v-bind="ptm('buttonicon')" />
|
||||
<BarsIcon v-bind="ptm('buttonIcon')" />
|
||||
</slot>
|
||||
</a>
|
||||
</slot>
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { UniqueComponentId } from '@primevue/core/utils';
|
||||
import { focus, findSingle, isTouchDevice } from '@primeuix/utils/dom';
|
||||
import { isNotEmpty, resolve, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
|
||||
import { findSingle, focus, isTouchDevice } from '@primeuix/utils/dom';
|
||||
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
|
||||
import { ZIndex } from '@primeuix/utils/zindex';
|
||||
import { UniqueComponentId } from '@primevue/core/utils';
|
||||
import BarsIcon from '@primevue/icons/bars';
|
||||
import BaseMegaMenu from './BaseMegaMenu.vue';
|
||||
import MegaMenuSub from './MegaMenuSub.vue';
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export interface PanelMenuPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the list item's DOM element.
|
||||
*/
|
||||
menuitem?: PanelMenuPassThroughOptionType;
|
||||
item?: PanelMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the item content's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export interface ProgressSpinnerPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the spinner's DOM element.
|
||||
*/
|
||||
spinner?: ProgressSpinnerPassThroughOptionType;
|
||||
spin?: ProgressSpinnerPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the circle's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { h } from 'vue';
|
||||
import Tag from './Tag.vue';
|
||||
|
||||
describe('Tag.vue', () => {
|
||||
|
|
@ -46,18 +45,6 @@ describe('Tag.vue', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('Tag.vue', () => {
|
||||
it('should render default slot', () => {
|
||||
const wrapper = mount(Tag, {
|
||||
slots: {
|
||||
default: h('i', { class: 'pi pi-discord' }, '')
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toBe('<span class="p-tag p-component" data-pc-name="tag" data-pc-section="root" pc5=""><!--v-if--><i class="pi pi-discord"></i></span>');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Tag.vue', () => {
|
||||
it('should be rounded', () => {
|
||||
const wrapper = mount(Tag, {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ const fs = require('fs');
|
|||
const path = require('path');
|
||||
|
||||
// prettier-ignore
|
||||
const THEME_COMPONENTS = ['Accordion','AutoComplete','Avatar','Badge','BlockUI','Breadcrumb','Button','Card','Carousel','CascadeSelect','Checkbox','Chip','ColorPicker','ConfirmDialog','ConfirmPopup','ContextMenu','DataTable','DataView','DatePicker','Dialog','Divider','Dock','Drawer','Editor','Fieldset','FileUpload','FloatLabel','Galleria','IconField','Image','InlineMessage','Inplace','InputChips','InputGroup','InputNumber','InputText','Knob','Listbox','MegaMenu','Menu','Menubar','Message','MeterGroup','MultiSelect','OrderList','OrganizationChart','OverlayBadge','Paginator','Panel','PanelMenu','Password','PickList','Popover','ProgressBar','ProgressSpinner','RadioButton','Rating','Ripple','ScrollPanel','Select','SelectButton','Skeleton','Slider','SpeedDial','SplitButton','Splitter','Stepper','Steps','Tabmenu','Tabs','TabView','Tag','Terminal','Textarea','TieredMenu','Timeline','Toast','ToggleButton','ToggleSwitch','Toolbar','Tooltip','Tree','TreeSelect','TreeTable'];
|
||||
const THEME_COMPONENTS = ['Accordion','AutoComplete','Avatar','Badge','BlockUI','Breadcrumb','Button','Card','Carousel','CascadeSelect','Checkbox','Chip','ColorPicker','ConfirmDialog','ConfirmPopup','ContextMenu','DataTable','DataView','DatePicker','Dialog','Divider','Dock','Drawer','Editor','Fieldset','FileUpload','FloatLabel','Galleria','IconField','IftaLabel','Image','InlineMessage','Inplace','InputChips','InputGroup','InputNumber','InputText','Knob','Listbox','MegaMenu','Menu','Menubar','Message','MeterGroup','MultiSelect','OrderList','OrganizationChart','OverlayBadge','Paginator','Panel','PanelMenu','Password','PickList','Popover','ProgressBar','ProgressSpinner','RadioButton','Rating','Ripple','ScrollPanel','Select','SelectButton','Skeleton','Slider','SpeedDial','SplitButton','Splitter','Stepper','Steps','Tabmenu','Tabs','TabView','Tag','Terminal','Textarea','TieredMenu','Timeline','Toast','ToggleButton','ToggleSwitch','Toolbar','Tooltip','Tree','TreeSelect','TreeTable'];
|
||||
|
||||
const themeName = 'aura';
|
||||
const rootDir = path.resolve(__dirname, '../');
|
||||
|
|
|
|||
|
|
@ -2,7 +2,33 @@ export default {
|
|||
root: {
|
||||
color: '{form.field.float.label.color}',
|
||||
focusColor: '{form.field.float.label.focus.color}',
|
||||
activeColor: '{form.field.float.label.active.color}',
|
||||
invalidColor: '{form.field.float.label.invalid.color}',
|
||||
transitionDuration: '0.2s'
|
||||
transitionDuration: '0.2s',
|
||||
positionX: '{form.field.padding.x}',
|
||||
fontWeight: '500',
|
||||
focus: {
|
||||
top: '-1.25rem',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '400'
|
||||
}
|
||||
},
|
||||
in: {
|
||||
input: {
|
||||
paddingTop: '1.5rem'
|
||||
},
|
||||
focus: {
|
||||
top: '{form.field.padding.y}'
|
||||
}
|
||||
},
|
||||
on: {
|
||||
input: {
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
},
|
||||
focus: {
|
||||
background: '{form.field.background}',
|
||||
padding: '0 0.125rem'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
export default {
|
||||
root: {
|
||||
color: '{form.field.float.label.color}',
|
||||
focusColor: '{form.field.float.label.focus.color}',
|
||||
invalidColor: '{form.field.float.label.invalid.color}',
|
||||
transitionDuration: '0.2s',
|
||||
positionX: '{form.field.padding.x}',
|
||||
top: '{form.field.padding.y}',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '400'
|
||||
},
|
||||
input: {
|
||||
paddingTop: '1.5rem'
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/iftalabel/index.d.ts"
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ import fileupload from '@primevue/themes/aura/fileupload';
|
|||
import floatlabel from '@primevue/themes/aura/floatlabel';
|
||||
import galleria from '@primevue/themes/aura/galleria';
|
||||
import iconfield from '@primevue/themes/aura/iconfield';
|
||||
import iftalabel from '@primevue/themes/aura/iftalabel';
|
||||
import image from '@primevue/themes/aura/image';
|
||||
import inlinemessage from '@primevue/themes/aura/inlinemessage';
|
||||
import inplace from '@primevue/themes/aura/inplace';
|
||||
|
|
@ -258,7 +259,8 @@ export default {
|
|||
disabledColor: '{surface.500}',
|
||||
placeholderColor: '{surface.500}',
|
||||
floatLabelColor: '{surface.500}',
|
||||
floatLabelFocusColor: '{surface.500}',
|
||||
floatLabelFocusColor: '{primary.600}',
|
||||
floatLabelActiveColor: '{surface.500}',
|
||||
floatLabelInvalidColor: '{red.400}',
|
||||
iconColor: '{surface.400}',
|
||||
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
|
||||
|
|
@ -380,7 +382,8 @@ export default {
|
|||
disabledColor: '{surface.400}',
|
||||
placeholderColor: '{surface.400}',
|
||||
floatLabelColor: '{surface.400}',
|
||||
floatLabelFocusColor: '{surface.400}',
|
||||
floatLabelFocusColor: '{primary.color}',
|
||||
floatLabelActiveColor: '{surface.400}',
|
||||
floatLabelInvalidColor: '{red.300}',
|
||||
iconColor: '{surface.400}',
|
||||
shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
|
||||
|
|
@ -487,6 +490,7 @@ export default {
|
|||
editor,
|
||||
fieldset,
|
||||
fileupload,
|
||||
iftalabel,
|
||||
floatlabel,
|
||||
galleria,
|
||||
iconfield,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,33 @@ export default {
|
|||
root: {
|
||||
color: '{form.field.float.label.color}',
|
||||
focusColor: '{form.field.float.label.focus.color}',
|
||||
activeColor: '{form.field.float.label.active.color}',
|
||||
invalidColor: '{form.field.float.label.invalid.color}',
|
||||
transitionDuration: '0.2s'
|
||||
transitionDuration: '0.2s',
|
||||
positionX: '{form.field.padding.x}',
|
||||
fontWeight: '500',
|
||||
focus: {
|
||||
top: '-1.25rem',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '400'
|
||||
}
|
||||
},
|
||||
in: {
|
||||
input: {
|
||||
paddingTop: '1.875rem'
|
||||
},
|
||||
focus: {
|
||||
top: '{form.field.padding.y}'
|
||||
}
|
||||
},
|
||||
on: {
|
||||
input: {
|
||||
paddingTop: '1.25rem',
|
||||
paddingBottom: '1.25rem'
|
||||
},
|
||||
focus: {
|
||||
background: '{form.field.background}',
|
||||
padding: '0 0.125rem'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
export default {
|
||||
root: {
|
||||
color: '{form.field.float.label.color}',
|
||||
focusColor: '{form.field.float.label.focus.color}',
|
||||
invalidColor: '{form.field.float.label.invalid.color}',
|
||||
transitionDuration: '0.2s',
|
||||
positionX: '{form.field.padding.x}',
|
||||
top: '{form.field.padding.y}',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '400'
|
||||
},
|
||||
input: {
|
||||
paddingTop: '1.875rem'
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/iftalabel/index.d.ts"
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ import fileupload from '@primevue/themes/lara/fileupload';
|
|||
import floatlabel from '@primevue/themes/lara/floatlabel';
|
||||
import galleria from '@primevue/themes/lara/galleria';
|
||||
import iconfield from '@primevue/themes/lara/iconfield';
|
||||
import iftalabel from '@primevue/themes/lara/iftalabel';
|
||||
import image from '@primevue/themes/lara/image';
|
||||
import inlinemessage from '@primevue/themes/lara/inlinemessage';
|
||||
import inplace from '@primevue/themes/lara/inplace';
|
||||
|
|
@ -260,7 +261,8 @@ export default {
|
|||
disabledColor: '{surface.500}',
|
||||
placeholderColor: '{surface.500}',
|
||||
floatLabelColor: '{surface.500}',
|
||||
floatLabelFocusColor: '{surface.500}',
|
||||
floatLabelFocusColor: '{primary.color}',
|
||||
floatLabelActiveColor: '{surface.500}',
|
||||
floatLabelInvalidColor: '{red.400}',
|
||||
iconColor: '{surface.500}',
|
||||
shadow: 'none'
|
||||
|
|
@ -385,7 +387,8 @@ export default {
|
|||
disabledColor: '{surface.400}',
|
||||
placeholderColor: '{surface.400}',
|
||||
floatLabelColor: '{surface.400}',
|
||||
floatLabelFocusColor: '{surface.400}',
|
||||
floatLabelFocusColor: '{primary.color}',
|
||||
floatLabelActiveColor: '{surface.400}',
|
||||
floatLabelInvalidColor: '{red.300}',
|
||||
iconColor: '{surface.400}',
|
||||
shadow: 'none'
|
||||
|
|
@ -492,6 +495,7 @@ export default {
|
|||
editor,
|
||||
fieldset,
|
||||
fileupload,
|
||||
iftalabel,
|
||||
floatlabel,
|
||||
galleria,
|
||||
iconfield,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,33 @@ export default {
|
|||
root: {
|
||||
color: '{form.field.float.label.color}',
|
||||
focusColor: '{form.field.float.label.focus.color}',
|
||||
activeColor: '{form.field.float.label.active.color}',
|
||||
invalidColor: '{form.field.float.label.invalid.color}',
|
||||
transitionDuration: '0.2s'
|
||||
transitionDuration: '0.2s',
|
||||
positionX: '{form.field.padding.x}',
|
||||
fontWeight: '500',
|
||||
focus: {
|
||||
top: '-1.25rem',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '400'
|
||||
}
|
||||
},
|
||||
in: {
|
||||
input: {
|
||||
paddingTop: '1.5rem'
|
||||
},
|
||||
focus: {
|
||||
top: '{form.field.padding.y}'
|
||||
}
|
||||
},
|
||||
on: {
|
||||
input: {
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
},
|
||||
focus: {
|
||||
background: '{form.field.background}',
|
||||
padding: '0 0.125rem'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
export default {
|
||||
root: {
|
||||
color: '{form.field.float.label.color}',
|
||||
focusColor: '{form.field.float.label.focus.color}',
|
||||
invalidColor: '{form.field.float.label.invalid.color}',
|
||||
transitionDuration: '0.2s',
|
||||
positionX: '{form.field.padding.x}',
|
||||
top: '{form.field.padding.y}',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: '400'
|
||||
},
|
||||
input: {
|
||||
paddingTop: '1.5rem'
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/iftalabel/index.d.ts"
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ import fileupload from '@primevue/themes/nora/fileupload';
|
|||
import floatlabel from '@primevue/themes/nora/floatlabel';
|
||||
import galleria from '@primevue/themes/nora/galleria';
|
||||
import iconfield from '@primevue/themes/nora/iconfield';
|
||||
import iftalabel from '@primevue/themes/nora/iftalabel';
|
||||
import image from '@primevue/themes/nora/image';
|
||||
import inlinemessage from '@primevue/themes/nora/inlinemessage';
|
||||
import inplace from '@primevue/themes/nora/inplace';
|
||||
|
|
@ -258,7 +259,8 @@ export default {
|
|||
disabledColor: '{surface.600}',
|
||||
placeholderColor: '{surface.600}',
|
||||
floatLabelColor: '{surface.600}',
|
||||
floatLabelFocusColor: '{surface.600}',
|
||||
floatLabelFocusColor: '{primary.color}',
|
||||
floatLabelActiveColor: '{surface.600}',
|
||||
floatLabelInvalidColor: '{red.500}',
|
||||
iconColor: '{surface.900}',
|
||||
shadow: 'none'
|
||||
|
|
@ -380,7 +382,8 @@ export default {
|
|||
disabledColor: '{surface.400}',
|
||||
placeholderColor: '{surface.400}',
|
||||
floatLabelColor: '{surface.400}',
|
||||
floatLabelFocusColor: '{surface.400}',
|
||||
floatLabelFocusColor: '{primary.color}',
|
||||
floatLabelActiveColor: '{surface.400}',
|
||||
floatLabelInvalidColor: '{red.400}',
|
||||
iconColor: '{surface.0}',
|
||||
shadow: 'none'
|
||||
|
|
@ -487,6 +490,7 @@ export default {
|
|||
editor,
|
||||
fieldset,
|
||||
fileupload,
|
||||
iftalabel,
|
||||
floatlabel,
|
||||
galleria,
|
||||
iconfield,
|
||||
|
|
|
|||
|
|
@ -27,6 +27,12 @@ export interface FloatLabelDesignTokens extends ColorSchemeDesignToken<FloatLabe
|
|||
* @designToken floatlabel.focus.color
|
||||
*/
|
||||
focusColor?: string;
|
||||
/**
|
||||
* Active color of root
|
||||
*
|
||||
* @designToken floatlabel.active.color
|
||||
*/
|
||||
activeColor?: string;
|
||||
/**
|
||||
* Invalid color of root
|
||||
*
|
||||
|
|
@ -39,5 +45,106 @@ export interface FloatLabelDesignTokens extends ColorSchemeDesignToken<FloatLabe
|
|||
* @designToken floatlabel.transition.duration
|
||||
*/
|
||||
transitionDuration?: string;
|
||||
/**
|
||||
* Position x of root
|
||||
*
|
||||
* @designToken floatlabel.position.x
|
||||
*/
|
||||
positionX?: string;
|
||||
/**
|
||||
* Font weight of root
|
||||
*
|
||||
* @designToken floatlabel.font.weight
|
||||
*/
|
||||
fontWeight?: string;
|
||||
/**
|
||||
* Focus of root
|
||||
*/
|
||||
focus?: {
|
||||
/**
|
||||
* Focus top of root
|
||||
*
|
||||
* @designToken floatlabel.focus.top
|
||||
*/
|
||||
top?: string;
|
||||
/**
|
||||
* Focus font size of root
|
||||
*
|
||||
* @designToken floatlabel.focus.font.size
|
||||
*/
|
||||
fontSize?: string;
|
||||
/**
|
||||
* Focus font weight of root
|
||||
*
|
||||
* @designToken floatlabel.focus.font.weight
|
||||
*/
|
||||
fontWeight?: string;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the in section
|
||||
*/
|
||||
in?: {
|
||||
/**
|
||||
* Input of in
|
||||
*/
|
||||
input?: {
|
||||
/**
|
||||
* Input padding top of in
|
||||
*
|
||||
* @designToken floatlabel.in.input.padding.top
|
||||
*/
|
||||
paddingTop?: string;
|
||||
};
|
||||
/**
|
||||
* Focus of in
|
||||
*/
|
||||
focus?: {
|
||||
/**
|
||||
* Focus top of in
|
||||
*
|
||||
* @designToken floatlabel.in.focus.top
|
||||
*/
|
||||
top?: string;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the on section
|
||||
*/
|
||||
on?: {
|
||||
/**
|
||||
* Input of on
|
||||
*/
|
||||
input?: {
|
||||
/**
|
||||
* Input padding top of on
|
||||
*
|
||||
* @designToken floatlabel.on.input.padding.top
|
||||
*/
|
||||
paddingTop?: string;
|
||||
/**
|
||||
* Input padding bottom of on
|
||||
*
|
||||
* @designToken floatlabel.on.input.padding.bottom
|
||||
*/
|
||||
paddingBottom?: string;
|
||||
};
|
||||
/**
|
||||
* Focus of on
|
||||
*/
|
||||
focus?: {
|
||||
/**
|
||||
* Focus background of on
|
||||
*
|
||||
* @designToken floatlabel.on.focus.background
|
||||
*/
|
||||
background?: string;
|
||||
/**
|
||||
* Focus padding of on
|
||||
*
|
||||
* @designToken floatlabel.on.focus.padding
|
||||
*/
|
||||
padding?: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
*
|
||||
* IftaLabel Design Tokens
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/iftalabel/)
|
||||
*
|
||||
* @module themes/iftalabel
|
||||
*
|
||||
*/
|
||||
|
||||
import { ColorSchemeDesignToken } from '..';
|
||||
|
||||
export interface IftaLabelDesignTokens extends ColorSchemeDesignToken<IftaLabelDesignTokens> {
|
||||
/**
|
||||
* Used to pass tokens of the root section
|
||||
*/
|
||||
root?: {
|
||||
/**
|
||||
* Color of root
|
||||
*
|
||||
* @designToken iftalabel.color
|
||||
*/
|
||||
color?: string;
|
||||
/**
|
||||
* Focus color of root
|
||||
*
|
||||
* @designToken iftalabel.focus.color
|
||||
*/
|
||||
focusColor?: string;
|
||||
/**
|
||||
* Invalid color of root
|
||||
*
|
||||
* @designToken iftalabel.invalid.color
|
||||
*/
|
||||
invalidColor?: string;
|
||||
/**
|
||||
* Transition duration of root
|
||||
*
|
||||
* @designToken iftalabel.transition.duration
|
||||
*/
|
||||
transitionDuration?: string;
|
||||
/**
|
||||
* Position x of root
|
||||
*
|
||||
* @designToken iftalabel.position.x
|
||||
*/
|
||||
positionX?: string;
|
||||
/**
|
||||
* Top of root
|
||||
*
|
||||
* @designToken iftalabel.top
|
||||
*/
|
||||
top?: string;
|
||||
/**
|
||||
* Font size of root
|
||||
*
|
||||
* @designToken iftalabel.font.size
|
||||
*/
|
||||
fontSize?: string;
|
||||
/**
|
||||
* Font weight of root
|
||||
*
|
||||
* @designToken iftalabel.font.weight
|
||||
*/
|
||||
fontWeight?: string;
|
||||
};
|
||||
/**
|
||||
* Used to pass tokens of the input section
|
||||
*/
|
||||
input?: {
|
||||
/**
|
||||
* Padding top of input
|
||||
*
|
||||
* @designToken iftalabel.input.padding.top
|
||||
*/
|
||||
paddingTop?: string;
|
||||
};
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@ importers:
|
|||
devDependencies:
|
||||
tsup:
|
||||
specifier: ^8.1.0
|
||||
version: 8.2.4(jiti@1.21.6)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.1)
|
||||
version: 8.3.0(jiti@1.21.6)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.1)
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.27.0
|
||||
version: 0.27.0(@babel/parser@7.25.6)(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3))(rollup@4.21.3)(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
|
|
@ -162,7 +162,7 @@ importers:
|
|||
devDependencies:
|
||||
tsup:
|
||||
specifier: ^8.1.0
|
||||
version: 8.2.4(jiti@1.21.6)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.1)
|
||||
version: 8.3.0(jiti@1.21.6)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.1)
|
||||
publishDirectory: dist
|
||||
|
||||
packages/nuxt-module:
|
||||
|
|
@ -194,7 +194,7 @@ importers:
|
|||
devDependencies:
|
||||
'@nuxt/devtools':
|
||||
specifier: ^0.8.5
|
||||
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(webpack-sources@3.2.3)
|
||||
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
'@nuxt/eslint-config':
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(eslint@8.57.1)
|
||||
|
|
@ -206,7 +206,7 @@ importers:
|
|||
version: 3.13.2(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
'@nuxt/test-utils':
|
||||
specifier: ^3.7.3
|
||||
version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
'@primevue/themes':
|
||||
specifier: workspace:*
|
||||
version: link:../themes
|
||||
|
|
@ -3454,8 +3454,8 @@ packages:
|
|||
ee-first@1.1.1:
|
||||
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
|
||||
|
||||
electron-to-chromium@1.5.23:
|
||||
resolution: {integrity: sha512-mBhODedOXg4v5QWwl21DjM5amzjmI1zw9EPrPK/5Wx7C8jt33bpZNrC7OhHUG3pxRtbLpr3W2dXT+Ph1SsfRZA==}
|
||||
electron-to-chromium@1.5.24:
|
||||
resolution: {integrity: sha512-0x0wLCmpdKFCi9ulhvYZebgcPmHTkFVUfU2wzDykadkslKwT4oAmDTHEKLnlrDsMGZe4B+ksn8quZfZjYsBetA==}
|
||||
|
||||
emoji-regex@8.0.0:
|
||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||
|
|
@ -3728,6 +3728,14 @@ packages:
|
|||
fastq@1.17.1:
|
||||
resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
|
||||
|
||||
fdir@6.3.0:
|
||||
resolution: {integrity: sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==}
|
||||
peerDependencies:
|
||||
picomatch: ^3 || ^4
|
||||
peerDependenciesMeta:
|
||||
picomatch:
|
||||
optional: true
|
||||
|
||||
file-entry-cache@6.0.1:
|
||||
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
|
||||
engines: {node: ^10.12.0 || >=12.0.0}
|
||||
|
|
@ -4963,6 +4971,10 @@ packages:
|
|||
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
|
||||
engines: {node: '>=8.6'}
|
||||
|
||||
picomatch@4.0.2:
|
||||
resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
pify@2.3.0:
|
||||
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
@ -6075,6 +6087,10 @@ packages:
|
|||
tinyexec@0.3.0:
|
||||
resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
|
||||
|
||||
tinyglobby@0.2.6:
|
||||
resolution: {integrity: sha512-NbBoFBpqfcgd1tCiO8Lkfdk+xrA7mlLR9zgvZcZWQQwU63XAfUePyd6wZBaU93Hqw347lHnwFzttAkemHzzz4g==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
tinypool@0.4.0:
|
||||
resolution: {integrity: sha512-2ksntHOKf893wSAH4z/+JbPpi92esw8Gn9N2deXX+B0EO92hexAVI9GIZZPx7P5aYo5KULfeOSt3kMOmSOy6uA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
|
@ -6151,8 +6167,8 @@ packages:
|
|||
tslib@2.7.0:
|
||||
resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
|
||||
|
||||
tsup@8.2.4:
|
||||
resolution: {integrity: sha512-akpCPePnBnC/CXgRrcy72ZSntgIEUa1jN0oJbbvpALWKNOz1B7aM+UVDWGRGIO/T/PZugAESWDJUAb5FD48o8Q==}
|
||||
tsup@8.3.0:
|
||||
resolution: {integrity: sha512-ALscEeyS03IomcuNdFdc0YWGVIkwH1Ws7nfTbAPuoILvEV2hpGQAY72LIOjglGo4ShWpZfpBqP/jpQVCzqYQag==}
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -6478,8 +6494,8 @@ packages:
|
|||
terser:
|
||||
optional: true
|
||||
|
||||
vite@4.5.3:
|
||||
resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
|
||||
vite@4.5.5:
|
||||
resolution: {integrity: sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -6506,8 +6522,8 @@ packages:
|
|||
terser:
|
||||
optional: true
|
||||
|
||||
vite@5.4.5:
|
||||
resolution: {integrity: sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==}
|
||||
vite@5.4.6:
|
||||
resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -8386,13 +8402,12 @@ snapshots:
|
|||
|
||||
'@nuxt/devalue@2.0.2': {}
|
||||
|
||||
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(webpack-sources@3.2.3)':
|
||||
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(webpack-sources@3.2.3)':
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
'@nuxt/schema': 3.13.2(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
execa: 7.2.0
|
||||
nuxt: 3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3)
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
transitivePeerDependencies:
|
||||
- magicast
|
||||
- rollup
|
||||
|
|
@ -8412,10 +8427,10 @@ snapshots:
|
|||
rc9: 2.1.2
|
||||
semver: 7.6.3
|
||||
|
||||
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(webpack-sources@3.2.3)':
|
||||
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(webpack-sources@3.2.3)':
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(webpack-sources@3.2.3)
|
||||
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.50)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(sass@1.78.0)(terser@5.32.0)(typescript@5.6.2)(webpack-sources@3.2.3))(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
'@nuxt/devtools-wizard': 0.8.5
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
birpc: 0.2.17
|
||||
|
|
@ -8446,9 +8461,8 @@ snapshots:
|
|||
simple-git: 3.26.0
|
||||
sirv: 2.0.4
|
||||
unimport: 3.12.0(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))
|
||||
vite-plugin-vue-inspector: 3.7.2(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))
|
||||
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3))(rollup@4.21.3)
|
||||
vite-plugin-vue-inspector: 3.7.2
|
||||
wait-on: 7.2.0
|
||||
which: 3.0.1
|
||||
ws: 8.18.0
|
||||
|
|
@ -8733,7 +8747,7 @@ snapshots:
|
|||
- supports-color
|
||||
- webpack-sources
|
||||
|
||||
'@nuxt/test-utils@3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)':
|
||||
'@nuxt/test-utils@3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)':
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
'@nuxt/schema': 3.13.2(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
|
|
@ -8759,8 +8773,7 @@ snapshots:
|
|||
ufo: 1.5.4
|
||||
unenv: 1.10.0
|
||||
unplugin: 1.14.1(webpack-sources@3.2.3)
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
vue: 3.5.6(typescript@5.6.2)
|
||||
vue-router: 4.4.5(vue@3.5.6(typescript@5.6.2))
|
||||
optionalDependencies:
|
||||
|
|
@ -9866,7 +9879,7 @@ snapshots:
|
|||
browserslist@4.23.3:
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001660
|
||||
electron-to-chromium: 1.5.23
|
||||
electron-to-chromium: 1.5.24
|
||||
node-releases: 2.0.18
|
||||
update-browserslist-db: 1.1.0(browserslist@4.23.3)
|
||||
|
||||
|
|
@ -10473,7 +10486,7 @@ snapshots:
|
|||
|
||||
ee-first@1.1.1: {}
|
||||
|
||||
electron-to-chromium@1.5.23: {}
|
||||
electron-to-chromium@1.5.24: {}
|
||||
|
||||
emoji-regex@8.0.0: {}
|
||||
|
||||
|
|
@ -10905,6 +10918,10 @@ snapshots:
|
|||
dependencies:
|
||||
reusify: 1.0.4
|
||||
|
||||
fdir@6.3.0(picomatch@4.0.2):
|
||||
optionalDependencies:
|
||||
picomatch: 4.0.2
|
||||
|
||||
file-entry-cache@6.0.1:
|
||||
dependencies:
|
||||
flat-cache: 3.2.0
|
||||
|
|
@ -12489,6 +12506,8 @@ snapshots:
|
|||
|
||||
picomatch@2.3.1: {}
|
||||
|
||||
picomatch@4.0.2: {}
|
||||
|
||||
pify@2.3.0: {}
|
||||
|
||||
pify@5.0.0: {}
|
||||
|
|
@ -13639,6 +13658,11 @@ snapshots:
|
|||
|
||||
tinyexec@0.3.0: {}
|
||||
|
||||
tinyglobby@0.2.6:
|
||||
dependencies:
|
||||
fdir: 6.3.0(picomatch@4.0.2)
|
||||
picomatch: 4.0.2
|
||||
|
||||
tinypool@0.4.0: {}
|
||||
|
||||
tinypool@0.8.4: {}
|
||||
|
|
@ -13690,7 +13714,7 @@ snapshots:
|
|||
|
||||
tslib@2.7.0: {}
|
||||
|
||||
tsup@8.2.4(jiti@1.21.6)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.1):
|
||||
tsup@8.3.0(jiti@1.21.6)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.1):
|
||||
dependencies:
|
||||
bundle-require: 5.0.0(esbuild@0.23.1)
|
||||
cac: 6.7.14
|
||||
|
|
@ -13699,7 +13723,6 @@ snapshots:
|
|||
debug: 4.3.7
|
||||
esbuild: 0.23.1
|
||||
execa: 5.1.1
|
||||
globby: 11.1.0
|
||||
joycon: 3.1.1
|
||||
picocolors: 1.1.0
|
||||
postcss-load-config: 6.0.1(jiti@1.21.6)(postcss@8.4.47)(yaml@2.5.1)
|
||||
|
|
@ -13707,6 +13730,7 @@ snapshots:
|
|||
rollup: 4.21.3
|
||||
source-map: 0.8.0-beta.0
|
||||
sucrase: 3.35.0
|
||||
tinyglobby: 0.2.6
|
||||
tree-kill: 1.2.2
|
||||
optionalDependencies:
|
||||
postcss: 8.4.47
|
||||
|
|
@ -13994,7 +14018,7 @@ snapshots:
|
|||
mlly: 1.7.1
|
||||
pathe: 1.1.2
|
||||
picocolors: 1.1.0
|
||||
vite: 4.5.3(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite: 4.5.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
transitivePeerDependencies:
|
||||
- '@types/node'
|
||||
- less
|
||||
|
|
@ -14011,7 +14035,7 @@ snapshots:
|
|||
debug: 4.3.7
|
||||
pathe: 1.1.2
|
||||
picocolors: 1.1.0
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite: 5.4.6(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
transitivePeerDependencies:
|
||||
- '@types/node'
|
||||
- less
|
||||
|
|
@ -14047,7 +14071,7 @@ snapshots:
|
|||
optionator: 0.9.4
|
||||
typescript: 5.6.2
|
||||
|
||||
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)):
|
||||
vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3))(rollup@4.21.3):
|
||||
dependencies:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@rollup/pluginutils': 5.1.0(rollup@4.21.3)
|
||||
|
|
@ -14057,14 +14081,13 @@ snapshots:
|
|||
open: 9.1.0
|
||||
picocolors: 1.1.0
|
||||
sirv: 2.0.4
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
optionalDependencies:
|
||||
'@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
vite-plugin-vue-inspector@3.7.2(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)):
|
||||
vite-plugin-vue-inspector@3.7.2:
|
||||
dependencies:
|
||||
'@babel/core': 7.25.2
|
||||
'@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
|
||||
|
|
@ -14075,7 +14098,6 @@ snapshots:
|
|||
'@vue/compiler-dom': 3.5.6
|
||||
kolorist: 1.8.0
|
||||
magic-string: 0.30.11
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
|
|
@ -14091,7 +14113,7 @@ snapshots:
|
|||
sass: 1.78.0
|
||||
terser: 5.32.0
|
||||
|
||||
vite@4.5.3(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0):
|
||||
vite@4.5.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0):
|
||||
dependencies:
|
||||
esbuild: 0.18.20
|
||||
postcss: 8.4.47
|
||||
|
|
@ -14102,7 +14124,7 @@ snapshots:
|
|||
sass: 1.78.0
|
||||
terser: 5.32.0
|
||||
|
||||
vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0):
|
||||
vite@5.4.6(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0):
|
||||
dependencies:
|
||||
esbuild: 0.21.5
|
||||
postcss: 8.4.47
|
||||
|
|
@ -14113,9 +14135,9 @@ snapshots:
|
|||
sass: 1.78.0
|
||||
terser: 5.32.0
|
||||
|
||||
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3):
|
||||
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3):
|
||||
dependencies:
|
||||
'@nuxt/test-utils': 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vite@5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
'@nuxt/test-utils': 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5)(webpack-sources@3.2.3))(rollup@4.21.3)(vitest@1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0))(vue-router@4.4.5(vue@3.5.6(typescript@5.6.2)))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
|
||||
transitivePeerDependencies:
|
||||
- '@cucumber/cucumber'
|
||||
- '@jest/globals'
|
||||
|
|
@ -14160,7 +14182,7 @@ snapshots:
|
|||
tinybench: 2.9.0
|
||||
tinypool: 0.4.0
|
||||
tinyspy: 1.1.1
|
||||
vite: 4.5.3(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite: 4.5.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite-node: 0.29.8(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
why-is-node-running: 2.3.0
|
||||
optionalDependencies:
|
||||
|
|
@ -14193,7 +14215,7 @@ snapshots:
|
|||
strip-literal: 2.1.0
|
||||
tinybench: 2.9.0
|
||||
tinypool: 0.8.4
|
||||
vite: 5.4.5(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite: 5.4.6(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
vite-node: 1.6.0(@types/node@18.19.50)(sass@1.78.0)(terser@5.32.0)
|
||||
why-is-node-running: 2.3.0
|
||||
optionalDependencies:
|
||||
|
|
|
|||
Loading…
Reference in New Issue