@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/misc/modal/ClipboardModal.vue

@@ -1,17 +1,22 @@
 <template>
   <div>
-    <div v-bind:class="{ active: active }">
+    <div :class="{ active: active }">
       <div class="modal-container">
         <div class="modal-header">
-          <div class="modal-title h5">{{ title }}</div>
+          <div class="modal-title h5">
+            {{ title }}
+          </div>
           <button
+            v-if="closable"
             type="button"
             class="close input-no-outline"
             data-dismiss="modal"
             aria-label="Close"
-            v-if="closable"
           >
-            <span aria-hidden="true" @click="closePopup">&times;</span>
+            <span
+              aria-hidden="true"
+              @click="closePopup"
+            >&times;</span>
           </button>
         </div>
         <div class="modal-body">
@@ -22,14 +27,23 @@
               type="button"
               :value="$t('Copy')"
               class="btn btn-primary"
-              @click="onCopyCode(rss, afterCopy)"
               :aria-label="$t('Copy')"
-            />
+              @click="onCopyCode(rss, afterCopy)"
+            >
           </p>
-          <RssSection :emission="emission" v-if="emission" />
+          <RssSection
+            v-if="emission"
+            :emission="emission"
+          />
         </div>
-        <div class="modal-footer" v-if="validatetext">
-          <button class="btn btn-primary" @click="onValid">
+        <div
+          v-if="validatetext"
+          class="modal-footer"
+        >
+          <button
+            class="btn btn-primary"
+            @click="onValid"
+          >
             {{ validatetext }}
           </button>
         </div>
@@ -38,47 +52,53 @@
   </div>
 </template>
 
-<style lang="scss" scoped></style>
-
 <script lang="ts">
-import RssSection from '@/components/display/aggregator/RssSection.vue';
+import { Emission } from '@/store/class/emission';
 import { displayMethods } from '../../mixins/functions';
-import { defineComponent } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
 export default defineComponent({
   name: 'ClipboardModal',
 
   components: {
     RssSection,
   },
-  emits: ['close', 'validate'],
-
   mixins: [displayMethods],
 
-  props: ['title', 'active', 'closable', 'validatetext', 'link', 'emission'],
-
-  created() {
-    this.rss = this.link;
+  props: {
+    title: { default: undefined, type: String},
+    active: { default: false, type: Boolean},
+    closable: { default: true, type: Boolean},
+    validatetext: { default: undefined, type: String},
+    link: { default: '', type: String},
+    emission: { default: undefined, type: Object as ()=> Emission},
   },
+  emits: ['close', 'validate'],
 
   data() {
     return {
-      rss: '',
+      rss: '' as string,
     };
   },
 
+  created() {
+    this.rss = this.link;
+  },
+
   methods: {
-    closePopup(event: { preventDefault: () => void; }) {
+    closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.$emit('close');
     },
 
-    onValid() {
+    onValid(): void {
       this.$emit('validate');
     },
-
-    afterCopy(){
-      //Nothing
+    afterCopy(): void{
+      return;
     }
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/misc/modal/MessageModal.vue

@@ -1,73 +1,89 @@
 <template>
-  <b-modal
+  <div
     id="message-modal"
-    @close="closePopup"
-    @hide="closePopup"
-    @cancel="closePopup"
-    :title="title"
+    class="modal"
   >
-    <template v-slot:modal-header-close v-if="!closable">
-      <span></span>
-    </template>
-    <template v-slot:default>
-      <div class="content" v-html="message"></div>
-    </template>
-    <template v-slot:modal-footer v-if="validatetext">
-      <button v-if="canceltext" class="btn btn-light m-1" @click="onCancel">
-        {{ canceltext }}
-      </button>
-      <button
-        v-if="thirdText"
-        class="btn btn-primary m-1"
-        @click="onThirdAction"
-      >
-        {{ thirdText }}
-      </button>
-      <button class="btn btn-primary m-1" @click="onValid">
-        {{ validatetext }}
-      </button>
-    </template>
-    <template v-slot:modal-footer v-else>
-      <span></span>
-    </template>
-  </b-modal>
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ title }}
+          </h5>
+          <button
+            v-if="closable"
+            type="button"
+            class="btn-close"
+            aria-label="Close"
+            @click="closePopup"
+          />
+        </div>
+        <div class="modal-body">
+          <div
+            class="content"
+            v-html="message"
+          />
+        </div>
+        <div
+          v-if="validatetext"
+          class="modal-footer"
+        >
+          <button
+            v-if="canceltext"
+            class="btn btn-light m-1"
+            @click="onCancel"
+          >
+            {{ canceltext }}
+          </button>
+          <button
+            v-if="thirdText"
+            class="btn btn-primary m-1"
+            @click="onThirdAction"
+          >
+            {{ thirdText }}
+          </button>
+          <button
+            class="btn btn-primary m-1"
+            @click="onValid"
+          >
+            {{ validatetext }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'MessageModal',
-
-  props: [
-    'title',
-    'active',
-    'closable',
-    'message',
-    'validatetext',
-    'canceltext',
-    'thirdText',
-  ],
-  emits: ['close', 'validate', 'cancel','thirdEvent'],
-
-  mounted() {
-    /* this.$bvModal.show('message-modal'); */
+  props: {
+    title: { default: undefined, type: String},
+    active: { default: false, type: Boolean},
+    closable: { default: true, type: Boolean},
+    message: { default: undefined, type: String},
+    validatetext: { default: undefined, type: String},
+    canceltext: { default: undefined, type: String},
+    thirdText: { default: undefined, type: String},
   },
-
+  emits: ['close', 'validate', 'cancel', 'thirdEvent'],
   methods: {
-    closePopup(event: { preventDefault: () => void; }) {
+    closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();
       this.$emit('close');
     },
-    onValid() {
+    onValid(): void {
       this.$emit('validate');
     },
-    onCancel() {
+    onCancel(): void {
       this.$emit('cancel');
     },
-    onThirdAction() {
+    onThirdAction(): void {
       this.$emit('thirdEvent');
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>