72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<template>
|
|
<button @click="update('left')">
|
|
<svg
|
|
class="inline border-gray-400 rounded-md"
|
|
:class="{border: modelValue === 'left'}"
|
|
height="40"
|
|
viewBox="0 0 21 21"
|
|
width="40"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
><path d="m4.5 6.5h12" /><path d="m4.498 10.5h5.997" /><path d="m4.5 14.5h9.995" /></g></svg>
|
|
</button>
|
|
|
|
<button @click="update('center')">
|
|
<svg
|
|
class="inline border-gray-400 rounded-md"
|
|
:class="{border: modelValue === 'center'}"
|
|
height="40"
|
|
viewBox="0 0 21 21"
|
|
width="40"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
><path d="m4.5 6.5h12" /><path d="m7.498 10.5h5.997" /><path d="m5.5 14.5h9.995" /></g></svg>
|
|
</button>
|
|
|
|
<button @click="update('right')">
|
|
<svg
|
|
class="inline border-gray-400 rounded-md"
|
|
:class="{border: modelValue === 'right'}"
|
|
height="40"
|
|
viewBox="0 0 21 21"
|
|
width="40"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
><path d="m4.5 6.5h12" /><path d="m10.498 10.5h5.997" /><path d="m6.5 14.5h9.995" /></g></svg>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
modelValue: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: null,
|
|
required: false,
|
|
},
|
|
},
|
|
emits: ['update:modelValue'],
|
|
methods: {
|
|
update(value) {
|
|
this.$emit('update:modelValue', value)
|
|
},
|
|
}
|
|
}
|
|
</script>
|