Implemented Panel for Volt
Cagatay Civici
parent
ec1de9dc42
commit
59e1916e1f
|
|
@ -54,6 +54,10 @@
|
|||
"name": "InputText",
|
||||
"to": "/inputtext"
|
||||
},
|
||||
{
|
||||
"name": "Panel",
|
||||
"to": "/panel"
|
||||
},
|
||||
{
|
||||
"name": "ProgressBar",
|
||||
"to": "/progressbar"
|
||||
|
|
|
|||
|
|
@ -38,4 +38,5 @@
|
|||
@custom-variant p-rounded (&[data-p~="rounded"]);
|
||||
@custom-variant p-raised (&[data-p~="raised"]);
|
||||
@custom-variant p-outlined (&[data-p~="outlined"]);
|
||||
@custom-variant p-text (&[data-p~="text"]);
|
||||
@custom-variant p-text (&[data-p~="text"]);
|
||||
@custom-variant p-toggleable (&[data-p~="toggleable"]);
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A collapsible Panel with customized header, icons and footer sections via templating.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Panel toggleable>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<SecondaryButton icon="pi pi-user" rounded text />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" rounded text />
|
||||
</div>
|
||||
<span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #icons>
|
||||
<SecondaryButton icon="pi pi-cog" severity="secondary" variant="text" rounded />
|
||||
</template>
|
||||
<p class="!m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import Panel from '@/volt/panel';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel toggleable>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold">Amy Elsner</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<SecondaryButton icon="pi pi-user" rounded text />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" rounded text />
|
||||
</div>
|
||||
<span class="text-surface-500 dark:text-surface-400">Updated 2 hours ago</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #icons>
|
||||
<SecondaryButton icon="pi pi-cog" severity="secondary" variant="text" rounded />
|
||||
</template>
|
||||
<p class="!m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import Panel from '@/volt/panel';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Panel header="Header">
|
||||
<p class="!m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Panel from '@/volt/panel';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<Panel header="Header">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Panel from '@/volt/panel';
|
||||
<\/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 Panel from '@/volt/panel';
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -38,7 +38,10 @@ export default defineNuxtConfig({
|
|||
GITHUB_TOKEN: ''
|
||||
},
|
||||
primevue: {
|
||||
autoImport: false
|
||||
autoImport: false,
|
||||
options: {
|
||||
unstyled: true
|
||||
}
|
||||
},
|
||||
app: {
|
||||
baseURL: baseUrl,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Panel Component" header="Panel" description="Panel is a collapsible container component." :componentDocs="docs" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AdvancedDoc from '@/doc/panel/AdvancedDoc.vue';
|
||||
import BasicDoc from '@/doc/panel/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/panel/ImportDoc.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const docs = ref([
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'advanced',
|
||||
label: 'Advanced',
|
||||
component: AdvancedDoc
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<Panel
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Panel from 'primevue/panel';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `border border-surface-200 dark:border-surface-700 rounded-md
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-700 dark:text-surface-0`,
|
||||
header: `flex justify-between items-center p-[1.125rem] p-toggleable:py-[0.375rem] p-toggleable:px-[1.125rem]`,
|
||||
title: `leading-none font-semibold`,
|
||||
headerActions: `flex items-center gap-1`,
|
||||
pcToggleButton: {
|
||||
root: `w-10 h-10 px-0 gap-0 rounded-full
|
||||
inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
|
||||
bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
|
||||
border-transparent enabled:hover:border-transparent enabled:active:border-transparent
|
||||
text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300`,
|
||||
label: `p-icon-only:invisible p-icon-only:w-0`
|
||||
},
|
||||
contentContainer: ``,
|
||||
content: `pt-0 pb-[1.125rem] px-[1.125rem] `,
|
||||
footer: `pt-0 pb-[1.125rem] px-[1.125rem] `,
|
||||
transition: ``
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="cx('root')" v-bind="ptmi('root')">
|
||||
<div :class="cx('header')" v-bind="ptm('header')">
|
||||
<div :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
|
||||
<div :class="cx('header')" v-bind="ptm('header')" :data-p="dataP">
|
||||
<slot :id="$id + '_header'" name="header" :class="cx('title')">
|
||||
<span v-if="header" :id="$id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
|
||||
</slot>
|
||||
|
|
@ -42,6 +42,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { cn } from '@primeuix/utils';
|
||||
import MinusIcon from '@primevue/icons/minus';
|
||||
import PlusIcon from '@primevue/icons/plus';
|
||||
import Button from 'primevue/button';
|
||||
|
|
@ -82,6 +83,11 @@ export default {
|
|||
computed: {
|
||||
buttonAriaLabel() {
|
||||
return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
|
||||
},
|
||||
dataP() {
|
||||
return cn({
|
||||
toggleable: this.toggleable
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue