Refactor #5553 - For Inplace

pull/5677/head
tugcekucukoglu 2024-04-09 17:11:00 +03:00
parent 014dc680f0
commit 6b605f6b57
6 changed files with 17 additions and 105 deletions

View File

@ -6,13 +6,7 @@ const InplaceProps = [
description: 'Whether the content is displayed or not.'
},
{
name: 'closable',
type: 'boolean',
default: 'false',
description: 'Displays a button to switch back to display mode.'
},
{
name: 'diabled',
name: 'disabled',
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.'
}
];

View File

@ -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,

View File

@ -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[];
/**
* Custom close icon template.
*/
closeicon(): VNode[];
content(scope: {
/**
* Close message function.
*/
closeCallback: () => void;
}): VNode[];
}
/**

View File

@ -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>
<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>
<slot name="content" :closeCallback="close" />
</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>

View File

@ -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'
};

View File

@ -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>