92cf97e401
* generate types * use generated types * ui updates * init button link for common styles * add links * setup label views * add delete confirmation * reset when not saved * link label to foods and auto set when adding to shopping list * generate types * use inheritence to manage exception handling * fix schema generation and add test for open_api generation * add header to api docs * move list consilidation to service * split list and list items controller * shopping list/list item tests - PARTIAL * enable recipe add/remove in shopping lists * generate types * linting * init global utility components * update types and add list item api * fix import cycle and database error * add container and border classes * new recipe list component * fix tests * breakout item editor * refactor item editor * update bulk actions * update input / color contrast * type generation * refactor controller dependencies * include food/unit editor * remove console.logs * fix and update type generation * fix incorrect type for column * fix postgres error * fix delete by variable * auto remove refs * fix typo
66 lines
No EOL
1.6 KiB
Vue
66 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<v-text-field v-model="inputVal" label="Color">
|
|
<template #prepend>
|
|
<v-btn class="elevation-0" small height="30px" width="30px" :color="inputVal || 'grey'" @click="setRandomHex">
|
|
<v-icon color="white">
|
|
{{ $globals.icons.refreshCircle }}
|
|
</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<template #append>
|
|
<v-menu v-model="menu" left nudge-left="30" nudge-top="20" :close-on-content-click="false">
|
|
<template #activator="{ on }">
|
|
<v-icon v-on="on">
|
|
{{ $globals.icons.formatColorFill }}
|
|
</v-icon>
|
|
</template>
|
|
<v-card>
|
|
<v-card-text class="pa-0">
|
|
<v-color-picker v-model="inputVal" flat hide-inputs show-swatches swatches-max-height="200" />
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-menu>
|
|
</template>
|
|
</v-text-field>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const menu = ref(false);
|
|
|
|
const inputVal = computed({
|
|
get: () => {
|
|
return props.value;
|
|
},
|
|
set: (val) => {
|
|
context.emit("input", val);
|
|
},
|
|
});
|
|
|
|
function getRandomHex() {
|
|
return "#000000".replace(/0/g, function () {
|
|
return (~~(Math.random() * 16)).toString(16);
|
|
});
|
|
}
|
|
|
|
function setRandomHex() {
|
|
inputVal.value = getRandomHex();
|
|
}
|
|
|
|
return {
|
|
menu,
|
|
setRandomHex,
|
|
inputVal,
|
|
};
|
|
},
|
|
});
|
|
</script> |