@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,84 +1,71 @@
 <template>
-  <div>
-    <div v-bind:class="{ active: active }">
-      <div class="modal-container">
+  <div class="modal">
+    <div class="modal-backdrop" />
+    <div class="modal-dialog">
+      <div class="modal-content">
         <div class="modal-header">
-          <div class="modal-title h5">{{ title }}</div>
+          <div class="modal-title h5">
+            {{ $t('RSS Link') }}
+          </div>
           <button
+            ref="focusElement"
             type="button"
-            class="close input-no-outline"
-            data-dismiss="modal"
-            aria-label="Close"
-            v-if="closable"
-          >
-            <span aria-hidden="true" @click="closePopup">&times;</span>
-          </button>
+            class="btn-close btn-close-white"
+            title="Close"
+            @click="closePopup"
+          />
         </div>
         <div class="modal-body">
           <p class="d-flex justify-content-between align-items-center">
             {{ $t('Rss feed:') }}
-            <span id="LINK">{{ rss }}</span>
+            <span id="LINK">{{ link }}</span>
             <input
               type="button"
               :value="$t('Copy')"
               class="btn btn-primary"
-              @click="onCopyCode(rss, afterCopy)"
-              :aria-label="$t('Copy')"
-            />
+              :title="$t('Copy')"
+              @click="onCopyCode(link, afterCopy)"
+            >
           </p>
-          <RssSection :emission="emission" v-if="emission" />
-        </div>
-        <div class="modal-footer" v-if="validatetext">
-          <button class="btn btn-primary" @click="onValid">
-            {{ validatetext }}
-          </button>
+          <RssSection
+            v-if="emission"
+            :emission="emission"
+          />
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
-
 <script lang="ts">
-import RssSection from '@/components/display/aggregator/RssSection.vue';
+import { Emission } from '@/store/class/general/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: {
+    link: { default: '', type: String},
+    emission: { default: undefined, type: Object as ()=> Emission},
   },
-
-  data() {
-    return {
-      rss: '',
-    };
+  emits: ['close', 'copy'],
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
   },
 
   methods: {
-    closePopup(event: { preventDefault: () => void; }) {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
-
-    onValid() {
-      this.$emit('validate');
-    },
-
-    afterCopy(){
-      //Nothing
+    afterCopy(): void{
+      this.$emit("copy");
     }
   },
-});
+})
 </script>
+

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

@@ -1,73 +1,94 @@
 <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"
+            :ref="closable?'focusElement':''"
+            type="button"
+            class="btn-close btn-close-white"
+            title="Close"
+            @click="closePopup"
+          />
+        </div>
+        <div class="modal-body">
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            class="content"
+            v-html="message"
+          />
+          <!-- eslint-enable -->
+        </div>
+        <div
+          v-if="validatetext"
+          class="modal-footer"
+        >
+          <button
+            v-if="canceltext"
+            :ref="!closable && canceltext?'focusElement':''"
+            class="btn m-1"
+            @click="onCancel"
+          >
+            {{ canceltext }}
+          </button>
+          <button
+            v-if="thirdText"
+            class="btn btn-primary m-1"
+            @click="onThirdAction"
+          >
+            {{ thirdText }}
+          </button>
+          <button
+            :ref="!closable && !canceltext?'focusElement':''"
+            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'],
+  mounted(){
+    (this.$refs.focusElement as HTMLElement)?.focus();
   },
-
   methods: {
-    closePopup(event: { preventDefault: () => void; }) {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
-    onValid() {
+    onValid(): void {
       this.$emit('validate');
     },
-    onCancel() {
+    onCancel(): void {
       this.$emit('cancel');
     },
-    onThirdAction() {
+    onThirdAction(): void {
       this.$emit('thirdEvent');
     },
   },
-});
-</script>
+})
+</script>