ImageDiff demos added
tugcekucukoglu
parent
7c0354c1e7
commit
0724715919
|
|
@ -414,6 +414,11 @@
|
|||
{
|
||||
"name": "Image",
|
||||
"to": "/image"
|
||||
},
|
||||
{
|
||||
"name": "ImageDiff",
|
||||
"to": "/imagediff",
|
||||
"badge": "NEW"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>IftaLabel does not require any roles and attributes.</p>
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>ImageDiff</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<ImageDiff />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<ImageDiff />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import ImageDiff from 'primevue/imagediff';
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<DocPTViewer :docs="docs">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
|
||||
</DocPTViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
data: getPTOptions('ImageDiff'),
|
||||
key: 'ImageDiff'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>ImageDiff Pass Through</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOptions } from '@/components/doc/helpers';
|
||||
import PTViewer from './PTViewer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.viewer',
|
||||
label: 'Viewer',
|
||||
component: PTViewer
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.image',
|
||||
label: 'ImageDiff PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOptions('ImageDiff')
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
|
||||
PrimeVue components with Tailwind CSS.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>ImageDiff Theming</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'theming.styled',
|
||||
label: 'Styled',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.classes',
|
||||
label: 'CSS Classes',
|
||||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('ImageDiff')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('ImageDiff')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'theming.unstyled',
|
||||
label: 'Unstyled',
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<DocComponent title="Vue ImageDiff Component" header="ImageDiff" description="ImageDiff" :componentDocs="docs" :apiDocs="['ImageDiff']" />
|
||||
</template>
|
||||
<!-- :ptTabComponent="ptComponent"
|
||||
:themingDocs="themingDoc" -->
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/imagediff/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/imagediff/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/imagediff/ImportDoc.vue';
|
||||
// import PTComponent from '@/doc/imagediff/pt/index.vue';
|
||||
// import ThemingDoc from '@/doc/imagediff/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
]
|
||||
// ptComponent: PTComponent,
|
||||
// themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,7 +2,94 @@ const fs = require('fs');
|
|||
const path = require('path');
|
||||
|
||||
// prettier-ignore
|
||||
const THEME_COMPONENTS = ['Accordion','AutoComplete','Avatar','Badge','BlockUI','Breadcrumb','Button','Card','Carousel','CascadeSelect','Checkbox','Chip','ColorPicker','ConfirmDialog','ConfirmPopup','ContextMenu','DataTable','DataView','DatePicker','Dialog','Divider','Dock','Drawer','Editor','Fieldset','FileUpload','FloatLabel','Galleria','IconField','IftaLabel','Image','InlineMessage','Inplace','InputChips','InputGroup','InputNumber','InputText','Knob','Listbox','MegaMenu','Menu','Menubar','Message','MeterGroup','MultiSelect','OrderList','OrganizationChart','OverlayBadge','Paginator','Panel','PanelMenu','Password','PickList','Popover','ProgressBar','ProgressSpinner','RadioButton','Rating','Ripple','ScrollPanel','Select','SelectButton','Skeleton','Slider','SpeedDial','SplitButton','Splitter','Stepper','Steps','Tabmenu','Tabs','TabView','Tag','Terminal','Textarea','TieredMenu','Timeline','Toast','ToggleButton','ToggleSwitch','Toolbar','Tooltip','Tree','TreeSelect','TreeTable'];
|
||||
const THEME_COMPONENTS = [
|
||||
'Accordion',
|
||||
'AutoComplete',
|
||||
'Avatar',
|
||||
'Badge',
|
||||
'BlockUI',
|
||||
'Breadcrumb',
|
||||
'Button',
|
||||
'Card',
|
||||
'Carousel',
|
||||
'CascadeSelect',
|
||||
'Checkbox',
|
||||
'Chip',
|
||||
'ColorPicker',
|
||||
'ConfirmDialog',
|
||||
'ConfirmPopup',
|
||||
'ContextMenu',
|
||||
'DataTable',
|
||||
'DataView',
|
||||
'DatePicker',
|
||||
'Dialog',
|
||||
'Divider',
|
||||
'Dock',
|
||||
'Drawer',
|
||||
'Editor',
|
||||
'Fieldset',
|
||||
'FileUpload',
|
||||
'FloatLabel',
|
||||
'Galleria',
|
||||
'IconField',
|
||||
'IftaLabel',
|
||||
'Image',
|
||||
'ImageDiff',
|
||||
'InlineMessage',
|
||||
'Inplace',
|
||||
'InputChips',
|
||||
'InputGroup',
|
||||
'InputNumber',
|
||||
'InputText',
|
||||
'Knob',
|
||||
'Listbox',
|
||||
'MegaMenu',
|
||||
'Menu',
|
||||
'Menubar',
|
||||
'Message',
|
||||
'MeterGroup',
|
||||
'MultiSelect',
|
||||
'OrderList',
|
||||
'OrganizationChart',
|
||||
'OverlayBadge',
|
||||
'Paginator',
|
||||
'Panel',
|
||||
'PanelMenu',
|
||||
'Password',
|
||||
'PickList',
|
||||
'Popover',
|
||||
'ProgressBar',
|
||||
'ProgressSpinner',
|
||||
'RadioButton',
|
||||
'Rating',
|
||||
'Ripple',
|
||||
'ScrollPanel',
|
||||
'Select',
|
||||
'SelectButton',
|
||||
'Skeleton',
|
||||
'Slider',
|
||||
'SpeedDial',
|
||||
'SplitButton',
|
||||
'Splitter',
|
||||
'Stepper',
|
||||
'Steps',
|
||||
'Tabmenu',
|
||||
'Tabs',
|
||||
'TabView',
|
||||
'Tag',
|
||||
'Terminal',
|
||||
'Textarea',
|
||||
'TieredMenu',
|
||||
'Timeline',
|
||||
'Toast',
|
||||
'ToggleButton',
|
||||
'ToggleSwitch',
|
||||
'Toolbar',
|
||||
'Tooltip',
|
||||
'Tree',
|
||||
'TreeSelect',
|
||||
'TreeTable'
|
||||
];
|
||||
|
||||
const themeName = 'aura';
|
||||
const rootDir = path.resolve(__dirname, '../');
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export default {};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/imagediff/index.d.ts"
|
||||
}
|
||||
Loading…
Reference in New Issue