ImageDiff demos added
tugcekucukoglu
parent
7c0354c1e7
commit
0724715919
|
|
@ -414,6 +414,11 @@
|
||||||
{
|
{
|
||||||
"name": "Image",
|
"name": "Image",
|
||||||
"to": "/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');
|
const path = require('path');
|
||||||
|
|
||||||
// prettier-ignore
|
// 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 themeName = 'aura';
|
||||||
const rootDir = path.resolve(__dirname, '../');
|
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