Convert AppstoreView to composition api style

dashboard/src/components/AppInstallDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog ref="dialog" :show-x="true" @close="step = 0">
+  <Dialog ref="dialogHandle" :show-x="true" @close="step = 0">
     <div class="content">
       <div class="header">
         <div class="summary">
@@ -11,72 +11,52 @@
         <img class="icon" :src="app.iconUrl" />
       </div>
       <Transition name="slide-left" mode="out-in">
-        <div v-if="step === 0">
-          <Button @click="onProceed" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
+        <div v-if="step === STEP.DETAILS">
+          <Button @click="step = STEP.INSTALL" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
           <div class="screenshots">
             <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
           </div>
           <div class="description" v-html="description"></div>
         </div>
-        <div v-else-if="step === 1">
+        <div v-else-if="step === STEP.INSTALL">
           <div>Now install {{ manifest.title }}</div>
           <br/>
           <br/>
-          <Button @click="onInstall" icon="fa-solid fa-circle-down">TODO Submit</Button>
+          <Button @click="step = STEP.DETAILS" icon="fa-solid fa-circle-down">TODO Submit</Button>
         </div>
       </Transition>
     </div>
   </Dialog>
 </template>
 
-<script>
+<script setup>
 
+import { ref, computed, useTemplateRef } from 'vue';
 import { Button, Dialog } from 'pankow';
 import { prettyDate, prettyFileSize } from 'pankow/utils';
 import { marked } from 'marked';
 
-const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
-const accessToken = localStorage.token;
+const STEP = Object.freeze({
+  DETAILS: Symbol('details'),
+  INSTALL: Symbol('install'),
+});
 
-export default {
-  name: 'AppInstallDialog',
-  components: {
-    Button,
-    Dialog,
-  },
-  data() {
-    return {
-      API_ORIGIN,
-      app: {},
-      manifest: {},
-      busy: false,
-      error: {},
-      step: 0
-    };
-  },
-  computed: {
-    description() {
-      return marked.parse(this.manifest.description || '');
-    }
-  },
-  methods: {
-    prettyDate,
-    prettyFileSize,
-    async open(app) {
-      this.step = 0;
-      this.app = app;
-      this.manifest = app.manifest;
+// reactive
+const app = ref({});
+const manifest = ref({});
+const step = ref(STEP.DETAILS);
+const dialog = useTemplateRef('dialogHandle');
+const description = computed(() => marked.parse(manifest.value.description || ''));
 
-      this.$refs.dialog.open();
-    },
-    onProceed() {
-      this.step = 1;
-    },
-    onInstall() {
-      this.step = 0;
-    }
-  },
-};
+defineExpose({
+  open(a) {
+    step.value = STEP.DETAILS;
+    app.value = a;
+    manifest.value = a.manifest;
+
+    dialog.value.open();
+  }
+});
 
 </script>
 
@@ -139,6 +119,8 @@ export default {
   gap: 20px;
   width: 100%;
   padding: 10px 0;
+
+  scroll-snap-type: x mandatory;
   overflow: auto;
 }
 
@@ -147,6 +129,8 @@ export default {
   border-radius: var(--pankow-border-radius);
   height: 300px;
   object-size: contain;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
 }
 
 </style>