71 lines
1.1 KiB
Vue
71 lines
1.1 KiB
Vue
<template>
|
|
<rect
|
|
:class="variant !== undefined ? variant : ''"
|
|
:x="rectangle.left"
|
|
:y="rectangle.top"
|
|
:width="rectangle.width"
|
|
:height="rectangle.height"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Rectangle } from "@/lib/rectangle";
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
type RectColor = "primary" | "link" | "info" | "success" | "warning" | "danger";
|
|
|
|
@Options({
|
|
props: {
|
|
variant: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
rectangle: Rectangle,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
public variant?: RectColor;
|
|
public rectangle!: Rectangle;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/bulma-vars";
|
|
|
|
rect {
|
|
fill: transparent;
|
|
fill-opacity: 0.3;
|
|
stroke-opacity: 0.9;
|
|
stroke-width: 1;
|
|
|
|
&.primary {
|
|
fill: $primary;
|
|
stroke: $primary;
|
|
}
|
|
|
|
&.link {
|
|
fill: $link;
|
|
stroke: $link;
|
|
}
|
|
|
|
&.info {
|
|
fill: $info;
|
|
stroke: $info;
|
|
}
|
|
|
|
&.success {
|
|
fill: $success;
|
|
stroke: $success;
|
|
}
|
|
|
|
&.warning {
|
|
fill: $warning;
|
|
stroke: $warning;
|
|
}
|
|
|
|
&.danger {
|
|
fill: $danger;
|
|
stroke: $danger;
|
|
}
|
|
}
|
|
</style>
|