2022-09-09 20:41:18 +00:00
< template >
2022-12-08 12:26:57 +00:00
< AppDoc name = "InplaceDemo" :sources ="sources" :service ="['ProductService']" :data ="['products-small']" github = "inplace/InplaceDemo.vue" >
< h5 > Import via Module < / h5 >
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
import Inplace from 'primevue/inplace' ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Import via CDN < / h5 >
< pre v-code > < code >
2022-09-09 20:41:18 +00:00
& lt ; script src = "https://unpkg.com/primevue@^3/core/core.min.js" & gt ; & lt ; / s c r i p t & g t ;
& lt ; script src = "https://unpkg.com/primevue@^3/inplace/inplace.min.js" & gt ; & lt ; / s c r i p t & g t ;
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Getting Started < / h5 >
< p > Inplace requires < i > display < / i > and < i > content < / i > templates to define the content of each state . < / p >
2022-09-09 20:41:18 +00:00
2022-12-08 12:26:57 +00:00
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; Inplace & gt ;
& lt ; template # display & gt ;
& lt ; span class = "pi pi-search" style = "vertical-align: middle" & gt ; & lt ; / s p a n & g t ;
& lt ; span style = "margin-left:.5rem; vertical-align: middle" & gt ; View Picture & lt ; / s p a n & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; template # content & gt ;
2022-12-08 12:26:57 +00:00
& lt ; img src = "demo/images/nature/nature1.jpg" / & gt ;
2022-09-09 20:41:18 +00:00
& lt ; / t e m p l a t e & g t ;
& lt ; / I n p l a c e & g t ;
< / template >
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Closable < / h5 >
< p > < i > closable < / i > 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 . < / p >
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; Inplace : closable = "true" & gt ;
& lt ; template # display & gt ;
& # 123 ; & # 123 ; text || 'Click to Edit' & # 125 ; & # 125 ;
& lt ; / t e m p l a t e & g t ;
& lt ; template # content & gt ;
& lt ; InputText v - model = "text" autoFocus / & gt ;
& lt ; / t e m p l a t e & g t ;
& lt ; / I n p l a c e & g t ;
< / template >
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Lazy Data < / h5 >
< p > 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 . < / p >
< pre v-code > < code > < template v-pre >
2022-09-09 20:41:18 +00:00
& lt ; Inplace @ open = "loadData" & gt ;
& lt ; template # display & gt ;
View Data
& lt ; / t e m p l a t e & g t ;
& lt ; template # content & gt ;
& lt ; DataTable : value = "cars" & gt ;
& lt ; Column field = "vin" header = "Vin" & gt ; & lt ; / C o l u m n & g t ;
& lt ; Column field = "year" header = "Year" & gt ; & lt ; / C o l u m n & g t ;
& lt ; Column field = "brand" header = "Brand" & gt ; & lt ; / C o l u m n & g t ;
& lt ; Column field = "color" header = "Color" & gt ; & lt ; / C o l u m n & g t ;
& lt ; / D a t a T a b l e & g t ;
& lt ; / t e m p l a t e & g t ;
& lt ; / I n p l a c e & g t ;
< / template >
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< pre v -code .script > < code >
2022-09-09 20:41:18 +00:00
import CarService from '../../service/CarService' ;
export default {
data ( ) {
return {
cars : null
}
} ,
carService : null ,
created ( ) {
this . carService = new CarService ( ) ;
} ,
methods : {
loadData ( ) {
this . carService . getCarsSmall ( ) . then ( data => this . cars = data ) ;
}
}
}
< / code > < / pre >
2022-12-08 12:26:57 +00:00
< h5 > Properties < / h5 >
< p > Any property as style and class are passed to the main container element . Following are the additional properties to configure the component . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Type < / th >
< th > Default < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > active < / td >
< td > boolean < / td >
< td > false < / td >
< td > Whether the content is displayed or not . < / td >
< / tr >
< tr >
< td > closable < / td >
< td > boolean < / td >
< td > false < / td >
< td > Displays a button to switch back to display mode . < / td >
< / tr >
< tr >
< td > disabled < / td >
< td > boolean < / td >
< td > false < / td >
< td > When present , it specifies that the element should be disabled . < / td >
< / tr >
< tr >
< td > closeIcon < / td >
< td > string < / td >
< td > pi pi - times < / td >
< td > Icon to display in the close button . < / td >
< / tr >
< tr >
< td > displayProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLDivElement to display container . < / td >
< / tr >
< tr >
< td > closeButtonProps < / td >
< td > object < / td >
< td > null < / td >
< td > Uses to pass all properties of the HTMLButtonElement to the close button . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Events < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< th > Description < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > open < / td >
< td > event : browser event < / td >
< td > Callback to invoke when inplace is opened . < / td >
< / tr >
< tr >
< td > close < / td >
< td > event : browser event < / td >
< td > Callback to invoke when inplace is closed . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Slots < / h5 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Parameters < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > display < / td >
< td > - < / td >
< / tr >
< tr >
< td > content < / td >
< td > - < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Styling < / h5 >
< p > Following is the list of structural style classes , for theming classes visit < router -link to = "/theming" > theming < / r o u t e r - l i n k > p a g e . < / p >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Name < / th >
< th > Element < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > p - inplace < / td >
< td > Container element < / td >
< / tr >
< tr >
< td > p - inplace - display < / td >
< td > Display container < / td >
< / tr >
< tr >
< td > p - inplace - content < / td >
< td > Content container < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Accessibility < / h5 >
< h6 > Screen Reader < / h6 >
< p > Inplace component defines < i > aria - live < / i > as "polite" by default , since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily . < / p >
< p >
Display element uses < i > button < / i > role in view mode by default , < i > displayProps < / i > can be used for customizations like adding < i > aria - label < / i > or < i > aria - labelledby < / i > attributes to describe the content of the view mode or even
overriding the default role .
< / p >
< p >
Closable inplace components displays a button with an < i > aria - label < / i > that refers to the < i > aria . close < / i > property of the < router -link to = "/locale" > locale < /router-link> API by default, you may use <i>closeButtonProps</i > to customize
the element and override the default < i > aria - label < / i > .
< / p >
< h6 > View Mode Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< i > enter < / i >
< / td >
< td > Switches to content . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h6 > Close Button Keyboard Support < / h6 >
< div class = "doc-tablewrapper" >
< table class = "doc-table" >
< thead >
< tr >
< th > Key < / th >
< th > Function < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< i > enter < / i >
< / td >
< td > Switches to display . < / td >
< / tr >
< tr >
< td >
< i > space < / i >
< / td >
< td > Switches to display . < / td >
< / tr >
< / tbody >
< / table >
< / div >
< h5 > Dependencies < / h5 >
< p > None . < / p >
< / AppDoc >
2022-09-09 20:41:18 +00:00
< / template >
< script >
export default {
data ( ) {
return {
sources : {
'options-api' : {
tabName : 'Options API Source' ,
content : `
< template >
< div >
< h5 > Input < / h5 >
< Inplace :closable ="true" >
< template # display >
{ { text || 'Click to Edit' } }
< / template >
< template # content >
< InputText v -model = " text " autoFocus / >
< / template >
< / Inplace >
< h5 > Image < / h5 >
< Inplace >
< template # display >
< span class = "pi pi-search" style = "vertical-align: middle" > < / span >
< span style = "margin-left:.5rem; vertical-align: middle" > View Picture < / span >
< / template >
< template # content >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width = "200" / >
< / template >
< / Inplace >
< h5 > Lazy Data < / h5 >
< Inplace @open ="loadData" >
< template # display >
View Data
< / template >
< template # content >
< DataTable :value ="products" responsiveLayout = "scroll" >
< 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 >
< / template >
< / Inplace >
< / div >
< / template >
< script >
import ProductService from './service/ProductService' ;
export default {
data ( ) {
return {
text : null ,
products : null
}
} ,
productService : null ,
created ( ) {
this . productService = new ProductService ( ) ;
} ,
methods : {
loadData ( ) {
this . productService . getProductsSmall ( ) . then ( data => this . products = data ) ;
}
}
}
< \ \ / script >
`
} ,
'composition-api' : {
tabName : 'Composition API Source' ,
content : `
< template >
< div >
< h5 > Input < / h5 >
< Inplace :closable ="true" >
< template # display >
{ { text || 'Click to Edit' } }
< / template >
< template # content >
< InputText v -model = " text " autoFocus / >
< / template >
< / Inplace >
< h5 > Image < / h5 >
< Inplace >
< template # display >
< span class = "pi pi-search" style = "vertical-align: middle" > < / span >
< span style = "margin-left:.5rem; vertical-align: middle" > View Picture < / span >
< / template >
< template # content >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width = "200" / >
< / template >
< / Inplace >
< h5 > Lazy Data < / h5 >
< Inplace @open ="loadData" >
< template # display >
View Data
< / template >
< template # content >
< DataTable :value ="products" responsiveLayout = "scroll" >
< 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 >
< / template >
< / Inplace >
< / div >
< / template >
< script >
import { ref } from 'vue' ;
import ProductService from './service/ProductService' ;
export default {
setup ( ) {
const productService = ref ( new ProductService ( ) ) ;
const text = ref ( null ) ;
const products = ref ( null ) ;
const loadData = ( ) => {
productService . value . getProductsSmall ( ) . then ( data => products . value = data ) ;
}
return { productService , text , products , loadData }
}
}
< \ \ / script > `
} ,
'browser-source' : {
tabName : 'Browser Source' ,
imports : ` <script src="https://unpkg.com/primevue@^3/inplace/inplace.min.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 = "./ProductService.js" > < \ \ / script > ` ,
content : ` <div id="app">
< h5 > Input < / h5 >
< p -inplace :closable ="true" >
< template # display >
{ { text || 'Click to Edit' } }
< / template >
< template # content >
< p -inputtext v -model = " text " autoFocus > < / p - i n p u t t e x t >
< / template >
< / p - i n p l a c e >
< h5 > Image < / h5 >
< p -inplace >
< template # display >
< span class = "pi pi-search" style = "vertical-align: middle" > < / span >
< span style = "margin-left:.5rem; vertical-align: middle" > View Picture < / span >
< / template >
< template # content >
< img src = "https://www.primefaces.org/wp-content/uploads/2020/12/primevue-min.png" width = "200" / >
< / template >
< / p - i n p l a c e >
< h5 > Lazy Data < / h5 >
< p -inplace @open ="loadData" >
< template # display >
View Data
< / template >
< template # content >
< p -datatable :value ="products" responsive -layout = " scroll " >
< p -column field = "code" header = "Code" > < / p - c o l u m n >
< p -column field = "name" header = "Name" > < / p - c o l u m n >
< p -column field = "category" header = "Category" > < / p - c o l u m n >
< p -column field = "quantity" header = "Quantity" > < / p - c o l u m n >
< / p - d a t a t a b l e >
< / template >
< / p - i n p l a c e >
< / div >
< script type = "module" >
const { createApp , ref } = Vue ;
const App = {
setup ( ) {
const productService = ref ( new ProductService ( ) ) ;
const text = ref ( null ) ;
const products = ref ( null ) ;
const loadData = ( ) => {
productService . value . getProductsSmall ( ) . then ( data => products . value = data ) ;
}
return { productService , text , products , loadData }
} ,
components : {
"p-inplace" : primevue . inplace ,
"p-datatable" : primevue . datatable ,
"p-column" : primevue . column ,
"p-inputtext" : primevue . inputtext
}
} ;
createApp ( App )
. use ( primevue . config . default )
. mount ( "#app" ) ;
< \ \ / script > `
}
}
} ;
}
} ;
< / script >
