@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/widgets/PresetBar.vue

@@ -17,19 +17,48 @@
           <div class="px-2">
             <label class="text-text-300">Presets</label>
           </div>
-          <div class="flex flex-col divide-y divide-text-50 bg-base-500 border-[1px] border-text-50 overflow-hidden rounded-lg">
-            <div v-for="(_preset, idx) in config.presets" type="button"
-                 class="px-3 p-2 text-left hover:bg-primary-100 flex flex-row gap-2 items-center">
-              <Radio v-model="config.presetIdx" :value="idx" @change="apply()" />
-              <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                      @click="select(idx)">
+
+          <div class="mt-1 flex flex-col divide-y divide-text-50 bg-base-500 border-[1px] border-text-50 overflow-hidden rounded-lg">
+            <div v-for="(_preset, idx) in presets" type="button"
+                 class="px-3 p-2 text-left hover:bg-primary-100 flex flex-row gap-2 items-center group">
+              <Radio :checked="config.presetIdx === _preset.uid"
+                     @click="config.presetIdx = _preset.uid" />
+              <button type="button"
+                      class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                      @click="config.presetIdx = _preset.uid"
+                      @click.shift="select(_preset.uid)">
                 {{ _preset.name }}
               </button>
-              <button v-if="config.presetIdx === idx"
-                      type="button"
-                      class="pl-2"
+              <button type="button"
+                      class="pl-2 hidden group-hover:block"
                       ref="btn"
-                      @click="$refs.contextMenu.open($refs.btn[0], { idx })">
+                      @click="$refs.contextMenu.open($refs.btn[idx], { preset:_preset, idx })">
+                <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="sharedPresets?.length > 0" class="p-3">
+          <div class="px-2">
+            <label class="text-text-300">Shared Presets</label>
+          </div>
+
+          <div class="mt-1 flex flex-col divide-y divide-text-50 bg-base-500 border-[1px] border-text-50 overflow-hidden rounded-lg">
+            <div v-for="(_preset, idx) in sharedPresets" type="button"
+                 class="px-3 p-2 text-left hover:bg-primary-100 flex flex-row gap-2 items-center group">
+              <Radio :checked="config.presetIdx === _preset.uid"
+                     @click="config.presetIdx = _preset.uid" />
+              <button type="button"
+                      class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                      @click="config.presetIdx = _preset.uid"
+                      @click.shift="select(_preset.uid)">
+                {{ _preset.name }}
+              </button>
+              <button type="button"
+                      class="pl-2 hidden group-hover:block"
+                      ref="sharedBtn"
+                      @click="$refs.contextMenu.open($refs.sharedBtn[idx], { preset:_preset, idx, sharing:true })">
                 <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
               </button>
             </div>
@@ -40,8 +69,8 @@
           <template #default="{ context }">
             <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
 
-              <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                      @click="select(context.idx)">
+              <button v-if="!context.sharing" class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                      @click="select(context.preset.uid)">
                 <div class="w-[24px]">
                   <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
                 </div>
@@ -49,15 +78,23 @@
               </button>
 
               <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                      @click="duplicate(context.idx)">
+                      @click="duplicate(context.preset)">
                 <div class="w-[24px]">
                   <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
                 </div>
                 Duplicate
               </button>
 
-              <button v-if="config.presets.length > 1" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
-                      @click="remove(context.idx)">
+              <button v-if="presets.length > 1 && !context.sharing" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
+                      @click="remove(context.preset.uid)">
+                <div class="w-[24px]">
+                  <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
+                </div>
+                Remove
+              </button>
+
+              <button v-else class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
+                      @click="removeShared(context.preset.uid)">
                 <div class="w-[24px]">
                   <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
                 </div>
@@ -454,157 +491,36 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 5" class="flex-1 flex flex-col gap-6 p-6">
-
-            <div>
-              <Checkbox v-model="presetPivot.enabled"
-                        @change="apply()">
-                Pivot Enabled
-              </Checkbox>
-            </div>
+          <div v-else-if="config.presetBarTabIndex === 5" class="flex-1 p-6">
 
-            <div class="grid grid-cols-1 gap-6">
+            <PresetBarPivot :pivot="presetPivot" :columns="pivotColumns" @apply="apply"/>
 
-              <div>
-                <div class="flex flex-row items-center gap-2">
-                  <label>Groups</label>
-                  <button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), pivotColumns)">
-                    <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! 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>
-                </div>
-                <ListItem :items="presetPivot.rows"
-                          @reorder="(from, to) => { presetPivot.rows.splice(to, 0, presetPivot.rows.splice(from, 1)[0]); apply() }"
-                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
-                          container-class="divide-y divide-text-50">
-                  <template v-slot="{ item, index }">
-                    <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
-                      <div data-reorder v-if="(presetPivot.rows ?? []).length > 1">
-                        <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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">
-                        <strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
-                                @click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, pivotColumns);">
-                          {{ item.label ? item.label : item.key }}
-                        </strong>
-                        <select v-if="item.type === 'date'"
-                                v-model="item.aggregrate"
-                                class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
-                                @change="apply()">
-                          <option value="hour">Hour</option>
-                          <option value="date">Date</option>
-                          <option value="month">Month</option>
-                          <option value="year">Year</option>
-                        </select>
-                      </div>
-                      <button type="button" @click="presetPivot.rows.splice(index, 1); apply()">
-                        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><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>
-              </div>
+          </div>
 
-              <div>
-                <div class="flex flex-row items-center gap-2">
-                  <label>Aggregrates</label>
-                  <button type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj), pivotColumns)">
-                    <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! 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>
-                </div>
-                <ListItem :items="presetPivot.values"
-                          @reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
-                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
-                          container-class="divide-y divide-text-50">
-                  <template v-slot="{ item, index }">
-                    <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
-                      <div data-reorder v-if="(presetPivot.values ?? []).length > 1">
-                        <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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">
-                        <strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
-                                @click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, pivotColumns);">
-                          {{ item.label ? item.label : item.key }}
-                        </strong>
-                        <select v-model="item.aggregrate"
-                                class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
-                                @change="apply()">
-                          <option value="">Default</option>
-                          <option value="count">Count</option>
-                          <option value="countDistinct">Distinct Count</option>
-                          <option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
-                          <option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
-                          <option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
-                          <option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
-                        </select>
-                      </div>
-                      <button type="button" @click="presetPivot.values.splice(index, 1); apply()">
-                        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><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>
-              </div>
+          <div v-else-if="config.presetBarTabIndex === 6" class="flex-1 p-6">
 
-              <div>
-                <div class="flex flex-row items-center gap-2">
-                  <label class="flex-1">Columns</label>
-                  <button v-if="presetPivot.manualColumns"
-                          type="button"
-                          class="text-primary"
-                          @click="delete presetPivot.manualColumns; apply()">Reset</button>
+            <div class="flex flex-col gap-1 mt-2">
+              <div v-for="(user, index) in preset.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 width="14" height="14" class="fill-text-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! 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>
-                <ListItem :items="presetPivot.columns"
-                          @reorder="(from, to) => { presetPivot.columns.splice(to, 0, presetPivot.columns.splice(from, 1)[0]); presetPivot.manualColumns = true; apply() }"
-                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
-                          container-class="divide-y divide-text-50">
-                  <template v-slot="{ item, index }">
-                    <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
-                      <div data-reorder>
-                        <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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>
-                      <Textbox class="flex-1 border-none" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
-                        item-class="p-1"/>
-                      <button type="button" v-if="[ 'number' ].includes(item.type)" @click="">
-                        <svg width="13" height="13" :class="(item.appearances ?? []).length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'"
-                             @click="$refs.presetBarPivotColumnEdit.open(item, next => { Object.assign(item, next); apply() })"
-                             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="M176 0h-128C21.49 0 0 21.49 0 48v128C0 202.5 21.49 224 48 224h128C202.5 224 224 202.5 224 176v-128C224 21.49 202.5 0 176 0zM176 288h-128C21.49 288 0 309.5 0 336v128C0 490.5 21.49 512 48 512h128C202.5 512 224 490.5 224 464v-128C224 309.5 202.5 288 176 288zM464 0h-128C309.5 0 288 21.49 288 48v128C288 202.5 309.5 224 336 224h128C490.5 224 512 202.5 512 176v-128C512 21.49 490.5 0 464 0zM488 376h-64v-64C424 298.8 413.3 288 400 288s-24 10.75-24 24v64h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64v64c0 13.25 10.75 24 24 24s24-10.75 24-24v-64h64c13.25 0 24-10.75 24-24S501.3 376 488 376z"/></svg>
-                      </button>
-                      <button type="button" @click="presetPivot.columns.splice(index, 1); presetPivot.manualColumns = true; apply()">
-                        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><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>
-
-                <PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
+                <button type="button" @click="removeSharing(index)">
+                  <svg width="14" height="14" 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="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 class="flex flex-row items-center gap-3">
-                <label>Total</label>
-                <Switch v-model="presetPivot.useTotal" @change="apply()"/>
-              </div>
-
             </div>
 
-          </div>
-
-          <div v-else-if="config.presetBarTabIndex === 9" class="flex-1 p-6 flex flex-col gap-6">
-
-            <div>
-              <div class="flex flex-row">
-                <strong class="flex-1">Preset</strong>
-                <button type="button" class="text-primary" @click="log(preset)">console.log</button>
-              </div>
-              <ObjectTree :value="preset" />
+            <div class="flex justify-center p-5">
+              <button type="button" class="text-primary flex flex-row items-center"
+                      @click="$refs.sharingModal.open([], { callback:addSharing })">
+                <svg width="14" height="14" class="fill-primary inline mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! 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>
+                Share...
+              </button>
             </div>
 
-            <div>
-              <div class="flex flex-row">
-                <strong class="flex-1">Config</strong>
-                <button type="button" class="text-primary" @click="log(config)">console.log</button>
-              </div>
-              <ObjectTree :value="config" />
-            </div>
+            <SharingModal ref="sharingModal" :src="sharingSrc" />
 
           </div>
 
@@ -622,19 +538,31 @@
 <script>
 
 import PresetSelectorFilterItem from "../components/PresetSelectorFilterItem.vue";
+import PresetBarPivot from "./PresetBarPivot.vue";
+import {getPresetUid} from "../utils/preset-selector.mjs";
+import SharingModal from "./Dashboard/SharingModal.vue";
 
 export default{
 
-  components: {PresetSelectorFilterItem},
+  components: {SharingModal, PresetBarPivot, PresetSelectorFilterItem},
 
-  emits: [ 'apply' ],
+  emits: [ 'apply', 'duplicate', 'remove', 'remove-shared' ],
 
   inject: [ 'appStyle', 'confirm' ],
 
   props: {
 
+    canShare: Boolean,
+
     config: Object,
 
+    presets: Array,
+
+    sharedPresets: Array,
+
+    sharingSrc: String,
+    removeSharingSrc: String,
+
     enumCache: Object
 
   },
@@ -648,11 +576,6 @@ export default{
       this.apply()
     },
 
-    addPivot(type, obj){
-      this.presetPivot[type].push(Object.assign({}, obj))
-      this.apply()
-    },
-
     addSort(obj){
       if(!Array.isArray(this.preset.sorts))
         this.preset.sorts = []
@@ -706,23 +629,61 @@ export default{
       return this.preset.columns.filter(_ => _.key === key).pop() ?? {}
     },
 
-    duplicate(idx){
-      this.config.presets.push({
-        ...JSON.parse(JSON.stringify(this.config.presets[idx])),
-        name: `${this.config.presets[idx].name} (Copy)`
-      })
+    duplicate(preset){
+      const uid = getPresetUid()
+
+      let name = preset.name.substring(0, preset.name.indexOf(' (Copy') > -1 ? preset.name.indexOf(' (Copy') : preset.name.length)
+      for(let i = 1 ; i < 100 ; i++){
+        const curName = `${name} (Copy${i > 1 ? ' ' + i : ''})`
+        if(this.presets.findIndex(_ => _.name === curName) < 0){
+          name = curName
+          break
+        }
+      }
+
+      const newPreset = {
+        ...JSON.parse(JSON.stringify(preset)),
+        name,
+        uid
+      }
+
+      this.presets.push(newPreset)
+
+      this.$emit('duplicate', preset)
+
+      this.$nextTick(() => this.select(newPreset.uid))
     },
 
-    remove(idx){
-      if(this.config.presets.length > 1){
+    remove(uid){
+      if(this.presets.length > 1){
         this.confirm('Remove this preset?', () => {
-          this.config.presets.splice(idx, 1)
+          const index = this.presets.findIndex(_ => _.uid === uid)
+          const [ removed ] = this.presets.splice(index, 1)
+          this.$emit('remove', removed)
+
+          const nextIndex = index - 1 >= 0 ? index - 1 : 0
+          this.config.presetIdx = this.presets[nextIndex].uid
         })
       }
     },
 
-    select(idx){
-      this.config.presetIdx = idx
+    removeShared(uid){
+      this.$emit('remove-shared', uid)
+    },
+
+    addSharing(item){
+      if(!Array.isArray(this.preset.sharing))
+        this.preset.sharing = []
+
+      this.$util.push(this.preset.sharing, item, { key:"id" })
+    },
+
+    removeSharing(index){
+      this.preset.sharing.splice(index, 1)
+    },
+
+    select(uid){
+      this.config.presetIdx = uid
       this.presetBar.view = 2
       this.apply()
     },
@@ -784,7 +745,7 @@ export default{
     },
 
     preset(){
-      return this.config.presets[this.config.presetIdx]
+      return this.presets.find(_ => _.uid === this.config.presetIdx)
     },
 
     presetChart(){
@@ -847,7 +808,7 @@ export default{
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
           ...((this.config ?? {}).sorts !== false ? [{ text:'Sorts', value:3 }] : []),
           ...((this.config ?? {}).pivot !== false ? [{ text:'Pivot', value:5 }] : []),
-          ...('debug' in this.$route.query || import.meta.env.DEV ? [{ text:'Debug', value:9 }] : []),
+          ...(this.canShare ? [{ text:'Sharing', value:6 }] : [])
         ],
         chart: [
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),

package/src/widgets/PresetBarPivot.vue

@@ -0,0 +1,186 @@
+<template>
+	<div class="flex flex-col gap-6">
+
+    <div>
+      <Checkbox v-model="pivot.enabled"
+                @change="apply()">
+        Pivot Enabled
+      </Checkbox>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6">
+
+      <div>
+        <div class="flex flex-row items-center gap-2">
+          <label>Groups</label>
+          <button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), columns)">
+            <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! 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>
+        </div>
+        <ListItem :items="pivot.rows"
+                  @reorder="(from, to) => { pivot.rows.splice(to, 0, pivot.rows.splice(from, 1)[0]); apply() }"
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                  container-class="divide-y divide-text-50">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
+              <div data-reorder v-if="(pivot.rows ?? []).length > 1">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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">
+                <strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
+                        @click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, columns);">
+                  {{ item.label ? item.label : item.key }}
+                </strong>
+                <select v-if="item.type === 'date'"
+                        v-model="item.aggregrate"
+                        class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
+                        @change="apply()">
+                  <option value="hour">Hour</option>
+                  <option value="date">Date</option>
+                  <option value="month">Month</option>
+                  <option value="year">Year</option>
+                </select>
+              </div>
+              <button type="button" @click="pivot.rows.splice(index, 1); apply()">
+                <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><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>
+      </div>
+
+      <div>
+        <div class="flex flex-row items-center gap-2">
+          <label>Aggregrates</label>
+          <button type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj), columns)">
+            <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! 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>
+        </div>
+        <ListItem :items="pivot.values"
+                  @reorder="(from, to) => { pivot.values.splice(to, 0, pivot.values.splice(from, 1)[0]); }"
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                  container-class="divide-y divide-text-50">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
+              <div data-reorder v-if="(pivot.values ?? []).length > 1">
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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">
+                <strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
+                        @click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, columns);">
+                  {{ item.label ? item.label : item.key }}
+                </strong>
+                <select v-model="item.aggregrate"
+                        class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
+                        @change="apply()">
+                  <option value="">Default</option>
+                  <option value="count">Count</option>
+                  <option value="countDistinct">Distinct Count</option>
+                  <option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
+                  <option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
+                  <option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
+                  <option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
+                </select>
+              </div>
+              <button type="button" @click="pivot.values.splice(index, 1); apply()">
+                <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><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>
+      </div>
+
+      <div>
+        <div class="flex flex-row items-center gap-2">
+          <label class="flex-1">Columns</label>
+          <button v-if="pivot.manualColumns"
+                  type="button"
+                  class="text-primary"
+                  @click="delete pivot.manualColumns; apply()">Reset</button>
+        </div>
+        <ListItem :items="pivot.columns"
+                  @reorder="(from, to) => { pivot.columns.splice(to, 0, pivot.columns.splice(from, 1)[0]); pivot.manualColumns = true; apply() }"
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                  container-class="divide-y divide-text-50">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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>
+              <Textbox class="flex-1 border-none" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
+                       item-class="p-1"/>
+              <button type="button" v-if="[ 'number' ].includes(item.type)" @click="">
+                <svg width="13" height="13" :class="(item.appearances ?? []).length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'"
+                     @click="$refs.presetBarPivotColumnEdit.open(item, next => { Object.assign(item, next); apply() })"
+                     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="M176 0h-128C21.49 0 0 21.49 0 48v128C0 202.5 21.49 224 48 224h128C202.5 224 224 202.5 224 176v-128C224 21.49 202.5 0 176 0zM176 288h-128C21.49 288 0 309.5 0 336v128C0 490.5 21.49 512 48 512h128C202.5 512 224 490.5 224 464v-128C224 309.5 202.5 288 176 288zM464 0h-128C309.5 0 288 21.49 288 48v128C288 202.5 309.5 224 336 224h128C490.5 224 512 202.5 512 176v-128C512 21.49 490.5 0 464 0zM488 376h-64v-64C424 298.8 413.3 288 400 288s-24 10.75-24 24v64h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64v64c0 13.25 10.75 24 24 24s24-10.75 24-24v-64h64c13.25 0 24-10.75 24-24S501.3 376 488 376z"/></svg>
+              </button>
+              <button type="button" @click="pivot.columns.splice(index, 1); pivot.manualColumns = true; apply()">
+                <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><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>
+
+      </div>
+
+      <div class="flex flex-row items-center gap-3">
+        <label>Total</label>
+        <Switch v-model="pivot.useTotal" @change="apply()"/>
+      </div>
+
+    </div>
+
+    <ColumnSelector ref="columnSelector" />
+
+    <PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
+
+	</div>
+</template>
+
+<script>
+
+import PresetBarPivotColumnEdit from "./PresetBarPivotColumnEdit.vue";
+import ColumnSelector from "./ColumnSelector.vue";
+
+export default{
+  components: {ColumnSelector, PresetBarPivotColumnEdit},
+
+  emits: [ 'apply' ],
+
+  methods: {
+
+    apply(){
+      this.$emit('apply')
+    },
+
+    addPivot(type, obj){
+      console.log(this.pivot, type)
+      this.pivot[type].push(Object.assign({}, obj))
+      this.apply()
+    },
+
+  },
+
+  props:{
+
+    columns: Array,
+
+    pivot: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.columnTextbox input::placeholder{
+  @apply text-text;
+}
+
+</style>