Packages
evision
0.1.39
1.0.1-rc.0
1.0.0
1.0.0-rc.0
0.2.17
0.2.17-rc2
0.2.17-rc1
0.2.16
0.2.16-pre.2
0.2.16-pre
0.2.15
0.2.14
0.2.13
0.2.12
0.2.11
0.2.9
0.2.8
0.2.7
0.2.6
0.2.5
0.2.4
0.2.3
0.2.2
0.2.2-rc2
0.2.1
0.2.0
0.1.39
0.1.38
0.1.37
0.1.36
0.1.35
0.1.34
0.1.33
0.1.32
retired
0.1.31
0.1.30
0.1.29
0.1.28
0.1.27
0.1.26
0.1.26-rc3
0.1.26-rc2
0.1.26-rc1
0.1.26-rc0
0.1.25
0.1.24
0.1.23
0.1.22
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
OpenCV-Erlang/Elixir binding.
Current section
Files
Jump to
Current section
Files
lib/assets/base.js
const BaseSelect = {
name: "BaseSelect",
props: {
label: {
type: String,
default: "",
},
labelTooltip: {
type: String,
default: "",
},
selectClass: {
type: String,
default: "input",
},
modelValue: {
type: String,
default: "",
},
options: {
type: Array,
default: [],
required: true,
},
required: {
type: Boolean,
default: false,
},
inline: {
type: Boolean,
default: false,
},
grow: {
type: Boolean,
default: false,
},
},
methods: {
available(value, options) {
return value
? options.map((option) => option.value).includes(value)
: true;
},
hasTooltip(labelTooltip) {
return labelTooltip.length > 0;
}
},
template: `
<div v-bind:class="[inline ? 'inline-field' : 'field', grow ? 'grow' : '']">
<label v-bind:class="inline ? 'inline-input-label' : 'input-label'">
{{ label }}
</label>
<label v-bind:class="inline ? 'inline-input-label-tooltip' : 'input-label-tooltip'" v-if:"hasTooltip(labelTooltip)">
{{ labelTooltip }}
</label>
<select
:value="modelValue"
v-bind="$attrs"
@change="$emit('update:modelValue', $event.target.value)"
v-bind:class="[selectClass, { unavailable: !available(modelValue, options) }]"
>
<option v-if="!required && !available(modelValue, options)"></option>
<option
v-for="option in options"
:value="option.value"
:key="option"
:selected="option.value === modelValue"
>{{ option.label }}</option>
<option
v-if="!available(modelValue, options)"
class="unavailable"
:value="modelValue"
>{{ modelValue }}</option>
</select>
</div>
`,
};
const BaseInput = {
name: "BaseInput",
props: {
label: {
type: String,
default: "",
},
labelTooltip: {
type: String,
default: "",
},
inputClass: {
type: String,
default: "input",
},
modelValue: {
type: [String, Number],
default: "",
},
inline: {
type: Boolean,
default: false,
},
grow: {
type: Boolean,
default: false,
},
number: {
type: Boolean,
default: false,
},
},
computed: {
emptyClass() {
if (this.modelValue === "") {
return "empty";
}
},
},
methods: {
hasTooltip(labelTooltip) {
return labelTooltip.length > 0;
}
},
template: `
<div v-bind:class="[inline ? 'inline-field' : 'field', grow ? 'grow' : '']">
<label v-bind:class="inline ? 'inline-input-label' : 'input-label'">
{{ label }}
</label>
<label v-bind:class="inline ? 'inline-input-label-tooltip' : 'input-label-tooltip'" v-if:"hasTooltip(labelTooltip)">
{{ labelTooltip }}
</label>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
v-bind="$attrs"
v-bind:class="inputClass"
>
</div>
`,
};
const SmartCellConfig = (ctx, info, extra_components, extra_data) => {
return {
components: {
BaseInput: BaseInput,
BaseSelect: BaseSelect,
...extra_components
},
data() {
return {
fields: info.fields,
...extra_data
};
},
methods: {
handleFieldChange(event) {
const { name: field, value } = event.target;
if (field) {
if (info.id == "evision.zoo") {
ctx.pushEvent("update_field", { field, value });
} else {
const sub_value = field.split(".").reduce((data, key) => data[key], this.fields);
ctx.pushEvent("update_field", { field, value: sub_value });
}
}
},
}
}
};
export const Base = {
BaseInput: BaseInput,
BaseSelect: BaseSelect,
SmartCellConfig: SmartCellConfig
};