+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"></script>
+<script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"></script>
+
import AutoComplete from 'primevue/autocomplete';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/autocomplete/autocomplete.min.js"></script>
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"></script>
+<script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"></script>
+
import Badge from 'primevue/badge';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/badge/badge.min.js"></script>
+
Content of the badge is specified using the value property.
@@ -19,6 +26,13 @@ import Badge from 'primevue/badge';
import BadgeDirective from 'primevue/badgedirective';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"></script>
+
When used as a directive, badge needs to be configured at the application with a name of your choice.
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue index a75006197..99249ccca 100755 --- a/src/views/blockui/BlockUIDoc.vue +++ b/src/views/blockui/BlockUIDoc.vue @@ -4,6 +4,13 @@
import BlockUI from 'primevue/blockui';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"></script>
+
import Breadcrumb from 'primevue/breadcrumb';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"></script>
+
-<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
import Calendar from 'primevue/calendar';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"></script>
+
import Card from 'primevue/card';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/card/card.min.js"></script>
+
import Carousel from 'primevue/carousel';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"></script>
+
import CascadeSelect from 'primevue/cascadeselect';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/cascadeselect/cascadeselect.min.js"></script>
+
import Chart from 'primevue/chart';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/chart/chart.min.js"></script>
+
import Checkbox from 'primevue/checkbox';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"></script>
+
import Chip from 'primevue/chip';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"></script>
+
import Chips from 'primevue/chips';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/chips/chips.min.js"></script>
+
import ColorPicker from 'primevue/colorpicker';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"></script>
+
import ConfirmDialog from 'primevue/confirmdialog';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"></script>
+
import ConfirmPopup from 'primevue/confirmpopup';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"></script>
+
import ContextMenu from 'primevue/contextmenu';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"></script>
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"></script>
+<script src="https://unpkg.com/primevue@^3/column/column.min.js"></script>
+<script src="https://unpkg.com/primevue@^3/columngroup/columngroup.min.js"></script>
+
import DataView from 'primevue/dataview';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"></script>
+
import DeferredContent from 'primevue/deferredcontent';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"></script>
+
import Dialog from 'primevue/dialog';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+
import Divider from 'primevue/divider';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/divider/divider.min.js"></script>
+
Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the model property.
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"></script>
+
+Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the model property.
<Dock :model="items" />
@@ -43,113 +50,113 @@ import Dock from 'primevue/dock';
Dock uses the common MenuModel API to define the items, visit
Dock uses the common MenuModel API to define the items, visit
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| model | -object | -null | -MenuModel instance to define the action items. | -
| position | -string | -bottom | -Position of element. Valid values are 'bottom', 'top', 'left' and 'right'. | -
| class | -string | -null | -Style class of the element. | -
| style | -object | -null | -Inline style of the element. | -
| exact | -boolean | -true | -Whether to apply 'router-link-active-exact' class if route exactly matches the item path. | -
| tooltipOptions | -object | -null | -Whether to display the tooltip on items. The modifiers of |
-
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| model | +object | +null | +MenuModel instance to define the action items. | +
| position | +string | +bottom | +Position of element. Valid values are 'bottom', 'top', 'left' and 'right'. | +
| class | +string | +null | +Style class of the element. | +
| style | +object | +null | +Inline style of the element. | +
| exact | +boolean | +true | +Whether to apply 'router-link-active-exact' class if route exactly matches the item path. | +
| tooltipOptions | +object | +null | +Whether to display the tooltip on items. The modifiers of |
+
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-dock | -Container element. | -
| p-dock-list | -List of items. | -
| p-dock-item | -Each items in list. | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-dock | +Container element. | +
| p-dock-list | +List of items. | +
| p-dock-item | +Each items in list. | +
| Name | -Parameters | -
|---|---|
| item | -item: Custom content for item | -
| icon | -item: Custom content for icon | -
| Name | +Parameters | +
|---|---|
| item | +item: Custom content for item | +
| icon | +item: Custom content for icon | +
None.
+None.
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue index 6b261924a..616bf37ef 100755 --- a/src/views/dropdown/DropdownDoc.vue +++ b/src/views/dropdown/DropdownDoc.vue @@ -4,6 +4,12 @@
import Dropdown from 'primevue/dropdown';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+
import Editor from 'primevue/editor';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/editor/editor.min.js"></script>
+
import Fieldset from 'primevue/fieldset';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"></script>
+
import FileUpload from 'primevue/fileupload';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"></script>
+
import {FilterService} from 'primevue/api';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+
Filters are accessed with FilterService.filters.
-const value = 'PrimeNG';
+const value = 'PrimeVue';
-FilterService.filters.equals(value, 'NG'); //false
+FilterService.filters.equals(value, 'Vue'); //false
FilterService.filters.equals(value, 8); //false
FilterService.filters.equals(value, new Date()); //false
-FilterService.filters.contains(value, 'NG'); //true
-FilterService.filters.startsWith(value, 'NG'); //false
-FilterService.filters.endsWith(value, 'NG'); //true
+FilterService.filters.contains(value, 'Vue'); //true
+FilterService.filters.startsWith(value, 'Vue'); //false
+FilterService.filters.endsWith(value, 'Vue'); //true
FilterService.filters.lt(10, 20); //true
FilterService.filters.gt(50, 20); //true
-FilterService.filters.in(value, ['PrimeFaces', 'PrimeNG']); //true
+FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']); //true
import Galleria from 'primevue/galleria';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/galleria/galleria.min.js"></script>
+
import Image from 'primevue/image';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/image/image.min.js"></script>
+
Inplace requires display and content templates to define the content of each state.
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/inplace/inplace.min.js"></script>
+
+Inplace requires display and content templates to define the content of each state.
<Inplace>
@@ -22,8 +29,8 @@ import Inplace from 'primevue/inplace';
closable property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.
+closable property is handy within forms as it enables to switch back to output mode after editing is completed using a button displayed next to the form field.
<Inplace :closable="true">
<template #display>
@@ -36,8 +43,8 @@ import Inplace from 'primevue/inplace';
Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.
+Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table if the user decides to open the inplace.
<Inplace @open="loadData">
<template #display>
@@ -77,117 +84,117 @@ export default {
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-| Name | -Type | -Default | -Description | -
|---|---|---|---|
| active | -boolean | -false | -Whether the content is displayed or not. | -
| closable | -boolean | -false | -Displays a button to switch back to display mode. | -
| disabled | -boolean | -false | -When present, it specifies that the element should be disabled. | -
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| active | +boolean | +false | +Whether the content is displayed or not. | +
| closable | +boolean | +false | +Displays a button to switch back to display mode. | +
| disabled | +boolean | +false | +When present, it specifies that the element should be disabled. | +
| Name | -Parameters | -Description | -
|---|---|---|
| open | -event: browser event | -Callback to invoke when inplace is opened. | -
| close | -event: browser event | -Callback to invoke when inplace is closed. | -
| Name | +Parameters | +Description | +
|---|---|---|
| open | +event: browser event | +Callback to invoke when inplace is opened. | +
| close | +event: browser event | +Callback to invoke when inplace is closed. | +
| Name | -Parameters | -
|---|---|
| display | -- | -
| content | -- | -
| Name | +Parameters | +
|---|---|
| display | +- | +
| content | +- | +
Following is the list of structural style classes, for theming classes visit
| Name | -Element | -
|---|---|
| p-inplace | -Container element | -
| p-inplace-display | -Display container | -
| p-inplace-content | -Content container | -
Following is the list of structural style classes, for theming classes visit
| Name | +Element | +
|---|---|
| p-inplace | +Container element | +
| p-inplace-display | +Display container | +
| p-inplace-content | +Content container | +
None.
+None.
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue index f5587cc3e..7089c8a5c 100755 --- a/src/views/inputmask/InputMaskDoc.vue +++ b/src/views/inputmask/InputMaskDoc.vue @@ -4,6 +4,13 @@
import InputMask from 'primevue/inputmask';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"></script>
+
import InputNumber from 'primevue/inputnumber';
+
+<script src="https://unpkg.com/primevue@^3/core/core.js"></script>
+