Merge branch 'primefaces:master' into fix/listbox-optiongroup-filter
Uros
GitHub
commit
ecbdfc17bf
58
CHANGELOG.md
58
CHANGELOG.md
|
|
@ -1,5 +1,63 @@
|
|||
# Changelog
|
||||
|
||||
## [4.0.7](https://github.com/primefaces/primevue/tree/4.0.7) (2024-09-11)
|
||||
|
||||
[Full Changelog](https://github.com/primefaces/primevue/compare/4.0.6...4.0.7)
|
||||
|
||||
**Fixed bugs:**
|
||||
|
||||
- SelectButton pt name correction [\#6382](https://github.com/primefaces/primevue/issues/6382)
|
||||
- ToggleButton: aria-label and aria-labelledby not observed [\#6377](https://github.com/primefaces/primevue/issues/6377)
|
||||
- FileUpload: Fix type of FileUploadState.messages [\#6370](https://github.com/primefaces/primevue/issues/6370)
|
||||
- TreeTable: click and arrow key defect [\#6368](https://github.com/primefaces/primevue/issues/6368)
|
||||
- Dialog: no dragstart event to accompany dragend [\#6357](https://github.com/primefaces/primevue/issues/6357)
|
||||
- Dialog: dragging state is not reset when closed while dragging [\#6356](https://github.com/primefaces/primevue/issues/6356)
|
||||
- InputOtp: IntegerOnly mode accepts "space" [\#6353](https://github.com/primefaces/primevue/issues/6353)
|
||||
- InputOtp: Pasting adds an extra character [\#6351](https://github.com/primefaces/primevue/issues/6351)
|
||||
- DatePicker: Pick month does not work [\#6342](https://github.com/primefaces/primevue/issues/6342)
|
||||
- DataTable: Cannot set properties of null (setting 'tabIndex') [\#6323](https://github.com/primefaces/primevue/issues/6323)
|
||||
- DatePicker showOtherMonths wrong behaviour [\#6307](https://github.com/primefaces/primevue/issues/6307)
|
||||
- Click outside only when not modal [\#6284](https://github.com/primefaces/primevue/pull/6284)
|
||||
- Select: Chinese IME input will be stopped in filter input element [\#6279](https://github.com/primefaces/primevue/issues/6279)
|
||||
|
||||
## [4.0.6](https://github.com/primefaces/primevue/tree/4.0.6) (2024-09-10)
|
||||
|
||||
[Full Changelog](https://github.com/primefaces/primevue/compare/4.0.5...4.0.6)
|
||||
|
||||
**Fixed bugs:**
|
||||
|
||||
- animate-slidedown fails when a Tailwind prefix is used [\#6365](https://github.com/primefaces/primevue/issues/6365)
|
||||
- Tree: wrong pt and classname for InputText [\#6301](https://github.com/primefaces/primevue/issues/6301)
|
||||
- pt pcFilterIconContainer defects on form components [\#6286](https://github.com/primefaces/primevue/issues/6286)
|
||||
- File Upload: Basic Mode does not apply buttonProps [\#6255](https://github.com/primefaces/primevue/issues/6255)
|
||||
- Multiple Components: Augment vue using declare module 'vue' instead of declare module '@vue/runtime-core' (and declare module 'vue/types/vue') to avoid compilebreaks [\#6199](https://github.com/primefaces/primevue/issues/6199)
|
||||
|
||||
## [4.0.5](https://github.com/primefaces/primevue/tree/4.0.5) (2024-08-23)
|
||||
|
||||
[Full Changelog](https://github.com/primefaces/primevue/compare/4.0.4...4.0.5)
|
||||
|
||||
**Fixed bugs:**
|
||||
|
||||
- aria-hidden errors on browsers [\#6269](https://github.com/primefaces/primevue/issues/6269)
|
||||
- Accordion, Button, Step, Tab: Invalid prop warnings when component object passed to as prop [\#6266](https://github.com/primefaces/primevue/issues/6266)
|
||||
- Carousel: Index is undefined in PassThroughOptions [\#6264](https://github.com/primefaces/primevue/issues/6264)
|
||||
- Drawer: Nested drawer dissmis [\#6262](https://github.com/primefaces/primevue/issues/6262)
|
||||
- Accordion and Tabs value prop type definion extensions [\#6252](https://github.com/primefaces/primevue/issues/6252)
|
||||
- DatePicker: responsiveOptions doesn't work [\#6250](https://github.com/primefaces/primevue/issues/6250)
|
||||
- ScrollTop: ScrollTop button not displayed correctly when ripple effect is enabled [\#6249](https://github.com/primefaces/primevue/issues/6249)
|
||||
- Stepper: activateCallback has incorrect signature [\#6225](https://github.com/primefaces/primevue/issues/6225)
|
||||
- SpeedDial: Invalid aria-controls value being set in list items [\#6221](https://github.com/primefaces/primevue/issues/6221)
|
||||
- InputNumber: Buttons disappear when clicked if inside of an InputGroup [\#6212](https://github.com/primefaces/primevue/issues/6212)
|
||||
- IconField: 'iconfield' does not exist in type 'PrimeVuePTOptions' [\#6206](https://github.com/primefaces/primevue/issues/6206)
|
||||
- DatePicker: switching to year view when modelValue is populated [\#6203](https://github.com/primefaces/primevue/issues/6203)
|
||||
- Select: In case of Filter and AutoFocusFilter enabled focus is lost [\#6194](https://github.com/primefaces/primevue/issues/6194)
|
||||
- InputOtp - allow NumpadEnter event [\#6182](https://github.com/primefaces/primevue/issues/6182)
|
||||
- [MenuBar]: Slow performance [\#6164](https://github.com/primefaces/primevue/issues/6164)
|
||||
- Dialog: [V4] When it non-fixed, it will cause the appendTo target shrink or joggled. [\#6160](https://github.com/primefaces/primevue/issues/6160)
|
||||
- Menu section: PassThrough context.item has not right MenuItem entry [\#6055](https://github.com/primefaces/primevue/issues/6055)
|
||||
- FileUpload v4.0.0-beta.3: Subsequent file selections no longer possible in basic mode (regression from v4.0.0-beta.2) [\#5748](https://github.com/primefaces/primevue/issues/5748)
|
||||
- InputMask number repeat [\#3623](https://github.com/primefaces/primevue/issues/3623)
|
||||
|
||||
## [4.0.4](https://github.com/primefaces/primevue/tree/4.0.4) (2024-08-02)
|
||||
|
||||
[Full Changelog](https://github.com/primefaces/primevue/compare/4.0.3...4.0.4)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"id": 65,
|
||||
"content": "Summer Sale: Up to 50% Off 🛍️",
|
||||
"linkText": "Visit Store",
|
||||
"linkHref": "https://primefaces.org/store"
|
||||
"id": 67,
|
||||
"content": "480 Vue Components with Tailwind 🚀",
|
||||
"linkText": "Visit PrimeBlocks",
|
||||
"linkHref": "https://primeblocks.org"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -527,7 +527,8 @@
|
|||
{
|
||||
"name": "PrimeBlocks",
|
||||
"icon": "pi pi-server",
|
||||
"href": "https://blocks.primevue.org"
|
||||
"href": "https://primeblocks.org",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "Guides",
|
||||
|
|
@ -572,8 +573,7 @@
|
|||
{
|
||||
"name": "Contribution",
|
||||
"to": "/contribution",
|
||||
"icon": "pi pi-users",
|
||||
"badge": "NEW"
|
||||
"icon": "pi pi-users"
|
||||
},
|
||||
{
|
||||
"name": "Discover",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div ref="container" class="card flex flex-col md:flex-row !p-0">
|
||||
<div class="flex items-center justify-center md:border-r border-b md:border-b-0 border-surface md:w-3/4 w-full p-4">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 p-8 md:p-2 md:w-1/4 w-full max-h-[720px] overflow-y-auto">
|
||||
<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="flex flex-col p-2 cursor-pointer hover:bg-emphasis" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
|
||||
<span>{{ item.label }}</span>
|
||||
<span class="text-muted-color text-sm">{{ item.label }} element of {{ doc.key }} component</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addClass, find, removeClass } from '@primeuix/utils/dom';
|
||||
|
||||
export default {
|
||||
props: ['docs'],
|
||||
data() {
|
||||
return {
|
||||
hoveredElements: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
enterSection(item, componentName) {
|
||||
let selector;
|
||||
|
||||
if (item.label === 'root') selector = `[data-pc-name="${componentName.toLowerCase()}"]`;
|
||||
else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;
|
||||
else selector = `[data-pc-section="${item.label.toLowerCase()}"]`;
|
||||
|
||||
this.hoveredElements = find(this.$refs.container, selector);
|
||||
|
||||
this.hoveredElements.forEach((el) => {
|
||||
addClass(el, '!ring !ring-red-500');
|
||||
});
|
||||
},
|
||||
leaveSection() {
|
||||
this.hoveredElements.forEach((el) => {
|
||||
removeClass(el, '!ring !ring-red-500');
|
||||
});
|
||||
|
||||
this.hoveredElements = [];
|
||||
},
|
||||
handleData(doc) {
|
||||
return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -19,12 +19,14 @@ export const getPTOptions = (name) => {
|
|||
objToReplace.type = prop.type;
|
||||
}
|
||||
|
||||
data.push({
|
||||
value: i + 1,
|
||||
label: prop.name,
|
||||
options: hasSubComp ? subOptions?.props : options?.props,
|
||||
description: prop.description
|
||||
});
|
||||
if (!prop.deprecated) {
|
||||
data.push({
|
||||
value: i + 1,
|
||||
label: prop.name,
|
||||
options: hasSubComp ? subOptions?.props : options?.props,
|
||||
description: prop.description
|
||||
});
|
||||
}
|
||||
} else {
|
||||
data.push({
|
||||
value: i + 1,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="section-header relative z-30">Blocks</div>
|
||||
<p class="section-detail relative z-30">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
|
||||
<div class="flex justify-center mt-6 relative z-30">
|
||||
<a href="https://blocks.primevue.org" class="linkbox linkbox-primary">
|
||||
<a href="https://primeblocks.org" class="linkbox linkbox-primary">
|
||||
<span>Explore All</span>
|
||||
<i class="pi pi-arrow-right ml-2"></i>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1838,7 +1838,7 @@
|
|||
"name": "root",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "null | Document | Element",
|
||||
"type": "null | Element | Document",
|
||||
"default": "",
|
||||
"description": "Specifies the `root` option of the IntersectionObserver API"
|
||||
},
|
||||
|
|
@ -2625,7 +2625,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached.\nSpecial keywords are 'body' for document body and 'self' for the element itself."
|
||||
},
|
||||
|
|
@ -8247,7 +8247,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
|
||||
},
|
||||
|
|
@ -8943,7 +8943,7 @@
|
|||
"name": "plugins",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"type": "any[]",
|
||||
"default": "",
|
||||
"description": "Used to custom plugins of the chart."
|
||||
},
|
||||
|
|
@ -10603,7 +10603,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
|
||||
},
|
||||
|
|
@ -11981,7 +11981,20 @@
|
|||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom body template."
|
||||
"description": "Custom body template for DataTable."
|
||||
},
|
||||
{
|
||||
"name": "node",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">data</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Row data.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">any</span>, <span class=\"doc-option-parameter-type\">// Row node data.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">column</span>: <span class=\"doc-option-parameter-type\">ColumnNode</span>, <span class=\"doc-option-parameter-type\">// Column node.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">field</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Column field.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Row index.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">frozenRow</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Whether the row is frozen.</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">editorInitCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Editor init callback function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">rowTogglerCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Row toggler callback unction</span>\n}",
|
||||
"description": "body slot's params."
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom body template for TreeTable."
|
||||
},
|
||||
{
|
||||
"name": "header",
|
||||
|
|
@ -15130,7 +15143,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -16857,7 +16870,7 @@
|
|||
"description": "Collection of active filters"
|
||||
},
|
||||
{
|
||||
"name": "columWidths",
|
||||
"name": "columnWidths",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "string[]",
|
||||
|
|
@ -21145,7 +21158,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -22698,7 +22711,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the dialog gets attached."
|
||||
},
|
||||
|
|
@ -22911,6 +22924,19 @@
|
|||
"returnType": "void",
|
||||
"description": "Fired when a dialog gets unmaximized."
|
||||
},
|
||||
{
|
||||
"name": "dragstart",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "event",
|
||||
"optional": false,
|
||||
"type": "Event",
|
||||
"description": "Browser event."
|
||||
}
|
||||
],
|
||||
"returnType": "void",
|
||||
"description": "Fired when a dialog drag begins."
|
||||
},
|
||||
{
|
||||
"name": "dragend",
|
||||
"parameters": [
|
||||
|
|
@ -26585,22 +26611,6 @@
|
|||
"default": "",
|
||||
"description": "Used to pass attributes to the empty's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "pcMessages",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the messages' DOM element."
|
||||
},
|
||||
{
|
||||
"name": "pcButton",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the basic mode's button's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "hooks",
|
||||
"optional": true,
|
||||
|
|
@ -26649,7 +26659,7 @@
|
|||
"name": "messages",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any[]",
|
||||
"type": "null | string[]",
|
||||
"default": "",
|
||||
"description": "Current messages."
|
||||
},
|
||||
|
|
@ -29223,7 +29233,7 @@
|
|||
}
|
||||
},
|
||||
"iconfield": {
|
||||
"description": "IconField wraps an input and an icon.\n\n[Live Demo](https://www.primevue.org/inputtext/)",
|
||||
"description": "IconField wraps an input and an icon.\n\n[Live Demo](https://www.primevue.org/iconfield/)",
|
||||
"components": {
|
||||
"default": {
|
||||
"description": "IconField is used to select a boolean value.",
|
||||
|
|
@ -37352,7 +37362,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -40384,7 +40394,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
|
||||
},
|
||||
|
|
@ -45921,7 +45931,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -47778,7 +47788,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -51623,7 +51633,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -52437,7 +52447,7 @@
|
|||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "pcButton",
|
||||
"name": "pcToggleButton",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "SelectButtonPassThroughOptionType",
|
||||
|
|
@ -54662,7 +54672,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached.\nSpecial keywords are 'body' for document body and 'self' for the element itself."
|
||||
},
|
||||
|
|
@ -57935,6 +57945,14 @@
|
|||
"default": "",
|
||||
"description": "Style class to add when leave animation is completed."
|
||||
},
|
||||
{
|
||||
"name": "hiddenClass",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Special class name to hide an element, only used in slide animation."
|
||||
},
|
||||
{
|
||||
"name": "hideOnOutsideClick",
|
||||
"optional": true,
|
||||
|
|
@ -61844,7 +61862,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
@ -63681,14 +63699,6 @@
|
|||
"default": "",
|
||||
"description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
|
||||
},
|
||||
{
|
||||
"name": "ariaLabel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Establishes a string value that labels the component."
|
||||
},
|
||||
{
|
||||
"name": "dt",
|
||||
"optional": true,
|
||||
|
|
@ -65244,7 +65254,7 @@
|
|||
"description": "Used to pass attributes to the IconField component."
|
||||
},
|
||||
{
|
||||
"name": "pcFilter",
|
||||
"name": "pcFilterInput",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
|
|
@ -66560,7 +66570,7 @@
|
|||
"name": "appendTo",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "HintedString<\"body\" | \"self\"> | HTMLElement",
|
||||
"type": "HTMLElement | HintedString<\"body\" | \"self\">",
|
||||
"default": "body",
|
||||
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,8 +1,37 @@
|
|||
<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/wireframe-placeholder.jpg" />
|
||||
</div>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<DataTable :value="products" tableStyle="min-width: 50rem">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
</DataTable>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('DataTable'),
|
||||
key: 'DataTable'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('Column'),
|
||||
key: 'Column'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsMini().then((data) => (this.products = data));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<template #list="slotProps">
|
||||
<div class="flex flex-col">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-4">
|
||||
<div class="md:w-40 relative">
|
||||
<img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Uploading implementation can be overridden by enabling <i>customUpload</i> property and defining a custom <i>uploader</i> handler event.</p>
|
||||
<p>Uploading implementation can be overridden by enabling <i>customUpload</i> property. This sample, displays the image on the client side with a grayscale filter.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
|
||||
<div class="card flex flex-col items-center gap-6">
|
||||
<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
|
||||
<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -12,30 +13,37 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: null,
|
||||
code: {
|
||||
basic: `
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
|
||||
<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
|
||||
<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
|
||||
<div class="card flex flex-col items-center gap-6">
|
||||
<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
|
||||
<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async customBase64Uploader(event) {
|
||||
onFileSelect(event) {
|
||||
const file = event.files[0];
|
||||
const reader = new FileReader();
|
||||
let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
|
||||
|
||||
reader.readAsDataURL(blob);
|
||||
|
||||
reader.onloadend = function () {
|
||||
const base64data = reader.result;
|
||||
reader.onload = async (e) => {
|
||||
this.src = e.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -43,39 +51,42 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
|
||||
<div class="card flex flex-col items-center gap-6">
|
||||
<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
|
||||
<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const customBase64Uploader = async (event) => {
|
||||
import { ref } from "vue";
|
||||
|
||||
const src = ref(null);
|
||||
|
||||
function onFileSelect(event) {
|
||||
const file = event.files[0];
|
||||
const reader = new FileReader();
|
||||
let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
|
||||
|
||||
reader.readAsDataURL(blob);
|
||||
|
||||
reader.onloadend = function () {
|
||||
const base64data = reader.result;
|
||||
reader.onload = async (e) => {
|
||||
src.value = e.target.result;
|
||||
};
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async customBase64Uploader(event) {
|
||||
onFileSelect(event) {
|
||||
const file = event.files[0];
|
||||
const reader = new FileReader();
|
||||
let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
|
||||
|
||||
reader.readAsDataURL(blob);
|
||||
|
||||
reader.onloadend = function () {
|
||||
const base64data = reader.result;
|
||||
reader.onload = async (e) => {
|
||||
this.src = e.target.result;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -41,9 +41,7 @@ export default {
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
</Galleria>
|
||||
`,
|
||||
|
|
@ -55,9 +53,7 @@ export default {
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
|
|
@ -96,9 +92,7 @@ export default {
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>IconField and InputIcon does not require any roles and attributes.</p>
|
||||
<p>IconField and InputIcon do not require any roles and attributes.</p>
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Components does not include any interactive elements.</p>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>InputGroup and InputGroupAddon does not require any roles and attributes.</p>
|
||||
<p>InputGroup and InputGroupAddon do not require any roles and attributes.</p>
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,28 @@
|
|||
<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/panel.jpg" />
|
||||
</div>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="ptViewerDoc">
|
||||
<Panel header="Header" toggleable>
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ptViewerDoc: [
|
||||
{
|
||||
data: getPTOptions('Panel'),
|
||||
key: 'Panel'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,55 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>An example that displays a DataTable inside a popup to select an item.</p>
|
||||
<p>Place the Popover outside of the data iteration components to avoid rendering it multiple times.</p>
|
||||
</DocSectionText>
|
||||
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
|
||||
<div class="card">
|
||||
<DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" class="w-1/6"></Column>
|
||||
<Column field="code" header="Code" class="w-1/6"></Column>
|
||||
<Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
|
||||
<Column field="price" header="Price" sortable class="w-1/6">
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
<Column header="Image" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Details" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
|
||||
<div class="relative">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-80" />
|
||||
<Popover ref="op">
|
||||
<div v-if="selectedProduct" class="rounded flex flex-col">
|
||||
<div class="flex justify-center rounded">
|
||||
<div class="relative mx-auto">
|
||||
<img class="rounded w-44 sm:w-64" :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" />
|
||||
<Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-row justify-between items-start gap-2 mb-4">
|
||||
<div>
|
||||
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
|
||||
<div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button icon="pi pi-shopping-cart" :label="`Buy Now | \$${selectedProduct.price}`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
|
||||
<Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 mb-2">
|
||||
<span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<Popover ref="op" appendTo="body">
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</Popover>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" />
|
||||
|
|
@ -43,67 +64,103 @@ export default {
|
|||
selectedProduct: null,
|
||||
code: {
|
||||
basic: `
|
||||
<Toast />
|
||||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
|
||||
<DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" class="w-1/6"></Column>
|
||||
<Column field="code" header="Code" class="w-1/6"></Column>
|
||||
<Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
|
||||
<Column field="price" header="Price" sortable class="w-1/6">
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
<Column header="Image" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Details" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
|
||||
<div class="relative">
|
||||
<img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-16 shadow-sm" class="w-full sm:w-80" />
|
||||
<Popover ref="op">
|
||||
<div v-if="selectedProduct" class="rounded flex flex-col">
|
||||
<div class="flex justify-center rounded">
|
||||
<div class="relative mx-auto">
|
||||
<img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
|
||||
<Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-row justify-between items-start gap-2 mb-4">
|
||||
<div>
|
||||
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
|
||||
<div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
|
||||
<Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 mb-2">
|
||||
<span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<Popover ref="op" appendTo="body">
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="width: 50%"></Column>
|
||||
<Column header="Image" style="width: 20%">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="width: 30%">
|
||||
<template #body="slotProps">
|
||||
$ {{ slotProps.data.price }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</Popover>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<Toast />
|
||||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
|
||||
<div class="card">
|
||||
<DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" class="w-1/6"></Column>
|
||||
<Column field="code" header="Code" class="w-1/6"></Column>
|
||||
<Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
|
||||
<Column field="price" header="Price" sortable class="w-1/6">
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
<Column header="Image" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Details" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
|
||||
<div class="relative">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
|
||||
<Popover ref="op">
|
||||
<div v-if="selectedProduct" class="rounded flex flex-col">
|
||||
<div class="flex justify-center rounded">
|
||||
<div class="relative mx-auto">
|
||||
<img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
|
||||
<Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-row justify-between items-start gap-2 mb-4">
|
||||
<div>
|
||||
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
|
||||
<div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
|
||||
<Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 mb-2">
|
||||
<span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<Popover ref="op" appendTo="body">
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps">
|
||||
$ {{ slotProps.data.price }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -119,17 +176,39 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall()
|
||||
.then((data) => (this.products = data))
|
||||
.then(() => (this.selectedProduct = this.products[0]));
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data));
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
},
|
||||
onProductSelect(event) {
|
||||
displayProduct(event, product) {
|
||||
this.$refs.op.hide();
|
||||
this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
|
||||
|
||||
if (this.selectedProduct?.id === product.id) {
|
||||
this.selectedProduct = null;
|
||||
} else {
|
||||
this.selectedProduct = product;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.op.show(event);
|
||||
});
|
||||
}
|
||||
},
|
||||
hidePopover() {
|
||||
this.$refs.op.hide();
|
||||
},
|
||||
getSeverity(product) {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -137,62 +216,102 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<Toast />
|
||||
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
|
||||
<div class="card">
|
||||
<DataTable :value="products" :rows="5" paginator tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" class="w-1/6"></Column>
|
||||
<Column field="code" header="Code" class="w-1/6"></Column>
|
||||
<Column field="name" header="Name" class="w-1/6" bodyClass="whitespace-nowrap"></Column>
|
||||
<Column field="price" header="Price" sortable class="w-1/6">
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
<Column header="Image" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Details" class="w-1/6">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" @click="displayProduct($event, slotProps.data)" icon="pi pi-search" severity="secondary" rounded></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<div v-if="selectedProduct" class="p-8 bg-surface-0 dark:bg-surface-900 rounded border border-surface-200 dark:border-surface-700">
|
||||
<div class="relative">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-80" />
|
||||
<Popover ref="op">
|
||||
<div v-if="selectedProduct" class="rounded flex flex-col">
|
||||
<div class="flex justify-center rounded">
|
||||
<div class="relative mx-auto">
|
||||
<img class="rounded w-44 sm:w-64" :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
|
||||
<Tag :value="selectedProduct.inventoryStatus" :severity="getSeverity(selectedProduct)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-row justify-between items-start gap-2 mb-4">
|
||||
<div>
|
||||
<span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ selectedProduct.category }}</span>
|
||||
<div class="text-lg font-medium mt-1">{{ selectedProduct.name }}</div>
|
||||
</div>
|
||||
<div class="bg-surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-surface-900 font-medium text-sm">{{ selectedProduct.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button icon="pi pi-shopping-cart" :label="\`Buy Now | \\$\${selectedProduct.price}\`" :disabled="selectedProduct.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap" @click="hidePopover"></Button>
|
||||
<Button icon="pi pi-heart" outlined @click="hidePopover"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4 mb-2">
|
||||
<span class="font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-xl ml-4">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-surface-500 dark:text-surface-400">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<Popover ref="op" appendTo="body">
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps">
|
||||
$ {{ slotProps.data.price }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall()
|
||||
.then((data) => (products.value = data))
|
||||
.then(() => (selectedProduct.value = products.value[0]));
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data));
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
const op = ref();
|
||||
const products = ref();
|
||||
const selectedProduct = ref();
|
||||
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
};
|
||||
|
||||
const onProductSelect = (event) => {
|
||||
const displayProduct = (event, product) => {
|
||||
op.value.hide();
|
||||
toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
|
||||
|
||||
if (selectedProduct.value?.id === product.id) {
|
||||
selectedProduct.value = null;
|
||||
} else {
|
||||
selectedProduct.value = product;
|
||||
|
||||
nextTick(() => {
|
||||
op.value.show(event);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const hidePopover = () => {
|
||||
op.value.hide();
|
||||
}
|
||||
|
||||
const getSeverity = (product) => {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
|
|
@ -216,17 +335,39 @@ const onProductSelect = (event) => {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall()
|
||||
.then((data) => (this.products = data))
|
||||
.then(() => (this.selectedProduct = this.products[0]));
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data));
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
},
|
||||
onProductSelect(event) {
|
||||
displayProduct(event, product) {
|
||||
this.$refs.op.hide();
|
||||
this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
|
||||
|
||||
if (this.selectedProduct?.id === product.id) {
|
||||
this.selectedProduct = null;
|
||||
} else {
|
||||
this.selectedProduct = product;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.op.show(event);
|
||||
});
|
||||
}
|
||||
},
|
||||
hidePopover() {
|
||||
this.$refs.op.hide();
|
||||
},
|
||||
getSeverity(product) {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warn';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>In this sample, data is retrieved from the content inside the popover.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
|
||||
|
||||
<Popover ref="op">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-col">
|
||||
<li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedMember: null,
|
||||
members: [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
|
||||
|
||||
<Popover ref="op">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-col">
|
||||
<li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
|
||||
|
||||
<Popover ref="op">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-col">
|
||||
<li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedMember: null,
|
||||
members: [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
},
|
||||
selectMember(member) {
|
||||
this.selectedMember = member;
|
||||
this.$refs.op.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button type="button" :label="selectedMember ? selectedMember.name : 'Select Member'" @click="toggle" class="min-w-48" />
|
||||
|
||||
<Popover ref="op">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<span class="font-medium block mb-2">Team Members</span>
|
||||
<ul class="list-none p-0 m-0 flex flex-col">
|
||||
<li v-for="member in members" :key="member.name" class="flex items-center gap-2 px-2 py-3 hover:bg-emphasis cursor-pointer rounded-border" @click="selectMember(member)">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
|
||||
<div>
|
||||
<span class="font-medium">{{ member.name }}</span>
|
||||
<div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const op = ref();
|
||||
const selectedMember = ref(null);
|
||||
const members = ref([
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
|
||||
]);
|
||||
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
}
|
||||
|
||||
const selectMember = (member) => {
|
||||
selectedMember.value = member;
|
||||
op.value.hide();
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
},
|
||||
selectMember(member) {
|
||||
this.selectedMember = member;
|
||||
this.$refs.op.hide();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
|
||||
<i>aria-labelledby</i> property.
|
||||
</p>
|
||||
<p>SelectButton component uses ToggleButton internally and has <i>group</i> role. Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
|
||||
|
|
@ -19,25 +16,11 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td><i>tab</i></td>
|
||||
<td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
|
||||
<td>Moves focus to the next the focusable element in the page tab sequence.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-col">
|
||||
<i class="mb-1">right arrow</i>
|
||||
<i>up arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Moves focus to the previous option.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-col">
|
||||
<i class="mb-1">left arrow</i>
|
||||
<i>down arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Moves focus to the next option.</td>
|
||||
<td><i>shift</i> + <i>tab</i></td>
|
||||
<td>Moves focus to the previous the focusable element in the page tab sequence.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>space</i></td>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,30 @@
|
|||
Classes to apply during enter and leave animations are specified using the <i>enterFromClass</i>, <i>enterActiveClass</i>, <i>enterToClass</i>, <i>leaveFromClass</i>, <i>leaveActiveClass</i>,<i>leaveToClass</i>properties. In addition in
|
||||
case the target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
|
||||
</p>
|
||||
<p>First example uses a custom fade animation, and second one uses animate-slide from <NuxtLink to="/tailwind/#animations">tailwind-primeui</NuxtLink> plugin.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
||||
<div class="card flex items-center justify-center gap-8">
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="my-hidden animate-duration-500 box1">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-hidden animate-duration-500 box">
|
||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -23,21 +39,55 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
||||
<div class="my-hidden animate-duration-500 box">
|
||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
<div class="card flex items-center justify-center gap-8">
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="my-hidden animate-duration-500 box1">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
||||
<div class="card flex items-center justify-center gap-8">
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="my-hidden animate-duration-500 box1">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-hidden animate-duration-500 box">
|
||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -79,13 +129,28 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
|
||||
<div class="card flex items-center justify-center gap-8">
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="my-hidden animate-duration-500 box1">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-hidden animate-duration-500 box">
|
||||
<div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div>
|
||||
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
|
||||
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
|
||||
</div>
|
||||
<div class="h-32">
|
||||
<div class="hidden animate-duration-500 box2 overflow-hidden">
|
||||
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>Tab</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
|
||||
<p>Tabs is defined using <i>TabList</i>, <i>Tab</i>, <i>TabPanels</i> and <i>TabPanel</i> components. Tab and TabPanel components are associated with their <i>value</i> properties</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Tabs value="0">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,65 @@
|
|||
<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/wireframe-placeholder.jpg" />
|
||||
</div>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocPTViewer :docs="docs">
|
||||
<Tabs value="0">
|
||||
<TabList>
|
||||
<Tab value="0">Header I</Tab>
|
||||
<Tab value="1">Header II</Tab>
|
||||
<Tab value="2">Header III</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel value="0">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel value="1">
|
||||
<p class="m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel value="2">
|
||||
<p class="m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('Tabs'),
|
||||
key: 'Tabs'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('TabList'),
|
||||
key: 'TabList'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('Tab'),
|
||||
key: 'Tab'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('TabPanels'),
|
||||
key: 'TabPanels'
|
||||
},
|
||||
{
|
||||
data: getPTOptions('TabPanel'),
|
||||
key: 'TabPanel'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
The <i>@layer</i> is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" class="doc-link">MDN</a> to begin with. In styled mode, when the <i>cssLayer</i> option is enabled at theme configuration, PrimeVue wraps the built-in style classes under
|
||||
the <i>primevue</i> cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is
|
||||
written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
|
||||
written. The <i>cssLayer</i> is disabled by default to avoid compatibility issues with 3rd party CSS libraries which require a layer configuration for compatibility that is discussed in the next reset section.
|
||||
</p>
|
||||
<p>
|
||||
For example, let's assume you need to remove the rounded borders of the ToggleSwitch component defined by the theme in use. In order to achieve this, <i>.p-toggleswitch .p-toggleswitch-slider</i> selector needs to be overriden. Without
|
||||
the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
|
||||
the layers, we'd have to write a stronger css or use <i>!important</i>, however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as <i>my-switch-slider</i>.
|
||||
Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
|
||||
</p>
|
||||
<div class="card flex justify-center">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead. This
|
||||
The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building your own style, building your own preset should be preferred instead. This
|
||||
configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Returns shades and tints of a given color from 50 to 950 as an array.</p>
|
||||
<p>Returns shades and tints of a given color from 50 to 950 as an object.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props,
|
||||
it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
|
||||
that does not change related to state.
|
||||
ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
|
||||
highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
|
||||
does not change related to state.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
|
||||
<p>
|
||||
In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node obje to indicate
|
||||
In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
|
||||
selection.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.</p>
|
||||
<p>
|
||||
In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node obje to indicate
|
||||
In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node object to indicate
|
||||
selection.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Watch the short video tutorial from Çağatay Çivici to setup PrimeVue in styled mode with <a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>.</p>
|
||||
</DocSectionText>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/xW8EFqalm4I" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
<a alt="Create Vue App" href="https://github.com/vuejs/create-vue">Create-Vue</a>
|
||||
is the recommended way to start a Vite-powered Vue project.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjYesOz95MM" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<i></i>
|
||||
<div class="layout-news-content">
|
||||
<span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
|
||||
<a class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
|
||||
<a class="layout-news-link" :href="$appState.announcement.linkHref" target="_blank" rel="noopener noreferrer">{{ $appState.announcement.linkText }}</a>
|
||||
</div>
|
||||
<a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
|
||||
<span class="pi pi-times"></span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "showcase",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Configuration</h1>
|
||||
<p>Application widge configuration for PrimeVue.</p>
|
||||
<p>Application widget configuration for PrimeVue.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default {
|
|||
},
|
||||
{
|
||||
id: 'checkbox',
|
||||
label: 'Check & Radio',
|
||||
label: 'Checkbox & Radio',
|
||||
component: CheckboxDoc
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import BasicDoc from '@/doc/popover/BasicDoc.vue';
|
|||
import DataTableDoc from '@/doc/popover/DataTableDoc.vue';
|
||||
import ImportDoc from '@/doc/popover/ImportDoc.vue';
|
||||
import PTComponent from '@/doc/popover/pt/index.vue';
|
||||
import SelectDataDoc from '@/doc/popover/SelectDataDoc.vue';
|
||||
import ThemingDoc from '@/doc/popover/theming/index.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -32,6 +33,11 @@ export default {
|
|||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'selectdata',
|
||||
label: 'Select Data',
|
||||
component: SelectDataDoc
|
||||
},
|
||||
{
|
||||
id: 'datatable',
|
||||
label: 'DataTable',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<template>
|
||||
<DocComponent title="Vue ProgressSpinner Component" header="ProgressSpinner" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressSpinner']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
|
||||
<DocComponent
|
||||
title="Vue ProgressSpinner Component"
|
||||
header="ProgressSpinner"
|
||||
description="ProgressSpinner is a process status indicator."
|
||||
:componentDocs="docs"
|
||||
:apiDocs="['ProgressSpinner']"
|
||||
:ptTabComponent="ptComponent"
|
||||
:themingDocs="themingDoc"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -67,15 +67,24 @@
|
|||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Layout, Typography, Tab orientations, Navigation Drawer.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Form Library</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Built-in form library with validations.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Components</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">New Carousel, Tab Orientations, Updated Menu, Navigation Drawer...</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Form Library</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Built-in form library with validations.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Simplified usage in unstyled mode, typescript support, install via npx.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
|
|
@ -94,11 +103,9 @@
|
|||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Suite ... 2025</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, Calendar, Timeline, Editor.</p>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">PrimeVue+ Suite | 2025</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, PDF Viewer, Calendar, Timeline, Editor.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
|
|
@ -113,7 +120,7 @@
|
|||
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 1</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-indigo-500 rounded" style="width: 50%; height: 4px"></div>
|
||||
<div class="bg-indigo-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,9 +129,11 @@
|
|||
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 2</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-indigo-500 rounded" style="width: 50%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Build a Figma plugin to generate themes from UI Kit.</p>
|
||||
|
|
@ -133,7 +142,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
|
||||
<div class="shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
|
||||
|
|
@ -144,7 +152,7 @@
|
|||
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Interactive component viewer to explore tokens and pt sections.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-teal-500 rounded" style="width: 25%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -159,37 +167,37 @@
|
|||
<h2 class="text-lg font-bold mt-0 mb-2">V4 Update</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Update all templates to PrimeVue v4, replace PrimeFlex demos with Tailwind.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-violet-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Genesis</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Brand new template application.</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Brand new multi-purpose template.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
<div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
|
||||
<div class="shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Migrate Blocks to Tailwind CSS.</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Migrate Blocks to v4 and Tailwind CSS.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-orange-500 rounded" style="width: 50%; height: 4px"></div>
|
||||
<div class="bg-orange-500 rounded" style="width: 90%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Implement a SaaS app to access the blocks instead of an offline download.</p>
|
||||
<p class="mt-0 mb-4 leading-normal">Implement an app to access the blocks instead of an offline download.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
|
||||
<div class="bg-orange-500 rounded" style="width: 90%; height: 4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,7 +207,7 @@
|
|||
<div class="shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
|
||||
<h2 class="text-lg font-bold mt-0 mb-2">New Aura Theme</h2>
|
||||
<p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
|
||||
<div class="bg-surface-200 rounded">
|
||||
<div class="bg-pink-500 rounded" style="width: 100%; height: 4px"></div>
|
||||
|
|
@ -207,6 +215,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="flex-1 flex gap-4 flex-col">
|
||||
<div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
|
||||
|
|
@ -218,7 +227,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex gap-4 flex-col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `
|
||||
Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
{
|
||||
id: 2,
|
||||
title: 'Component Themes',
|
||||
description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
|
||||
description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create your own theme by defining couple SASS variables.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-component-themes.png'
|
||||
},
|
||||
{
|
||||
|
|
@ -165,7 +165,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `
|
||||
Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `
|
||||
Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `
|
||||
Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `
|
||||
Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `
|
||||
Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default {
|
|||
{
|
||||
id: 2,
|
||||
title: 'Component Themes',
|
||||
description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
|
||||
description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create your own theme by defining couple SASS variables.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-component-themes.png'
|
||||
},
|
||||
{
|
||||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
},
|
||||
slots: {
|
||||
description2: `
|
||||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||||
Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the
|
||||
template and requires a separate purchase.`,
|
||||
description4: `Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||||
<a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import ExamplesDoc from '@/doc/vite/ExamplesDoc.vue';
|
|||
import StyledModeDoc from '@/doc/vite/StyledModeDoc.vue';
|
||||
import UnstyledModeDoc from '@/doc/vite/UnstyledModeDoc.vue';
|
||||
import UsageDoc from '@/doc/vite/UsageDoc.vue';
|
||||
import VideoDoc from '@/doc/vite/VideoDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -58,6 +59,11 @@ export default {
|
|||
id: 'examples',
|
||||
label: 'Examples',
|
||||
component: ExamplesDoc
|
||||
},
|
||||
{
|
||||
id: 'video',
|
||||
label: 'Video',
|
||||
component: VideoDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/monorepo",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"homepage": "https://primevue.org/",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/auto-import-resolver",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/core",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
|
|
@ -161,15 +161,7 @@ export declare function usePrimeVue(): {
|
|||
declare const plugin: Plugin;
|
||||
export default plugin;
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$primevue: {
|
||||
config: PrimeVueConfiguration;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$primevue: {
|
||||
config: PrimeVueConfiguration;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/icons",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/metadata",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/nuxt-module",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "Nuxt module for PrimeVue",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
"@types/node": "^18.17.17",
|
||||
"@nuxt/devtools": "^0.8.5",
|
||||
"@nuxt/eslint-config": "^0.2.0",
|
||||
"@nuxt/module-builder": "^0.5.1",
|
||||
"@nuxt/module-builder": "^0.8.3",
|
||||
"@nuxt/schema": "^3.7.3",
|
||||
"@nuxt/test-utils": "^3.7.3",
|
||||
"changelogen": "^0.5.5",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "primevue",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
|
|
@ -180,6 +180,17 @@ const DialogEvents = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'dragstart',
|
||||
description: 'Fired when a dialog drag begins.',
|
||||
arguments: [
|
||||
{
|
||||
name: 'event',
|
||||
type: 'object',
|
||||
description: 'Event Object'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'dragend',
|
||||
description: 'Fired when a dialog drag completes.',
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export interface ChartProps {
|
|||
/**
|
||||
* Used to custom plugins of the chart.
|
||||
*/
|
||||
plugins?: any;
|
||||
plugins?: any[];
|
||||
/**
|
||||
* Width of the chart in non-responsive mode.
|
||||
* @defaultValue 300
|
||||
|
|
|
|||
|
|
@ -642,7 +642,7 @@ export interface ColumnContext {
|
|||
*/
|
||||
export interface ColumnSlots {
|
||||
/**
|
||||
* Custom body template.
|
||||
* Custom body template for DataTable.
|
||||
* @param {Object} scope - body slot's params.
|
||||
*/
|
||||
body(scope: {
|
||||
|
|
@ -681,6 +681,46 @@ export interface ColumnSlots {
|
|||
*/
|
||||
rowTogglerCallback: (event: Event) => void;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom body template for TreeTable.
|
||||
* @param {Object} scope - body slot's params.
|
||||
*/
|
||||
node(scope: {
|
||||
/**
|
||||
* Row data.
|
||||
*/
|
||||
data: any;
|
||||
/**
|
||||
* Row node data.
|
||||
*/
|
||||
node: any;
|
||||
/**
|
||||
* Column node.
|
||||
*/
|
||||
column: ColumnNode;
|
||||
/**
|
||||
* Column field.
|
||||
*/
|
||||
field: string;
|
||||
/**
|
||||
* Row index.
|
||||
*/
|
||||
index: number;
|
||||
/**
|
||||
* Whether the row is frozen.
|
||||
*/
|
||||
frozenRow: boolean;
|
||||
/**
|
||||
* Editor init callback function
|
||||
* @param {Event} event - Browser event
|
||||
*/
|
||||
editorInitCallback: (event: Event) => void;
|
||||
/**
|
||||
* Row toggler callback unction
|
||||
* @param {Event} event - Browser event
|
||||
*/
|
||||
rowTogglerCallback: (event: Event) => void;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom header template.
|
||||
* @param {Object} scope - header slot's params.
|
||||
|
|
|
|||
|
|
@ -27,13 +27,7 @@ export interface ConfirmationServiceMethods {
|
|||
close(): void;
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$confirm: ConfirmationServiceMethods;
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$confirm: ConfirmationServiceMethods;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ export default {
|
|||
getPTOptions(key, processedItem, index) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
item: processedItem,
|
||||
item: processedItem.item,
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem),
|
||||
disabled: this.isItemDisabled(processedItem),
|
||||
|
|
|
|||
|
|
@ -621,7 +621,7 @@ export interface DataTableStateEvent {
|
|||
/**
|
||||
* Comma separated list of column widths
|
||||
*/
|
||||
columWidths: string[];
|
||||
columnWidths: string[];
|
||||
/**
|
||||
* Order of the columns
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -458,7 +458,7 @@ describe('DataTable.vue', () => {
|
|||
await wrapper.setProps({ selection: null, selectionMode: 'single' });
|
||||
|
||||
await wrapper.vm.onRowClick({
|
||||
originalEvent: { target: wrapper.findAll('tr.p-datatable-selectable-row')[0].element },
|
||||
originalEvent: { currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[0].element },
|
||||
data: smallData[0],
|
||||
index: 0
|
||||
});
|
||||
|
|
@ -472,13 +472,13 @@ describe('DataTable.vue', () => {
|
|||
await wrapper.setProps({ selection: null, selectionMode: 'multiple' });
|
||||
|
||||
await wrapper.vm.onRowClick({
|
||||
originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-datatable-selectable-row')[0].element },
|
||||
originalEvent: { shiftKey: true, currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[0].element },
|
||||
data: smallData[0],
|
||||
index: 0
|
||||
});
|
||||
|
||||
await wrapper.vm.onRowClick({
|
||||
originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-datatable-selectable-row')[1].element },
|
||||
originalEvent: { shiftKey: true, currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[1].element },
|
||||
data: smallData[1],
|
||||
index: 1
|
||||
});
|
||||
|
|
@ -492,13 +492,13 @@ describe('DataTable.vue', () => {
|
|||
await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false });
|
||||
|
||||
await wrapper.vm.onRowClick({
|
||||
originalEvent: { target: wrapper.findAll('.p-datatable-selectable-row')[0].element },
|
||||
originalEvent: { currentTarget: wrapper.findAll('.p-datatable-selectable-row')[0].element },
|
||||
data: smallData[0],
|
||||
index: 0
|
||||
});
|
||||
|
||||
await wrapper.vm.onRowClick({
|
||||
originalEvent: { target: wrapper.findAll('tr.p-datatable-selectable-row')[1].element },
|
||||
originalEvent: { currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[1].element },
|
||||
data: smallData[1],
|
||||
index: 1
|
||||
});
|
||||
|
|
|
|||
|
|
@ -280,29 +280,29 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api';
|
||||
import { HelperSet, UniqueComponentId, getVNodeProp } from '@primevue/core/utils';
|
||||
import {
|
||||
getAttribute,
|
||||
clearSelection,
|
||||
findSingle,
|
||||
isClickable,
|
||||
find,
|
||||
focus,
|
||||
exportCSV,
|
||||
getOffset,
|
||||
addStyle,
|
||||
getIndex,
|
||||
getOuterWidth,
|
||||
getHiddenElementOuterWidth,
|
||||
getHiddenElementOuterHeight,
|
||||
getWindowScrollTop,
|
||||
getOuterHeight,
|
||||
removeClass,
|
||||
addClass,
|
||||
addStyle,
|
||||
clearSelection,
|
||||
exportCSV,
|
||||
find,
|
||||
findSingle,
|
||||
focus,
|
||||
getAttribute,
|
||||
getHiddenElementOuterHeight,
|
||||
getHiddenElementOuterWidth,
|
||||
getIndex,
|
||||
getOffset,
|
||||
getOuterHeight,
|
||||
getOuterWidth,
|
||||
getWindowScrollTop,
|
||||
isClickable,
|
||||
removeClass,
|
||||
setAttribute
|
||||
} from '@primeuix/utils/dom';
|
||||
import { resolveFieldData, localeComparator, sort, findIndexInList, equals, reorderArray, isNotEmpty, isEmpty } from '@primeuix/utils/object';
|
||||
import { equals, findIndexInList, isEmpty, isNotEmpty, localeComparator, reorderArray, resolveFieldData, sort } from '@primeuix/utils/object';
|
||||
import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api';
|
||||
import { HelperSet, UniqueComponentId, getVNodeProp } from '@primevue/core/utils';
|
||||
import ArrowDownIcon from '@primevue/icons/arrowdown';
|
||||
import ArrowUpIcon from '@primevue/icons/arrowup';
|
||||
import SpinnerIcon from '@primevue/icons/spinner';
|
||||
|
|
@ -736,7 +736,7 @@ export default {
|
|||
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
|
||||
const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
|
||||
|
||||
if (isClickable(event.target)) {
|
||||
if (isClickable(event.currentTarget)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -813,9 +813,9 @@ export default {
|
|||
this.rowTouched = false;
|
||||
|
||||
if (focusedItem) {
|
||||
if (event.target?.getAttribute('data-pc-section') === 'rowtoggleicon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
|
||||
if (event.currentTarget?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
|
||||
|
||||
const targetRow = event.target?.closest('tr[data-p-selectable-row="true"]');
|
||||
const targetRow = event.currentTarget?.closest('tr[data-p-selectable-row="true"]');
|
||||
|
||||
focusedItem.tabIndex = '-1';
|
||||
targetRow.tabIndex = '0';
|
||||
|
|
|
|||
|
|
@ -76,4 +76,26 @@ describe('DatePicker.vue', () => {
|
|||
expect(wrapper.find('.p-datepicker-decade').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-datepicker-decade').text()).toBe('1980 - 1989');
|
||||
});
|
||||
|
||||
it('should not show other months when showOtherMonths is false', async () => {
|
||||
const dateOne = new Date();
|
||||
|
||||
dateOne.setFullYear(1988, 5, 15);
|
||||
|
||||
await wrapper.setProps({ modelValue: dateOne, showOtherMonths: false });
|
||||
|
||||
const input = wrapper.find('.p-datepicker-input');
|
||||
|
||||
await input.trigger('focus');
|
||||
|
||||
expect(wrapper.find('.p-datepicker-other-month span').exists()).toBe(false);
|
||||
|
||||
await input.trigger('blur');
|
||||
|
||||
await wrapper.setProps({ showOtherMonths: true });
|
||||
|
||||
await input.trigger('focus');
|
||||
|
||||
expect(wrapper.find('.p-datepicker-other-month span').exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
<div :class="cx('header')" v-bind="ptm('header')">
|
||||
<slot name="header"></slot>
|
||||
<Button
|
||||
v-show="showOtherMonths ? groupIndex === 0 : false"
|
||||
v-show="groupIndex === 0"
|
||||
:ref="previousButtonRef"
|
||||
:class="cx('pcPrevButton')"
|
||||
:disabled="disabled"
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<Button
|
||||
v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
|
||||
v-show="numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1"
|
||||
:ref="nextButtonRef"
|
||||
:class="cx('pcNextButton')"
|
||||
:disabled="disabled"
|
||||
|
|
@ -223,6 +223,7 @@
|
|||
data-pc-group-section="tablebodycell"
|
||||
>
|
||||
<span
|
||||
v-if="showOtherMonths || !date.otherMonth"
|
||||
v-ripple
|
||||
:class="cx('day', { date })"
|
||||
@click="onDateSelect($event, date)"
|
||||
|
|
@ -727,7 +728,7 @@ export default {
|
|||
return this.modelValue.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
|
||||
} else if (this.isRangeSelection()) {
|
||||
if (!this.modelValue[1]) {
|
||||
return this.modelValue[0].getFullYear() === this.currentYear && this.modelValue[0].getMonth() === month;
|
||||
return this.modelValue[0]?.getFullYear() === this.currentYear && this.modelValue[0]?.getMonth() === month;
|
||||
} else {
|
||||
const currentDate = new Date(this.currentYear, month, 1);
|
||||
const startDate = new Date(this.modelValue[0].getFullYear(), this.modelValue[0].getMonth(), 1);
|
||||
|
|
@ -906,16 +907,12 @@ export default {
|
|||
this.overlay = null;
|
||||
},
|
||||
onPrevButtonClick(event) {
|
||||
if (this.showOtherMonths) {
|
||||
this.navigationState = { backward: true, button: true };
|
||||
this.navBackward(event);
|
||||
}
|
||||
this.navigationState = { backward: true, button: true };
|
||||
this.navBackward(event);
|
||||
},
|
||||
onNextButtonClick(event) {
|
||||
if (this.showOtherMonths) {
|
||||
this.navigationState = { backward: false, button: true };
|
||||
this.navForward(event);
|
||||
}
|
||||
this.navigationState = { backward: false, button: true };
|
||||
this.navForward(event);
|
||||
},
|
||||
navBackward(event) {
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -401,6 +401,11 @@ export interface DialogEmitsOptions {
|
|||
* @param {event} event - Browser event.
|
||||
*/
|
||||
unmaximize(event: Event): void;
|
||||
/**
|
||||
* Fired when a dialog drag begins.
|
||||
* @param {event} event - Browser event.
|
||||
*/
|
||||
dragstart(event: Event): void;
|
||||
/**
|
||||
* Fired when a dialog drag completes.
|
||||
* @param {event} event - Browser event.
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
name: 'Dialog',
|
||||
extends: BaseDialog,
|
||||
inheritAttrs: false,
|
||||
emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
|
||||
emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragstart', 'dragend'],
|
||||
provide() {
|
||||
return {
|
||||
dialogRef: computed(() => this._instance)
|
||||
|
|
@ -163,6 +163,10 @@ export default {
|
|||
if (this.modal) {
|
||||
!this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
|
||||
}
|
||||
|
||||
if (this.dragging && this.documentDragEndListener) {
|
||||
this.documentDragEndListener();
|
||||
}
|
||||
},
|
||||
onLeave() {
|
||||
this.$emit('hide');
|
||||
|
|
@ -320,6 +324,8 @@ export default {
|
|||
this.container.style.margin = '0';
|
||||
document.body.setAttribute('data-p-unselectable-text', 'true');
|
||||
!this.isUnstyled && addStyle(document.body, { 'user-select': 'none' });
|
||||
|
||||
this.$emit('dragstart', event);
|
||||
}
|
||||
},
|
||||
bindGlobalListeners() {
|
||||
|
|
|
|||
|
|
@ -26,13 +26,7 @@ export interface DialogServiceMethods {
|
|||
open(content: any, options?: DynamicDialogOptions): DynamicDialogInstance;
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$dialog: DialogServiceMethods;
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$dialog: DialogServiceMethods;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@ export default {
|
|||
watch: {
|
||||
dismissable(newValue) {
|
||||
if (newValue) {
|
||||
this.bindOutsideClickListener();
|
||||
this.enableDocumentSettings();
|
||||
} else {
|
||||
this.unbindOutsideClickListener();
|
||||
this.disableDocumentSettings();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -274,16 +274,6 @@ export interface FileUploadPassThroughOptions {
|
|||
* Used to pass attributes to the empty's DOM element.
|
||||
*/
|
||||
empty?: FileUploadPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the messages' DOM element.
|
||||
* @see {@link MessagePassThroughOptions}
|
||||
*/
|
||||
pcMessages?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the basic mode's button's DOM element.
|
||||
* @see {@link ButtonPassThroughOptions}
|
||||
*/
|
||||
pcButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
@ -314,7 +304,7 @@ export interface FileUploadState {
|
|||
/**
|
||||
* Current messages.
|
||||
*/
|
||||
messages: any[];
|
||||
messages: string[] | null;
|
||||
/**
|
||||
* Current progress state as a number.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -55,11 +55,23 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')">
|
||||
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessages')">{{ msg }}</Message>
|
||||
<Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('pcButton')">
|
||||
<Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessage')">{{ msg }}</Message>
|
||||
<Button
|
||||
:label="chooseButtonLabel"
|
||||
:class="chooseButtonClass"
|
||||
:style="style"
|
||||
:disabled="disabled"
|
||||
:unstyled="unstyled"
|
||||
@mouseup="onBasicUploaderClick"
|
||||
@keydown.enter="choose"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
v-bind="chooseButtonProps"
|
||||
:pt="ptm('pcChooseButton')"
|
||||
>
|
||||
<template #icon="iconProps">
|
||||
<slot name="chooseicon">
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
|
||||
<component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcChooseButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* IconField wraps an input and an icon.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/inputtext/)
|
||||
* [Live Demo](https://www.primevue.org/iconfield/)
|
||||
*
|
||||
* @module iconfield
|
||||
*
|
||||
|
|
@ -110,7 +110,7 @@ export declare type IconFieldEmits = EmitFn<IconFieldEmitsOptions>;
|
|||
*
|
||||
* _IconField is used to select a boolean value._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/inputtext/)
|
||||
* [Live Demo](https://www.primevue.org/iconfield/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
|
|
|
|||
|
|
@ -86,9 +86,9 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-image-action:focus-visible {
|
||||
box-shadow: ${dt('toolbar.action.focus.ring.shadow')};
|
||||
outline: ${dt('toolbar.action.focus.ring.width')} ${dt('toolbar.action.focus.ring.style')} ${dt('toolbar.action.focus.ring.color')};
|
||||
outline-offset: ${dt('toolbar.action.focus.ring.offset')};
|
||||
box-shadow: ${dt('image.action.focus.ring.shadow')};
|
||||
outline: ${dt('image.action.focus.ring.width')} ${dt('image.action.focus.ring.style')} ${dt('image.action.focus.ring.color')};
|
||||
outline-offset: ${dt('image.action.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-image-action .p-icon {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ const theme = ({ dt }) => `
|
|||
top: 1px;
|
||||
right: 1px;
|
||||
height: calc(100% - 2px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-inputnumber-stacked .p-inputnumber-increment-button {
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ export default {
|
|||
break;
|
||||
|
||||
default:
|
||||
if ((this.integerOnly && !(Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
|
||||
if ((this.integerOnly && !(event.code !== 'Space' && Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
|
|
@ -177,7 +177,7 @@ export default {
|
|||
let paste = event.clipboardData.getData('text');
|
||||
|
||||
if (paste.length) {
|
||||
let pastedCode = paste.substring(0, this.length + 1);
|
||||
let pastedCode = paste.substring(0, this.length);
|
||||
|
||||
if (!this.integerOnly || !isNaN(pastedCode)) {
|
||||
this.tokens = pastedCode.split('');
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
@keydown="onFilterKeyDown"
|
||||
:pt="ptm('pcFilter')"
|
||||
/>
|
||||
<InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
|
||||
<InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
|
||||
<slot name="filtericon">
|
||||
<span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
|
||||
<SearchIcon v-else v-bind="ptm('filterIcon')" />
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
getPTOptions(processedItem, index, key) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
item: processedItem,
|
||||
item: processedItem.item,
|
||||
index,
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem),
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ export default {
|
|||
getPTOptions(processedItem, index, key) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
item: processedItem,
|
||||
item: processedItem.item,
|
||||
index,
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem),
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
@input="onFilterChange"
|
||||
:pt="ptm('pcFilter')"
|
||||
/>
|
||||
<InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
|
||||
<InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
|
||||
<slot name="filtericon">
|
||||
<span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
|
||||
<SearchIcon v-else v-bind="ptm('filterIcon')" />
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ export default {
|
|||
getPTOptions(key, processedItem, index) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
item: processedItem,
|
||||
item: processedItem.item,
|
||||
index,
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem),
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
@input="onFilterChange"
|
||||
:pt="ptm('pcFilter')"
|
||||
/>
|
||||
<InputIcon :unstyled="unstyled" v-bind="ptm('pcFilterIconContainer')">
|
||||
<InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
|
||||
<slot name="filtericon">
|
||||
<span v-if="filterIcon" :class="filterIcon" v-bind="ptm('filterIcon')" />
|
||||
<SearchIcon v-else v-bind="ptm('filterIcon')" />
|
||||
|
|
@ -495,6 +495,10 @@ export default {
|
|||
!this.virtualScrollerDisabled && this.virtualScroller.scrollToIndex(0);
|
||||
},
|
||||
onFilterKeyDown(event) {
|
||||
// Check if the event is part of a text composition process (e.g., for Asian languages).
|
||||
// If event.isComposing is true, it means the user is still composing text and the input is not finalized.
|
||||
if (event.isComposing) return;
|
||||
|
||||
switch (event.code) {
|
||||
case 'ArrowDown':
|
||||
this.onArrowDownKey(event);
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export interface SelectButtonPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the ToggleButton component.
|
||||
*/
|
||||
pcButton?: SelectButtonPassThroughOptionType;
|
||||
pcToggleButton?: SelectButtonPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
:disabled="disabled || isOptionDisabled(option)"
|
||||
:unstyled="unstyled"
|
||||
@change="onOptionSelect($event, option, index)"
|
||||
:pt="ptm('pcButton')"
|
||||
:pt="ptm('pcToggleButton')"
|
||||
>
|
||||
<template v-if="$slots.option" #default>
|
||||
<slot name="option" :option="option" :index="index">
|
||||
<span v-bind="ptm('pcButton')['label']">{{ getOptionLabel(option) }}</span>
|
||||
<span v-bind="ptm('pcToggleButton')['label']">{{ getOptionLabel(option) }}</span>
|
||||
</slot>
|
||||
</template>
|
||||
</ToggleButton>
|
||||
|
|
@ -41,15 +41,6 @@ export default {
|
|||
getOptionRenderKey(option) {
|
||||
return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
|
||||
},
|
||||
getPTOptions(option, key) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
active: this.isSelected(option),
|
||||
disabled: this.isOptionDisabled(option),
|
||||
option
|
||||
}
|
||||
});
|
||||
},
|
||||
isOptionDisabled(option) {
|
||||
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
|
||||
},
|
||||
|
|
@ -74,7 +65,6 @@ export default {
|
|||
newValue = selected ? null : optionValue;
|
||||
}
|
||||
|
||||
this.focusedIndex = index;
|
||||
this.$emit('update:modelValue', newValue);
|
||||
this.$emit('change', { event: event, value: newValue });
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
<li
|
||||
v-if="isItemVisible(item)"
|
||||
:id="`${id}_${index}`"
|
||||
:aria-controls="`${id}_item`"
|
||||
:class="cx('item', { id: `${id}_${index}` })"
|
||||
:style="getItemStyle(index)"
|
||||
role="none"
|
||||
|
|
|
|||
|
|
@ -44,6 +44,10 @@ export interface StyleClassOptions {
|
|||
* Style class to add when leave animation is completed.
|
||||
*/
|
||||
leaveToClass?: string | undefined;
|
||||
/**
|
||||
* Special class name to hide an element, only used in slide animation.
|
||||
*/
|
||||
hiddenClass?: string | undefined;
|
||||
/**
|
||||
* Whether to trigger leave animation when outside of the element is clicked.
|
||||
* @defaultValue false
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
|
|||
|
||||
if (binding.value.enterActiveClass.includes('slidedown')) {
|
||||
target.style.height = '0px';
|
||||
removeClass(target, 'hidden');
|
||||
removeClass(target, binding.value.hiddenClass || binding.value.enterFromClass);
|
||||
target.style.maxHeight = target.scrollHeight + 'px';
|
||||
addClass(target, 'hidden');
|
||||
addClass(target, binding.value.hiddenClass || binding.value.enterActiveClass);
|
||||
target.style.height = '';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ export default {
|
|||
getPTOptions(processedItem, index, key) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
item: processedItem,
|
||||
item: processedItem.item,
|
||||
index,
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem),
|
||||
|
|
|
|||
|
|
@ -39,13 +39,7 @@ export interface ToastServiceMethods {
|
|||
removeAllGroups(): void;
|
||||
}
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$toast: ToastServiceMethods;
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$toast: ToastServiceMethods;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,10 +150,6 @@ export interface ToggleButtonProps {
|
|||
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
||||
*/
|
||||
ariaLabelledby?: string | undefined;
|
||||
/**
|
||||
* Establishes a string value that labels the component.
|
||||
*/
|
||||
ariaLabel?: string | undefined;
|
||||
/**
|
||||
* It generates scoped CSS variables using design tokens for the component.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,5 +1,17 @@
|
|||
<template>
|
||||
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-checked="active" :data-p-disabled="disabled">
|
||||
<button
|
||||
v-ripple
|
||||
type="button"
|
||||
:class="cx('root')"
|
||||
:tabindex="tabindex"
|
||||
:disabled="disabled"
|
||||
:aria-pressed="modelValue"
|
||||
@click="onChange"
|
||||
v-bind="getPTOptions('root')"
|
||||
:aria-labelledby="ariaLabelledby"
|
||||
:data-p-checked="active"
|
||||
:data-p-disabled="disabled"
|
||||
>
|
||||
<span :class="cx('content')" v-bind="getPTOptions('content')">
|
||||
<slot>
|
||||
<slot name="icon" :value="modelValue" :class="cx('icon')">
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ export interface TreePassThroughOptions<T = any> {
|
|||
* Used to pass attributes to the InputText component.
|
||||
* @see {@link InputTextPassThroughOptions}
|
||||
*/
|
||||
pcFilter?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
|
||||
pcFilterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
|
||||
/**
|
||||
* Used to pass attributes to the InputIcon component.
|
||||
* @see {@link InputIconPassThroughOptions}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<IconField v-if="filter" :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
|
||||
<InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilter')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" :pt="ptm('pcFilter')" />
|
||||
<InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" :pt="ptm('pcFilterInput')" />
|
||||
<InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
|
||||
<!--TODO: searchicon deprecated since v4.0-->
|
||||
<slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { find, findSingle, focus, getAttribute, isClickable } from '@primeuix/utils/dom';
|
||||
import { resolveFieldData } from '@primeuix/utils/object';
|
||||
import BaseComponent from '@primevue/core/basecomponent';
|
||||
import { getVNodeProp } from '@primevue/core/utils';
|
||||
import { isClickable, getAttribute, findSingle, focus, find } from '@primeuix/utils/dom';
|
||||
import { resolveFieldData } from '@primeuix/utils/object';
|
||||
import BodyCell from './BodyCell.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -143,7 +143,7 @@ export default {
|
|||
this.$emit('node-toggle', this.node);
|
||||
},
|
||||
onClick(event) {
|
||||
if (isClickable(event.target) || getAttribute(event.target, 'data-pc-section') === 'rowtogglebutton' || getAttribute(event.target, 'data-pc-section') === 'rowtoggleicon' || event.target.tagName === 'path') {
|
||||
if (isClickable(event.target) || getAttribute(event.target, 'data-pc-section') === 'nodetogglebutton' || getAttribute(event.target, 'data-pc-section') === 'rowtoggleicon' || event.target.tagName === 'path') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -221,7 +221,7 @@ export default {
|
|||
},
|
||||
onArrowRightKey(event) {
|
||||
const ishiddenIcon = findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
|
||||
const togglerElement = findSingle(this.$refs.node, '[data-pc-section="rowtogglebutton"]');
|
||||
const togglerElement = findSingle(this.$refs.node, '[data-pc-section="nodetogglebutton"]');
|
||||
|
||||
if (ishiddenIcon) return;
|
||||
|
||||
|
|
@ -240,7 +240,7 @@ export default {
|
|||
|
||||
const currentTarget = event.currentTarget;
|
||||
const ishiddenIcon = findSingle(currentTarget, 'button').style.visibility === 'hidden';
|
||||
const togglerElement = findSingle(currentTarget, '[data-pc-section="rowtogglebutton"]');
|
||||
const togglerElement = findSingle(currentTarget, '[data-pc-section="nodetogglebutton"]');
|
||||
|
||||
if (this.expanded && !ishiddenIcon) {
|
||||
togglerElement.click();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@primevue/themes",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.7",
|
||||
"author": "PrimeTek Informatics",
|
||||
"description": "",
|
||||
"homepage": "https://primevue.org/",
|
||||
|
|
|
|||
2381
pnpm-lock.yaml
2381
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -2,31 +2,31 @@
|
|||
"publishedPackages": [
|
||||
{
|
||||
"name": "@primevue/core",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
},
|
||||
{
|
||||
"name": "@primevue/metadata",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
},
|
||||
{
|
||||
"name": "@primevue/themes",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
},
|
||||
{
|
||||
"name": "@primevue/auto-import-resolver",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
},
|
||||
{
|
||||
"name": "@primevue/icons",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
},
|
||||
{
|
||||
"name": "primevue",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
},
|
||||
{
|
||||
"name": "@primevue/nuxt-module",
|
||||
"version": "4.0.4"
|
||||
"version": "4.0.7"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue