feat: new layout
This commit is contained in:
MoreStrive
@@ -0,0 +1,242 @@
|
||||
<script setup lang="ts">
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
|
||||
import { isEmpty } from "lodash";
|
||||
const emit = defineEmits(["dropData", "selectComponent"]);
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
|
||||
const _props = defineProps<{
|
||||
dataResult?: any;
|
||||
dataType?: any;
|
||||
dataQuery?: any;
|
||||
layout?: string;
|
||||
label?: string;
|
||||
}>();
|
||||
const SETTING_OPTIONS = {
|
||||
BREADCRUMB_MAX_ELEMENT: 3,
|
||||
};
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
||||
return Object.assign({}, designObject);
|
||||
});
|
||||
const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
const parseData = computed(() => {
|
||||
if (!_props.dataResult) return;
|
||||
const result = getInputValue(_props.dataResult, "OBJECT");
|
||||
return result;
|
||||
});
|
||||
|
||||
const drop = (e: any) => {
|
||||
if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
|
||||
const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
|
||||
const { dataType, dataResult } = JSON.parse(data);
|
||||
const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
|
||||
emit("dropData", {
|
||||
dataType,
|
||||
dataResult,
|
||||
dataQuery: dataQuery,
|
||||
});
|
||||
}
|
||||
};
|
||||
const articleStore = useArticleStore();
|
||||
console.log(articleStore.currentArticleGeneral, "cas");
|
||||
const currentArticle = computed(() => articleStore.currentArticleGeneral);
|
||||
</script>
|
||||
<template>
|
||||
<div @click="selectComponent" class="overflow-hidden" @dragover.prevent @drop.stop.prevent="drop">
|
||||
<div class="breadcrumb" v-if="!LAYOUT_PARSE['HideBreadcrumb']">
|
||||
<ul class="breadcrumb__list">
|
||||
<li
|
||||
class="breadcrumb__list__item"
|
||||
v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
|
||||
:key="index"
|
||||
:class="isEmpty(item) && 'empty'"
|
||||
>
|
||||
<p v-if="!isEmpty(item)" class="breadcrumb__list__item__title">
|
||||
{{ item?.title }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nuxt-link class="article-card-default__topic" :to="`#`">
|
||||
<h5>Topic</h5>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
<div class="content">Nội dung bài viết sẽ ở đây</div>
|
||||
<!-- <div class="btn-wrap" v-if="!LAYOUT_PARSE['HideCopylink']">
|
||||
<div class="center-y">
|
||||
<p title="Quay trở lại" class="button--back">
|
||||
<Icon name="fa6-solid:arrow-left" />
|
||||
</p>
|
||||
<button class="button--bookmark">
|
||||
<Icon name="fa6-regular:bookmark" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="center-y">
|
||||
<button title="Copy link" class="button--back">
|
||||
<Icon name="mdi:link-variant" />
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 180%;
|
||||
}
|
||||
// &:first-child {
|
||||
// color: blue;
|
||||
// }
|
||||
|
||||
&:not(:first-child):before {
|
||||
content: "\\";
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-card-default__topic {
|
||||
position: relative;
|
||||
// background-color: #151411;
|
||||
display: inline-block;
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
// color: #fff;
|
||||
padding: 0 12px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border: 1px solid #000;
|
||||
line-height: 180%;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
background-color: #ed1c24;
|
||||
left: -12px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
border-radius: 6px;
|
||||
background: #409eff;
|
||||
width: 40px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.content {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: #eeeeee;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.intro {
|
||||
white-space: normal;
|
||||
padding-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// .btn-wrap {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
|
||||
// @media (min-width: 768px) {
|
||||
// flex-direction: row;
|
||||
// }
|
||||
// .class-default,
|
||||
// .button--back {
|
||||
// border-radius: 9999px;
|
||||
// border-width: 1px;
|
||||
// width: 3rem;
|
||||
// height: 3rem;
|
||||
// margin: 0;
|
||||
// font-size: 17px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// background-color: #ffffff;
|
||||
// border: 1px solid rgb(229, 231, 235);
|
||||
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
// &:hover {
|
||||
// background-color: #e6f4ff;
|
||||
// color: #3c7abc;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .button--bookmark {
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// border-radius: 200px;
|
||||
// background-color: white;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// border: none;
|
||||
// &:hover {
|
||||
// background-color: #e6f4ff;
|
||||
// color: #3c7abc;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.center-y {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user