add some layout examples

Author: gramkin

ui/src/SettingsPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useApp } from './app';
 import { computed } from 'vue';
-import { PlDropdown } from '@milaboratory/platforma-uikit';
+import { PlBlockPage, PlDropdown } from '@milaboratory/platforma-uikit';
 
 const app = useApp();
 const args = app.createArgsModel();
@@ -22,25 +22,13 @@ const datasetColumnOptions = computed(() =>
 </script>
 
 <template>
-  <div class="container">
-    <pl-dropdown :options="donorColumnOptions ?? []" v-model="args.model.donorColumn" label="Select donor column" clearable />
+  <PlBlockPage>
+    <template #title>Settings</template>
+    <PlDropdown :options="donorColumnOptions ?? []" v-model="args.model.donorColumn" label="Select donor column" clearable />
     <!-- TODO show only when donor column is seleceted -->
     <!-- TODO reset when donor column is changed -->
     <!-- TODO show button to add another one if selected -->
     <!-- TODO remove button -->
-    <pl-dropdown :options="datasetColumnOptions ?? []" v-model="args.model.datasetColumns[0]" label="Select dataset" />
-  </div>
+    <PlDropdown :options="datasetColumnOptions ?? []" v-model="args.model.datasetColumns[0]" label="Select dataset" />
+  </PlBlockPage>
 </template>
-
-<style lang="css">
-button {
-  padding: 12px 0;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  gap: 24px;
-}
-</style>

ui/src/TreeNodesTablePage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { platforma } from '@milaboratory/milaboratories.mixcr-shm-trees.model';
+// import { platforma } from '@milaboratory/milaboratories.mixcr-shm-trees.model';
 import { useApp } from './app';
 import { computed } from 'vue';
-import { PlAgDataTable, PlDataTableSettings } from '@milaboratory/sdk-vue';
+import { PlAgDataTable, PlBlockPage, PlDataTableSettings } from '@milaboratory/sdk-vue';
 
 const app = useApp();
 
@@ -29,7 +29,7 @@ const tableSettings = computed<PlDataTableSettings>(() => ({
 </script>
 
 <template>
-  <div class="container">
+  <PlBlockPage>
     <PlAgDataTable v-model="uiState.model.treeNodesTableState" :settings="tableSettings"></PlAgDataTable>
-  </div>
+  </PlBlockPage>
 </template>

ui/src/TreeTablePage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { platforma } from '@milaboratory/milaboratories.mixcr-shm-trees.model';
+// import { platforma } from '@milaboratory/milaboratories.mixcr-shm-trees.model';
 import { useApp } from './app';
 import { computed } from 'vue';
-import { PlAgDataTable, PlDataTableSettings } from '@milaboratory/sdk-vue';
+import { PlAgDataTable, PlBlockPage, PlBtnPrimary, PlDataTableSettings } from '@milaboratory/sdk-vue';
 
 const app = useApp();
 
@@ -29,7 +29,7 @@ const tableSettings = computed<PlDataTableSettings>(() => ({
 </script>
 
 <template>
-  <div class="container">
+  <PlBlockPage>
     <PlAgDataTable v-model="uiState.model.treeTableState" :settings="tableSettings"></PlAgDataTable>
-  </div>
+  </PlBlockPage>
 </template>