@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/components/misc/Popover.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    :id="id"
+    ref="element"
+    class="popover"
+    role="tooltip"
+    tabindex="-1"
+  >
+    <div ref="titleRef">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div ref="contentRef">
+      <slot>
+        {{ content }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Popover} from 'bootstrap'
+import {defineComponent, onMounted, PropType, ref} from 'vue'
+import useEventListener from '../../helper/useEventListener'
+export default defineComponent({
+  name: 'Popover',
+  props: {
+    content: {type: String, default: ''},
+    id: {type: String, default: ''},
+    noninteractive: {type: Boolean, default: false},
+    placement: {type: String as PropType<Popover.Options['placement']>, default: 'right'},
+    target: {type: String, required: true},
+    title: {type: String, default: ''},
+    show: {type: Boolean, default: false},
+    disable: {type: Boolean, default: false},
+  },
+  emits: ['show', 'shown', 'hide', 'hidden', 'inserted'],
+  setup(props, {emit}) {
+    const element = ref<HTMLElement>()
+    const target = ref<HTMLElement>()
+    const instance = ref<Popover>()
+    const titleRef = ref<HTMLElement>()
+    const contentRef = ref<HTMLElement>()
+    function initPopover(){
+      instance.value = new Popover(`#${props.target}`, {
+        container: 'body',
+        trigger: "hover focus",
+        placement: props.placement,
+        title: titleRef.value?.innerHTML || '',
+        content: contentRef.value?.innerHTML || '',
+        html: true,
+      })
+      if (document.getElementById(props.target)) {
+        target.value = document.getElementById(props.target) as HTMLElement
+      }
+      element.value?.parentNode?.removeChild(element.value)
+      if (props.show) {
+        instance.value.show()
+      }
+      if (props.disable) {
+        instance.value.disable()
+      }
+    }
+    onMounted(()=>{
+      initPopover();
+    })
+    useEventListener(target, 'show.bs.popover', () => emit('show'))
+    useEventListener(target, 'shown.bs.popover', () => emit('shown'))
+    useEventListener(target, 'hide.bs.popover', () => emit('hide'))
+    useEventListener(target, 'hidden.bs.popover', () => emit('hidden'))
+    useEventListener(target, 'inserted.bs.popover', () => emit('inserted'))
+    return {
+      element,
+      titleRef,
+      contentRef,
+      instance,
+      initPopover
+    }
+  },
+  watch:{
+    disable(){
+      if(!this.instance){ return; }
+      if (this.disable) {
+        this.instance.disable();
+      } else {
+        this.instance.enable();
+      }
+    },
+    content(){
+      if(!this.instance){ return; }
+      this.$nextTick(() => {
+        this.instance?.dispose();
+        this.initPopover();
+      });
+    },
+    title(){
+      if(!this.instance){ return; }
+      this.$nextTick(() => {
+        this.instance?.dispose();
+        this.initPopover();
+      });
+    }
+  }
+
+})
+</script>
+<style lang="scss">
+.octopus-app{
+.popover{
+  max-height: 80vh;
+  overflow: auto;
+  hr{
+    width: 100px;
+  }
+}
+}
+</style>

package/src/components/misc/Snackbar.vue

@@ -1,33 +1,40 @@
 <template>
-  <div class="snack-bar-wrap" :style="style.wrap">
-    <template v-for="(msg, i) in msgs" :key="i">
+  <div
+    class="snack-bar-wrap"
+    :style="style.wrap"
+  >
+    <template
+      v-for="(msg, i) in msgs"
+      :key="i"
+    >
       <div
         class="snack-bar"
         :style="style.bar(msg.color)"
         @click="pop(i)"
-        v-html="msg.msg.message || msg.msg"
-      ></div>
-      <br/>
+      >
+        {{ msg.msg.message || msg.msg }}
+      </div>
+      <br>
     </template>
   </div>
 </template>
 
 <script lang="ts">
-/* const getStyle = (baseSize: any, position:any) => {
+const getStyle = (baseSize: string, position: { pos:string,textAlign: string}) => {
   const c = (f: number) => `calc(${f} * ${baseSize})`;
   const { pos, textAlign } = position;
   return {
     wrap: {
       position: 'fixed',
       left: 0,
-      [pos]: c(0.05),
+      pos:pos? pos: c(0.05),
       zIndex: 9999,
       width: '100%',
       padding: `0 ${c(0.2)}`,
       pointerEvents: 'none',
       textAlign,
     },
-    bar: (bg: any) => ({
+    bar: (bg: string) => ({
       display: 'inline-block',
       width: 'auto',
       minWidth: baseSize,
@@ -45,36 +52,32 @@
       userSelect: 'none',
     }),
   };
-}; */
-import { defineComponent } from 'vue';
+};
+import { defineComponent } from 'vue'
 export default defineComponent({
- /*  name: 'Snackbar',
+  name: 'Snackbar',
   props: {
-    colors: {
-      default() {
-        return {
+    colors: { default: ()=> ({
           open: '#333',
           info: '#3DBD7D',
           error: '#FA7377',
           warn: '#FF6600',
-        };
-      },
-      type: Object,
-    },
-    position: {
-      default: 'top-center',
-      type: String,
-    },
+        }), type: Object},
+    position: { default: 'top-center', type: String},
+    holdTime: {default:5000, type:Number}
   },
   data() {
     return {
-      msgs: [] as any,
-      holdTime: 3000,
+      msgs: [] as Array<{
+        color: string,
+        msg:string,
+        timer: ReturnType<typeof setTimeout>|undefined,
+      }>,
       baseSize: '5rem',
     };
   },
   computed: {
-    $_position():any {
+    $_position(): { pos:string,textAlign: string} {
       const [p, textAlign] = this.position.toString().split('-');
       return {
         pos: ['top', 'bottom'].includes(p) ? p : 'top',
@@ -83,35 +86,61 @@ export default defineComponent({
           : 'center',
       };
     },
-    style() {
+    style(): {wrap: {
+      position: string,
+      left: number,
+      pos: string,
+      zIndex: number,
+      width: string,
+      padding: string,
+      pointerEvents: string,
+      textAlign:string,
+    },
+    bar: (bg:string) =>{
+      display: string,
+      width:string,
+      minWidth: string,
+      maxWidth:string,
+      padding: string,
+      margin: string,
+      borderRadius: string,
+      lineHeight: string,
+      color: string,
+      background: string,
+      boxShadow: string,
+      cursor: string,
+      textAlign: string,
+      pointerEvents: string,
+      userSelect: string,
+    }}{
       return getStyle(this.baseSize, this.$_position);
     },
   },
   methods: {
-    info(msg: any) {
+    info(msg: string): boolean {
       const color = this.colors.info;
       this.open({ color, msg }, false);
       return true;
     },
-    error(msg: any) {
+    error(msg: string): boolean {
       const color = this.colors.error;
       this.open({ color, msg }, false);
       return false;
     },
-    warn(msg: any) {
+    warn(msg: string): boolean {
       const color = this.colors.warn;
       this.open({ color, msg }, false);
       return true;
     },
-    open(message: { color?: any; msg?: any; }, isOpen = true) {
+    open(message: {color:string, msg:string}|string, isOpen = true): boolean {
       let msg;
       let color;
       if (!isOpen) {
-        ({ color } = message);
-        msg = message.msg;
+        color = (message as {color:string, msg:string}).color;
+        msg = (message as {color:string, msg:string}).msg;
       } else {
         color = this.colors.open;
-        msg = message;
+        msg = (message as string);
       }
       const msgObj = {
         color,
@@ -123,10 +152,17 @@ export default defineComponent({
 
       return true;
     },
-    pop(i = 0) {
-      if (this.msgs[i]) clearTimeout(this.msgs[i].timer);
+    pop(i = 0): void {
+      if (this.msgs[i]) clearTimeout((this.msgs[i].timer as unknown as number));
       this.msgs.splice(i, 1);
     },
-  }, */
-});
+  },
+})
 </script>
+<style lang="scss">
+.octopus-app{
+.snack-bar-wrap{
+  bottom: 0px;
+}
+}
+</style>