mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-20 03:18:06 +08:00
7e0cbb60b4
Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed
83 lines
1.2 KiB
Vue
83 lines
1.2 KiB
Vue
<template>
|
|
<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
|
|
<div v-if="['Section', 'List'].includes(type)"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.separator {
|
|
&.vertical {
|
|
&.related {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
&.unrelated {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
&.section,
|
|
&.list {
|
|
width: 100%;
|
|
|
|
div {
|
|
height: 1px;
|
|
width: calc(100% - 8px);
|
|
margin: 0 4px;
|
|
background: var(--color-7-middlegray);
|
|
}
|
|
}
|
|
|
|
&.section {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
&.list {
|
|
margin: 4px 0;
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
&.related {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
&.unrelated {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&.section,
|
|
&.list {
|
|
height: 100%;
|
|
|
|
div {
|
|
height: calc(100% - 8px);
|
|
width: 1px;
|
|
margin: 4px 0;
|
|
background: var(--color-7-middlegray);
|
|
}
|
|
}
|
|
|
|
&.section {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
&.list {
|
|
margin: 0 4px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from "vue";
|
|
|
|
import { SeparatorDirection, SeparatorType } from "@/utilities/widgets";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
direction: { type: String as PropType<SeparatorDirection>, default: "Horizontal" },
|
|
type: { type: String as PropType<SeparatorType>, default: "Unrelated" },
|
|
},
|
|
});
|
|
</script>
|