Refactor #3965 - For Inplace

components/lib/inplace/BaseInplace.vue

@@ -0,0 +1,75 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-inplace .p-inplace-display {
+    display: inline;
+    cursor: pointer;
+}
+
+.p-inplace .p-inplace-content {
+    display: inline;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+    display: flex;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }],
+    display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
+    content: 'p-inplace-content',
+    closeButton: ({ props }) => props.closeIcon
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
+
+export default {
+    name: 'BaseAvatar',
+    extends: BaseComponent,
+    props: {
+        closable: {
+            type: Boolean,
+            default: false
+        },
+        active: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
+        },
+        displayProps: {
+            type: null,
+            default: null
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/inplace/Inplace.d.ts

@@ -101,6 +101,11 @@ export interface InplaceProps {
      * @type {InplacePassThroughOptions}
      */
     pt?: InplacePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/inplace/Inplace.vue

@@ -1,14 +1,14 @@
 <template>
-    <div v-focustrap :class="containerClass" aria-live="polite" v-bind="ptm('root')">
-        <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
+    <div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptm('root')">
+        <div v-if="!d_active" ref="display" :class="cx('display')" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
             <slot name="display"></slot>
         </div>
-        <div v-else class="p-inplace-content" v-bind="ptm('content')">
+        <div v-else :class="cx('content')" v-bind="ptm('content')">
             <slot name="content"></slot>
             <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :pt="ptm('closeButton')" v-bind="closeButtonProps">
                 <template #icon>
                     <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeButton')['icon']"></component>
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeButton')" v-bind="ptm('closeButton')['icon']"></component>
                     </slot>
                 </template>
             </IPButton>
@@ -17,41 +17,15 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseInplace from './BaseInplace.vue';
 import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 
 export default {
     name: 'Inplace',
-    extends: BaseComponent,
+    extends: BaseInplace,
     emits: ['open', 'close', 'update:active'],
-    props: {
-        closable: {
-            type: Boolean,
-            default: false
-        },
-        active: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        closeIcon: {
-            type: String,
-            default: undefined
-        },
-        displayProps: {
-            type: null,
-            default: null
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
-        }
-    },
     data() {
         return {
             d_active: this.active
@@ -82,12 +56,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return ['p-inplace p-component', { 'p-inplace-closable': this.closable }];
-        },
-        displayClass() {
-            return ['p-inplace-display', { 'p-disabled': this.disabled }];
-        },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
@@ -101,23 +69,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-inplace .p-inplace-display {
-    display: inline;
-    cursor: pointer;
-}
-
-.p-inplace .p-inplace-content {
-    display: inline;
-}
-
-.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
-    display: flex;
-}
-
-.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
-    flex: 1 1 auto;
-    width: 1%;
-}
-</style>