vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

DeferredContent, Editor, VirtualScroller theming tabs added

pull/4243/head
Tuğçe Küçükoğlu 2023-08-04 14:39:10 +03:00
parent 2bd77e1b21
commit 3f673307b6
10 changed files with 128 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
doc/deferredcontent/StyleDoc.vue → doc/deferredcontent/theming/StyledDoc.vue
View File

27
doc/deferredcontent/theming/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>DeferredContent Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
}
]
};
}
};
</script>

0
doc/editor/StyleDoc.vue → doc/editor/theming/StyledDoc.vue
View File

29
doc/editor/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Editor v-model="value" editorStyle="height: 320px" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref('');
<\/script>`
}
};
}
};
</script>

33
doc/editor/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Editor Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/virtualscroller/StyleDoc.vue → doc/virtualscroller/theming/StyledDoc.vue
View File

27
doc/virtualscroller/theming/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>VirtualScroller Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
}
]
};
}
};
</script>

11
pages/deferredcontent/index.vue
View File

@ -6,6 +6,7 @@
:componentDocs="docs"
:apiDocs="['DeferredContent']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
@ -14,8 +15,8 @@ import AccessibilityDoc from '@/doc/deferredcontent/AccessibilityDoc.vue';
import BasicDoc from '@/doc/deferredcontent/BasicDoc.vue';
import DataTableDoc from '@/doc/deferredcontent/DataTableDoc.vue';
import ImportDoc from '@/doc/deferredcontent/ImportDoc.vue';
import StyleDoc from '@/doc/deferredcontent/StyleDoc.vue';
import PTComponent from '@/doc/deferredcontent/pt/index.vue';
import ThemingDoc from '@/doc/deferredcontent/theming/index.vue';
export default {
data() {
@ -36,18 +37,14 @@ export default {
label: 'DataTable',
component: DataTableDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/editor/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Editor Component" header="Editor" description="Editor is rich text editor component based on Quill." :componentDocs="docs" :apiDocs="['Editor']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Editor Component" header="Editor" description="Editor is rich text editor component based on Quill." :componentDocs="docs" :apiDocs="['Editor']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -8,10 +8,10 @@ import BasicDoc from '@/doc/editor/BasicDoc.vue';
import ImportDoc from '@/doc/editor/ImportDoc.vue';
import QuillDoc from '@/doc/editor/QuillDoc.vue';
import ReadOnlyDoc from '@/doc/editor/ReadOnlyDoc.vue';
import StyleDoc from '@/doc/editor/StyleDoc.vue';
import TemplateDoc from '@/doc/editor/TemplateDoc.vue';
import VeeValidateDoc from '@/doc/editor/form/VeeValidateDoc.vue';
import PTComponent from '@/doc/editor/pt/index.vue';
import ThemingDoc from '@/doc/editor/theming/index.vue';
export default {
data() {
@ -54,18 +54,14 @@ export default {
}
]
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

11
pages/virtualscroller/index.vue
View File

@ -6,6 +6,7 @@
:componentDocs="docs"
:apiDocs="['VirtualScroller']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
@ -18,8 +19,8 @@ import HorizontalDoc from '@/doc/virtualscroller/HorizontalDoc';
import ImportDoc from '@/doc/virtualscroller/ImportDoc';
import LazyDoc from '@/doc/virtualscroller/LazyDoc';
import LoadingDoc from '@/doc/virtualscroller/LoadingDoc';
import StyleDoc from '@/doc/virtualscroller/StyleDoc';
import PTComponent from '@/doc/virtualscroller/pt/index.vue';
import ThemingDoc from '@/doc/virtualscroller/theming/index.vue';
export default {
data() {
@ -60,18 +61,14 @@ export default {
label: 'Lazy',
component: LazyDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};