Tokens for ImageCompare
Cagatay Civici
parent
6980c24703
commit
133a63ee2a
|
|
@ -1,9 +1,81 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>IftaLabel does not require any roles and attributes.</p>
|
||||
<p>ImageComponent component uses a native range <i>slider</i> internally. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
|
||||
|
||||
<h3>Keyboard Support</h3>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i>tab</i></td>
|
||||
<td>Moves focus to the component.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-col">
|
||||
<i class="mb-1">left arrow</i>
|
||||
<i>up arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Decrements the value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline-flex flex-col">
|
||||
<i class="mb-1">right arrow</i>
|
||||
<i>down arrow</i>
|
||||
</span>
|
||||
</td>
|
||||
<td>Increments the value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>home</i></td>
|
||||
<td>Set the minimum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>end</i></td>
|
||||
<td>Set the maximum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>page up</i></td>
|
||||
<td>Increments the value by 10 steps.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>page down</i></td>
|
||||
<td>Decrements the value by 10 steps.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<span id="image_label">Compare Images</span>
|
||||
<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
|
||||
...
|
||||
</ImageCompare>
|
||||
|
||||
<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
|
||||
...
|
||||
</ImageCompare>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,20 @@ import ImageCompareStyle from 'primevue/imagecompare/style';
|
|||
export default {
|
||||
name: 'BaseImageCompare',
|
||||
extends: BaseComponent,
|
||||
props: {},
|
||||
props: {
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
ariaLabelledby: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
ariaLabel: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
style: ImageCompareStyle,
|
||||
provide() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -21,32 +21,39 @@ const theme = ({ dt }) => `
|
|||
.p-imagecompare-slider {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
width: calc(100% + 40px);
|
||||
width: calc(100% + ${dt('imagecompare.handle.size')});
|
||||
height: 100%;
|
||||
margin-left: -20px;
|
||||
margin-left: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.p-imagecompare-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
background: #ffffff33;
|
||||
border: 3px solid #ffffff99;
|
||||
border-radius: 50%;
|
||||
height: ${dt('imagecompare.handle.size')};
|
||||
width: ${dt('imagecompare.handle.size')};
|
||||
background: ${dt('imagecompare.handle.background')};
|
||||
border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
|
||||
border-radius: ${dt('imagecompare.handle.border.radius')};
|
||||
background-size: contain;
|
||||
cursor: ew-resize;
|
||||
transition: all ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-imagecompare-slider::-moz-range-thumb {
|
||||
height: ${dt('imagecompare.handle.size')};
|
||||
width: ${dt('imagecompare.handle.size')};
|
||||
background: ${dt('imagecompare.handle.background')};
|
||||
border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
|
||||
border-radius: ${dt('imagecompare.handle.border.radius')};
|
||||
background-size: contain;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.p-imagecompare-slider::-moz-range-thumb {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
background: #ffffff33;
|
||||
border: 3px solid #ffffff99;
|
||||
border-radius: 50%;
|
||||
background-size: contain;
|
||||
cursor: ew-resize;
|
||||
.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {
|
||||
box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
|
||||
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
|
||||
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,20 @@
|
|||
export default {};
|
||||
export default {
|
||||
handle: {
|
||||
size: '30px',
|
||||
background: 'rgba(255,255,255,0.3)',
|
||||
border: {
|
||||
width: '3px',
|
||||
style: 'solid',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
radius: '50%'
|
||||
},
|
||||
transitionDuration: '{transition.duration}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
export default {
|
||||
handle: {
|
||||
size: '30px',
|
||||
background: 'rgba(255,255,255,0.3)',
|
||||
border: {
|
||||
width: '3px',
|
||||
style: 'solid',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
radius: '50%'
|
||||
},
|
||||
transitionDuration: '{transition.duration}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/imagecompare/index.d.ts"
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import imagecompare from '@primevue/themes/aura/imagecompare';
|
||||
import accordion from '@primevue/themes/lara/accordion';
|
||||
import autocomplete from '@primevue/themes/lara/autocomplete';
|
||||
import avatar from '@primevue/themes/lara/avatar';
|
||||
|
|
@ -120,6 +121,7 @@ export default {
|
|||
galleria,
|
||||
iconfield,
|
||||
image,
|
||||
imagecompare,
|
||||
inlinemessage,
|
||||
inplace,
|
||||
inputchips,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
export default {
|
||||
handle: {
|
||||
size: '30px',
|
||||
background: 'rgba(255,255,255,0.3)',
|
||||
border: {
|
||||
width: '3px',
|
||||
style: 'solid',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
radius: '50%'
|
||||
},
|
||||
transitionDuration: '{transition.duration}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/imagecompare/index.d.ts"
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import imagecompare from '@primevue/themes/aura/imagecompare';
|
||||
import accordion from '@primevue/themes/material/accordion';
|
||||
import autocomplete from '@primevue/themes/material/autocomplete';
|
||||
import avatar from '@primevue/themes/material/avatar';
|
||||
|
|
@ -120,6 +121,7 @@ export default {
|
|||
galleria,
|
||||
iconfield,
|
||||
image,
|
||||
imagecompare,
|
||||
inlinemessage,
|
||||
inplace,
|
||||
inputchips,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
export default {
|
||||
handle: {
|
||||
size: '30px',
|
||||
background: 'rgba(255,255,255,0.3)',
|
||||
border: {
|
||||
width: '3px',
|
||||
style: 'solid',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
radius: '50%'
|
||||
},
|
||||
transitionDuration: '{transition.duration}',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: 'rgba(255,255,255,0.3)',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"types": "../types/imagecompare/index.d.ts"
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import imagecompare from '@primevue/themes/aura/imagecompare';
|
||||
import accordion from '@primevue/themes/nora/accordion';
|
||||
import autocomplete from '@primevue/themes/nora/autocomplete';
|
||||
import avatar from '@primevue/themes/nora/avatar';
|
||||
|
|
@ -120,6 +121,7 @@ export default {
|
|||
galleria,
|
||||
iconfield,
|
||||
image,
|
||||
imagecompare,
|
||||
inlinemessage,
|
||||
inplace,
|
||||
inputchips,
|
||||
|
|
|
|||
Loading…
Reference in New Issue