Initiated Message
Cagatay Civici
parent
68a54c3728
commit
0b6a582417
|
|
@ -66,6 +66,10 @@
|
|||
"name": "InputText",
|
||||
"to": "/inputtext"
|
||||
},
|
||||
{
|
||||
"name": "Message",
|
||||
"to": "/message"
|
||||
},
|
||||
{
|
||||
"name": "Panel",
|
||||
"to": "/panel"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" lang="script" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`import InputText from '@/volt/inputtext';
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Message component requires a content to display.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message>Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from '@/volt/message';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicDoc from '@/doc/message/BasicDoc.vue';
|
||||
import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
|
||||
import DynamicDoc from '@/doc/message/DynamicDoc.vue';
|
||||
import FormsDoc from '@/doc/message/FormsDoc.vue';
|
||||
import IconDoc from '@/doc/message/IconDoc.vue';
|
||||
import ImportDoc from '@/doc/message/ImportDoc.vue';
|
||||
import LifeDoc from '@/doc/message/LifeDoc.vue';
|
||||
import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
|
||||
import SimpleDoc from '@/doc/message/SimpleDoc.vue';
|
||||
import SeverityDoc from '@/doc/message/SeverityDoc.vue';
|
||||
import SizesDoc from '@/doc/message/SizesDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'severity',
|
||||
label: 'Severity',
|
||||
component: SeverityDoc
|
||||
},
|
||||
{
|
||||
id: 'icon',
|
||||
label: 'Icon',
|
||||
component: IconDoc
|
||||
},
|
||||
{
|
||||
id: 'outlined',
|
||||
label: 'Outlined',
|
||||
component: OutlinedDoc
|
||||
},
|
||||
{
|
||||
id: 'simple',
|
||||
label: 'Simple',
|
||||
component: SimpleDoc
|
||||
},
|
||||
{
|
||||
id: 'sizes',
|
||||
label: 'Sizes',
|
||||
component: SizesDoc
|
||||
},
|
||||
{
|
||||
id: 'forms',
|
||||
label: 'Forms',
|
||||
component: FormsDoc
|
||||
},
|
||||
{
|
||||
id: 'dynamic',
|
||||
label: 'Dynamic',
|
||||
component: DynamicDoc
|
||||
},
|
||||
{
|
||||
id: 'closable',
|
||||
label: 'Closable',
|
||||
component: ClosabledDoc
|
||||
},
|
||||
{
|
||||
id: 'life',
|
||||
label: 'Life',
|
||||
component: LifeDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<Message
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Message>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Message from 'primevue/message';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: ``,
|
||||
content: ``,
|
||||
icon: ``,
|
||||
text: ``,
|
||||
closeButton: ``,
|
||||
closeIcon: ``,
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-300',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
|
||||
leaveToClass: 'max-h-0 opacity-0 !m-0'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span :class="cx('root')" :data-p="dataP" data-badge v-bind="ptmi('root')">
|
||||
<span :class="cx('root')" :data-p="dataP" v-bind="ptmi('root')">
|
||||
<slot>{{ value }}</slot>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition name="p-message" appear v-bind="ptmi('transition')">
|
||||
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
|
||||
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" :data-p="dataP" v-bind="ptm('root')">
|
||||
<slot v-if="$slots.container" name="container" :closeCallback="close"></slot>
|
||||
<div v-else :class="cx('content')" v-bind="ptm('content')">
|
||||
<slot name="icon" :class="cx('icon')">
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { cn } from '@primeuix/utils';
|
||||
import TimesIcon from '@primevue/icons/times';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import BaseMessage from './BaseMessage.vue';
|
||||
|
|
@ -53,6 +54,14 @@ export default {
|
|||
computed: {
|
||||
closeAriaLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
||||
},
|
||||
dataP() {
|
||||
return cn({
|
||||
outlined: this.variant === 'outlined',
|
||||
simple: this.variant === 'simple',
|
||||
[this.severity]: this.severity,
|
||||
[this.size]: this.size
|
||||
});
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue