update: Checkbox and disabled buttons

playground/components/DeleteButton.vue

@@ -1,10 +1,11 @@
 <template>
   <Button variant="outline-danger">
+
     <template #icon>
       <IconDelete/>
     </template>
 
     <slot>Delete</slot>
 
   </Button>
-</template>
+</template>

playground/components/ImportButton.vue

@@ -1,6 +1,8 @@
 <template>
   <Button :variant="variant">
-    <IconImport />
+    <template #icon>
+      <IconImport/>
+    </template>
     <slot>Import</slot>
   </Button>
 </template>
@@ -12,4 +14,4 @@ const props = defineProps({
     default: 'primary',
   }
 })
-</script>
+</script>

playground/components/layouts/TheHeader.vue

@@ -0,0 +1,20 @@
+<template>
+  <AppHeader>
+
+    <template #brand>
+      <LogoToolkitCombinationWhite/>
+    </template>
+
+    <template #actions>
+
+      <FormGroup label="Instance" label-for="instances-selector" floating>
+        <FormSelect style="width:250px"/>
+      </FormGroup>
+
+      <FormGroup label="Site" label-for="sites-selector" floating>
+        <FormSelect style="width:250px"/>
+      </FormGroup>
+
+    </template>
+  </AppHeader>
+</template>

playground/composables/useTools.js

@@ -10,85 +10,85 @@ export default function () {
     {
       'name': 'annotations',
       'label': 'Annotations',
-      'path': '/',
+      'path': '/login',
       'pluginName': 'Annotations',
     },
     {
       'name': 'custom-alerts',
       'label': 'Custom alerts',
-      'path': '/',
+      'path': '/bootstrap',
       'pluginName': 'CustomAlerts',
     },
     {
       'name': 'custom-dimensions',
       'label': 'Custom dimensions',
-      'path': '/',
+      'path': '/table',
       'pluginName': 'CustomDimensions',
     },
     {
       'name': 'custom-reports',
       'label': 'Custom reports',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'CustomReports',
     },
     {
       'name': 'dashboards',
       'label': 'Dashboards',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'Dashboard',
     },
     {
       'name': 'forms',
       'label': 'Forms',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'FormAnalytics',
     },
     {
       'name': 'funnels',
       'label': 'Funnels',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'Funnels',
     },
     {
       'name': 'goals',
       'label': 'Goals',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'Goals',
     },
     {
       'name': 'heatmaps',
       'label': 'Heatmaps',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'HeatmapSessionRecording',
     },
     {
       'name': 'scheduled-reports',
       'label': 'Scheduled reports',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'ScheduledReports',
     },
     {
       'name': 'segments',
       'label': 'Segments',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'SegmentEditor',
     },
     {
       'name': 'session-recordings',
       'label': 'Session recordings',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'HeatmapSessionRecording',
     },
     {
       'name': 'sites',
       'label': 'Sites',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'SitesManager',
     },
     {
       'name': 'users',
       'label': 'Users',
-      'path': '/',
+      'path': '/tool',
       'pluginName': 'UsersManager',
     }
   ]

playground/layouts/default.vue

@@ -1,15 +1,37 @@
 <template>
-  <LayoutApp>
+  <div class="default-layout">
 
-    <template #header>
-      <TheHeader/>
-    </template>
+      <LayoutsTheHeader/>
 
-    <template #sidebar>
-      <TheSidebar/>
-    </template>
+      <div id="content-wrapper">
 
-    <slot/>
+          <LayoutsTheSidebar/>
+          <main id="content">
+            <div class="view-wrapper">
+              <slot/>
+            </div>
+          </main>
 
-  </LayoutApp>
+      </div>
+
+  </div>
 </template>
+
+
+<style lang="scss">
+.default-layout {
+
+  #content-wrapper {
+    display: flex;
+    max-width: 100vw;
+    padding-top: 2.5rem;
+
+    #content {
+      flex-grow: 1;
+      max-width: calc(100vw - 329px);
+      padding-bottom: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+}
+</style>

playground/layouts/tools.vue

@@ -18,9 +18,3 @@
 
   </div>
 </template>
-
-<style lang="scss">
-#content {
-  padding-top: 136px;
-}
-</style>

playground/pages/index.vue

@@ -52,6 +52,3 @@
 
   </section>
 </template>
-
-<script setup lang="ts">
-</script>

playground/pages/table.vue

@@ -2,16 +2,22 @@
   <section>
     <SectionHeader title="Segments">
       <template #actions>
-        <Button variant="outline-primary">
-          <IconExport/>
+        <Button variant="outline-primary" to="/" disabled>
+          <template #icon>
+            <IconExport/>
+          </template>
           Export
         </Button>
-        <Button variant="outline-danger">
-          <IconDelete/>
+        <Button variant="outline-danger" disabled>
+          <template #icon>
+            <IconDelete/>
+          </template>
           Delete
         </Button>
-        <Button variant="primary">
-          <IconImport/>
+        <Button variant="transparent" to="/import" icon-position="end" disabled>
+          <template #icon>
+            <IconAngleRight/>
+          </template>
           Import
         </Button>
       </template>

src/runtime/components/Button.vue

@@ -8,7 +8,7 @@
     :to="to"
     :type="type"
   >
-    <div class="btn-inner-wrapper">
+    <div class="btn-inner-wrapper" v-if="$slots.icon">
 
       <slot name="icon" v-if="iconPosition === 'start'"/>
 
@@ -17,6 +17,9 @@
       <slot name="icon" v-if="iconPosition === 'end'"/>
 
     </div>
+
+    <slot v-else>{{ text }}</slot>
+
   </component>
 </template>
 
@@ -96,10 +99,14 @@ const buttonTag = computed(() => {
   }
 
 
-  &[disabled] {
+  &[disabled]:not([disabled=false]) {
     background-color: transparent;
     color: var(--bs-secondary);
-    border-color: currentColor;
+
+    &:not(.btn-circle),
+    &:not(.btn-transparent) {
+      border-color: currentColor;
+    }
   }
 
   &.btn-danger {

src/runtime/components/Datatable/DatatableFilter.vue

@@ -41,12 +41,17 @@ function onInput() {
     background-color: transparent;
     padding-right: 0;
     color: var(--bs-body-color) !important;
+
+    svg {
+      width: 1.125rem;
+    }
   }
 
   .form-control {
     border-left: 0;
     color: var(--bs-body-color) !important;
     box-shadow: none;
+
   }
 }
 </style>

src/runtime/components/Datatable/DatatablePagination.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="d-flex gap-2">
-    <Button variant="surface" circle aria-label="Previous page" :disabled="disabledPrevPage" @click="goToPreviousPage">
+    <Button class="datatable-pagination-button" variant="transparent" circle aria-label="Previous page" :disabled="disabledPrevPage" @click="goToPreviousPage">
       <IconAngleLeft/>
     </Button>
 
-    <Button variant="surface" circle aria-label="Next page" :disabled="disabledNextPage" @click="goToNextPage">
+    <Button class="datatable-pagination-button" variant="transparent" circle aria-label="Next page" :disabled="disabledNextPage" @click="goToNextPage">
       <IconAngleRight/>
     </Button>
   </div>
@@ -54,3 +54,12 @@ function goToNextPage() {
   emit('change', nextPageNumber.value);
 }
 </script>
+
+
+<style lang="scss">
+.datatable-pagination-button {
+  width: 2.125rem;
+  height: 2.125rem;
+  padding: 5px !important;
+}
+</style>