Vue Custom Settings Panels

Summary

Developers using AdapTable Vue can provide Custom Settings Panels
This is done by leveraging VueFrameworkComponent

AdapTable Vue allows developer to provide custom panels in the Settings Panel in a "Vue" way.

Vue Components as Custom Settings Panel

Fork Fork

In this demo we provide a custom Settings Panel with a SlideToggle button switching between the (default) Light and Dark Themes
It re-uses (and customizes) the exact same SlideToggle component which was provided in the previous custom Toolbar and Tool Panel demos

Expand to see the code used

<script setup>
import {ref, onMounted} from 'vue';
import SlideToggle from './SlideToggle.vue';

const props = defineProps({
  adaptableApi: {
    type: Object,
    required: true,
  },
});

const currentTheme = ref(props.adaptableApi.themeApi.getCurrentTheme());

onMounted(() => {
  props.adaptableApi.eventApi.on('ThemeChanged', () => {
    currentTheme.value = props.adaptableApi.themeApi.getCurrentTheme();
  });
});

const handleToggleChange = toggleValue => {
  if (toggleValue) {
    props.adaptableApi.themeApi.loadDarkTheme();
  } else {
    props.adaptableApi.themeApi.loadLightTheme();
  }
};
</script>

<template>
  <div>
    <h3>Custom Theme Settings Panel</h3>
    <p>Current Theme is {{ currentTheme }}</p>
    <div class="themeToggle">
      <span>Switch to </span>
      <SlideToggle
        :onText="'Light'"
        :offText="'Dark'"
        :onColor="'#c0ce28'"
        :offColor="'#01222c'"
        @toggleChange="handleToggleChange" />
    </div>
  </div>
</template>

<style scoped>
.themeToggle {
  display: flex;
  gap: calc(var(--ab-base-space) * 2);
  align-items: center;
}

PreviousTool Panel NextPopups