Refactor #3965 - For Avatar
parent
810894df5a
commit
386c7d8b84
|
@ -7,6 +7,7 @@
|
||||||
* @module avatar
|
* @module avatar
|
||||||
*/
|
*/
|
||||||
import { VNode } from 'vue';
|
import { VNode } from 'vue';
|
||||||
|
import { AvatarGroupPassThroughOptions } from '../avatargroup';
|
||||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||||
|
|
||||||
export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
|
export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
|
||||||
|
@ -16,6 +17,7 @@ export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes |
|
||||||
*/
|
*/
|
||||||
export interface AvatarPassThroughMethodOptions {
|
export interface AvatarPassThroughMethodOptions {
|
||||||
props: AvatarProps;
|
props: AvatarProps;
|
||||||
|
parent: AvatarGroupPassThroughOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root', { $parentInstance })" data-pc-name="avatar">
|
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="getPTOptions('root')" data-pc-name="avatar">
|
||||||
<slot>
|
<slot>
|
||||||
<span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
|
<span v-if="label" :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
|
||||||
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
|
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
|
||||||
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
|
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="getPTOptions('icon')" />
|
||||||
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
|
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="getPTOptions('image')" />
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -19,6 +19,13 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
onError() {
|
onError() {
|
||||||
this.$emit('error');
|
this.$emit('error');
|
||||||
|
},
|
||||||
|
getPTOptions(key) {
|
||||||
|
return this.ptm(key, {
|
||||||
|
parent: {
|
||||||
|
instance: this.$parent
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -17,6 +17,7 @@ export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes |
|
||||||
*/
|
*/
|
||||||
export interface ButtonPassThroughMethodOptions {
|
export interface ButtonPassThroughMethodOptions {
|
||||||
props: ButtonProps;
|
props: ButtonProps;
|
||||||
|
context: ButtonContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -149,6 +150,17 @@ export interface ButtonProps extends ButtonHTMLAttributes {
|
||||||
unstyled?: boolean;
|
unstyled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines current options in Button component.
|
||||||
|
*/
|
||||||
|
export interface ButtonContext {
|
||||||
|
/**
|
||||||
|
* Current disabled state of the element as a boolean.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
disabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Defines valid slots in Button component.
|
* Defines valid slots in Button component.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue