184ed8e17d
## Summary - Moved out canvas loading handling to canvas store - Tag editable routes via meta to remove router dependency from generic helpers - Replace all occurrences of `genericHelpers` mixin with composable and audit usage - Moved out `isRedirectSafe` and `getRedirectQueryParameter` out of genericHelpers to remove dependency on router Removing the router dependency is important, because `useRouter` and `useRoute` compostables are only available if called from component instance. So if composable is nested within another composable, we wouldn't be able to use these. In this case we'd always need to inject the router and pass it through several composables. That's why I moved the `readonly` logic to router meta and `isRedirectSafe` and `getRedirectQueryParameter` out as they were only used in a single component. --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
60 lines
1.0 KiB
Vue
60 lines
1.0 KiB
Vue
<template>
|
|
<n8n-card :class="$style.card" v-bind="$attrs">
|
|
<template v-if="!loading" #header>
|
|
<span :class="$style.title" v-text="title" />
|
|
</template>
|
|
<n8n-loading :loading="loading" :rows="3" variant="p" />
|
|
<template v-if="!loading" #footer>
|
|
<slot name="footer" />
|
|
</template>
|
|
</n8n-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'Card',
|
|
props: {
|
|
loading: {
|
|
type: Boolean,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.card {
|
|
min-width: 235px;
|
|
height: 140px;
|
|
margin-right: var(--spacing-2xs);
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
margin-right: var(--spacing-5xs);
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 2px 4px rgba(68, 28, 23, 0.07);
|
|
}
|
|
|
|
> div {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
font-size: var(--font-size-s);
|
|
line-height: var(--font-line-height-regular);
|
|
font-weight: var(--font-weight-bold);
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
}
|
|
</style>
|