modal, add feed [wip]

vue/src/components/RssFeeds.vue

@@ -2,11 +2,13 @@
 import { ref, unref, onMounted, nextTick } from 'vue';
 import axios from 'axios';
 import { Readability } from '@mozilla/readability';
+import Modal from './modal/AddUrl.vue';
 
 const showMessage = ref(false)
 const feeds = ref([]);
 const message = ref('')
-const buttonText = 'Sync'
+const showModal = ref(false)
+
 async function getReadable(feed, index) {
   try {
     const response = await axios.post("feeds/read", {
@@ -153,12 +155,22 @@ onMounted(() => {
     <div class="wrapper">
       <nav>
         <p @click="sync">Sync</p>
+        <!-- <p @click="updateShow(true)">Add RSS</p> -->
+        <p @click="showModal = true">Add RSS</p>
         <!-- <RouterLink to="/">Home</RouterLink> -->
         <!-- <RouterLink to="/about">About</RouterLink> -->
         <!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
       </nav>
     </div>
   </header>
+  <Teleport to="body">
+    <!-- use the modal component, pass in the prop -->
+    <modal :show="showModal" @close="showModal = false">
+      <template #header>
+        <h3>Add RSS Feed</h3>
+      </template>
+    </modal>
+  </Teleport>
   <div>
     <h1>Feeds</h1> <!-- <button @click="sync">{{ buttonText }}</button> -->
     <div v-if="showMessage" class="message">{{ message }}</div>

vue/src/components/modal/AddUrl.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  show: Boolean
+})
+const submitted = ref(false)
+const url = ref('')
+const processInput = () => {
+  submitted.value = true;
+  console.log('saved ' + url.value)
+};
+</script>
+
+<template>
+  <Transition name="modal">
+    <div v-if="show" class="modal-mask">
+      <div class="modal-container">
+        <div class="modal-header">
+          <slot name="header">Add RSS Feed</slot>
+        </div>
+        <form @submit.prevent="processInput">
+          <label for="name">URL:</label>
+          <input v-model="url" id="url" type="text" required />
+
+          <div v-if="submitted">
+            <p></p>
+          </div>
+
+          <div class="modal-footer">
+            <slot name="footer">
+              <button type="submit">Save</button>
+              <button class="modal-default-button" @click="$emit('close')">Close</button>
+            </slot>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style>
+input {
+  margin: 15px;
+}
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: opacity 0.3s ease;
+}
+
+.modal-container {
+  width: 300px;
+  margin: auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+}
+
+.modal-header h3 {
+  margin-top: 0;
+  color: #42b983;
+}
+
+.modal-body {
+  margin: 20px 0;
+}
+
+.modal-default-button {
+  float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter-from {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>