Introduced new code display

assets/styles/layout/_code.scss

@@ -27,7 +27,7 @@ pre[class*="language-"] {
     background: transparent;
     margin: 0;
     padding: 0;
-    max-height: 40rem;
+    max-height: 60rem;
     overflow: auto;
 
     &:before, &:after {
@@ -131,7 +131,7 @@ pre[class*="language-"] {
 
 pre[class*="language-"] {    
     code {
-        background: var(--demo-code-bg) !important;
+        background: var(--demo-code-bg);
         transition: background-color .5s, border-color .5s;
     }
 }
@@ -140,7 +140,7 @@ pre[class*="language-"] {
     &[data-p-theme^="md-"] {
         pre[class*="language-"] {    
             code {
-                background: var(--surface-900) !important;
+                background: var(--surface-900);
             }
         }
     }

assets/styles/layout/_doc.scss

@@ -194,38 +194,6 @@
     }
 }
 
-
-.doc-section-code-buttons {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    z-index: 1;
-    top: .75rem;
-    right: .75rem;
-    gap: .75rem;
-    
-    button {
-        outline: 0 none;
-        outline-offset: 0;
-        background-color: transparent;
-        transition: background-color .2s, box-shadow .2s;
-        border: 0 none;
-        color: var(--demo-code-button-color);
-        cursor: pointer;
-
-        &:hover {
-            background-color: var(--demo-code-button-hover-bg);
-            color: var(--demo-code-button-hover-color);
-        }
-    }
-}
-
-.doc-section-code-tooltip .p-tooltip-text {
-    padding: 0.5rem;
-    font-size: 11px;
-}
-
 .doc-section-code { 
     position: relative;
     
@@ -238,8 +206,56 @@
     &:not(:last-child) {
         margin-bottom: 1rem;
     }
+
+    &:hover {
+        .doc-section-code-buttons {
+            display: flex;
+        }
+    }
 }
 
+.doc-section-code-buttons {
+    position: absolute;
+    align-items: center;
+    justify-content: end;
+    z-index: 1;
+    top: .75rem;
+    right: .75rem;
+    gap: .75rem;
+    display: none;
+    background: rgba(255,255,255,.05);
+    border-radius: 10px;
+    padding: 4px;
+    backdrop-filter: blur(20px);
+    
+    button {
+        outline: 0 none;
+        border-radius: 10px;
+        outline-offset: 0;
+        background-color: transparent;
+        transition: background-color .2s, box-shadow .2s;
+        border: 0 none;
+        color: var(--demo-code-button-color);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--demo-code-button-hover-bg);
+            color: var(--demo-code-button-hover-color);
+        }
+
+        &.code-active {
+            color: #bbf7d0;
+        }
+    }
+}
+
+.doc-section-code-tooltip .p-tooltip-text {
+    padding: 0.5rem;
+    font-size: 11px;
+}
+
+
+
 .doc-tablewrapper {
     overflow: auto;
 }

components/doc/DocSectionCode.vue

@@ -1,30 +1,25 @@
 <template>
     <div v-if="!embedded" class="doc-section-code">
-        <div class="doc-section-code-buttons">
+        <div class="doc-section-code-buttons fadein animation-duration-300">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
-                <button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
+                <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
-                <button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
+                <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
             </template>
 
             <template v-if="!hideToggleCode">
-                <button
+                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
-                    v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
-                    type="button"
-                    @click="toggleCodeMode('composition')"
-                    class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
-                >
                     <i class="pi pi-code"></i>
                 </button>
             </template>
 
             <template v-if="!hideToggleCode && code.data">
-                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
+                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
                     <i class="pi pi-database"></i>
                 </button>
             </template>
 
             <template v-if="!hideCodeSandbox">
-                <button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
+                <button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
                     <svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
                         <path
                             d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
@@ -34,14 +29,14 @@
             </template>
 
             <template v-if="!hideStackBlitz">
-                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
+                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
                     <svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
                         <path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
                     </svg>
                 </button>
             </template>
 
-            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
+            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
                 <i class="pi pi-copy"></i>
             </button>
         </div>
@@ -53,30 +48,22 @@
             </template>
 
             <template v-if="codeMode === 'basic' && !importCode">
-                <pre v-code><code>
+                <pre v-code><code>{{ code.basic }}
-{{ code.basic }}
-
 </code></pre>
             </template>
 
             <template v-if="codeMode !== 'basic' && codeLang === 'options'">
-                <pre v-code><code>
+                <pre v-code><code>{{ code.options }}
-{{ code.options }}
-
 </code></pre>
             </template>
 
             <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
-                <pre v-code><code>
+                <pre v-code><code>{{ code.composition }}
-{{ code.composition }}
-
 </code></pre>
             </template>
 
             <template v-if="codeMode !== 'basic' && codeLang === 'data'">
-                <pre v-code.json><code>
+                <pre v-code.json><code>{{ code.data }}
-{{ code.data }}
-
 </code></pre>
             </template>
         </div>

doc/checkbox/AccessibilityDoc.vue

@@ -44,7 +44,8 @@ export default {
 <span id="chkbox2">Remember Me</span>
 <Checkbox aria-labelledby="chkbox2" />
 
-<Checkbox aria-label="Remember Me" />`
+<Checkbox aria-label="Remember Me" />
+`
             }
         };
     }

doc/checkbox/BasicDoc.vue

@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<Checkbox v-model="checked" :binary="true" />`,
+<Checkbox v-model="checked" :binary="true" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/checkbox/DisabledDoc.vue

@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<Checkbox v-model="checked" disabled />`,
+<Checkbox v-model="checked" disabled />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/checkbox/DynamicDoc.vue

@@ -29,7 +29,8 @@ export default {
 <div v-for="category of categories" :key="category.key" class="flex align-items-center">
     <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
     <label :for="category.key">{{ category.name }}</label>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -56,7 +57,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -79,7 +81,8 @@ const categories = ref([
     {name: "Research", key: "R"}
 ]);
 const selectedCategories = ref(['Marketing']);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/checkbox/GroupDoc.vue

@@ -47,7 +47,8 @@ export default {
         <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
         <label for="ingredient4" class="ml-2"> Onion </label>
     </div>
-</div>`,
+</div>
+`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
@@ -78,7 +79,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-3">
@@ -105,7 +107,8 @@ export default {
 import { ref } from "vue";
 
 const pizza = ref();
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/checkbox/InvalidDoc.vue

@@ -15,7 +15,8 @@ export default {
             checked: false,
             code: {
                 basic: `
-<Checkbox v-model="checked" class="p-invalid" />`,
+<Checkbox v-model="checked" class="p-invalid" />
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -31,7 +32,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -43,7 +45,8 @@ export default {
 import { ref } from "vue";
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/checkbox/form/VeeValidateDoc.vue

@@ -53,7 +53,8 @@ export default {
         </form>
         <Toast />
     </div>
-</template>`,
+</template>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -94,7 +95,8 @@ export default {
         return { value, handleSubmit, onSubmit, errorMessage };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">

doc/checkbox/pt/PTDoc.vue

@@ -29,7 +29,8 @@ export default {
             class: state.focused ? 'border-orange-400' : undefined
         })
     }"
-/>`,
+/>
+`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -53,7 +54,8 @@ export default {
         };
     }
 };
-<\/script>`,
+<\/script>
+`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
@@ -73,7 +75,8 @@ export default {
 import { ref } from "vue";
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }

doc/checkbox/theming/TailwindDoc.vue

@@ -15,7 +15,8 @@ export default {
     data() {
         return {
             code1: {
-                basic: `export default {
+                basic: `
+export default {
     checkbox: {
         root: {
             class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
@@ -51,7 +52,8 @@ export default {
 import { ref } from "vue";
 
 const checked = ref(false);
-<\/script>`
+<\/script>
+`
             }
         };
     }