Composition API and Capacitor geolocation

.github/workflows/build.yml

@@ -0,0 +1,35 @@
+name: Build
+
+on:
+  pull_request_target:
+    branches:
+      main
+
+permissions: read-all
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Set up yarn
+        run: corepack enable && yarn set version 3.3.0
+
+      - name: Install
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build

package.json

@@ -3,6 +3,8 @@
   "version": "0.2.0",
   "browser": "dist/index.umd.js",
   "dependencies": {
+    "@capacitor/core": "^5.7.4",
+    "@capacitor/geolocation": "^5.0.7",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
@@ -15,7 +17,7 @@
     "vuetify": "^3.3.3"
   },
   "devDependencies": {
-    "@types/leaflet": "^1.9.3",
+    "@types/leaflet": "^1.9.11",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@vue/cli-plugin-eslint": "^5.0.8",

src/components/CreditLogos.vue

@@ -17,38 +17,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 
-export default defineComponent({
+import { CreditLogosProps } from "../types";
 
-  props: {
-    visible: {
-      type: Boolean,
-      default: true
-    },
-    logoSize: {
-      type: String,
-      default: "5vmin"
-    }
-  },
-
-  computed: { 
-    isMobile() {
-      return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
-    },
-    cssVars() {
-      return {
-        "--logo-size": this.logoSize,
-      };
-    }
-  },
+const props = withDefaults(defineProps<CreditLogosProps>(), {
+  visible: true,
+  logoSize: "5vmin"
+});
 
+const cssVars = computed(() => {
+  return {
+    "--logo-size": props.logoSize,
+  };
 });
 </script>
 
-<style>
-#logo-credits img {
-  height: var(--logo-size);
+<style lang="less">
+#icons-container {
+  pointer-events: auto;
+
+  img {
+    height: var(--logo-size);
+  }
 }
 </style>

src/components/FundingAcknowledgment.vue → src/components/FundingAcknowledgement.vue

@@ -1,50 +1,34 @@
 <template>
-  <div id="funding-acknowledgment">
+  <div
+    id="funding-acknowledgment"
+    :style="cssVars"
+  >
     The material contained in this product is based upon work supported by NASA under cooperative agreement award No. 80NSSC21M0002. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the authors and do not necessarily reflect the views of the National Aeronautics and Space Administration.
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed } from "vue";
 
-<script lang="ts">
-import { defineComponent, } from "vue";
+import { FundingAcknowledgementProps } from "../types";
 
-export default defineComponent({
-
-
-  props: {
-    visible: {
-      type: Boolean,
-      default: true
-    },
-  },
-
-  data() {
-    return {    };
-  },
-
-  created() {
-    return;
-  },
-
-  methods: {
-
-  },
-
-  computed: { 
-
-  },
+const props = withDefaults(defineProps<FundingAcknowledgementProps>(), {
+  color: "#E0E0E0",
+  backgroundColor: "#0C3D91",
+});
 
-  watch: {
-  }
+const cssVars = computed(() => {
+  return {
+    "--color": props.color,
+    "--background-color": props.backgroundColor,
+  };
 });
 </script>
 
-
 <style lang="less">
-
 #funding-acknowledgment {
-  color: #E0E0E0;
-  background-color: #0c3d91;
+  color: var(--color);
+  background-color: var(--background-color);
   font-size: calc(0.8em + 0.1vw + 0.1vh);
   line-height: calc(1em + 0.3vw + 0.3vh);
   padding-inline: 1em;
@@ -55,7 +39,5 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   border-radius: 5px;
-
 }
-
-</style>
+</style>