| 1 |
<cx-vui-component-wrapper |
| 2 |
:elementId="currentId" |
| 3 |
:label="label" |
| 4 |
:description="description" |
| 5 |
:wrapper-css="wrapperCss" |
| 6 |
:preventWrap="preventWrap" |
| 7 |
v-if="isVisible()" |
| 8 |
> |
| 9 |
<div |
| 10 |
:class="controlClasses" |
| 11 |
> |
| 12 |
|
| 13 |
<SlickList |
| 14 |
class="cx-vui-media__attachments" |
| 15 |
axis="xy" |
| 16 |
:distance="1" |
| 17 |
:hideSortableGhost="false" |
| 18 |
@input="sortInput" |
| 19 |
v-model="attachmentList" |
| 20 |
> |
| 21 |
<SlickItem |
| 22 |
:class="[ 'cx-vui-media__attachment', `attachment-type-${ attachment.type }` ]" |
| 23 |
v-for="(attachment, index) in attachmentList" |
| 24 |
:index="index" |
| 25 |
:key="index" |
| 26 |
> |
| 27 |
|
| 28 |
<svg |
| 29 |
class="cx-vui-media__control cx-vui-media__control-remove" |
| 30 |
@click="removeAttachment(attachment.id)" |
| 31 |
width="16" |
| 32 |
height="16" |
| 33 |
viewBox="0 0 16 16" |
| 34 |
fill="none" |
| 35 |
xmlns="http://www.w3.org/2000/svg" |
| 36 |
> |
| 37 |
<path d="M13 4.00671L9.00671 8L13 11.9933L11.9933 13L8 9.00671L4.00671 13L3 11.9933L6.99329 8L3 4.00671L4.00671 3L8 6.99329L11.9933 3L13 4.00671Z" fill="#C92C2C"/> |
| 38 |
</svg> |
| 39 |
|
| 40 |
<img :src="'image'===attachment.type ? attachment.url : attachment.icon" alt=""> |
| 41 |
</SlickItem> |
| 42 |
</SlickList> |
| 43 |
<div |
| 44 |
class="cx-vui-media__add-button" |
| 45 |
@click="openWpMediaPopup" |
| 46 |
> |
| 47 |
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 48 |
<path d="M11.75 5.25H6.75V0.25C6.75 0.111875 6.63813 0 6.5 0H5.5C5.36187 0 5.25 0.111875 5.25 0.25V5.25H0.25C0.111875 5.25 0 5.36187 0 5.5V6.5C0 6.63813 0.111875 6.75 0.25 6.75H5.25V11.75C5.25 11.8881 5.36187 12 5.5 12H6.5C6.63813 12 6.75 11.8881 6.75 11.75V6.75H11.75C11.8881 6.75 12 6.63813 12 6.5V5.5C12 5.36187 11.8881 5.25 11.75 5.25Z" fill="#7B7E81"/> |
| 49 |
</svg> |
| 50 |
</div> |
| 51 |
<input |
| 52 |
type="hidden" |
| 53 |
:id="currentId" |
| 54 |
:name="name" |
| 55 |
:value="inputValue" |
| 56 |
ref="wpmedia" |
| 57 |
> |
| 58 |
</div> |
| 59 |
</cx-vui-component-wrapper> |
| 60 |
|
