Initiated Image component
Cagatay Civici
parent
2b00a72b7a
commit
b9736729cd
|
|
@ -799,6 +799,11 @@
|
||||||
"to": "/galleria/advanced"
|
"to": "/galleria/advanced"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Image",
|
||||||
|
"to": "/image",
|
||||||
|
"badge": "New"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
interface ImageProps {
|
||||||
|
preview?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare class Image {
|
||||||
|
$props: ImageProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Image;
|
||||||
|
|
@ -0,0 +1,224 @@
|
||||||
|
<template>
|
||||||
|
<span :class="containerClass" :style="style">
|
||||||
|
<img v-bind="$attrs" :style="imageStyle" :class="imageClass" />
|
||||||
|
<div class="p-image-preview-indicator" v-if="preview" @click="onImageClick">
|
||||||
|
<slot name="indicator">
|
||||||
|
<i class="p-image-preview-icon pi pi-eye"></i>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<Teleport to="body">
|
||||||
|
<div :ref="maskRef" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
|
||||||
|
<div class="p-image-toolbar">
|
||||||
|
<button class="p-image-action p-link" @click="rotateRight" type="button">
|
||||||
|
<i class="pi pi-refresh"></i>
|
||||||
|
</button>
|
||||||
|
<button class="p-image-action p-link" @click="rotateLeft" type="button">
|
||||||
|
<i class="pi pi-undo"></i>
|
||||||
|
</button>
|
||||||
|
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled">
|
||||||
|
<i class="pi pi-search-minus"></i>
|
||||||
|
</button>
|
||||||
|
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled">
|
||||||
|
<i class="pi pi-search-plus"></i>
|
||||||
|
</button>
|
||||||
|
<button class="p-image-action p-link" type="button" @click="hidePreview">
|
||||||
|
<i class="pi pi-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<transition name="p-image-preview" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||||
|
<div v-if="previewVisible">
|
||||||
|
<img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick"/>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {DomHandler,ZIndexUtils} from 'primevue/utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Image',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
preview: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
class: null,
|
||||||
|
style: null,
|
||||||
|
imageStyle: null,
|
||||||
|
imageClass: null
|
||||||
|
},
|
||||||
|
mask: null,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
maskVisible: false,
|
||||||
|
previewVisible: false,
|
||||||
|
rotate: 0,
|
||||||
|
scale: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
if (this.mask) {
|
||||||
|
ZIndexUtils.clear(this.container);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
maskRef(el) {
|
||||||
|
this.mask = el;
|
||||||
|
},
|
||||||
|
toolbarRef(el) {
|
||||||
|
this.toolbarRef = el;
|
||||||
|
},
|
||||||
|
onImageClick() {
|
||||||
|
if (this.preview) {
|
||||||
|
this.maskVisible = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.previewVisible = true;
|
||||||
|
}, 25);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onPreviewImageClick() {
|
||||||
|
this.previewClick = true;
|
||||||
|
},
|
||||||
|
onMaskClick() {
|
||||||
|
if (!this.previewClick) {
|
||||||
|
this.previewVisible = false;
|
||||||
|
this.rotate = 0;
|
||||||
|
this.scale = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.previewClick = false;
|
||||||
|
},
|
||||||
|
rotateRight() {
|
||||||
|
this.rotate += 90;
|
||||||
|
this.previewClick = true;
|
||||||
|
},
|
||||||
|
rotateLeft() {
|
||||||
|
this.rotate -= 90;
|
||||||
|
this.previewClick = true;
|
||||||
|
},
|
||||||
|
zoomIn() {
|
||||||
|
this.scale = this.scale + 0.1;
|
||||||
|
this.previewClick = true;
|
||||||
|
},
|
||||||
|
zoomOut() {
|
||||||
|
this.scale = this.scale - 0.1;
|
||||||
|
this.previewClick = true;
|
||||||
|
},
|
||||||
|
onBeforeEnter(el) {
|
||||||
|
ZIndexUtils.set('modal', el, this.baseZIndex + this.$primevue.config.zIndex.modal);
|
||||||
|
},
|
||||||
|
onEnter() {
|
||||||
|
ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal);
|
||||||
|
this.$emit('show');
|
||||||
|
},
|
||||||
|
onBeforeLeave() {
|
||||||
|
DomHandler.addClass(this.mask, 'p-image-mask-leave');
|
||||||
|
},
|
||||||
|
onLeave() {
|
||||||
|
this.$emit('hide');
|
||||||
|
},
|
||||||
|
onAfterLeave(el) {
|
||||||
|
ZIndexUtils.clear(el);
|
||||||
|
this.maskVisible = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
containerClass() {
|
||||||
|
return ['p-image p-component', this.class, {
|
||||||
|
'p-image-preview-container': this.preview
|
||||||
|
}];
|
||||||
|
},
|
||||||
|
maskClass() {
|
||||||
|
return ['p-image-mask p-component-overlay'];
|
||||||
|
},
|
||||||
|
rotateClass() {
|
||||||
|
return 'p-image-preview-rotate-' + this.rotate;
|
||||||
|
},
|
||||||
|
imagePreviewStyle() {
|
||||||
|
return {transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')'};
|
||||||
|
},
|
||||||
|
zoomDisabled() {
|
||||||
|
return this.scale <= 0.5 || this.scale >= 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.p-image-mask {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-mask.p-image-mask-leave {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview-container {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview-indicator {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
background-color: rgba(0,0,0,.5);
|
||||||
|
transition: opacity .3s;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview-container:hover > .p-image-preview-indicator {
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview-container > img {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-action.p-link {
|
||||||
|
padding: 1rem;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-right: .5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview {
|
||||||
|
transition: transform .15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-image-preview-enter-active {
|
||||||
|
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.p-image-preview-leave-active {
|
||||||
|
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.p-image-preview-enter-from,
|
||||||
|
.p-image-preview-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"main": "./image.cjs.js",
|
||||||
|
"module": "./image.esm.js",
|
||||||
|
"unpkg": "./image.min.js",
|
||||||
|
"types": "./Image.d.ts",
|
||||||
|
"browser": {
|
||||||
|
"./sfc": "./Image.vue"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -40,6 +40,7 @@ import Editor from './components/editor/Editor';
|
||||||
import Fieldset from './components/fieldset/Fieldset';
|
import Fieldset from './components/fieldset/Fieldset';
|
||||||
import FileUpload from './components/fileupload/FileUpload';
|
import FileUpload from './components/fileupload/FileUpload';
|
||||||
import FullCalendar from './components/fullcalendar/FullCalendar';
|
import FullCalendar from './components/fullcalendar/FullCalendar';
|
||||||
|
import Image from './components/image/Image';
|
||||||
import InlineMessage from './components/inlinemessage/InlineMessage';
|
import InlineMessage from './components/inlinemessage/InlineMessage';
|
||||||
import Inplace from './components/inplace/Inplace';
|
import Inplace from './components/inplace/Inplace';
|
||||||
import InputMask from './components/inputmask/InputMask';
|
import InputMask from './components/inputmask/InputMask';
|
||||||
|
|
@ -164,6 +165,7 @@ app.component('Editor', Editor);
|
||||||
app.component('Fieldset', Fieldset);
|
app.component('Fieldset', Fieldset);
|
||||||
app.component('FileUpload', FileUpload);
|
app.component('FileUpload', FileUpload);
|
||||||
app.component('FullCalendar', FullCalendar);
|
app.component('FullCalendar', FullCalendar);
|
||||||
|
app.component('Image', Image);
|
||||||
app.component('InlineMessage', InlineMessage);
|
app.component('InlineMessage', InlineMessage);
|
||||||
app.component('Inplace', Inplace);
|
app.component('Inplace', Inplace);
|
||||||
app.component('InputMask', InputMask);
|
app.component('InputMask', InputMask);
|
||||||
|
|
|
||||||
|
|
@ -382,6 +382,11 @@ const routes = [
|
||||||
name: 'fullcalendar',
|
name: 'fullcalendar',
|
||||||
component: () => import('../views/fullcalendar/FullCalendarDemo.vue')
|
component: () => import('../views/fullcalendar/FullCalendarDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/image',
|
||||||
|
name: 'image',
|
||||||
|
component: () => import('../views/image/ImageDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/inplace',
|
path: '/inplace',
|
||||||
name: 'inplace',
|
name: 'inplace',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Image</h1>
|
||||||
|
<p>Displays an image with preview and tranformation options.</p>
|
||||||
|
</div>
|
||||||
|
<AppDemoActions />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<Image src="demo/images/galleria/galleria1.jpg" alt="Image" width="250" />
|
||||||
|
|
||||||
|
<h5>Preview</h5>
|
||||||
|
<Image src="demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ImageDoc />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ImageDoc from './ImageDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'ImageDoc': ImageDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,325 @@
|
||||||
|
<template>
|
||||||
|
<AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
|
||||||
|
<h5>Import</h5>
|
||||||
|
<pre v-code.script><code>
|
||||||
|
import Image from 'primevue/image';
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Getting Started</h5>
|
||||||
|
<p>A model can be bound using the standard v-model directive.</p>
|
||||||
|
<pre v-code><code>
|
||||||
|
<InputText type="text" v-model="value" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Float Label</h5>
|
||||||
|
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
|
||||||
|
<pre v-code><code>
|
||||||
|
<span class="p-float-label">
|
||||||
|
<InputText id="username" type="text" v-model="value" />
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Icons</h5>
|
||||||
|
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
|
||||||
|
and <i>p-input-icon-left</i> classes depending on the icon location.</p>
|
||||||
|
<pre v-code><code>
|
||||||
|
<span class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search" />
|
||||||
|
<InputText type="text" v-model="value1" placeholder="Search" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="p-input-icon-right">
|
||||||
|
<InputText type="text" v-model="value2" />
|
||||||
|
<i class="pi pi-spin pi-spinner" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="p-input-icon-left p-input-icon-right">
|
||||||
|
<i class="pi pi-search" />
|
||||||
|
<InputText type="text" v-model="value3" />
|
||||||
|
<i class="pi pi-spin pi-spinner" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Sizes</h5>
|
||||||
|
<p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
|
||||||
|
Note that these classes are mainly be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
|
||||||
|
<pre v-code><code>
|
||||||
|
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
||||||
|
<InputText type="text" placeholder="Normal" />
|
||||||
|
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the
|
||||||
|
class to a container element so that descendant inputs share the same style easier.</p>
|
||||||
|
<pre v-code><code>
|
||||||
|
<div class="p-inputtext-sm">
|
||||||
|
<InputText />
|
||||||
|
<InputNumber />
|
||||||
|
<InputMask />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Outlined vs Filled</h5>
|
||||||
|
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
|
||||||
|
to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer
|
||||||
|
to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
|
||||||
|
|
||||||
|
<pre v-code><code>
|
||||||
|
<div class="p-input-filled">
|
||||||
|
<InputText type="text" />
|
||||||
|
<InputText type="text" />
|
||||||
|
<InputText type="text" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<h5>Properties</h5>
|
||||||
|
<p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</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>modelValue</td>
|
||||||
|
<td>any</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Value of the component.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Events</h5>
|
||||||
|
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
|
||||||
|
|
||||||
|
<h5>Styling</h5>
|
||||||
|
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Element</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>p-inputtext</td>
|
||||||
|
<td>Input element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-inputtext-sm</td>
|
||||||
|
<td>Smaller input element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-inputtext-lg</td>
|
||||||
|
<td>Larger input element</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-inputtext-filled</td>
|
||||||
|
<td>Filled input style.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Dependencies</h5>
|
||||||
|
<p>None.</p>
|
||||||
|
</AppDoc>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sources: {
|
||||||
|
'options-api': {
|
||||||
|
tabName: 'Options API Source',
|
||||||
|
content:`
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<InputText type="text" v-model="value1" />
|
||||||
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||||
|
|
||||||
|
<h5>Floating Label</h5>
|
||||||
|
<span class="p-float-label">
|
||||||
|
<InputText id="username" type="text" v-model="value2" />
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Left Icon</h5>
|
||||||
|
<span class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search" />
|
||||||
|
<InputText type="text" v-model="value3" placeholder="Search" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Right Icon</h5>
|
||||||
|
<span class="p-input-icon-right">
|
||||||
|
<i class="pi pi-spin pi-spinner" />
|
||||||
|
<InputText type="text" v-model="value4" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Help Text</h5>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="username1">Username</label>
|
||||||
|
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
||||||
|
<small id="username1-help">Enter your username to reset your password.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Invalid</h5>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="username2">Username</label>
|
||||||
|
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||||
|
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Disabled</h5>
|
||||||
|
<InputText type="text" v-model="value5" disabled />
|
||||||
|
|
||||||
|
<h5>Sizes</h5>
|
||||||
|
<div class="sizes">
|
||||||
|
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
||||||
|
<InputText type="text" placeholder="Normal" />
|
||||||
|
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: null,
|
||||||
|
value2: null,
|
||||||
|
value3: null,
|
||||||
|
value4: null,
|
||||||
|
value5: 'PrimeVue'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sizes {
|
||||||
|
.p-inputtext {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-field * {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>`
|
||||||
|
},
|
||||||
|
'composition-api': {
|
||||||
|
tabName: 'Composition API Source',
|
||||||
|
content:`
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h5>Basic</h5>
|
||||||
|
<InputText type="text" v-model="value1" />
|
||||||
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||||
|
|
||||||
|
<h5>Floating Label</h5>
|
||||||
|
<span class="p-float-label">
|
||||||
|
<InputText id="username" type="text" v-model="value2" />
|
||||||
|
<label for="username">Username</label>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Left Icon</h5>
|
||||||
|
<span class="p-input-icon-left">
|
||||||
|
<i class="pi pi-search" />
|
||||||
|
<InputText type="text" v-model="value3" placeholder="Search" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Right Icon</h5>
|
||||||
|
<span class="p-input-icon-right">
|
||||||
|
<i class="pi pi-spin pi-spinner" />
|
||||||
|
<InputText type="text" v-model="value4" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<h5>Help Text</h5>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="username1">Username</label>
|
||||||
|
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
||||||
|
<small id="username1-help">Enter your username to reset your password.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Invalid</h5>
|
||||||
|
<div class="p-field">
|
||||||
|
<label for="username2">Username</label>
|
||||||
|
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||||
|
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Disabled</h5>
|
||||||
|
<InputText type="text" v-model="value5" disabled />
|
||||||
|
|
||||||
|
<h5>Sizes</h5>
|
||||||
|
<div class="sizes">
|
||||||
|
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
||||||
|
<InputText type="text" placeholder="Normal" />
|
||||||
|
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const value1 = ref();
|
||||||
|
const value2 = ref();
|
||||||
|
const value3 = ref();
|
||||||
|
const value4 = ref();
|
||||||
|
const value5 = ref('PrimeVue');
|
||||||
|
|
||||||
|
return { value1, value2, value3, value4, value5 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\\/script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sizes {
|
||||||
|
.p-inputtext {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-field * {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue