Refactor #5553 - For Inplace

api-generator/components/inplace.js

@@ -6,13 +6,7 @@ const InplaceProps = [
         description: 'Whether the content is displayed or not.'
     },
     {
-        name: 'closable',
+        name: 'disabled',
-        type: 'boolean',
-        default: 'false',
-        description: 'Displays a button to switch back to display mode.'
-    },
-    {
-        name: 'diabled',
         type: 'boolean',
         default: 'false',
         description: 'When present, it specifies that the element should be disabled.'
@@ -64,10 +58,6 @@ const InplaceSlots = [
     {
         name: 'content',
         description: 'Custom content template.'
-    },
-    {
-        name: 'closeicon',
-        description: 'Custom close icon template.'
     }
 ];
 

components/lib/inplace/BaseInplace.vue

@@ -6,10 +6,6 @@ export default {
     name: 'BaseInplace',
     extends: BaseComponent,
     props: {
-        closable: {
-            type: Boolean,
-            default: false
-        },
         active: {
             type: Boolean,
             default: false
@@ -18,17 +14,9 @@ export default {
             type: Boolean,
             default: false
         },
-        closeIcon: {
-            type: String,
-            default: undefined
-        },
         displayProps: {
             type: null,
             default: null
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
         }
     },
     style: InplaceStyle,

components/lib/inplace/Inplace.d.ts

@@ -8,9 +8,8 @@
  *
  */
 
-import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { HTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -77,11 +76,6 @@ export interface InplacePassThroughOptions {
      * Used to pass attributes to the content's DOM element.
      */
     content?: InplacePassThroughOptionType;
-    /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
-     */
-    closeButton?: ButtonPassThroughOptions<InplaceSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -111,11 +105,6 @@ export interface InplaceState {
  * Defines valid properties in Inplace component.
  */
 export interface InplaceProps {
-    /**
-     * Displays a button to switch back to display mode.
-     * @defaultValue false
-     */
-    closable?: boolean | undefined;
     /**
      * Whether the content is displayed or not.
      * @defaultValue false
@@ -135,10 +124,6 @@ export interface InplaceProps {
      * Used to pass all properties of the HTMLDivElement to display container.
      */
     displayProps?: HTMLAttributes | undefined;
-    /**
-     * Used to pass all properties of the HTMLButtonElement to the close button.
-     */
-    closeButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -170,12 +155,14 @@ export interface InplaceSlots {
     display(): VNode[];
     /**
      * Custom content template.
+     * @param {Object} scope - container slot's params.
      */
-    content(): VNode[];
+    content(scope: {
         /**
-     * Custom close icon template.
+         * Close message function.
          */
-    closeicon(): VNode[];
+        closeCallback: () => void;
+    }): VNode[];
 }
 
 /**

components/lib/inplace/Inplace.vue

@@ -1,25 +1,15 @@
 <template>
-    <div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptmi('root')">
+    <div :class="cx('root')" aria-live="polite" v-bind="ptmi('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="cx('content')" v-bind="ptm('content')">
-            <slot name="content"></slot>
+            <slot name="content" :closeCallback="close" />
-            <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :unstyled="unstyled" :pt="ptm('closeButton')" v-bind="closeButtonProps">
-                <template #icon>
-                    <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeButton')['icon']" data-pc-section="closebuttonicon"></component>
-                    </slot>
-                </template>
-            </IPButton>
         </div>
     </div>
 </template>
 
 <script>
-import Button from 'primevue/button';
-import FocusTrap from 'primevue/focustrap';
-import TimesIcon from 'primevue/icons/times';
 import BaseInplace from './BaseInplace.vue';
 
 export default {
@@ -43,30 +33,21 @@ export default {
                 return;
             }
 
-            this.$emit('open', event);
             this.d_active = true;
+
+            this.$emit('open', event);
             this.$emit('update:active', true);
         },
         close(event) {
-            this.$emit('close', event);
             this.d_active = false;
+
+            this.$emit('close', event);
             this.$emit('update:active', false);
+
             setTimeout(() => {
                 this.$refs.display.focus();
             }, 0);
         }
-    },
-    computed: {
-        closeAriaLabel() {
-            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
-        }
-    },
-    components: {
-        IPButton: Button,
-        TimesIcon
-    },
-    directives: {
-        focustrap: FocusTrap
     }
 };
 </script>

components/lib/inplace/style/InplaceStyle.js

@@ -1,7 +1,7 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: ({ props }) => 'p-inplace p-component',
+    root: 'p-inplace p-component',
     display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
     content: 'p-inplace-content'
 };

doc/inplace/AccessibilityDoc.vue

@@ -2,14 +2,6 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <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 <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to
-            customize the element and override the default <i>aria-label</i>.
-        </p>
 
         <h3>View Mode Keyboard Support</h3>
         <div class="doc-tablewrapper">
@@ -30,31 +22,5 @@
                 </tbody>
             </table>
         </div>
-
-        <h3>Close Button Keyboard Support</h3>
-        <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>
     </DocSectionText>
 </template>