94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<template>
|
|
<button
|
|
v-if="unref(visibility) !== Visibility.None"
|
|
:class="{ feature: true, tile: true, can: unref(canClick), locked: !unref(canClick) }"
|
|
:style="[
|
|
{
|
|
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
|
|
},
|
|
unref(style) ?? {}
|
|
]"
|
|
@click="onClick"
|
|
@mousedown="start"
|
|
@mouseleave="stop"
|
|
@mouseup="stop"
|
|
@touchstart.passive="start"
|
|
@touchend.passive="stop"
|
|
@touchcancel.passive="stop"
|
|
>
|
|
<div v-if="title"><component :is="titleComponent" /></div>
|
|
<component :is="component" style="white-space: pre-line" />
|
|
<Node :id="id" />
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import "components/common/features.css";
|
|
import Node from "components/Node.vue";
|
|
import { CoercableComponent, StyleValue, Visibility } from "features/feature";
|
|
import {
|
|
computeComponent,
|
|
computeOptionalComponent,
|
|
processedPropType,
|
|
setupHoldToClick
|
|
} from "util/vue";
|
|
import { defineComponent, PropType, toRefs, unref } from "vue";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
visibility: {
|
|
type: processedPropType<Visibility>(Number),
|
|
required: true
|
|
},
|
|
onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
|
|
onHold: Function as PropType<VoidFunction>,
|
|
display: {
|
|
type: processedPropType<CoercableComponent>(Object, String, Function),
|
|
required: true
|
|
},
|
|
title: processedPropType<CoercableComponent>(Object, String, Function),
|
|
style: processedPropType<StyleValue>(String, Object, Array),
|
|
canClick: {
|
|
type: processedPropType<boolean>(Boolean),
|
|
required: true
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
Node
|
|
},
|
|
setup(props) {
|
|
const { onClick, onHold, title, display } = toRefs(props);
|
|
|
|
const { start, stop } = setupHoldToClick(onClick, onHold);
|
|
|
|
const titleComponent = computeOptionalComponent(title);
|
|
const component = computeComponent(display);
|
|
|
|
return {
|
|
start,
|
|
stop,
|
|
titleComponent,
|
|
component,
|
|
Visibility,
|
|
unref
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tile {
|
|
min-height: 80px;
|
|
width: 80px;
|
|
font-size: 10px;
|
|
background-color: var(--layer-color);
|
|
}
|
|
|
|
.tile > * {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|