thainv-dev: Xóa bớt file, folder thừa
This commit is contained in:
nguyen van thai
-67
@@ -1,67 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
|
||||
import { getInputValue } from '@/utils/parseSQL';
|
||||
import isEmpty from "lodash/isEmpty";
|
||||
|
||||
const _props = defineProps<{
|
||||
dataResult?: any[];
|
||||
dataQuery?: string;
|
||||
layout?: string;
|
||||
}>();
|
||||
|
||||
const SETTING_OPTIONS = {
|
||||
MAX_ELEMENT: 5,
|
||||
TEMPLATE: "Article",
|
||||
LAYOUT: "LAYOUT:vertical"
|
||||
};
|
||||
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
|
||||
const parseItem = _layout.split(":");
|
||||
return {
|
||||
[parseItem[0]]: parseItem[1],
|
||||
};
|
||||
});
|
||||
return Object.assign({}, ...parseLayout);
|
||||
});
|
||||
|
||||
const _dataResult = computed(() => {
|
||||
let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
|
||||
const result = getInputValue(_props.dataResult, 'ARRAY');
|
||||
result && result.length > 0 && _components.map((_ : any, index : any) => {
|
||||
_components[index] = result[index] || null;
|
||||
})
|
||||
return _components;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'"
|
||||
:style="`grid-template-columns: repeat(${LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`">
|
||||
<div v-for="(component, index) in _dataResult" :key="index">
|
||||
<template v-if="!isEmpty(component)">
|
||||
<DynamicComponent
|
||||
:settings="{
|
||||
template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
|
||||
layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
|
||||
dataResult: { ...component },
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collection-container {
|
||||
&.vertical {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
&.horizontal {
|
||||
grid-template-rows: auto;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,124 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP, getInputValue } from '@/utils/parseSQL';
|
||||
|
||||
const props = defineProps<{
|
||||
dataResult?: any
|
||||
dataType?: any
|
||||
dataQuery?: any
|
||||
layout?: string
|
||||
}>()
|
||||
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const parseLayout = props.layout?.split('-')?.map((_layout : any) => {
|
||||
const parseItem = _layout.split(':')
|
||||
return {
|
||||
[parseItem[0]]: parseItem[0] === 'HIDE' ? parseItem[1].split(',') : parseItem[1],
|
||||
};
|
||||
}) || [];
|
||||
return Object.assign({}, ...parseLayout);
|
||||
})
|
||||
|
||||
const emit = defineEmits(['selectComponent', 'dropData']);
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="basic-article gap-x-4" :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '']">
|
||||
<div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail">
|
||||
<template v-if="parseData">
|
||||
<img class="object-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="basic-article_content" :class="[!parseData && 'no-data']">
|
||||
<div>
|
||||
<template v-if="parseData">
|
||||
<nuxt-link :to="`/bai-viet/${parseData.slug}`">
|
||||
<h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-700 hover:text-primary-600 transition-all duration-300">
|
||||
{{ parseData.title?.replace(/<[^>]+>/g, '') }}
|
||||
</h3>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3 sm:line-clamp-3 text-[14px]">
|
||||
<template v-if="parseData">
|
||||
<template v-if="parseData.intro">
|
||||
{{ parseData.intro?.replace(/<[^>]+>/g, '') }}
|
||||
</template>
|
||||
<template v-if="parseData.sub">
|
||||
{{ parseData.sub?.replace(/<[^>]+>/g, '') }}
|
||||
</template>
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-article {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
|
||||
&.vertical {
|
||||
@apply lg:grid-cols-1 sm:grid-cols-2;
|
||||
.basic-article_content {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.basic-article_content {
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
.basic-article_thumbnail {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.basic-article_content {
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_thumbnail {
|
||||
flex: 1;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
aspect-ratio: 16/10;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
background-color: #409eff;
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,6 +19,7 @@ const store = reactive({
|
||||
const { categoryTree } = storeToRefs(store.category);
|
||||
|
||||
|
||||
|
||||
function increase() {
|
||||
const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue("--step").trim()));
|
||||
step.value += 2;
|
||||
@@ -58,6 +59,8 @@ onMounted(async () => {
|
||||
if (detailEmagazine && breakcrumb) {
|
||||
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty("--step", '0');
|
||||
});
|
||||
|
||||
function clickElement(type: string, selector: string, attribute: string) {
|
||||
@@ -152,6 +155,9 @@ async function copyLink() {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:root {
|
||||
--step: 1;
|
||||
}
|
||||
#sub,
|
||||
#intro,
|
||||
#intro + div {
|
||||
|
||||
@@ -77,7 +77,6 @@ async function copyLink() {
|
||||
}
|
||||
}
|
||||
|
||||
console.log(currentArticle, "curetna");
|
||||
</script>
|
||||
<template>
|
||||
<div class="content" v-if="currentArticle">
|
||||
@@ -126,14 +125,14 @@ console.log(currentArticle, "curetna");
|
||||
#sub,
|
||||
#intro,
|
||||
#intro + div {
|
||||
font-size: calc(16px + var(--step) * 1px);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: calc(28px + var(--step) * 1px);
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#published-on {
|
||||
font-size: calc(14px + var(--step) * 1px);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,9 +22,9 @@ console.log(currentArticle.value ,'curenta')
|
||||
<template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<div class="md:col-span-2">
|
||||
<video class="w-full h-full" controls="controls" width="100%" height="100%" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
|
||||
<source src="" type="video/mp4" />
|
||||
</video>
|
||||
<div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
|
||||
<div v-html="currentArticle?.detail" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 pt-2 bg-[rgb(248,249,250)]">
|
||||
|
||||
Reference in New Issue
Block a user