@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/widgets/Dashboard.vue

@@ -0,0 +1,1773 @@
+<template>
+  <div v-if="cConfig && presets" :class="$style.comp">
+
+    <div :style="sidebarStyle"
+         class="relative flex flex-col border-r-[1px] border-text-50 panel-400 overflow-hidden">
+
+      <TransitionGroup class="flex-1 flex flex-col" name="openltr" tag="div">
+
+        <div v-if="selectedView" class="flex-1 flex flex-col">
+          <div class="p-5 flex flex-row gap-3">
+            <button type="button" @click="delete cConfig.selectedView">
+              <svg class="fill-text hover:fill-primary" height="16" viewBox="0 0 448 512" width="16"
+                   xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/>
+              </svg>
+            </button>
+            <div class="leading-tight flex-1">
+              <small class="text-xs text-text-400">{{ selectedView.type }}</small>
+              <h5 class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap" @click="log(selectedView)">
+                {{ selectedView.props.label ?? selectedView.name }}
+              </h5>
+            </div>
+          </div>
+
+          <div class="flex-1 overflow-y-auto flex flex-col">
+
+            <component :is="`${selectedView?.type}Setting`"
+                       :config="config"
+                       :datasource="selectedPreset.datasource"
+                       :index="viewTypeIndex"
+                       :readonly="selectedPreset.readonly"
+                       :value="selectedView"
+                       :view-type="config.viewType"
+                       @change="load({ [selectedView.uid]:selectedView })"/>
+
+          </div>
+        </div>
+
+        <div v-else-if="selectedDatasource" class="flex-1 flex flex-col">
+          <div class="p-5 flex flex-row items-center gap-2 pb-0">
+            <button type="button" @click="delete cConfig.selectedDatasource">
+              <svg class="fill-text hover:fill-primary" height="16" viewBox="0 0 448 512" width="16"
+                   xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/>
+              </svg>
+            </button>
+            <Textbox v-model="selectedDatasource.name"
+                     class="flex-1 bg-transparent border-transparent rounded-none"
+                     item-class="font-bold text-lg p-0"
+                     @click="log(selectedDatasource)"/>
+            <button v-if="previewSrc" class="text-primary" type="button"
+                    @click="previewDatasource(selectedDatasource)">
+              Preview
+            </button>
+          </div>
+
+          <div class="flex justify-center border-b-[1px] border-text-50 mt-3">
+            <Tabs v-model="selectedDatasource.tabIndex" :items="datasourceTabs"/>
+          </div>
+
+          <div class="flex-1 overflow-y-auto flex">
+
+            <div v-if="selectedDatasource.tabIndex === 1" class="py-5 flex-1 flex flex-col gap-5">
+
+              <div class="px-5">
+                <Textbox placeholder="Search columns..." v-model="datasourceColumnSearch" />
+              </div>
+
+              <VirtualGrid class="flex-1"
+                           :items="selectedDatasourceColumns">
+                <template #item="{ item }">
+                  <div v-if="!item.key.startsWith('_') || (item.key.startsWith('_') && (preset.pivot && preset.pivot.enabled))"
+                       class="flex flex-row items-center gap-3 mx-5">
+                    <div class="flex-1 flex flex-row gap-2 items-center" :class="$style.button">
+                      <div>
+                        {{ item.label2 ?? item.label }}
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </VirtualGrid>
+
+              <div class="h-[1px] bg-text-50"></div>
+
+              <div class="h-[200px] flex flex-col">
+                <div class="flex flex-row gap-2 px-5">
+                  <label class="text-text-400 flex-1">Computed Columns</label>
+                  <button type="button" class="text-primary" @click="$refs.virtualColumnEdit.open({}, addComputedColumns)">
+                    Add Column
+                  </button>
+                </div>
+                <VirtualGrid class="flex-1 mt-5" :items="selectedDatasourceComputedColumns">
+                  <template #item="{ item, index }">
+                    <div class="flex flex-row items-center gap-3 p-3 mx-5 group" :class="$style.button">
+                      <div class="flex-1">{{ item.label }}</div>
+                      <div class="hidden flex-row gap-3 group-hover:flex">
+                        <button type="button" class="text-primary" @click="selectedDatasource.computedColumns.splice(index, 1)">
+                          <svg width="16" height="16" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/></svg>
+                        </button>
+                        <button type="button" class="text-primary" @click="$refs.virtualColumnEdit.open(item, addComputedColumns)">
+                          <svg width="14" height="14" class="fill-text-300 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M383.1 448H63.1V128h156.1l64-64H63.1C28.65 64 0 92.65 0 128v320c0 35.35 28.65 64 63.1 64h319.1c35.34 0 63.1-28.65 63.1-64l-.0039-220.1l-63.1 63.99V448zM497.9 42.19l-28.13-28.14c-18.75-18.75-49.14-18.75-67.88 0l-38.62 38.63l96.01 96.01l38.62-38.63C516.7 91.33 516.7 60.94 497.9 42.19zM147.3 274.4l-19.04 95.22c-1.678 8.396 5.725 15.8 14.12 14.12l95.23-19.04c4.646-.9297 8.912-3.213 12.26-6.562l186.8-186.8l-96.01-96.01L153.8 262.2C150.5 265.5 148.2 269.8 147.3 274.4z"/></svg>
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                </VirtualGrid>
+
+                <VirtualColumnEdit ref="virtualColumnEdit" :columns="selectedDatasource.columns" />
+              </div>
+            </div>
+
+            <div v-else-if="selectedDatasource.tabIndex === 2"
+                 class="flex-1 flex flex-col divide-y divide-text-50 py-3">
+
+              <ListItem :items="selectedDatasource.filters"
+                        class="bg-transparent"
+                        container-class="flex flex-col divide-y divide-text-50"
+                        @reorder="(from, to) => { selectedDatasource.filters.splice(to, 0, selectedDatasource.filters.splice(from, 1)[0]); }">
+                <template v-slot="{ item:filter, index:idx }">
+                  <div class="p-5">
+                    <div class="flex flex-row items-start">
+                      <Checkbox v-model="filter.enabled" :default="true" :disabled="selectedPreset.readonly"
+                                @change="onDatasourceFilterChanged"/>
+                      <div class="flex-1 flex flex-col gap-3">
+                        <div class="flex-1 flex flex-row items-center gap-2">
+                          <strong class="flex-1 cursor-pointer whitespace-nowrap text-ellipsis overflow-hidden"
+                                  data-reorder
+                                  @click="filter._collapsed = !filter._collapsed">
+                            <svg :class="filter._collapsed === true ? `` : `rotate-90`"
+                                 class="inline fill-text transition-transform relative top-[-1px]"
+                                 height="11" viewBox="0 0 256 512" width="11" xmlns="http://www.w3.org/2000/svg">
+                              <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                              <path
+                                  d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"/>
+                            </svg>
+                            {{ selectedDatasourceColumn(filter.key).label ?? filter.key }}
+                          </strong>
+                          <select v-if="filter.value.length > 1"
+                                  v-model="filter.modifier"
+                                  class="appearance-none bg-text-50 min-w-[60px] text-text-400 px-2 outline-none"
+                                  @change="onDatasourceFilterChanged()">
+                            <option value="and">And</option>
+                            <option value="or">Or</option>
+                          </select>
+                          <button
+                              v-if="!selectedPreset.readonly && typeOf(selectedDatasourceColumn(filter.key).type) !== 'enum' && filter._collapsed !== true"
+                              type="button" @click="filter.value.push({})">
+                            <svg class="fill-text-300" height="14" viewBox="0 0 448 512" width="14"
+                                 xmlns="http://www.w3.org/2000/svg">
+                              <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                              <path
+                                  d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/>
+                            </svg>
+                          </button>
+                          <button v-if="!selectedPreset.readonly" class="p-1" type="button"
+                                  @click="selectedDatasource.filters.splice(idx, 1);onDatasourceFilterChanged()">
+                            <svg class="fill-text-300 hover:fill-red-500" height="14" viewBox="0 0 320 512"
+                                 width="14" xmlns="http://www.w3.org/2000/svg">
+                              <path
+                                  d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/>
+                            </svg>
+                          </button>
+
+                          <button v-if="selectedPreset.sharing?.length > 0 && !selectedPreset.readonly"
+                                  class="p-0.5 rounded-full"
+                                  type="button"
+                                  @click="$refs.datasourceFilterSharing.open(filter.sharing, (sharing) => { filter.sharing = sharing; load() })">
+                            <svg :class="filter.sharing?.length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'" height="14"
+                                 viewBox="0 0 640 512"
+                                 width="14" xmlns="http://www.w3.org/2000/svg">
+                              <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                              <path
+                                  d="M319.9 320c57.41 0 103.1-46.56 103.1-104c0-57.44-46.54-104-103.1-104c-57.41 0-103.1 46.56-103.1 104C215.9 273.4 262.5 320 319.9 320zM369.9 352H270.1C191.6 352 128 411.7 128 485.3C128 500.1 140.7 512 156.4 512h327.2C499.3 512 512 500.1 512 485.3C512 411.7 448.4 352 369.9 352zM512 160c44.18 0 80-35.82 80-80S556.2 0 512 0c-44.18 0-80 35.82-80 80S467.8 160 512 160zM183.9 216c0-5.449 .9824-10.63 1.609-15.91C174.6 194.1 162.6 192 149.9 192H88.08C39.44 192 0 233.8 0 285.3C0 295.6 7.887 304 17.62 304h199.5C196.7 280.2 183.9 249.7 183.9 216zM128 160c44.18 0 80-35.82 80-80S172.2 0 128 0C83.82 0 48 35.82 48 80S83.82 160 128 160zM551.9 192h-61.84c-12.8 0-24.88 3.037-35.86 8.24C454.8 205.5 455.8 210.6 455.8 216c0 33.71-12.78 64.21-33.16 88h199.7C632.1 304 640 295.6 640 285.3C640 233.8 600.6 192 551.9 192z"/>
+                            </svg>
+                          </button>
+                        </div>
+                        <div v-if="filter._collapsed !== true">
+                          <div v-if="Array.isArray(filter.value)" class="flex flex-col gap-2">
+                            <div v-for="(filterVal, filterIdx) in filter.value" class="flex flex-row gap-2">
+                              <PresetSelectorFilterItem
+                                  :column="selectedDatasourceColumn(filter.key)"
+                                  :enumCache="enumCache"
+                                  :readonly="selectedPreset.readonly"
+                                  :type="typeOf(selectedDatasourceColumn(filter.key).type)"
+                                  :typeParams="typeParamsOf(selectedDatasourceColumn(filter.key))"
+                                  :value="filterVal"
+                                  class="flex-1"
+                                  @change="onDatasourceFilterChanged"/>
+
+                              <button v-if="filter.value.length > 1 && !selectedPreset.readonly"
+                                      class="p-1"
+                                      type="button"
+                                      @click="filter.value.splice(filterIdx, 1);onDatasourceFilterChanged()">
+                                <svg class="fill-text-300 hover:fill-red-500" height="14" viewBox="0 0 320 512"
+                                     width="14" xmlns="http://www.w3.org/2000/svg">
+                                  <path
+                                      d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/>
+                                </svg>
+                              </button>
+                            </div>
+                          </div>
+                          <PresetSelectorFilterItem v-else
+                                                    :column="selectedDatasourceColumn(filter.key)"
+                                                    :enumCache="enumCache"
+                                                    :readonly="selectedPreset.readonly"
+                                                    :type="typeOf(selectedDatasourceColumn(filter.key).type)"
+                                                    :value="filter"
+                                                    @change="onDatasourceFilterChanged"/>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </ListItem>
+
+              <div v-for="(filter, idx) in queryFilters[selectedDatasource.uid]" class="p-5">
+
+                <div class="flex flex-col gap-2">
+                  <strong>{{ filter.key }}</strong>
+                  <div class="flex flex-row gap-2">
+                    <Dropdown v-model="filter.operator" :readonly="true" class="w-[100px]">
+                      <option :value="filter.operator">{{ filter.operator }}</option>
+                    </Dropdown>
+                    <Textbox v-model="filter.value" :readonly="true" class="flex-1"/>
+                  </div>
+                </div>
+
+              </div>
+
+              <div v-if="!selectedPreset.readonly" class="p-5 flex justify-center">
+                <button class="text-primary flex flex-row items-center justify-center p-3"
+                        type="button"
+                        @click="$refs.columnSelector.open(addFilter, selectedDatasourceFilterColumns)">
+                  <svg class="fill-primary" height="16" viewBox="0 0 448 512" width="16"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                    <path
+                        d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/>
+                  </svg>
+                  Add Filter
+                </button>
+              </div>
+
+              <DatasourceFilterSharing ref="datasourceFilterSharing" :items="selectedPreset.sharing"
+                                       :readonly="selectedPreset.readonly"/>
+            </div>
+
+            <div v-else-if="selectedDatasource.tabIndex === 3" class="p-5 flex-1 flex flex-col">
+
+              <ListItem v-if="selectedDatasource.sorts?.length > 0"
+                        :items="selectedDatasource.sorts"
+                        container-class="flex flex-col rounded-lg border-[1px] border-text-50 bg-base-300 divide-y divide-text-50"
+                        @reorder="(from, to) => { selectedDatasource.sorts.splice(to, 0, selectedDatasource.sorts.splice(from, 1)[0]);  }">
+                <template v-slot="{ item, index }">
+                  <div class="flex flex-row items-center gap-3 p-1">
+                    <div v-if="!selectedPreset.readonly" data-reorder>
+                      <svg class="fill-text-300" height="14" viewBox="0 0 512 512" width="14"
+                           xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/>
+                      </svg>
+                    </div>
+                    <div class="flex-1 flex flex-row gap-3">
+                      <Dropdown v-model="item.key"
+                                :readonly="selectedPreset.readonly"
+                                class="flex-1"
+                                @change="">
+                        <option v-for="column in selectedDatasourceSortColumns"
+                                :value="column.key">
+                          {{ column.label2 ?? column.label }}
+                        </option>
+                      </Dropdown>
+                      <div class="flex flex-row">
+                        <Radio v-model="item.type" :disabled="selectedPreset.readonly" custom="true" value="asc"
+                               @change="">
+                          <button :class="item.type === 'asc' ? 'bg-primary' : ''" class="p-1" type="button">
+                            <svg :class="item.type === 'asc' ? 'fill-white' : 'fill-text'" height="14" viewBox="0 0 512 512"
+                                 width="14" xmlns="http://www.w3.org/2000/svg">
+                              <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                              <path
+                                  d="M439.1 432H377.1l81.87-105.3c5.625-7.25 6.656-17.06 2.625-25.28C457.5 293.2 449.1 288 439.1 288h-111.1c-13.25 0-23.1 10.75-23.1 24s10.75 24 23.1 24h62.94L309.1 441.3c-5.623 7.25-6.654 17.06-2.625 25.28C310.5 474.8 318.8 480 327.1 480h111.1c13.25 0 23.1-10.75 23.1-24S453.2 432 439.1 432zM477.5 189.3l-71.1-144c-8.123-16.31-34.81-16.31-42.94 0l-71.1 144c-5.938 11.84-1.125 26.25 10.75 32.19c11.9 5.938 26.25 1.156 32.19-10.75L338.8 200h90.34l5.359 10.72C438.7 219.2 447.2 224 456 224c3.594 0 7.25-.8125 10.69-2.531C478.6 215.5 483.4 201.1 477.5 189.3zM362.8 152l21.17-42.34L405.2 152H362.8zM206.4 335.1L152 394.9V56.02c0-13.27-10.75-24.02-24-24.02S104 42.76 104 56.02v338.9l-54.37-58.95c-4.719-5.125-11.16-7.719-17.62-7.719c-5.812 0-11.66 2.094-16.28 6.375c-9.75 8.977-10.34 24.18-1.344 33.94l95.1 104.1c9.062 9.82 26.19 9.82 35.25 0l95.1-104.1c9-9.758 8.406-24.96-1.344-33.94C230.5 325.5 215.3 326.2 206.4 335.1z"/>
+                            </svg>
+                          </button>
+                        </Radio>
+                        <Radio v-model="item.type" :disabled="selectedPreset.readonly" custom="true" value="desc"
+                               @change="">
+                          <button :class="item.type === 'desc' ? 'bg-primary' : ''" class="p-1" type="button">
+                            <svg :class="item.type === 'desc' ? 'fill-white' : 'fill-text'" height="14" viewBox="0 0 512 512"
+                                 width="14" xmlns="http://www.w3.org/2000/svg">
+                              <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                              <path
+                                  d="M327.1 80h62.94L309.1 185.2c-5.623 7.25-6.654 17.06-2.625 25.28c4.031 8.25 12.41 13.47 21.56 13.47h111.1c13.25 0 23.1-10.75 23.1-24s-10.75-24-23.1-24H377.1l81.87-105.2c5.625-7.25 6.656-17.06 2.625-25.28C457.5 37.22 449.1 32 439.1 32h-111.1c-13.25 0-23.1 10.75-23.1 24S314.7 80 327.1 80zM477.5 445.3l-71.1-144c-8.123-16.3-34.81-16.3-42.94 0l-71.1 144c-5.938 11.84-1.125 26.25 10.75 32.19c11.9 5.938 26.25 1.156 32.19-10.75l5.359-10.72h90.34l5.359 10.72c4.219 8.438 12.69 13.28 21.5 13.28c3.594 0 7.25-.8125 10.69-2.531C478.6 471.5 483.4 457.1 477.5 445.3zM362.8 407.1l21.17-42.34l21.17 42.34H362.8zM206.4 335.1L152 394.9V56.02c0-13.27-10.75-24.02-24-24.02S104 42.76 104 56.02v338.9l-54.37-58.95c-4.719-5.125-11.16-7.719-17.62-7.719c-5.812 0-11.66 2.094-16.28 6.375c-9.75 8.977-10.34 24.18-1.344 33.94l95.1 104.1c9.062 9.82 26.19 9.82 35.25 0l95.1-104.1c9-9.758 8.406-24.96-1.344-33.94C230.5 325.5 215.3 326.2 206.4 335.1z"/>
+                            </svg>
+                          </button>
+                        </Radio>
+                      </div>
+                    </div>
+                    <button v-if="!selectedPreset.readonly" type="button"
+                            @click="selectedDatasource.sorts.splice(index, 1); ">
+                      <svg class="fill-text-300 hover:fill-red-500" height="16" viewBox="0 0 320 512"
+                           width="16" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/>
+                      </svg>
+                    </button>
+                  </div>
+                </template>
+              </ListItem>
+
+              <button v-if="!selectedPreset.readonly"
+                      class="text-primary flex flex-row items-center justify-center p-3"
+                      type="button"
+                      @click="addSort({ type:'asc' })">
+                <svg class="fill-primary" height="16" viewBox="0 0 448 512" width="16"
+                     xmlns="http://www.w3.org/2000/svg">
+                  <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                  <path
+                      d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/>
+                </svg>
+                Add Sort
+              </button>
+
+            </div>
+
+            <div v-else-if="selectedDatasource.tabIndex === 4" class="p-5 flex-1 flex flex-col gap-5">
+
+              <PresetBarPivot :columns="selectedDatasourcePivotColumns"
+                              :pivot="selectedDatasourcePivot"
+                              @apply="updatePivot"/>
+
+              <br/>
+            </div>
+
+            <ColumnSelector ref="columnSelector"/>
+          </div>
+        </div>
+
+        <div v-else-if="selectedPreset" class="flex-1 flex flex-col">
+          <div class="p-5 flex flex-row gap-2">
+            <button type="button" @click="delete cConfig.selectedUid">
+              <svg class="fill-text hover:fill-primary" height="16" viewBox="0 0 448 512" width="16"
+                   xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/>
+              </svg>
+            </button>
+            <Textbox v-model="selectedPreset.name"
+                     class="border-none bg-transparent"
+                     item-class="p-0 text-lg font-bold"
+                     @click="log(selectedPreset)"/>
+          </div>
+
+          <div class="flex-1 overflow-y-auto">
+            <div class="p-5">
+              <div class="flex flex-row gap-2">
+                <label class="flex-1" @click="log(selectedPreset.datasource)">Datasource</label>
+                <button v-if="!selectedPreset.readonly" class="text-primary"
+                        type="button"
+                        @click="$refs.chooseDatasource.open()">
+                  Add Datasource
+                </button>
+              </div>
+              <div class="flex flex-col mt-2">
+                <ListItem :items="selectedPreset.datasource"
+                          class="bg-transparent"
+                          container-class="flex flex-col gap-1">
+                  <template v-slot="{ item, index }">
+                    <div class="flex flex-row items-center gap-3 p-3 bg-base-500 hover:bg-text-50 rounded-lg">
+                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+                           @click="cConfig.selectedDatasource = item.uid">
+                        {{ item.name }}
+                      </div>
+                      <button v-if="!selectedPreset.readonly" :ref="`datasourceOpt${index}`" type="button"
+                              @click="$refs.datasourceMenu.open($refs[`datasourceOpt${index}`], { index, uid:item.uid })">
+                        <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 512 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/>
+                        </svg>
+                      </button>
+                    </div>
+                  </template>
+                </ListItem>
+              </div>
+              <ContextMenu ref="datasourceMenu" position="bottom-right">
+                <template #default="{ context }">
+                  <div class="flex flex-col min-w-[200px]">
+
+                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                            @click="cConfig.selectedDatasource = context.uid">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                             xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z"/>
+                        </svg>
+                      </div>
+                      Edit
+                    </button>
+
+                    <button v-if="!selectedPreset.readonly" :class="appStyle.menuItem"
+                            class="w-full p-3 text-left flex flex-row items-center"
+                            @click="duplicateDatasource(context.index)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                             xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
+                        </svg>
+                      </div>
+                      Duplicate
+                    </button>
+
+                    <button v-if="!selectedPreset.readonly" :class="appStyle.menuItem"
+                            class="w-full p-3 text-left flex flex-row items-center"
+                            @click="removeDatasource(context.index)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                             xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                        </svg>
+                      </div>
+                      Remove
+                    </button>
+
+                  </div>
+                </template>
+              </ContextMenu>
+            </div>
+
+            <div class="p-5">
+              <div class="flex flex-row gap-2">
+                <label class="flex-1" @click="log(selectedPreset.views)">Views</label>
+                <button v-if="!selectedPreset.readonly" class="text-primary" type="button"
+                        @click="(e) => $refs.chooseView.open((_) => addView(_, selectedPreset.views, { unshift:e.shiftKey }))">
+                  Add View
+                </button>
+              </div>
+              <div class="flex flex-col">
+                <TreeView v-model="selectedViewUid"
+                          :config="componentsConfig"
+                          :items="selectedPreset.views"
+                          :readonly="selectedPreset.readonly"
+                          class="mt-2">
+                  <template #item="{ item, parent, depth }">
+                    <div
+                        class="flex-1 p-3 overflow-hidden text-ellipsis cursor-pointer flex flex-row items-center gap-3">
+                      <div>
+                        <svg v-if="item.type === 'Grid'" class="fill-text-200" height="14" viewBox="0 0 512 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM64 96h160v128H64V96zM64 416V288h160v128H64zM448 416h-160V288h160V416zM448 224h-160V96h160V224z"/>
+                        </svg>
+                        <svg v-else-if="item.type === 'Doughnut'" class="fill-text-200" height="14" viewBox="0 0 512 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M512 256c0-26.88-16.6-49.84-40.22-59.34c-20.88-75.75-80.68-135.6-156.4-156.4C305.8 16.6 282.9 0 256 0C229.1 0 206.2 16.6 196.7 40.22c-75.75 20.88-135.6 80.68-156.4 156.4C16.6 206.2 0 229.1 0 256s16.6 49.84 40.22 59.34c20.88 75.75 80.68 135.6 156.4 156.4C206.2 495.4 229.1 512 256 512c26.88 0 49.84-16.6 59.34-40.22c75.75-20.88 135.6-80.68 156.4-156.4C495.4 305.8 512 282.9 512 256zM448 240c8.875 0 16 7.125 16 16c0 8.875-7.125 16-16 16S432 264.9 432 256C432 247.1 439.1 240 448 240zM272 64c0 8.875-7.125 16-16 16C247.1 80 240 72.88 240 64S247.1 48 256 48C264.9 48 272 55.12 272 64zM64 272C55.12 272 48 264.9 48 256c0-8.875 7.125-16 16-16S80 247.1 80 256C80 264.9 72.88 272 64 272zM240 448c0-8.875 7.125-16 16-16c8.875 0 16 7.125 16 16s-7.125 16-16 16C247.1 464 240 456.9 240 448zM305.1 407.5C293.4 393.2 275.9 384 256 384c-19.88 0-37.39 9.235-49.14 23.49C158.4 391.6 120.4 353.6 104.5 305.1C118.8 293.4 128 275.9 128 256S118.8 218.6 104.5 206.9c15.88-48.5 53.85-86.47 102.3-102.3C218.6 118.8 236.1 128 256 128c19.88 0 37.39-9.235 49.14-23.49c48.5 15.88 86.47 53.85 102.3 102.3C393.2 218.6 384 236.1 384 256s9.235 37.39 23.49 49.14C391.6 353.6 353.6 391.6 305.1 407.5z"/>
+                        </svg>
+                        <svg v-else-if="item.type === 'VirtualTable'" class="fill-text-200" height="14" viewBox="0 0 512 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/>
+                        </svg>
+                        <svg v-else-if="item.type === 'Pie'" class="fill-text-200" height="14" viewBox="0 0 576 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M559.7 288l-237.2-.0006l157.1 158c6.124 6.124 15.99 6.484 22.24 .7343c38.62-36.5 65.25-85.62 73.12-140.9C577.2 296.4 569.4 288 559.7 288zM543.1 223.2c-8.249-119.5-103.7-214.1-223.2-223.2c-9.124-.6249-16.76 7.113-16.76 16.24L304 240l223.7-.0012C536.9 240 544.6 232.4 543.1 223.2zM256 288V50.75c0-9.624-8.369-17.48-17.87-16.11C119 51.52 27.89 155.6 32.14 280.4c4.375 128.1 114.8 233.2 242.9 231.6c50.37-.6249 97-16.88 135.2-44c7.999-5.624 8.487-17.24 1.612-24.11L256 288z"/>
+                        </svg>
+                        <svg v-else-if="item.type === 'PolarArea'" class="fill-text-200" height="14" viewBox="0 0 640 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M119.1 272C107.1 252.1 87.55 240 64 240c-35.25 0-64 28.75-64 64s28.75 64 64 64c23.55 0 43.96-12.97 55.08-32h60.15C177.1 325.7 176 314.1 176 304s1.127-21.66 3.229-32H119.1zM576 192c35.25 0 64-28.75 64-64s-28.75-64-64-64s-64 28.75-64 64S540.8 192 576 192zM576 384c-11.19 0-21.66 3.094-30.78 8.213l-86.1-52.2C461.6 328.5 464 316.6 464 304c0-16.77-3.436-32.68-9.301-47.36l67.3-49.36c-17.94-12.26-31.13-30.59-37.53-51.86l-67.96 49.84C394.5 187.3 366.7 176 336 176c-7.988 0-15.74 .9492-23.32 2.352L276.3 100.3C283.5 89.98 288 77.54 288 64c0-35.25-28.75-64-64-64S160 28.75 160 64c0 33.29 25.73 60.47 58.28 63.42l36.57 78.36C226.5 229.3 208 264.3 208 304c0 70.67 57.33 128 128 128c34.97 0 66.61-14.11 89.71-36.85l86.39 51.83C512.1 447.3 512 447.7 512 448c0 35.25 28.75 64 64 64S640 483.3 640 448S611.3 384 576 384zM336 352C309.5 352 288 330.5 288 304S309.5 256 336 256S384 277.5 384 304S362.5 352 336 352z"/>
+                        </svg>
+                      </div>
+                      <div :class="!item.props?.enabled ? 'line-through opacity-50' : ''"
+                           class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">
+                        <strong class="hover:text-primary" @click="cConfig.selectedView = item.uid">
+                          {{ item.props?.label ?? (item.name ?? item.type) }}
+                        </strong>
+                      </div>
+                      <button v-if="item.isContainer && !selectedPreset.readonly"
+                              class="px-1"
+                              type="button"
+                              @click="(e) => $refs.chooseView.open((_) => addView(_, item.items, { unshift:e.shiftKey }))">
+                        <svg class="fill-text-300 hover:fill-primary-600" height="14" viewBox="0 0 448 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
+                        </svg>
+                      </button>
+                      <button v-if="!selectedPreset.readonly" :ref="`viewOpt${item.uid}`" type="button"
+                              @click="$refs.viewOpt.open($refs[`viewOpt${item.uid}`], { item, parent })">
+                        <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 512 512"
+                             width="14" xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/>
+                        </svg>
+                      </button>
+                    </div>
+                  </template>
+                </TreeView>
+
+                <ContextMenu ref="viewOpt" position="bottom-right">
+                  <template #default="{ context }">
+                    <div class="flex flex-col min-w-[200px]">
+
+                      <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                              @click="cConfig.selectedView = context.item.uid">
+                        <div class="w-[30px]">
+                          <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                               xmlns="http://www.w3.org/2000/svg">
+                            <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                            <path
+                                d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z"/>
+                          </svg>
+                        </div>
+                        Edit
+                      </button>
+
+                      <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                              @click="duplicateComponent(context.item, context.parent)">
+                        <div class="w-[30px]">
+                          <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                               xmlns="http://www.w3.org/2000/svg">
+                            <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                            <path
+                                d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
+                          </svg>
+                        </div>
+                        Duplicate
+                      </button>
+
+                      <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                              @click="context.parent.splice(context.parent.indexOf(context.item), 1)">
+                        <div class="w-[30px]">
+                          <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                               xmlns="http://www.w3.org/2000/svg">
+                            <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                            <path
+                                d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                          </svg>
+                        </div>
+                        Remove
+                      </button>
+
+                    </div>
+                  </template>
+                </ContextMenu>
+              </div>
+            </div>
+
+            <div v-if="sharingSrc && !selectedPreset.readonly" class="p-5">
+              <div class="flex flex-row gap-2">
+                <label class="flex-1" @click="log(selectedPreset.shared)">Sharing</label>
+                <button class="text-primary" type="button"
+                        @click="$refs.sharingModal.open([], { callback:addSharing })">
+                  Share
+                </button>
+
+                <SharingModal ref="sharingModal" :src="sharingSrc"/>
+              </div>
+              <div class="flex flex-col gap-1 mt-2">
+                <div v-for="(user, index) in selectedPreset.sharing"
+                     class="bg-base-500 hover:bg-text-50 p-3 rounded-lg flex flex-row gap-2 items-center gap-1">
+                  <div class="flex-1 flex flex-row items-center cursor-default gap-2">
+                    <svg class="fill-text-200" height="14" viewBox="0 0 448 512" width="14"
+                         xmlns="http://www.w3.org/2000/svg">
+                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                      <path
+                          d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/>
+                    </svg>
+                    {{ user.name }}
+                  </div>
+                  <button type="button" @click="removeSharing(index)">
+                    <svg class="fill-text-300 hover:fill-red-600" height="14" viewBox="0 0 320 512"
+                         width="14" xmlns="http://www.w3.org/2000/svg">
+                      <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                      <path
+                          d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <div v-else class="flex-1 flex flex-col">
+          <div class="p-5 flex flex-row items-start gap-2">
+            <div class="flex-1">
+              <h5 @click="log(cConfig)">{{ title }}</h5>
+            </div>
+            <button v-if="hasPresets" type="button" @click="addPreset">
+              <svg class="fill-primary" height="19" viewBox="0 0 448 512" width="19" xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
+              </svg>
+            </button>
+          </div>
+
+          <div v-if="hasPresets" class="flex-1 overflow-y-auto px-6 flex flex-col gap-5">
+
+            <div v-if="(presets ?? []).length > 0">
+              <div class="mb-2">
+                <label class="text-text-400">Views</label>
+              </div>
+
+              <ListItem :items="presets"
+                        class="bg-transparent rounded-xl overflow-hidden"
+                        container-class="divide-y divide-text-50">
+                <template v-slot="{ item, index }">
+                  <div class="flex flex-row items-center gap-1 bg-base-500 hover:bg-text-50 pl-3">
+                    <Radio :checked="item.uid === cConfig.viewedUid" class="flex-1 py-3"
+                           @click="(e) => e.shiftKey ? openPreset(item.uid) : selectPreset(item.uid)">
+                      {{ item.name }}
+                    </Radio>
+                    <button :ref="`presetItemBtn${index}`"
+                            class="pr-3"
+                            type="button"
+                            @click="$refs.presetItemMenu.open($refs[`presetItemBtn${index}`], { item, index })">
+                      <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 128 512"
+                           width="14" xmlns="http://www.w3.org/2000/svg">
+                        <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                        <path
+                            d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z"/>
+                      </svg>
+                    </button>
+                  </div>
+                </template>
+              </ListItem>
+            </div>
+
+            <div v-if="(sharedPresets ?? []).length > 0">
+              <div class="mb-2">
+                <label class="text-text-400">Shared</label>
+              </div>
+
+              <ListItem :items="sharedPresets"
+                        class="bg-transparent rounded-xl overflow-hidden"
+                        container-class="divide-y divide-text-50">
+                <template v-slot="{ item, index }">
+                  <div class="flex flex-row items-center gap-1 bg-base-500 hover:bg-text-50 pl-3">
+                    <Radio :checked="item.uid === cConfig.viewedUid" class="flex-1 py-3"
+                           @click="(e) => e.shiftKey ? openPreset(item.uid) : selectPreset(item.uid)">
+                      {{ item.name }}
+                    </Radio>
+                    <button :ref="`sharedPresetItemBtn${index}`"
+                            class="pr-3"
+                            type="button"
+                            @click="$refs.presetItemMenu.open($refs[`sharedPresetItemBtn${index}`], { item, index, sharing:true })">
+                      <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 128 512"
+                           width="14" xmlns="http://www.w3.org/2000/svg">
+                        <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                        <path
+                            d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z"/>
+                      </svg>
+                    </button>
+                  </div>
+                </template>
+              </ListItem>
+            </div>
+
+            <ContextMenu ref="presetItemMenu" position="bottom-right">
+              <template #default="{ context }">
+                <div v-if="!context.sharing" class="flex flex-col min-w-[200px] divide-y divide-text-50">
+
+                  <div class="divide-y divide-text-50">
+                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                            @click="openPreset(context.item.uid)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                             xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M256 0C114.6 0 0 114.6 0 255.1S114.6 512 255.1 512S512 397.4 512 256S397.4 0 256 0zM210.8 368.1c-22.25 5.24-71.61 15.71-71.61 15.71c-.6309 .127-1.22 .1499-1.83 .1499c-5.711 0-10.33-5.232-9.151-11.13l16.1-71.61c1.551-6.895 5.027-13.21 10.03-18.21l101-101l74.67 74.67l-101.6 101.6C223.5 363.1 217.5 366.5 210.8 368.1zM373.1 213.6l-20.45 20.45l-74.67-74.67l20.4-20.4C305.7 131.6 315.2 128 324.8 128c9.553 0 19.11 3.646 26.4 10.94l21.88 21.88C387.6 175.4 387.7 198.1 373.1 213.6z"/>
+                        </svg>
+                      </div>
+                      Edit
+                    </button>
+
+                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                            @click="duplicate(context.item)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                             xmlns="http://www.w3.org/2000/svg">
+                          <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                          <path
+                              d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
+                        </svg>
+                      </div>
+                      Duplicate
+                    </button>
+                  </div>
+
+                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                          @click="confirm('Remove this preset?', () => removePreset(context.item))">
+                    <div class="w-[30px]">
+                      <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                           xmlns="http://www.w3.org/2000/svg">
+                        <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                        <path
+                            d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                      </svg>
+                    </div>
+                    Remove
+                  </button>
+                </div>
+
+                <div v-else>
+                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                          @click="openPreset(context.item.uid)">
+                    <div class="w-[30px]">
+                      <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                           xmlns="http://www.w3.org/2000/svg">
+                        <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                        <path
+                            d="M256 0C114.6 0 0 114.6 0 255.1S114.6 512 255.1 512S512 397.4 512 256S397.4 0 256 0zM210.8 368.1c-22.25 5.24-71.61 15.71-71.61 15.71c-.6309 .127-1.22 .1499-1.83 .1499c-5.711 0-10.33-5.232-9.151-11.13l16.1-71.61c1.551-6.895 5.027-13.21 10.03-18.21l101-101l74.67 74.67l-101.6 101.6C223.5 363.1 217.5 366.5 210.8 368.1zM373.1 213.6l-20.45 20.45l-74.67-74.67l20.4-20.4C305.7 131.6 315.2 128 324.8 128c9.553 0 19.11 3.646 26.4 10.94l21.88 21.88C387.6 175.4 387.7 198.1 373.1 213.6z"/>
+                      </svg>
+                    </div>
+                    Open
+                  </button>
+                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                          @click="duplicate(context.item)">
+                    <div class="w-[30px]">
+                      <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                           xmlns="http://www.w3.org/2000/svg">
+                        <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                        <path
+                            d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
+                      </svg>
+                    </div>
+                    Duplicate
+                  </button>
+                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                          @click="removeShared(context.item, context.index)">
+                    <div class="w-[30px]">
+                      <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                           xmlns="http://www.w3.org/2000/svg">
+                        <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                        <path
+                            d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                      </svg>
+                    </div>
+                    Remove
+                  </button>
+                </div>
+              </template>
+            </ContextMenu>
+
+          </div>
+          <div v-else class="flex-1 flex items-center justify-center">
+            <button class="cursor-pointer flex flex-col gap-1 items-center"
+                    type="button"
+                    @click="addPreset">
+              <svg class="fill-primary" height="32" viewBox="0 0 448 512" width="32" xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/>
+              </svg>
+              Create New Preset
+            </button>
+          </div>
+
+        </div>
+
+      </TransitionGroup>
+
+      <div :class="$style.resize1"
+           @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+    </div>
+
+    <div v-if="readyState === 0" class="flex-1 flex items-center justify-center">
+      <svg class="animate-spin aspect-square w-[64px] h-[64px]" fill="none" viewBox="0 0 24 24"
+           xmlns="http://www.w3.org/2000/svg">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              fill="currentColor"></path>
+      </svg>
+    </div>
+
+    <div v-else-if="viewedPreset" class="flex-1 px-8 py-5 overflow-y-auto flex flex-col gap-6">
+
+      <div ref="title" class="flex flex-row gap-2 md:gap-2 items-center">
+        <button :class="sidebar.open ? 'bg-primary' : ''"
+                class="p-2 rounded-xl"
+                type="button"
+                @click="sidebar.open = !sidebar.open">
+          <svg :class="sidebar.open ? 'fill-white' : 'fill-white hover:fill-primary'" height="21" viewBox="0 0 512 512"
+               width="21" xmlns="http://www.w3.org/2000/svg">
+            <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+            <path
+                d="M480 384H249.2C236.9 355.8 208.8 336 176 336S115.1 355.8 102.8 384H32c-17.67 0-32 14.33-32 32s14.33 32 32 32h70.75C115.1 476.2 143.2 496 176 496s60.89-19.77 73.25-48H480c17.67 0 32-14.33 32-32S497.7 384 480 384zM176 448c-17.64 0-32-14.36-32-32s14.36-32 32-32s32 14.36 32 32S193.6 448 176 448zM480 224h-70.75C396.9 195.8 368.8 176 336 176S275.1 195.8 262.8 224H32C14.33 224 0 238.3 0 256s14.33 32 32 32h230.8C275.1 316.2 303.2 336 336 336s60.89-19.77 73.25-48H480c17.67 0 32-14.33 32-32S497.7 224 480 224zM336 288c-17.64 0-32-14.36-32-32s14.36-32 32-32s32 14.36 32 32S353.6 288 336 288zM32 128h102.8C147.1 156.2 175.2 176 208 176s60.89-19.77 73.25-48H480c17.67 0 32-14.33 32-32s-14.33-32-32-32h-198.8C268.9 35.77 240.8 16 208 16S147.1 35.77 134.8 64H32C14.33 64 0 78.33 0 96S14.33 128 32 128zM208 64c17.64 0 32 14.36 32 32s-14.36 32-32 32s-32-14.36-32-32S190.4 64 208 64z"/>
+          </svg>
+        </button>
+
+        <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
+          <div class="cursor-pointer group px-2 md:px-0"
+               @click="!sidebar.open ? $refs.contextMenu.open($refs.title) : null">
+            <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
+            <div class="flex flex-row items-baseline gap-1">
+              <h5 :class="!sidebar.open ? 'group-hover:text-primary' : ''"
+                  class="whitespace-nowrap relative top-[-2px] text-ellipsis overflow-hidden">
+                {{ viewedPreset.name ?? 'Preset Name' }}
+              </h5>
+              <svg v-if="!sidebar.open" class="fill-text group-hover:fill-primary relative top-[-1px]" height="13"
+                   viewBox="0 0 320 512" width="13"
+                   xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/>
+              </svg>
+            </div>
+          </div>
+          <ContextMenu ref="contextMenu" class="panel-400">
+            <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
+
+              <div class="p-3 flex flex-col gap-1 bg-base-300">
+                <button v-for="(preset, idx) in presets"
+                        :class="config.presetIdx === idx ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
+                        class="p-2 px-5 text-left flex flex-row items-center rounded-md"
+                        type="button"
+                        @click="selectPreset(preset.uid)">
+                  <label class="flex-1 pr-12">
+                    {{ preset.name }}
+                  </label>
+                  <div class="p-1">
+                    <div v-if="idx < 10"
+                         class="border-[1px] border-text-300 px-2 text-mono text-xs text-text-400 rounded-lg">
+                      Alt {{ idx + 1 }}
+                    </div>
+                  </div>
+                </button>
+              </div>
+
+              <div class="px-3">
+                <button class="text-primary p-5 text-left w-full" type="button" @click="openPreset">Edit</button>
+              </div>
+
+            </div>
+          </ContextMenu>
+        </div>
+
+        <div v-if="Object.keys(queryFilters).length > 0" class="flex-1 flex justify-end">
+          <div
+              class="flex flex-row gap-3 items-start bg-primary-50 p-2 border-[1px] border-primary rounded-xl pl-3 min-w-[240px]">
+            <div v-for="(arr, uid) in queryFilters" class="cursor-default flex-1">
+              <div class="text-sm text-text-400">{{ viewedPreset.datasource.find(_ => _.uid === uid)?.name }}</div>
+              <div>
+                <div v-for="filter in arr" class="flex flex-row gap-2">
+                  <div>{{ filter.key }}</div>
+                  <div>{{ filter.operator }}</div>
+                  <div>{{ filter.value }}</div>
+                </div>
+              </div>
+            </div>
+            <button type="button" @click="removeQueryFilter">
+              <svg class="fill-text-300 hover:fill-red-600" height="16" viewBox="0 0 320 512" width="16"
+                   xmlns="http://www.w3.org/2000/svg">
+                <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                <path
+                    d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-6">
+
+        <component :is="component?.type"
+                   v-for="component in viewedComponents"
+                   :="component"/>
+
+      </div>
+
+    </div>
+
+    <DatasourceSelector ref="chooseDatasource"
+                        :list-src="datasourceListSrc"
+                        :src="datasourceSrc"
+                        @add="addDatasource"/>
+
+    <ViewSelector ref="chooseView"/>
+
+    <DatasourcePreview ref="datasourcePreview" :src="previewSrc"/>
+
+  </div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+import {generatePivotColumns, getPresetUid} from "../utils/preset-selector.mjs";
+import {invokeAfterIdle} from "../utils/helpers.mjs";
+import {useEmitter} from "../utils/event-bus";
+
+const findComponents = (items, uid) => {
+  if (!Array.isArray(items)) return
+
+  for (let item of items) {
+    if (item.uid === uid)
+      return item
+
+    if (item.items) {
+      const component = findComponents(item.items, uid)
+      if (component)
+        return component
+    }
+  }
+}
+
+export default {
+
+  components: {
+    VirtualColumnEdit: defineAsyncComponent(() => import('./Dashboard/VirtualColumnEdit.vue')),
+    DatasourceFilterSharing: defineAsyncComponent(() => import('./Dashboard/DatasourceFilterSharing.vue')),
+    PresetBarPivot: defineAsyncComponent(() => import('../widgets/PresetBarPivot.vue')),
+    DatasourcePreview: defineAsyncComponent(() => import('./Dashboard/DatasourcePreview.vue')),
+    PresetSelectorFilterItem: defineAsyncComponent(() => import('../components/PresetSelectorFilterItem.vue')),
+    SharingModal: defineAsyncComponent(() => import('./Dashboard/SharingModal.vue')),
+    DoughnutSetting: defineAsyncComponent(() => import('./Dashboard/DoughnutSetting.vue')),
+    GridSetting: defineAsyncComponent(() => import('./WebPageBuilder4/GridSetting.vue')),
+    MarginSetting: defineAsyncComponent(() => import('./WebPageBuilder4/MarginSetting.vue')),
+    PaddingSetting: defineAsyncComponent(() => import('./WebPageBuilder4/PaddingSetting.vue')),
+    MultiValueSetting: defineAsyncComponent(() => import('./WebPageBuilder4/MultiValueSetting.vue')),
+    BarChartSetting: defineAsyncComponent(() => import('./Dashboard/BarChartSetting.vue')),
+    MetricSetting: defineAsyncComponent(() => import('./Dashboard/MetricSetting.vue')),
+    GHeatMapsSetting: defineAsyncComponent(() => import('./Dashboard/GHeatMapsSetting.vue')),
+    VirtualTableSetting: defineAsyncComponent(() => import('./Dashboard/VirtualTableSetting.vue')),
+    PieSetting: defineAsyncComponent(() => import('./Dashboard/PieSetting.vue')),
+    PolarAreaSetting: defineAsyncComponent(() => import('./Dashboard/PolarAreaSetting.vue')),
+    TreeView: defineAsyncComponent(() => import('./WebPageBuilder4/TreeView.vue')),
+    ViewSelector: defineAsyncComponent(() => import('./Dashboard/ViewSelector.vue')),
+    DatasourceSelector: defineAsyncComponent(() => import('./Dashboard/DatasourceSelector.vue'))
+  },
+
+  computed: {
+
+    cConfig() {
+      const config = this.config
+
+      if (config) {
+        if (!config.viewType)
+          config.viewType = 'md:'
+      }
+
+      return config
+    },
+
+    componentsConfig() {
+      if (!this.cConfig.components)
+        this.cConfig.components = {}
+      return this.cConfig.components
+    },
+
+    hasPresets() {
+      return (this.presets ?? []).length > 0 ||
+          (this.sharedPresets ?? []).length > 0
+    },
+
+    selectedDatasource() {
+      const datasource = this.selectedPreset?.datasource[this.selectedPreset.datasource.findIndex(_ => _.uid === this.cConfig.selectedDatasource)]
+
+      if (datasource) {
+        if (!datasource.tabIndex) datasource.tabIndex = 2
+
+      }
+
+      return datasource
+    },
+
+    selectedDatasourceFilterColumns() {
+      if (!this.selectedDatasource) return []
+
+      return this.selectedDatasource.columns.filter(_ => {
+        return _.filterable !== false
+      })
+    },
+
+    selectedDatasourceSortColumns() {
+      if (!this.selectedDatasource) return []
+
+      return this.selectedDatasource.columns.filter(_ => _.key && !_.key.startsWith('_'))
+    },
+
+    selectedDatasourcePivotColumns() {
+      if (!this.selectedDatasource) return []
+      return this.selectedDatasource.columns.filter(_ => {
+        return _.pivot !== false
+      })
+    },
+
+    selectedDatasourcePivot() {
+      if (!this.selectedDatasource) return
+
+      if (!this.selectedDatasource.pivot)
+        this.selectedDatasource.pivot = {rows: [], columns: [], values: []}
+
+      return this.selectedDatasource.pivot
+    },
+
+    selectedDatasourceColumns(){
+      return this.selectedDatasource?.columns.filter(column => {
+        if(this.datasourceColumnSearch)
+          return column.key.toLowerCase().includes(this.datasourceColumnSearch.toLowerCase())
+        return true
+      })
+    },
+
+    selectedDatasourceComputedColumns(){
+      return this.selectedDatasource?.computedColumns?.filter(column => {
+        if(this.datasourceColumnSearch)
+          return column.key.toLowerCase().includes(this.datasourceColumnSearch.toLowerCase())
+        return true
+      })
+    },
+
+    selectedPreset() {
+      if(!Array.isArray(this.presets)) return
+
+      const preset = this.presets[this.presets.findIndex(_ => _.uid === this.cConfig.selectedUid)] ??
+          this.sharedPresets[this.sharedPresets.findIndex(_ => _.uid === this.cConfig.selectedUid)]
+
+      if (preset) {
+        if (!Array.isArray(preset.datasource))
+          preset.datasource = []
+
+        if (!Array.isArray(preset.views))
+          preset.views = []
+      }
+
+      return preset
+    },
+
+    selectedView() {
+      return findComponents(this.selectedPreset?.views, this.cConfig.selectedView)
+    },
+
+    sidebar() {
+      if (!this.cConfig.sidebar || !('open' in this.cConfig.sidebar))
+        this.cConfig.sidebar = {
+          open: true,
+          width: 360
+        }
+
+      return this.cConfig.sidebar
+    },
+
+    sidebarStyle() {
+      return {
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
+      }
+    },
+
+    viewedPreset() {
+      if(!Array.isArray(this.presets)) return
+
+      return this.presets[this.presets.findIndex(_ => _.uid === this.cConfig.viewedUid)]
+          ??
+          this.sharedPresets[this.sharedPresets.findIndex(_ => _.uid === this.cConfig.viewedUid)]
+    },
+
+    viewedComponents() {
+      if (!this.viewedPreset || !this.viewedPreset.views) return []
+
+      return this.viewedPreset.views
+          .map(_ => this.createComponentInstance(_))
+          .filter(_ => _)
+    },
+
+    viewTypeIndex() {
+      return this.viewTypes.findIndex(v => v.value === this.cConfig.viewType)
+    },
+
+    queryFilters() {
+
+      const filters = {}
+      for (let key in this.$route.query) {
+        if (key.indexOf(`.filters.`) > 0) {
+          const [uid, _, filterKey, filterOperator] = key.split('.')
+          const value = this.$route.query[key]
+
+          if (!filters[uid])
+            filters[uid] = []
+
+          filters[uid].push({
+            key: filterKey,
+            operator: filterOperator,
+            value
+          })
+        }
+      }
+
+      return filters
+    }
+
+  },
+
+  data() {
+    return {
+      compClasses: [
+        'aspectRatio', 'position', 'left', 'top', 'right', 'bottom',
+
+        'bdSize', 'bdColor', 'bdRadius', 'bdStyle',
+        'divideSize', 'divideColor', 'divideStyle',
+        'outlineWidth', 'outlineColor', 'outlineStyle',
+        'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
+        'textAlign', 'verticalAlign',
+        'gap',
+        'padding', 'margin',
+        'direction', 'columns', 'rows', 'display', 'wrap',
+        'width', 'minWidth', 'maxWidth',
+        'height', 'minHeight', 'maxHeight',
+        'fontFamily', 'fontSize', 'fontWeight', 'textColor', 'lineHeight', 'overflow',
+        'textTransform', 'whitespace', 'textOverflow', 'textDecoration',
+        'boxShadow', 'opacity',
+        'colSpan', 'rowSpan',
+        'flex', 'flexAlign', 'flexJustify', 'flexBasis', 'flexColumns', 'flexWrap',
+        'flexDirection',
+        'zIndex',
+
+        'autoFlow', 'alignItems', 'justifyContent',
+        'letterSpacing', 'lineClamp',
+
+        'animate',
+
+        'blur', 'grayscale',
+      ],
+      containerClasses: [
+        'containerVariant', 'containerGridColumn', 'containerGap'
+      ],
+      itemClasses: [
+        'itemMinWidth', 'itemRatio', 'itemVariant'
+      ],
+
+      data: {},
+
+      initialConfig: null,
+
+      datasourceTabs: [
+        { text:"Columns", value:1 },
+        {text: "Filters", value: 2},
+        {text: "Sorts", value: 3},
+        {text: "Pivots", value: 4},
+      ],
+      datasourceColumnSearch: '',
+
+      enumCache: {},
+
+      previewData: null,
+
+      readyState: 1,
+
+      selectedViewUid: null,
+
+      viewTypes: [
+        {text: 'Mobile', value: ''},
+        {text: 'Tablet', value: 'md:'},
+        {text: 'Desktop', value: 'xl:'},
+        {text: 'TV', value: '2xl:'},
+      ],
+
+      values: {},
+
+      config: {},
+      presets: [],
+      sharedPresets: []
+    }
+  },
+
+  emits: ['change', 'save'],
+
+  inject: ['alert', 'appStyle', 'confirm', 'socket'],
+
+  methods: {
+
+    addComputedColumns(column){
+      if(!Array.isArray(this.selectedDatasource.computedColumns))
+        this.selectedDatasource.computedColumns = []
+
+      this.$util.push(this.selectedDatasource.computedColumns, column, { key: "key" })
+
+      this.load()
+    },
+
+    addDatasource(datasource) {
+      const newDatasource = JSON.parse(JSON.stringify(datasource))
+      delete newDatasource.id
+      newDatasource.datasourceUid = newDatasource.uid
+      newDatasource.uid = getPresetUid()
+      this.selectedPreset.datasource.push(newDatasource)
+      this.load()
+    },
+
+    addFilter(filter) {
+      if (!Array.isArray(this.selectedDatasource.filters))
+        this.selectedDatasource.filters = []
+      this.selectedDatasource.filters.push({key: filter.key, value: [{}]})
+      this.onDatasourceFilterChanged()
+    },
+
+    addPreset() {
+      if (!Array.isArray(this.presets))
+        this.presets = []
+
+      const uid = getPresetUid()
+
+      const newPreset = {
+        name: 'New Preset',
+        uid,
+      }
+      this.presets.push(newPreset)
+      this.cConfig.viewedUid = uid
+
+      this.openPreset(newPreset.uid, {select: true})
+    },
+
+    addSharing(item) {
+      if (!Array.isArray(this.selectedPreset.sharing))
+        this.selectedPreset.sharing = []
+
+      this.$util.push(this.selectedPreset.sharing, item, {key: "id"})
+    },
+
+    addSort(obj) {
+      if (!Array.isArray(this.selectedDatasource.sorts))
+        this.selectedDatasource.sorts = []
+      this.selectedDatasource.sorts.push(obj)
+    },
+
+    addView(item, items, opt = {unshift: false}) {
+      items[opt?.unshift ? 'unshift' : 'push'](item)
+      if (item.openOnAdd !== false)
+        this.$nextTick(() => this.cConfig.selectedView = item.uid)
+    },
+
+    createComponentInstance(component) {
+
+      if (!component.uid) return
+      if (!component.props.enabled) return
+
+      const compUid = '_' + component.uid.substring(0, 4) + ' '
+
+      const instance = {
+        type: component.type,
+        uid: component.uid,
+
+        class: compUid + this.compClasses.map(key => {
+          return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+        })
+            .filter(_ => _)
+            .join(' '),
+
+        containerClass: this.containerClasses.map(key => {
+          return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+        })
+            .filter(_ => _)
+            .join(' '),
+
+        itemClass: this.itemClasses.map(key => {
+          return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+        })
+            .filter(_ => _)
+            .join(' ')
+      }
+
+      for (let key in component.props) {
+        if (!this.compClasses.includes(key) &&
+            !this.containerClasses.includes(key) &&
+            !this.itemClasses.includes(key) &&
+            !['enabled'].includes(key)) {
+          instance[key] = component.props[key]
+        }
+      }
+
+      const whitelistProps = [
+        'column', 'datasourceUid', 'rows'
+      ]
+      whitelistProps.forEach((key) => {
+        if (component.props[key]) {
+          instance[key] = component.props[key]
+        }
+      })
+
+      if (Array.isArray(component.items)) {
+        instance.items = component.items.map((_) => this.createComponentInstance(_)).filter(_ => _)
+      }
+
+      if (this.values[instance.uid])
+        instance.value = this.values[instance.uid]
+
+      return instance
+    },
+
+    duplicate(preset) {
+
+      const newPreset = JSON.parse(JSON.stringify(preset))
+      newPreset.uid = getPresetUid()
+      newPreset.name += '(Copy)'
+      delete newPreset.readonly
+      delete newPreset.sharing
+      this.presets.push(newPreset)
+
+      this.$nextTick(() => {
+        this.cConfig.viewedUid = newPreset.uid
+        this.openPreset(newPreset.uid)
+        this.selectPreset(newPreset.uid)
+        this.saveConfig()
+      })
+    },
+
+    duplicateComponent(item, parent) {
+
+      const index = parent.findIndex(_ => _ === item)
+
+      const newItem = JSON.parse(JSON.stringify(item))
+      newItem.uid = getPresetUid()
+      newItem.name += ' (Copy)';
+
+      parent.splice(index + 1, null, newItem)
+
+      this.load({[newItem.uid]: {}})
+    },
+
+    duplicateDatasource(index) {
+
+      const newDatasource = JSON.parse(JSON.stringify(this.selectedPreset.datasource[index]))
+
+      newDatasource.uid = getPresetUid()
+      newDatasource.name += ' (Copy)';
+
+      this.selectedPreset.datasource.splice(index + 1, 0, newDatasource)
+    },
+
+    emitRoot(name, component) {
+
+      switch (name) {
+
+        case 'scroll-end':
+          this.loadNext(component)
+          break
+
+      }
+    },
+
+    async load(uids) {
+      if (this.readyState !== 1) return
+      if (!this.viewedComponents) return
+      if (!this.cConfig) return
+
+      const views = this.recurseViews(this.viewedComponents, uids)
+      if (views?.length < 1) return
+
+      const {name, datasource} = this.viewedPreset
+
+      !uids ? this.readyState = 0 : Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.readyState`, 2))
+      this.socket.send(this.src, {
+        name,
+        views,
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.queryFilters[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            Object.assign(this.values, _)
+          })
+          .catch(err => this.alert(err))
+          .finally(_ => {
+            !uids ? this.readyState = 1 : Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.readyState`, 1))
+          })
+    },
+
+    async loadNext(component) {
+      if (!this.values[component.uid]) return
+
+      const {items} = this.values[component.uid]
+      const afterItem = items[items.length - 1]
+
+      const views = this.recurseViews(this.viewedComponents, {[component.uid]: {afterItem}})
+
+      const {name, datasource} = this.viewedPreset
+
+      this.socket.send(this.src, {
+        name,
+        views,
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.queryFilters[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            if(_[component.uid]){
+              const {items, hasNext} = _[component.uid]
+              this.values[component.uid].items.push(...items)
+              this.values[component.uid].hasNext = hasNext
+            }
+          })
+    },
+
+    onDatasourceFilterChanged() {
+
+      let datasourceFilterOK = true
+      for (let filter of this.selectedDatasource.filters) {
+        if (Array.isArray(filter.value)) {
+          for (let value of filter.value) {
+            for (let key in value) {
+              if (!value[key]) {
+                datasourceFilterOK = false
+                break
+              }
+            }
+          }
+        }
+
+        if (!datasourceFilterOK) break
+      }
+
+      if (datasourceFilterOK) {
+        this.load()
+      }
+    },
+
+    openPreset(uid, opt = {}) {
+      this.cConfig.selectedUid = uid
+      this.saveConfig()
+    },
+
+    previewDatasource(datasource) {
+      this.$refs.datasourcePreview?.open(datasource)
+    },
+
+    recurseViews(items, uids) {
+
+      let results = []
+
+      for (let item of items) {
+        if (item.datasourceUid && (!uids || uids[item.uid])) {
+
+          const currentDatasource = this.viewedPreset.datasource.find(_ => _.uid === item.datasourceUid)
+
+          if (currentDatasource) {
+            results.push({
+              type: item.type,
+              uid: item.uid,
+              ...item
+            })
+          }
+        }
+        else if (item.items) {
+          const subResults = this.recurseViews(item.items, uids)
+          results.push(...subResults)
+        }
+      }
+
+      return results
+    },
+
+    selectedDatasourceColumn(key) {
+      return this.selectedDatasource.columns.filter(_ => _.key === key).pop() ?? {}
+    },
+
+    typeOf(type) {
+      if (['boolean'].includes(type))
+        return 'boolean'
+      else if (['date'].includes(type))
+        return 'date'
+      else if (['number'].includes(type))
+        return 'number'
+      else if (['enum'].includes(type))
+        return 'enum'
+      else
+        return 'text'
+    },
+
+    removeDatasource(index) {
+      this.selectedPreset.datasource.splice(index, 1)
+      this.load()
+    },
+
+    removeShared(item, index) {
+      if (!this.removeSharingSrc)
+        return this.alert('Unable to remove shared preset.')
+
+      this.confirm('Remove this preset?', () => {
+        this.socket.send(this.removeSharingSrc, item)
+            .then(_ => {
+              this.sharedPresets.splice(index, 1)
+            })
+      })
+    },
+
+    selectPreset(uid, params = {}) {
+      this.$router.push({
+        query: {
+          uid,
+          ...params
+        }
+      })
+      this.saveConfig()
+    },
+
+    resize1(w) {
+      if (this.sidebar.width + w >= 270 && this.sidebar.width + w <= 600) {
+        this.sidebar.width += w
+      }
+    },
+
+    typeParamsOf(column) {
+      if (['enum'].includes(column.type)) {
+        return column.typeParams
+      }
+      return []
+    },
+
+    getConfig() {
+      return this.cConfig
+    },
+
+    getPresets() {
+      return this.presets
+    },
+
+    removeQueryFilter() {
+
+      const query = {}
+      for (let key in this.$route.query) {
+        if (key.indexOf('.filters.') < 0) {
+          query[key] = this.$route.query[key]
+        }
+      }
+
+      this.$router.replace({query})
+    },
+
+    async preview(datasource) {
+      return new Promise((resolve, reject) => {
+        this.socket.send(this.previewSrc, {datasource})
+            .then(res => {
+              this.previewData = res
+              resolve(res)
+            })
+            .catch(err => reject(err))
+      })
+    },
+
+    updatePivot() {
+      this.preview(this.selectedDatasource)
+          .then(res => {
+            generatePivotColumns(this.selectedDatasource, res.items)
+          })
+    },
+
+    removeSharing(index) {
+      const user = this.selectedPreset.sharing[index]
+
+      for (let datasource of this.selectedPreset.datasource) {
+        for (let filter of datasource.filters) {
+          const index = (filter.sharing ?? []).findIndex(_ => _.id === user.id)
+          if (index > -1) {
+            filter.sharing.splice(index, 1)
+          }
+        }
+      }
+
+      this.selectedPreset.sharing.splice(index, 1)
+    },
+
+
+    async loadConfig(){
+      return this.socket.send(this.presetSrc, { key:this.presetKey })
+          .then(async ({ config, presets, sharedPresets }) => {
+
+            this.config = config
+            this.presets = presets
+            this.sharedPresets = sharedPresets
+
+            if(this.$route.query?.search)
+              this.preset.search = this.$route.query.search
+          })
+          .catch(() => {})
+    },
+
+    saveConfig: invokeAfterIdle(function(reset = false, preset = false){
+      if(!this.presetKey) return
+      if(!this.config) return
+
+      return this.socket.send(this.presetSrc, {
+        key:this.presetKey,
+        config: {
+          ...this.config,
+          presets: undefined
+        },
+        ...(reset ? { reset:true, presets: this.presets } : {}),
+        ...(preset ? { presets: [ this.preset ] } : {}),
+      })
+          .catch(() => {})
+    }),
+
+    async removePreset(preset){
+      return this.socket.send(this.presetSrc, {
+        key: this.presetKey,
+        removePreset: preset
+      })
+          .then(_ => {
+            this.presets.splice(this.presets.findIndex(_ => _.uid === preset.uid), 1)
+          })
+          .catch(() => {})
+    },
+
+    savePreset: invokeAfterIdle(async function(){
+      if(!this.presetKey) return
+      if(!this.selectedPreset) return
+
+      return this.socket.send(this.presetSrc, {
+        key: this.presetKey,
+        presets: [
+          this.selectedPreset
+        ]
+      })
+          .catch(() => {})
+    }),
+
+  },
+
+  mounted() {
+    this.loadConfig()
+        .then(_ => this.load())
+  },
+
+  props: {
+    presetKey: String,
+    presetSrc: {
+      type: String,
+      default: 'user.preset'
+    },
+
+    src: String,
+
+    datasourceSrc: String,
+    datasourceListSrc: String,
+
+    previewSrc: String,
+
+    sharingSrc: String,
+
+    removeSharingSrc: String,
+
+    title: String,
+  },
+
+  provide() {
+    return {
+      listStyle: () => {
+      },
+      viewTypes: this.viewTypes,
+      dashboardStyle: this.$style,
+      previewDatasource: this.previewDatasource,
+      emitRoot: this.emitRoot,
+      getConfig: this.getConfig,
+      getPresets: this.getPresets,
+      selectPreset: this.selectPreset,
+      preview: this.preview
+    }
+  },
+
+  setup(){
+    const emitter = useEmitter()
+    return {
+      emitter
+    }
+  },
+
+  watch: {
+
+    'presets'(to) {
+      this.cConfig.viewedUid = 'uid' in this.$route.query ? this.$route.query.uid : this.cConfig.viewedUid
+    },
+
+    'cConfig.viewedUid'() {
+      this.$emit('change')
+    },
+
+    'cConfig.selectedUid'() {
+      this.saveConfig()
+    },
+
+    'cConfig.selectedDatasource'() {
+      this.saveConfig()
+    },
+
+    '$route.query': {
+      handler(to) {
+        if (this.cConfig) {
+          this.cConfig.viewedUid = 'uid' in to ? to.uid : this.cConfig.viewedUid
+          this.load()
+        }
+      }
+    },
+
+    config: {
+      deep: true,
+      handler(to, from){
+        if(Object.keys(from ?? {}).length > 0){
+          this.saveConfig()
+        }
+      }
+    },
+
+    selectedPreset: {
+      deep: true,
+      handler(to) {
+        if(to) {
+          this.savePreset()
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-row;
+}
+
+.resize1 {
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+.button {
+  @apply text-left p-3 border-[1px] border-transparent rounded-lg cursor-pointer;
+  @apply hover:border-primary-300 hover:bg-primary-100;
+}
+
+.columnTextbox input::placeholder {
+  @apply text-text;
+}
+
+</style>