mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
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
56 lines
1.7 KiB
Vue
56 lines
1.7 KiB
Vue
<template>
|
|
<v-chip v-bind="$attrs" label :color="label.color || undefined" :text-color="textColor">
|
|
{{ label.name }}
|
|
</v-chip>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent } from "@nuxtjs/composition-api";
|
|
import { MultiPurposeLabelSummary } from "~/types/api-types/recipe";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
label: {
|
|
type: Object as () => MultiPurposeLabelSummary,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const textColor = computed(() => {
|
|
if (!props.label.color) {
|
|
return "black";
|
|
}
|
|
|
|
return pickTextColorBasedOnBgColorAdvanced(props.label.color, "white", "black");
|
|
});
|
|
|
|
/*
|
|
Function to pick the text color based on the background color.
|
|
|
|
Based on -> https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
|
|
*/
|
|
|
|
const ACCESSIBILITY_THRESHOLD = 0.179;
|
|
|
|
function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
|
|
const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
|
|
const r = parseInt(color.substring(0, 2), 16); // hexToR
|
|
const g = parseInt(color.substring(2, 4), 16); // hexToG
|
|
const b = parseInt(color.substring(4, 6), 16); // hexToB
|
|
const uicolors = [r / 255, g / 255, b / 255];
|
|
const c = uicolors.map((col) => {
|
|
if (col <= 0.03928) {
|
|
return col / 12.92;
|
|
}
|
|
return Math.pow((col + 0.055) / 1.055, 2.4);
|
|
});
|
|
const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
|
|
return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
|
|
}
|
|
|
|
return {
|
|
textColor,
|
|
};
|
|
},
|
|
});
|
|
</script> |