Skip to content

Commit da06a39

Browse files
YudhistiraAYudhistiraA
committed
PageSettings for webpage workshop
1 parent 0dd806b commit da06a39

File tree

3 files changed

+137
-12
lines changed

3 files changed

+137
-12
lines changed

‎resources/js/Components/Workshop/BlueprintSiteSettings.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { trans } from "laravel-vue-i18n"
2+
3+
export const blueprint = [
4+
{
5+
name: "Button",
6+
key: ["button"],
7+
replaceForm: [
8+
{
9+
key: ["container",'properties',"background"],
10+
label : "Background",
11+
type: "background",
12+
},
13+
{
14+
key: ["container",'properties',"text"],
15+
type: "textProperty",
16+
},
17+
{
18+
key: ["container",'properties',"margin"],
19+
label : "Margin",
20+
type: "margin",
21+
},
22+
{
23+
key: ["container",'properties',"padding"],
24+
label : "Padding",
25+
type: "padding",
26+
},
27+
{
28+
key: ["container",'properties',"border"],
29+
label : "Border",
30+
type: "border",
31+
},
32+
],
33+
},
34+
]
35+

‎resources/js/Components/Workshop/SiteSettings.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!--
2+
- Author: Raul Perusquia <[email protected]>
3+
- Created: Wed, 07 Jun 2023 02:45:27 Malaysia Time, Kuala Lumpur, Malaysia
4+
- Copyright (c) 2023, Raul A Perusquia Flores
5+
-->
6+
7+
<script setup lang="ts">
8+
import { ref, provide } from 'vue'
9+
import { library } from '@fortawesome/fontawesome-svg-core'
10+
11+
import { blueprint } from '@/Components/Workshop/BlueprintSiteSettings'
12+
import SideEditor from '@/Components/Workshop/SideEditor/SideEditor.vue'
13+
import { Root, Daum } from '@/types/webBlockTypes'
14+
import { Root as RootWebpage } from '@/types/webpageTypes'
15+
16+
17+
const props = defineProps<{
18+
webpage: RootWebpage
19+
webBlockTypes: Root
20+
}>()
21+
22+
const value = ref({
23+
button: {
24+
container: {
25+
properties: {
26+
text: {
27+
color: "rgba(0, 0, 0, 1)",
28+
fontFamily: null
29+
},
30+
background: {
31+
type: "color",
32+
color: "#ffffff",
33+
image: {
34+
original: null
35+
}
36+
},
37+
padding: {
38+
unit: "px",
39+
top: { value: 10 },
40+
left: { value: 10 },
41+
right: { value: 10 },
42+
bottom: { value: 10 }
43+
},
44+
margin: {
45+
unit: "px",
46+
top: { value: 30 },
47+
left: { value: 0 },
48+
right: { value: 0 },
49+
bottom: { value: 0 }
50+
},
51+
border: {
52+
color: "#000000",
53+
unit: "px",
54+
rounded: {
55+
unit: "px",
56+
topright: { value: 10 },
57+
topleft: { value: 10 },
58+
bottomright: { value: 10 },
59+
bottomleft: { value: 10 }
60+
},
61+
top: { value: 0 },
62+
left: { value: 0 },
63+
right: { value: 0 },
64+
bottom: { value: 0 }
65+
}
66+
}
67+
}
68+
}
69+
})
70+
71+
console.log(props.webpage)
72+
73+
const onSaveWorkshopFromId = (blockId: number, from?: string) => {
74+
console.log(blockId, from, value.value)
75+
};
76+
provide("onSaveWorkshopFromId", onSaveWorkshopFromId);
77+
</script>
78+
79+
<template>
80+
<SideEditor v-model="value" :blueprint="blueprint" />
81+
</template>
82+
83+
<style scoped></style>

‎resources/js/Components/Workshop/WebpageSideEditor.vue

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import SideEditor from '@/Components/Workshop/SideEditor/SideEditor.vue'
1919
import { getBlueprint } from '@/Composables/getBlueprintWorkshop'
2020
import ConfirmPopup from 'primevue/confirmpopup';
2121
import { useConfirm } from "primevue/useconfirm";
22-
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
22+
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
23+
import SiteSettings from '@/Components/Workshop/SiteSettings.vue'
2324
2425
import { Root, Daum } from '@/types/webBlockTypes'
2526
import { Root as RootWebpage } from '@/types/webpageTypes'
@@ -128,7 +129,7 @@ const confirmDelete = (event: Event, data: Daum) => {
128129
};
129130
130131
const tabs = [
131-
/* { label: 'Settings', icon: faCogs, tooltip : 'Page Setting' }, */
132+
{ label: 'Settings', icon: faCogs, tooltip : 'Page Setting' },
132133
{ label: 'Block', icon: faLayerGroup, tooltip : 'Blocks'}
133134
]
134135
@@ -144,18 +145,24 @@ const openedChildSideEditor = inject('openedChildSideEditor', ref(null))
144145
<template>
145146
<TabGroup :selectedIndex="selectedTab" @change="changeTab">
146147
<TabList class="flex border-b border-gray-300">
147-
<Tab v-for="(tab, index) in tabs"
148-
:key="index"
149-
class="flex items-center gap-2 px-4 py-2 font-medium text-gray-600 rounded-t-lg hover:bg-gray-100 focus:outline-none"
150-
:class="{ 'bg-white text-indigo-600 border-b-2 border-indigo-600': selectedTab === index }">
151-
<FontAwesomeIcon :icon="tab.icon" fixed-width v-tooltip="tab.tooltip"/>
152-
</Tab>
153-
</TabList>
148+
<Tab v-for="(tab, index) in tabs" :key="index"
149+
class="flex items-center gap-2 px-4 py-2 font-medium text-gray-600 rounded-t-lg hover:bg-gray-100 focus:outline-none"
150+
:class="{ 'bg-white text-indigo-600 border-b-2 border-indigo-600': selectedTab === index }">
151+
<FontAwesomeIcon :icon="tab.icon" fixed-width v-tooltip="tab.tooltip" />
152+
</Tab>
153+
</TabList>
154154
<TabPanels>
155-
<!-- <TabPanel class="w-[400px] p-1" >Content 1</TabPanel> -->
156155
<TabPanel class="w-[400px] p-1">
157-
<div
158-
class="max-h-[calc(100vh-220px)] transition-all overflow-y-auto flex flex-col">
156+
<div class="max-h-[calc(100vh-220px)] transition-all overflow-y-auto flex flex-col">
157+
<SiteSettings
158+
:webpage="webpage"
159+
:webBlockTypes="webBlockTypes"
160+
/>
161+
</div>
162+
163+
</TabPanel>
164+
<TabPanel class="w-[400px] p-1">
165+
<div class="max-h-[calc(100vh-220px)] transition-all overflow-y-auto flex flex-col">
159166
<div class="full">
160167
<Button class="mt-3" full type="dashed" @click="openModalBlockList">
161168
<div class="text-gray-500">

0 commit comments

Comments
 (0)