opnform/resources/js/components/forms/CodeInput.vue

66 lines
1.3 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
2023-10-28 10:17:50 +00:00
<input-wrapper
2023-12-01 20:24:38 +00:00
v-bind="inputWrapperProps"
2023-10-28 10:17:50 +00:00
>
<template #label>
<slot name="label" />
</template>
<template #help>
<slot name="help" />
</template>
2022-09-20 19:59:52 +00:00
2023-10-28 10:17:50 +00:00
<div
:class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
>
2023-12-01 20:24:38 +00:00
<codemirror :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
:options="cmOptions"
2022-09-20 19:59:52 +00:00
:style="inputStyle" :name="name"
:placeholder="placeholder"
/>
</div>
2022-09-20 19:59:52 +00:00
2023-10-28 10:17:50 +00:00
<template #error>
<slot name="error" />
</template>
</input-wrapper>
2022-09-20 19:59:52 +00:00
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
2023-10-28 10:17:50 +00:00
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
2022-09-20 19:59:52 +00:00
export default {
name: 'CodeInput',
2023-10-28 10:17:50 +00:00
components: { InputWrapper, codemirror },
props: {
...inputProps
},
setup (props, context) {
return {
2023-12-01 20:24:38 +00:00
...useFormInput(props, context)
2023-10-28 10:17:50 +00:00
}
},
2022-09-20 19:59:52 +00:00
data () {
return {
cmOptions: {
// codemirror options
tabSize: 4,
mode: 'text/html',
theme: 'default',
lineNumbers: true,
line: true
}
2022-09-20 19:59:52 +00:00
}
2023-10-28 10:17:50 +00:00
}
2022-09-20 19:59:52 +00:00
}
</script>