add controls for demo

sora-xor · Mar 7, 2024 · 1653976 · 1653976
1 parent b06a6b3
commit 1653976
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 30 deletions.
diff --git a/src/components/shared/Widget/Grid/Grid.vue b/src/components/shared/Widget/Grid/Grid.vue
@@ -45,7 +45,7 @@
 import cloneDeep from 'lodash/fp/cloneDeep';
 import debounce from 'lodash.debounce';
 import { GridLayout, GridItem } from 'vue-grid-layout';
-import { Component, Prop, Ref, Vue } from 'vue-property-decorator';
+import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator';
 
 import { Breakpoint, BreakpointKey } from '@/consts/layout';
 import type { Layout, LayoutConfiguration, ResponsiveLayouts } from '@/types/layout';
@@ -100,6 +100,14 @@ export default class WidgetsGrid extends Vue {
     }, {});
   }
 
+  @Watch('responsiveLayouts')
+  private updateCurrentLayout() {
+    this.layout =
+      this.breakpoint in this.responsiveLayouts
+        ? this.responsiveLayouts[this.breakpoint]
+        : this.responsiveLayouts[BreakpointKey.lg];
+  }
+
   setReady(): void {
     this.ready = true;
   }

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -1,20 +1,40 @@
 <template>
-  <widgets-grid :layouts="layouts" class="swap-container" draggable resizable>
-    <template v-slot="{ id, resize }">
-      <template v-if="id === 'form'">
-        <swap-form-widget :parent-loading="parentLoading" @resize="resize" />
+  <div>
+    <div class="controls s-flex" style="gap: 16px; justify-content: space-between">
+      <div class="s-flex">
+        <s-checkbox v-model="draggable" label="Draggable" />
+        <s-checkbox v-model="resizable" label="Resizable" />
+        <s-checkbox v-model="compact" label="Compact" />
+      </div>
+      <div class="s-flex">
+        <s-checkbox v-model="chart" label="Chart" />
+        <s-checkbox v-model="transactions" label="Transactions" />
+        <s-checkbox v-model="distribution" label="Route" />
+      </div>
+    </div>
+    <widgets-grid
+      :draggable="draggable"
+      :resizable="resizable"
+      :compact="compact"
+      :layouts="layouts"
+      class="swap-container"
+    >
+      <template v-slot="{ id, resize }">
+        <template v-if="id === 'form'">
+          <swap-form-widget :parent-loading="parentLoading" @resize="resize" />
+        </template>
+        <template v-else-if="id === 'chart'">
+          <swap-chart-widget full :parent-loading="parentLoading" v-if="chartsEnabled" />
+        </template>
+        <template v-else-if="id === 'distribution'">
+          <swap-distribution-widget :parent-loading="parentLoading" @resize="resize" />
+        </template>
+        <template v-else-if="id === 'transactions'">
+          <swap-transactions-widget full :parent-loading="parentLoading" />
+        </template>
       </template>
-      <template v-else-if="id === 'chart'">
-        <swap-chart-widget full :parent-loading="parentLoading" v-if="chartsEnabled" />
-      </template>
-      <template v-else-if="id === 'distribution'">
-        <swap-distribution-widget :parent-loading="parentLoading" @resize="resize" />
-      </template>
-      <template v-else-if="id === 'transactions'">
-        <swap-transactions-widget full :parent-loading="parentLoading" />
-      </template>
-    </template>
-  </widgets-grid>
+    </widgets-grid>
+  </div>
 </template>
 
 <script lang="ts">
@@ -50,20 +70,44 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   @action.swap.setTokenFromAddress private setTokenFromAddress!: (address?: string) => Promise<void>;
   @action.swap.setTokenToAddress private setTokenToAddress!: (address?: string) => Promise<void>;
 
-  layouts = {
-    lg: [
-      { x: 0, y: 0, w: 6, h: 20, i: 'form' },
-      { x: 6, y: 0, w: 12, h: 20, i: 'chart' },
-      { x: 18, y: 0, w: 6, h: 24, i: 'transactions' },
-      { x: 0, y: 20, w: 6, h: 6, i: 'distribution' },
-    ],
-    md: [
-      { x: 0, y: 0, w: 4, h: 20, i: 'form' },
-      { x: 4, y: 0, w: 8, h: 20, i: 'chart' },
-      { x: 0, y: 20, w: 4, h: 12, i: 'distribution' },
-      { x: 4, y: 20, w: 6, h: 24, i: 'transactions' },
-    ],
-  };
+  draggable = false;
+  resizable = false;
+  compact = false;
+
+  form = true;
+  chart = true;
+  transactions = true;
+  distribution = true;
+
+  get layouts() {
+    const lg = [];
+    const sm = [];
+
+    if (this.form) {
+      lg.push({ x: 0, y: 0, w: 6, h: 20, i: 'form' });
+      sm.push({ x: 0, y: 0, w: 4, h: 20, i: 'form' });
+    }
+
+    if (this.chart) {
+      lg.push({ x: 6, y: 0, w: 12, h: 20, i: 'chart' });
+      sm.push({ x: 4, y: 0, w: 8, h: 20, i: 'chart' });
+    }
+
+    if (this.transactions) {
+      lg.push({ x: 18, y: 0, w: 6, h: 24, i: 'transactions' });
+      sm.push({ x: 4, y: 20, w: 6, h: 24, i: 'transactions' });
+    }
+
+    if (this.distribution) {
+      lg.push({ x: 0, y: 20, w: 6, h: 6, i: 'distribution' });
+      sm.push({ x: 0, y: 20, w: 4, h: 12, i: 'distribution' });
+    }
+
+    return {
+      lg,
+      sm,
+    };
+  }
 
   @Watch('tokenFrom')
   @Watch('tokenTo')