This commit is contained in:
MoreStrive
2024-06-18 14:26:06 +07:00
19 changed files with 246 additions and 155 deletions
@@ -2,7 +2,7 @@
import ADSDefault from '@/assets/images/ads.jpg'
</script>
<template>
<div class="shadow">
<div class="shadow sticky top-10px">
<img :src="ADSDefault" alt="quảng cáo" class=" object-cover">
</div>
</template>
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
import { getInputValue } from "@/utils/parseSQL";
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
const props = defineProps<{
dataResult?: any;
@@ -20,7 +19,6 @@ const LAYOUT_PARSE = computed(() => {
};
}) || [];
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
return Object.assign({}, ...parseLayout, designObject);
});
@@ -65,21 +63,37 @@ const drop = (e: any) => {
<img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
</nuxt-link>
</template>
<span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
</div>
<div class="basic-article_content !py-0" :class="[!parseData && 'no-data']">
<div class="basic-article_content" :class="[!parseData && 'no-data']">
<div>
<nuxt-link :to="`bai-viet/${parseData?.slug}`" v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 text-truncate-two-lines font-bold line-clamp-2 hover:text-primary-600">
<nuxt-link :to="`bai-viet/${parseData?.slug}`"
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
class="line-clamp hover:text-primary-600"
:style="[
LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
LAYOUT_PARSE['lineClampTitle'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampTitle']}`
]"
>
<template v-if="parseData">
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
</template>
<span v-else class="empty-block" style="height: 8px"></span>
</nuxt-link>
<p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3">
<p
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')"
class="mb-0 line-clamp font-arial"
:style="[
LAYOUT_PARSE['fontSizeIntro'] && `font-size: ${LAYOUT_PARSE['fontSizeIntro']}px`,
LAYOUT_PARSE['fontWeightIntro'] && `font-weight: ${LAYOUT_PARSE['fontWeightIntro']}`,
LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
LAYOUT_PARSE['lineClampIntro'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampIntro']}`
]"
>
<template v-if="parseData">
{{ parseData.intro ? parseData.intro?.replace(/<[^>]+>/g, "") : parseData.detail?.replace(/<[^>]+>/g, "") }}
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
</template>
<span v-else class="empty-block" style="height: 5px"></span>
</p>
</div>
</div>
@@ -89,12 +103,19 @@ const drop = (e: any) => {
<style lang="scss" scoped>
.basic-article {
display: flex;
gap: 12px;
gap: 16px;
height: 100%;
padding: 20px;
&.no-data {
gap: 5px !important;
}
.line-clamp {
display: -webkit-box;
/* -webkit-line-clamp: 3; */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
&.vertical {
flex-direction: column;
@@ -103,12 +124,6 @@ const drop = (e: any) => {
}
&.reverse {
flex-direction: column-reverse;
height: 100%;
@media (max-width: 640px) {
flex-direction:column;
}
}
}
&.border-custom {
@@ -116,39 +131,20 @@ const drop = (e: any) => {
}
&.borderLeft {
border-left: 1px solid;
padding-left: 16px;
}
&.borderRight {
border-right: 1px solid;
padding-right: 16px;
}
&.borderTop {
border-top: 1px solid;
padding-top: 16px;
}
&.borderBottom {
border-bottom: 1px solid;
padding-bottom: 16px;
}
&.borderRight ,
&.borderLeft,
&.borderTop,
&.borderBottom {
@media (max-width: 640px) {
border: 0;
padding: 0;
}
}
&.horizontal {
@apply sm:flex-row flex-col;
flex-direction: row;
.basic-article_thumbnail {
width: 40%;
@media (max-width: 640px) {
width: 100% !important;
}
}
&.reverse {
flex-direction: row-reverse;
@@ -158,32 +154,27 @@ const drop = (e: any) => {
&_thumbnail {
img {
width: 100%;
border-radius: 6px;
border-radius: 2px;
aspect-ratio: 16/10;
}
}
&_content {
padding: 10px 0px;
/* padding: 10px 0px; */
flex: 1;
&.no-data {
padding: 0px;
}
h3 {
font-size: 15px;
font-size: 16px;
}
p {
font-size: 12px;
font-size: 14px;
margin-top: 10px;
opacity: 85%;
}
}
// .empty-block {
// background-color: #409eff;
// height: 100px;
// display: block;
// }
}
</style>
@@ -48,7 +48,6 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
}
return null;
}
onMounted(async () => {
clickElement("figure", "custom-figure", "data-code");
@@ -94,12 +93,13 @@ async function copyLink() {
}
}
</script>
<template>
<div id="breakcrumb" class="flex justify-between items-center my-3">
<div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
<ul class="flex gap-6 items-center text-md">
<template v-for="(category, index) in currentCategoryTree" :key="index">
<li class="first:text-primary-600 hover:text-primary-600 font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
<li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
<nuxt-link :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
</li>
</template>
@@ -131,7 +131,7 @@ async function copyLink() {
<h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
<h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold pb-1 mb-3"></div>
<component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
</div>
@@ -152,6 +152,46 @@ async function copyLink() {
</button>
</div>
</div>
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.topics">
<div>
<Icon name="material-symbols:trending-up" class="w-5 h-5"/>
</div>
<span>Chủ đề: </span>
<ul>
<li v-for="(topic, index) in currentArticle?.topics" :key="index" class="mb-1">
<nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link>
<!-- <nuxt-link :to="`topic/${topic.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link> -->
</li>
</ul>
</div>
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.events">
<div>
<Icon name="ic:baseline-event" class="w-5 h-5"/>
</div>
<span>Sự kiện: </span>
<ul>
<li v-for="(event, index) in currentArticle?.events" :key="index" class="mb-1">
<nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link>
<!-- <nuxt-link :to="`event/${event.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link> -->
</li>
</ul>
</div>
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.tags">
<div>
<Icon name="mdi:tag" class="w-5 h-5"/>
</div>
<span>Tags: </span>
<ul class="flex gap-6 flex-wrap">
<li v-for="(tag, index) in currentArticle?.tags" :key="index" class="mb-1 font-normal text-black-500 relative after:absolute after:content-['/'] after:right--4 last:after:content-[''] after:text-[#eee]">
<nuxt-link to="#" class="hover:text-primary-600">{{ tag.title }}</nuxt-link>
<!-- <nuxt-link :to="`topic/${tag.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ tag.title }}</nuxt-link> -->
</li>
</ul>
</div>
</template>
<style lang="scss" scoped>
@@ -84,7 +84,7 @@ async function copyLink() {
<ul class="flex gap-6 items-center text-md">
<template v-for="(category, index) in currentCategoryTree" :key="index">
<li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
<nuxt-link :class="index !== 0 ? '!text-black' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
<nuxt-link :class="index !== 0 ? '!text-black-500' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
</li>
</template>
</ul>
@@ -228,7 +228,7 @@ const durationComputed = computed(() => {
<div class="flex items-center justify-center gap-4 flex-1 text-28px text-primary-600">
<Icon @click="replayAndForward(-10)" name="fluent:skip-back-10-48-filled" />
<button @click="togglePlayer" class="bg-transparent">
<Icon v-if="isPlayed" name="material-symbols:play-arrow" class="text-64px" />
<Icon v-if="isPlayed" name="material-symbols:play-arrow-rounded" class="text-64px" />
<Icon v-if="!isPlayed" name="material-symbols:pause" class="text-64px" />
</button>
@@ -47,21 +47,48 @@ const selectComponent = () => {
emit("selectComponent");
};
const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
const updatedDesignObject = { ...designObject };
if (Array.isArray(designObject[keyActive])) {
const isActive = designObject[keyActive].includes(Number(index) + 1);
return {
...updatedDesignObject,
[key]: isActive ? designObject[key] : defaultValue,
};
}
delete updatedDesignObject[key];
return updatedDesignObject;
};
</script>
<template>
<div>
<div
class="categories-container p-2 border-custom"
class="categories-container border-custom"
@click="selectComponent"
:class="[designObject['LAYOUT_WRAP'] || 'horizontal', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
:style="[designObject['background'] && `background: ${designObject['background']}`]"
>
<div v-for="(component, index) in _dataResult" :key="index" :class="[...(designObject['border']?.length > 0 ? designObject['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']">
<div
v-for="(component, index) in _dataResult"
:key="index"
:class="[...(handleActiveItem('border', 'activesBorder', index, [])['border']?.length > 0 ? handleActiveItem('border', 'activesBorder', index, [])['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']"
>
<template v-if="!isEmpty(component)">
<nuxt-link :to="`/${component.code}`"
:class="index != 0? 'sm:block hidden' : 'font-bold text-20px border-b-2px border-primary-600'"
class="hover:text-primary-600"
class="sm:block hidden hover:text-primary-600"
:class="index == 0 ? 'border-b-1px border-primary-600' : 'text-black-400 font-normal'"
:style="[
handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle'] &&
`font-size: ${handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle']}px`,
handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle'] &&
`font-weight: ${handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle']}`,
designObject['color'] && `color: ${designObject['color']}`
]"
>
{{ component.title }}
</nuxt-link>
@@ -80,6 +107,8 @@ const selectComponent = () => {
align-items: flex-end;
width: fit-content;
overflow: hidden;
padding: 20px;
&.vertical {
flex-direction: column;
}
@@ -89,14 +118,13 @@ const selectComponent = () => {
.category {
height: 100%;
h3 {
font-weight: 500;
font-size: 14px;
a {
font-size: 15px;
margin: 0px !important;
}
&:first-child {
h3 {
a {
font-weight: 600;
font-size: 17px;
}
@@ -108,18 +136,14 @@ const selectComponent = () => {
}
.borderLeft {
border-left: 1px solid;
padding-left: 16px;
}
.borderRight {
border-right: 1px solid;
padding-right: 16px;
}
.borderTop {
border-top: 1px solid;
padding-top: 16px;
}
.borderBottom {
border-bottom: 1px solid;
padding-bottom: 16px;
}
</style>
@@ -1,10 +1,17 @@
<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
import isEmpty from "lodash/isEmpty";
import { isEmpty, groupBy } from "lodash";
import { breakpoint } from "~/definitions";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize()
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
// const store = reactive({
// section: usePageSectionStore(),
// });
// const { currentScreenMode } = storeToRefs(useCmsPageStore());
const _props = defineProps<{
dataResult?: any[];
dataQuery?: string;
@@ -18,7 +25,7 @@ const SETTING_OPTIONS = {
LAYOUT: "TYPE:Card",
};
const layoutParse = computed(() => {
const LAYOUT_PARSE = computed(() => {
const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
const parseItem = _layout.split(":");
return {
@@ -30,7 +37,7 @@ const layoutParse = computed(() => {
});
const _dataResult = computed(() => {
let _components = Array(Number(layoutParse.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
const result = getInputValue(_props.dataResult, "ARRAY");
result &&
result.length > 0 &&
@@ -58,55 +65,89 @@ async function dropData(data: any) {
const selectComponent = () => {
emit("selectComponent");
};
const handleActiveItem = (listKey: string[], listKeyActive: string[], index: number, listDefaultValue: any) => {
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
const updatedDesignObject = { ...designObject };
const dataDefault = {
fontSizeTitle: "defaultFontSizeTitle",
fontWeightTitle: "defaultFontWeightTitle",
};
for (let i = 0; i < listKeyActive.length; i++) {
const keyActive = listKeyActive[i];
const key = listKey[i];
const defaultValue = listDefaultValue[i] || designObject[dataDefault[key]];
if (Array.isArray(designObject[keyActive])) {
const isActive = designObject[keyActive].includes(index + 1);
updatedDesignObject[key] = isActive ? designObject[key] : defaultValue;
} else {
delete updatedDesignObject[key];
}
}
return updatedDesignObject;
};
const mapActivesToItems = (index: number) => {
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
const output = {};
designObject.layoutGrid?.forEach((item: any) => {
item.actives.forEach((active: any) => {
output[active] = { ...item };
});
});
return output[index + 1] || {};
};
</script>
<template>
<div>
<div
class="collection-container p-2 border-custom"
:class="[layoutParse['LAYOUT_WRAP'] || 'vertical', ...(layoutParse['borderWrap']?.length > 0 ? layoutParse['borderWrap'] : [])]"
@click="selectComponent"
:style="[`grid-template-columns: repeat(${currentScreenMode === 'smartphone' ? 1 : layoutParse['COLUMN']}, minmax(0, 1fr))`, layoutParse['background'] && `background: ${layoutParse['background']}`]"
>
<DynamicComponent
class="h-full"
v-for="(component, index) in _dataResult"
:key="index"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
label,
dataResult: !isEmpty(component) ? { ...component } : null,
}"
@drop-data="dropData"
/>
</div>
<div
class="collection-container border-custom"
:class="[LAYOUT_PARSE['LAYOUT_WRAP'] || 'vertical', ...(LAYOUT_PARSE['borderWrap']?.length > 0 ? LAYOUT_PARSE['borderWrap'] : [])]"
@click="selectComponent"
:style="[`grid-template-columns: repeat(${width < breakpoint.sm ? 1 : LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`, LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
>
<DynamicComponent
v-for="(component, index) in _dataResult"
:key="index"
:style="[
mapActivesToItems(index)['colSpan'] && `grid-column: span ${mapActivesToItems(index)['colSpan']} / span ${mapActivesToItems(index)['colSpan']}`,
mapActivesToItems(index)['colStart'] && `grid-column-start: ${mapActivesToItems(index)['colStart']}`,
mapActivesToItems(index)['colEnd'] && `grid-column-end: ${mapActivesToItems(index)['colEnd']}`,
]"
:settings="{
template: SETTING_OPTIONS.TEMPLATE,
layout: SETTING_OPTIONS.LAYOUT,
label: handleActiveItem(['border', 'HIDE', 'fontSizeTitle', 'fontWeightTitle'], ['activesBorder', 'activesHide', 'activesFontSize', 'activesFontWeight'], index, [[], [], null, null]),
dataResult: !isEmpty(component) ? { ...component } : null,
}"
@drop-data="dropData"
/>
</div>
</template>
<style lang="scss" scoped>
.collection-container {
display: grid;
gap: 10px;
&.border-custom {
border-color: #e5e5e5 !important;
}
&.borderLeft {
border-left: 1px solid;
padding-left: 10px;
}
&.borderRight {
border-right: 1px solid;
padding-right: 10px;
}
&.borderTop {
border-top: 1px solid;
padding-top: 10px;
}
&.borderBottom {
border-bottom: 1px solid;
padding-bottom: 10px;
}
&.vertical {
grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -115,11 +156,7 @@ const selectComponent = () => {
grid-template-rows: auto;
grid-auto-flow: column;
}
.empty {
min-height: 100px;
border-radius: 6px;
background: #409eff;
}
&.noData {
border-radius: 6px;
}
@@ -10,9 +10,9 @@ const _props = defineProps<{
const definedDynamicComponent: Record<string, any> = {
'TYPE:Article-LAYOUT:horizontal-DATA:HORIZONTAL': Article_Pagination
};
console.log('đã vào')
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
console.log(getCurrentComponent.value, 'getcomponent')
const GET_PROPS = computed(() => {
return () => {
let props: any = {};
@@ -110,9 +110,6 @@ watch(
/>
</template>
</template>
<template v-else>
<div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ đây</h6></div>
</template>
<div class="button-page flex">
<a class="btn-page prev-page cursor-pointer" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="w-7 h-6 text-primary-600">
@@ -141,25 +138,22 @@ watch(
.section-container {
.collection-container {
display: grid;
gap: 10px;
/* gap: 10px; */
overflow-x: scroll;
&.border-custom {
border-color: #e5e5e5 !important;
}
&.borderLeft {
border-left: 1px solid;
padding-left: 16px;
}
&.borderRight {
border-right: 1px solid;
padding-right: 16px;
}
&.borderTop {
border-top: 1px solid;
padding-top: 16px;
}
&.borderBottom {
border-bottom: 1px solid;
padding-bottom: 16px;
}
&.vertical {
grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -168,30 +162,8 @@ watch(
grid-template-rows: auto;
grid-auto-flow: column;
}
&.borderRight ,
&.borderLeft,
&.borderTop,
&.borderBottom {
}
@media (max-width: 640px) {
border: 0;
padding: 0;
}
}
}
.empty {
width: 100%;
height: 100%;
min-height: 50px;
background-color: #409eff;
display: flex;
white-space: normal;
justify-content: center;
align-items: center;
h6 {
color: #fff;
}
}
.basic-article {
&.article {
margin-bottom: 10px;
@@ -229,7 +201,4 @@ watch(
align-items: center;
}
}
.el-empty {
padding: 12px 0;
}
</style>
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
</script>
<template>
<div class="section_layout grid gap-[16px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
<div class="section_layout grid lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
<div
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
:key="index"
@@ -13,7 +13,7 @@ const html = $('.parent').addClass('xl:(flex items-center justify-center)')
html.find('>li').addClass('relative group xl:mr-3 hover:text-blue')
html.find('ul').addClass('hidden w-200px shadow group-hover:(block absolute top-full left-0 bg-white z-50)')
html.find('>li>a').addClass('block py-4')
html.find('>li>ul>li>a').addClass('block py-10px px-15px text-black hover:(bg-blue text-white)')
html.find('>li>ul>li>a').addClass('block py-10px px-15px text-black-500 hover:(bg-blue text-white)')
</script>
@@ -14,7 +14,6 @@ const getCurrentTemplate = computed(() => {
return _props.settings && _props.settings.template || '';
});
console.log(getCurrentTemplate.value, 'tempalte')
const GET_PROPS = computed(() => {
return () => {