From 70a9978e6b84422d795fd75c259454dc2a415581 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 10 Oct 2023 18:04:32 +0300
Subject: [PATCH] Remove designer part

---
 assets/styles/layout/landing/_designer.scss | 151 -----------------
 assets/styles/layout/landing/_landing.scss  |   1 -
 pages/index.vue                             |   3 -
 pages/landing/DesignerSection.vue           | 175 --------------------
 4 files changed, 330 deletions(-)
 delete mode 100644 assets/styles/layout/landing/_designer.scss
 delete mode 100644 pages/landing/DesignerSection.vue

diff --git a/assets/styles/layout/landing/_designer.scss b/assets/styles/layout/landing/_designer.scss
deleted file mode 100644
index 4046b7380..000000000
--- a/assets/styles/layout/landing/_designer.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-.landing-designer {
-    .designer-demo {
-        --dd-primary:#4f8ff7;
-        --dd-primary-darker:#3575dd;
-        --dd-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-
-        .p-component {
-            font-family: var(--dd-font);
-        }
-
-        .p-slider {
-            .p-slider-range {
-                background-color: var(--dd-primary);
-            }
-    
-            .p-slider-handle {
-                border-color: var(--dd-primary);
-    
-                &:hover {
-                    background-color: var(--dd-primary);
-                    border-color: var(--dd-primary);
-                }
-            }
-        }
-    
-        .p-inputtext {
-            &:enabled:hover {
-                border-color: var(--dd-primary);
-            }
-    
-            &:focus {
-                box-shadow: none;
-                border-color: var(--dd-primary);
-            }
-        }
-    
-        .p-checkbox {
-            &:not(.p-checkbox-disabled) .p-checkbox-box {
-                &:hover, &.p-focus {
-                    border-color: var(--dd-primary);
-                }
-    
-                &.p-focus {
-                    box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
-                }
-            }
-    
-            .p-checkbox-box {
-                &.p-highlight {
-                    background-color: var(--dd-primary);
-                    border-color: var(--dd-primary);
-    
-                    &:hover {
-                        background-color: var(--dd-primary);
-                        border-color: var(--dd-primary);
-                    }
-                }
-            }
-        }
-    
-        .p-button {
-            background-color: var(--dd-primary);
-            border-color: var(--dd-primary);
-    
-            &.p-button-outlined {
-                background-color: transparent;
-    
-                .p-button-icon, .p-button-label {
-                    color: var(--dd-primary);
-                }
-
-                &:enabled:hover,
-                &:enabled:active {
-                    background-color: transparent;
-                }
-            }
-    
-            &:enabled:hover,
-            &:enabled:active {
-                background-color: var(--dd-primary-darker);
-                border-color: var(--dd-primary-darker);
-            }
-    
-            &:focus {
-                box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
-            }
-        }
-    
-        .p-listbox {
-            .p-listbox-list .p-listbox-item.p-highlight {
-                background-color: transparent;
-                box-shadow: inset 0 0 0 0.15rem var(--dd-primary);
-                color: var(--text-color);
-            }
-        }
-
-        .p-inputtext, .p-button, .p-listbox-item, .p-slider {
-            transition: all .5s;
-        }
-
-        .p-slider, .p-checkbox {
-            transition: transform .5s;
-        }
-
-        &.demo-size-small {
-            .p-inputtext, .p-button {
-                padding: .5rem;
-            }
-
-            .p-listbox-item {
-                padding: .5rem 1rem;
-            }
-
-            .p-slider, .p-checkbox {
-                transform: scale(0.9);
-            }
-        }
-
-        &.demo-size-large {
-            .p-inputtext, .p-button {
-                padding: 1rem;
-            }
-
-            .p-listbox-item {
-                padding: 1rem 1.5rem;
-            }
-
-            .p-slider, .p-checkbox {
-                transform: scale(1.1);
-            }
-        }
-    }
-
-    .formgrid > .field {
-        padding: 1rem 2rem 1rem;
-    }
-
-    .designer-editor {
-        backdrop-filter: blur(1rem);
-        box-shadow: var(--home-card-shadow);
-        max-width: 1250px !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
-    .designer-controls {
-        border-radius: 0 !important;
-        background: transparent;
-    }
-    
-}
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_landing.scss b/assets/styles/layout/landing/_landing.scss
index a5885960b..b155a338f 100644
--- a/assets/styles/layout/landing/_landing.scss
+++ b/assets/styles/layout/landing/_landing.scss
@@ -10,6 +10,5 @@ $landingBreakpointXL: 1199px;
 @import './_getstarted';
 @import './_themes';
 @import './_blocks';
-@import './_designer';
 @import './_templates';
 @import './_features';
diff --git a/pages/index.vue b/pages/index.vue
index a2d7e8faa..8c02ffa60 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,7 +6,6 @@
         <UsersSection />
         <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
         <BlockSection />
-        <DesignerSection />
         <TemplateSection />
         <FeaturesSection />
         <FooterSection />
@@ -23,7 +22,6 @@ import AppNews from '@/layouts/AppNews';
 import HeroSection from './landing/HeroSection';
 import AppTopBar from '@/layouts/AppTopBar.vue';
 import BlockSection from './landing/BlockSection';
-import DesignerSection from './landing/DesignerSection';
 import FeaturesSection from './landing/FeaturesSection';
 import FooterSection from './landing/FooterSection';
 import TemplateSection from './landing/TemplateSection';
@@ -101,7 +99,6 @@ export default {
         HeroSection,
         ThemeSection,
         BlockSection,
-        DesignerSection,
         TemplateSection,
         UsersSection,
         FeaturesSection,
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
deleted file mode 100644
index 3ca913118..000000000
--- a/pages/landing/DesignerSection.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-    <section class="landing-designer py-8">
-        <div class="section-header">Theme Designer</div>
-        <p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
-        <div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-gray' : 'light-gray'}.svg')`, backgroundSize: 'cover' }">
-            <div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
-                <div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
-                    <div class="text-center mb-4">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
-                    </div>
-                    <div class="p-fluid">
-                        <span class="font-semibold block mb-3">Primary</span>
-                        <div>
-                            <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
-                            <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
-                            <button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
-                            <button type="button" class="border-circle w-2rem h-2rem px-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
-                        </div>
-
-                        <span class="font-semibold block mt-4 mb-3">Font</span>
-                        <Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
-
-                        <span class="font-semibold block mt-4 mb-3">Size</span>
-                        <div class="flex flex-wrap gap-4 align-items-center">
-                            <div class="flex align-items-center">
-                                <RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
-                                <label for="size-small" class="ml-2 font-medium">Small</label>
-                            </div>
-                            <div class="flex align-items-center">
-                                <RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
-                                <label for="size-normal" class="ml-2 font-medium">Normal</label>
-                            </div>
-                            <div class="flex align-items-center">
-                                <RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
-                                <label for="size-large" class="ml-2 font-medium">Large</label>
-                            </div>
-                        </div>
-
-                        <span class="font-semibold block mt-4 mb-3">Input Style</span>
-                        <div class="flex align-items-center mb-6">
-                            <div class="flex align-items-center">
-                                <RadioButton id="inputStyle1" value="outlined" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
-                                <label for="inputStyle1" class="ml-2 font-medium">Outlined</label>
-                            </div>
-                            <div class="flex align-items-center ml-4">
-                                <RadioButton id="inputStyle2" value="filled" name="inputstylevalue" :modelValue="inputstyle" @update:modelValue="onChange" />
-                                <label for="inputStyle2" class="ml-2 font-medium">Filled</label>
-                            </div>
-                        </div>
-
-                        <a href="https://designer.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active">
-                            <span>View Full Version</span>
-                            <i class="pi pi-arrow-right ml-auto"></i>
-                        </a>
-                    </div>
-                </div>
-                <div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
-                    <div class="p-fluid formgrid grid pt-3">
-                        <div class="field col-12 xl:col-6">
-                            <label for="username" class="font-semibold mb-3 p-component">Username</label>
-                            <InputText id="username" type="text" />
-                        </div>
-                        <div class="field col-12 xl:col-6">
-                            <label for="email" class="font-semibold mb-3 p-component">Email</label>
-                            <InputText id="email" type="text" />
-                        </div>
-                        <div class="field col-12 xl:col-6">
-                            <label for="price" class="font-semibold mb-3 p-component">Price</label>
-                            <div class="p-inputgroup">
-                                <span class="p-inputgroup-addon">$</span>
-                                <InputNumber id="price" placeholder="Price" />
-                                <span class="p-inputgroup-addon">.00</span>
-                            </div>
-                        </div>
-                        <div class="field col-12 xl:col-6">
-                            <label for="date" class="font-semibold mb-3 p-component">Date</label>
-                            <div class="p-inputgroup">
-                                <span class="p-inputgroup-addon">
-                                    <i class="pi pi-calendar"></i>
-                                </span>
-                                <InputMask id="date" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
-                            </div>
-                        </div>
-                        <div class="field col-12 xl:col-6">
-                            <span class="font-semibold mb-2 block mb-3 mt-3 p-component">City</span>
-                            <Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
-                        </div>
-                        <div class="field col-12 xl:col-6">
-                            <label for="email" class="font-semibold mb-3 mt-3 p-component">Range</label>
-                            <Slider v-model="range" range />
-
-                            <span class="font-semibold mb-2 block mb-3 mt-5 p-component">Checkboxes</span>
-                            <div class="flex flex-column xl:flex-row xl:align-items-center">
-                                <div class="flex align-items-center">
-                                    <Checkbox id="cb1" v-model="values" :value="value1" name="cbvalue" />
-                                    <label for="cb1" class="ml-2 font-medium p-component white-space-nowrap">Option 1</label>
-                                </div>
-                                <div class="flex align-items-center mt-3 xl:mt-0 xl:ml-4">
-                                    <Checkbox id="cb2" v-model="values" :value="value2" name="cbvalue" />
-                                    <label for="cb2" class="ml-2 font-medium p-component white-space-nowrap">Option 2</label>
-                                </div>
-                            </div>
-
-                            <span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
-                            <div class="flex align-items-center">
-                                <Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button>
-                                <Button type="button" label="Clear" icon="pi pi-times" outlined class="ml-1"></Button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            size: 'normal',
-            font: { label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
-            fonts: [
-                { label: 'Arial', value: 'Arial,Helvetica Neue,Helvetica,sans-serif' },
-                { label: 'System', value: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol' },
-                { label: 'Trebuchet MS', value: 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif' },
-                { label: 'Verdana', value: 'Verdana,Geneva,sans-serif' }
-            ],
-            selectedCity: null,
-            cities: [
-                { name: 'New York', code: 'NY' },
-                { name: 'Rome', code: 'RM' },
-                { name: 'London', code: 'LDN' },
-                { name: 'Paris', code: 'PRS' }
-            ],
-            range: [20, 80],
-            value1: 1,
-            value2: 2,
-            values: []
-        };
-    },
-    editor: null,
-    methods: {
-        changeTheme(color, darker) {
-            this.editor.style.setProperty('--dd-primary', color);
-            this.editor.style.setProperty('--dd-primary-darker', darker);
-        },
-        changeFont(event) {
-            this.editor.style.setProperty('--dd-font', event.value.value);
-            this.font = event.value;
-        },
-        onChange(value) {
-            this.$primevue.config.inputStyle = value;
-        },
-        editorRef(el) {
-            this.editor = el;
-        }
-    },
-    computed: {
-        editorclass() {
-            return [
-                'designer-demo',
-                {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'demo-size-small': this.size === 'small',
-                    'demo-size-large': this.size === 'large'
-                }
-            ];
-        },
-        inputstyle() {
-            return this.$primevue.config.inputStyle;
-        }
-    }
-};
-</script>