From b9736729cd40a87d6d183f598ea4831c28ba56c2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 29 Aug 2021 15:54:41 +0300
Subject: [PATCH] Initiated Image component

---
 src/assets/menu/menu.json         |   5 +
 src/components/image/Image.d.ts   |   9 +
 src/components/image/Image.vue    | 224 ++++++++++++++++++++
 src/components/image/package.json |   9 +
 src/main.js                       |   2 +
 src/router/index.js               |   5 +
 src/views/image/ImageDemo.vue     |  37 ++++
 src/views/image/ImageDoc.vue      | 325 ++++++++++++++++++++++++++++++
 8 files changed, 616 insertions(+)
 create mode 100644 src/components/image/Image.d.ts
 create mode 100644 src/components/image/Image.vue
 create mode 100644 src/components/image/package.json
 create mode 100644 src/views/image/ImageDemo.vue
 create mode 100644 src/views/image/ImageDoc.vue

diff --git a/src/assets/menu/menu.json b/src/assets/menu/menu.json
index fc44a210a..6f43dea9e 100644
--- a/src/assets/menu/menu.json
+++ b/src/assets/menu/menu.json
@@ -799,6 +799,11 @@
                             "to": "/galleria/advanced"
                         }
                     ]
+                },
+                {
+                    "name": "Image",
+                    "to": "/image",
+                    "badge": "New"
                 }
             ]
         },
diff --git a/src/components/image/Image.d.ts b/src/components/image/Image.d.ts
new file mode 100644
index 000000000..539276c9d
--- /dev/null
+++ b/src/components/image/Image.d.ts
@@ -0,0 +1,9 @@
+interface ImageProps {
+    preview?: boolean;
+}
+
+declare class Image {
+    $props: ImageProps;
+}
+
+export default Image;
diff --git a/src/components/image/Image.vue b/src/components/image/Image.vue
new file mode 100644
index 000000000..026ed70f2
--- /dev/null
+++ b/src/components/image/Image.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/image/package.json b/src/components/image/package.json
new file mode 100644
index 000000000..81643ec36
--- /dev/null
+++ b/src/components/image/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./image.cjs.js",
+    "module": "./image.esm.js",
+    "unpkg": "./image.min.js",
+    "types": "./Image.d.ts",
+    "browser": {
+      "./sfc": "./Image.vue"
+    }
+  }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index dbeb0f838..078ce55b9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -40,6 +40,7 @@ import Editor from './components/editor/Editor';
 import Fieldset from './components/fieldset/Fieldset';
 import FileUpload from './components/fileupload/FileUpload';
 import FullCalendar from './components/fullcalendar/FullCalendar';
+import Image from './components/image/Image';
 import InlineMessage from './components/inlinemessage/InlineMessage';
 import Inplace from './components/inplace/Inplace';
 import InputMask from './components/inputmask/InputMask';
@@ -164,6 +165,7 @@ app.component('Editor', Editor);
 app.component('Fieldset', Fieldset);
 app.component('FileUpload', FileUpload);
 app.component('FullCalendar', FullCalendar);
+app.component('Image', Image);
 app.component('InlineMessage', InlineMessage);
 app.component('Inplace', Inplace);
 app.component('InputMask', InputMask);
diff --git a/src/router/index.js b/src/router/index.js
index b3954ec34..c025562f4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -382,6 +382,11 @@ const routes = [
         name: 'fullcalendar',
         component: () => import('../views/fullcalendar/FullCalendarDemo.vue')
     },
+    {
+        path: '/image',
+        name: 'image',
+        component: () => import('../views/image/ImageDemo.vue')
+    },
     {
         path: '/inplace',
         name: 'inplace',
diff --git a/src/views/image/ImageDemo.vue b/src/views/image/ImageDemo.vue
new file mode 100644
index 000000000..b52dd1dd7
--- /dev/null
+++ b/src/views/image/ImageDemo.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/image/ImageDoc.vue b/src/views/image/ImageDoc.vue
new file mode 100644
index 000000000..0211b9aba
--- /dev/null
+++ b/src/views/image/ImageDoc.vue
@@ -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>
+&lt;InputText type="text" v-model="value" /&gt;
+
+</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>
+&lt;span class="p-float-label"&gt;
+	&lt;InputText id="username" type="text" v-model="value" /&gt;
+	&lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+
+</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>
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
+&lt;/span&gt;
+
+&lt;span class="p-input-icon-right"&gt;
+    &lt;InputText type="text" v-model="value2" /&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+&lt;/span&gt;
+
+&lt;span class="p-input-icon-left p-input-icon-right"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value3" /&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+&lt;/span&gt;
+
+</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>
+&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
+&lt;InputText type="text" placeholder="Normal" /&gt;
+&lt;InputText type="text" class="p-inputtext-lg"  placeholder="Large" /&gt;
+
+</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>
+&lt;div class="p-inputtext-sm"&gt;
+    &lt;InputText /&gt;
+    &lt;InputNumber /&gt;
+    &lt;InputMask /&gt;
+&lt;/div&gt;
+
+</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>
+&lt;div class="p-input-filled"&gt;
+    &lt;InputText type="text" /&gt;
+    &lt;InputText type="text" /&gt;
+    &lt;InputText type="text" /&gt;
+&lt;/div&gt;
+
+</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>
\ No newline at end of file