Refactor #5553 - For Inplace
tugcekucukoglu
parent
014dc680f0
commit
6b605f6b57
|
|
@ -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.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue