forked from trent_larson/crowd-funder-for-time-pwa
3dbb836ae5
Changes: - Move v-model directives before other attributes - Move v-bind directives before event handlers - Reorder attributes for better readability - Fix template attribute ordering across components - Improve eslint rules - add default vite config for testing (handles nostr error too) This follows Vue.js style guide recommendations for attribute ordering and improves template consistency.
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<a
|
|
v-if="linkToFull && imageUrl"
|
|
:href="imageUrl"
|
|
target="_blank"
|
|
class="h-full w-full object-contain"
|
|
>
|
|
<div class="h-full w-full object-contain" v-html="generateIdenticon()" />
|
|
</a>
|
|
<div
|
|
v-else
|
|
class="h-full w-full object-contain"
|
|
v-html="generateIdenticon()"
|
|
/>
|
|
</template>
|
|
<script lang="ts">
|
|
import { toSvg } from "jdenticon";
|
|
import { Vue, Component, Prop } from "vue-facing-decorator";
|
|
|
|
const BLANK_CONFIG = {
|
|
lightness: {
|
|
color: [1.0, 1.0],
|
|
grayscale: [1.0, 1.0],
|
|
},
|
|
saturation: {
|
|
color: 0.0,
|
|
grayscale: 0.0,
|
|
},
|
|
backColor: "#0000",
|
|
};
|
|
|
|
@Component
|
|
export default class ProjectIcon extends Vue {
|
|
@Prop entityId = "";
|
|
@Prop iconSize = 0;
|
|
@Prop imageUrl = "";
|
|
@Prop linkToFull = false;
|
|
|
|
generateIdenticon() {
|
|
if (this.imageUrl) {
|
|
return `<img src="${this.imageUrl}" class="w-full h-full object-contain" />`;
|
|
} else {
|
|
const config = this.entityId ? undefined : BLANK_CONFIG;
|
|
const svgString = toSvg(this.entityId, this.iconSize, config);
|
|
return svgString;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped></style>
|