adtec-core-package 2.0.0 → 2.0.2

package/src/components/kFrame/IframeOptions.ts

@@ -1,116 +1,116 @@
-interface IframeOptions {
-  uid: string
-  src: string
-  name?: string
-  width?: string
-  height?: string
-  className?: string
-  style?: string
-  allow?: string
-  onLoad?: (e: Event) =>void
-  onError?: (e: string | Event) =>void
-}
-
-type IframeRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'> & { zIndex?: number | string }
-
-class Iframe {
-  instance: HTMLIFrameElement | null = null
-  constructor(private ops: IframeOptions) {
-    this.init()
-  }
-  init() {
-    const {
-      src,
-      name = `Iframe-${Date.now()}`,
-      className = '',
-      style = '',
-      allow,
-      onLoad = () => {},
-      onError = () => {},
-    } = this.ops
-
-    this.instance = document.createElement('iframe')
-    this.instance.name = name
-    this.instance.className = className
-    this.instance.style.cssText = style
-    this.instance.onload = onLoad
-    this.instance.onerror = onError
-    if (allow) this.instance.allow = allow
-    this.hide()
-    this.instance.src = src
-    document.body.appendChild(this.instance)
-  }
-  setElementStyle(style: Record<string, string>) {
-    if (this.instance) {
-      Object.entries(style).forEach(([key, value]) => {
-        this.instance!.style.setProperty(key, value)
-      })
-    }
-  }
-  hide() {
-    this.setElementStyle({
-      display: 'none',
-      position: 'absolute',
-      left: '0px',
-      top: '0px',
-      width: '0px',
-      height: '0px',
-    })
-  }
-  show(rect: IframeRect) {
-    this.setElementStyle({
-      display: 'block',
-      position: 'absolute',
-      left: rect.left + 'px',
-      top: rect.top + 'px',
-      width: rect.width + 'px',
-      height: rect.height + 'px',
-      border: '0',
-      'z-index': String(rect.zIndex) || 'auto',
-    })
-  }
-  resize(rect: IframeRect) {
-    this.show(rect)
-  }
-  destroy() {
-    if (this.instance) {
-      this.instance.onload = null
-      this.instance.onerror = null
-      this.instance.remove()
-      this.instance = null
-    }
-  }
-}
-export class IFrameManager {
-  static frames = new Map()
-  static createFame(ops: IframeOptions, rect: IframeRect) {
-    const existFrame = this.frames.get(ops.uid)
-    if (existFrame) {
-      existFrame.destroy()
-    }
-    const frame = new Iframe(ops)
-    this.frames.set(ops.uid, frame)
-    frame.show(rect)
-    return frame
-  }
-  static showFrame(uid: string, rect: IframeRect) {
-    const frame = this.frames.get(uid)
-    frame?.show(rect)
-  }
-  static hideFrame(uid: string) {
-    const frame = this.frames.get(uid)
-    frame?.hide()
-  }
-  static destroyFrame(uid: string) {
-    const frame = this.frames.get(uid)
-    frame?.destroy()
-    this.frames.delete(uid)
-  }
-  static resizeFrame(uid: string, rect: IframeRect) {
-    const frame = this.frames.get(uid)
-    frame?.resize(rect)
-  }
-  static getFrame(uid: string) {
-    return this.frames.get(uid)
-  }
-}
+interface IframeOptions {
+  uid: string
+  src: string
+  name?: string
+  width?: string
+  height?: string
+  className?: string
+  style?: string
+  allow?: string
+  onLoad?: (e: Event) =>void
+  onError?: (e: string | Event) =>void
+}
+
+type IframeRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'> & { zIndex?: number | string }
+
+class Iframe {
+  instance: HTMLIFrameElement | null = null
+  constructor(private ops: IframeOptions) {
+    this.init()
+  }
+  init() {
+    const {
+      src,
+      name = `Iframe-${Date.now()}`,
+      className = '',
+      style = '',
+      allow,
+      onLoad = () => {},
+      onError = () => {},
+    } = this.ops
+
+    this.instance = document.createElement('iframe')
+    this.instance.name = name
+    this.instance.className = className
+    this.instance.style.cssText = style
+    this.instance.onload = onLoad
+    this.instance.onerror = onError
+    if (allow) this.instance.allow = allow
+    this.hide()
+    this.instance.src = src
+    document.body.appendChild(this.instance)
+  }
+  setElementStyle(style: Record<string, string>) {
+    if (this.instance) {
+      Object.entries(style).forEach(([key, value]) => {
+        this.instance!.style.setProperty(key, value)
+      })
+    }
+  }
+  hide() {
+    this.setElementStyle({
+      display: 'none',
+      position: 'absolute',
+      left: '0px',
+      top: '0px',
+      width: '0px',
+      height: '0px',
+    })
+  }
+  show(rect: IframeRect) {
+    this.setElementStyle({
+      display: 'block',
+      position: 'absolute',
+      left: rect.left + 'px',
+      top: rect.top + 'px',
+      width: rect.width + 'px',
+      height: rect.height + 'px',
+      border: '0',
+      'z-index': String(rect.zIndex) || 'auto',
+    })
+  }
+  resize(rect: IframeRect) {
+    this.show(rect)
+  }
+  destroy() {
+    if (this.instance) {
+      this.instance.onload = null
+      this.instance.onerror = null
+      this.instance.remove()
+      this.instance = null
+    }
+  }
+}
+export class IFrameManager {
+  static frames = new Map()
+  static createFame(ops: IframeOptions, rect: IframeRect) {
+    const existFrame = this.frames.get(ops.uid)
+    if (existFrame) {
+      existFrame.destroy()
+    }
+    const frame = new Iframe(ops)
+    this.frames.set(ops.uid, frame)
+    frame.show(rect)
+    return frame
+  }
+  static showFrame(uid: string, rect: IframeRect) {
+    const frame = this.frames.get(uid)
+    frame?.show(rect)
+  }
+  static hideFrame(uid: string) {
+    const frame = this.frames.get(uid)
+    frame?.hide()
+  }
+  static destroyFrame(uid: string) {
+    const frame = this.frames.get(uid)
+    frame?.destroy()
+    this.frames.delete(uid)
+  }
+  static resizeFrame(uid: string, rect: IframeRect) {
+    const frame = this.frames.get(uid)
+    frame?.resize(rect)
+  }
+  static getFrame(uid: string) {
+    return this.frames.get(uid)
+  }
+}

package/src/components/kFrame/KFrame.vue

@@ -1,161 +1,161 @@
-<template>
-  <div ref="frameContainer"class="k-frame">
-    <span v-if="!src" class="k-frame-tips">
-      <slot name="placeholder">暂无数据</slot>
-    </span>
-    <span v-else-if="isLoading"class="k-frame-tips">
-      <slot name="loading">加载中... </slot>
-    </span>
-    <span v-else-if="isError" class="k-frame-tips"> <slot name="error">加载失败 </slot></span>
-  </div>
-</template>
-<script setup lang="ts">
-import { onActivated, onBeforeUnmount, onDeactivated, ref, watch } from'vue'
-// import { IFrameManager, getIncreaseId } from './core'
-import { useResizeObserver, useThrottleFn } from'@vueuse/core'
-import { IFrameManager } from './IframeOptions.ts'
-import { v4 as uuidv4 } from 'uuid'
-defineOptions({
-  name: 'KFrame',
-})
-
-const props = withDefaults(
-  defineProps<{
-    src: string
-    zIndex?: string | number
-    keepAlive?: boolean
-  }>(),
-  {
-    src: '',
-    keepAlive: true,
-  },
-)
-
-const emits = defineEmits(['loaded', 'error'])
-
-const uid = `kFrame-${uuidv4().replaceAll('-', '')}`
-const frameContainer = ref()
-const isLoading = ref(false)
-const isError = ref(false)
-let readyFlag = false
-
-const getFrameContainerRect = () => {
-  const { x, y, width, height } = frameContainer.value?.getBoundingClientRect() || {}
-  return {
-    left: x || 0,
-    top: y || 0,
-    width: width || 0,
-    height: height || 0,
-    zIndex: props.zIndex ?? 'auto',
-  }
-}
-
-const createFrame = () => {
-  isError.value = false
-  isLoading.value = true
-
-  IFrameManager.createFame(
-    {
-      uid,
-      name: uid,
-      src: props.src,
-      onLoad: handleLoaded,
-      onError: handleError,
-      allow: 'fullscreen;autoplay',
-    },
-    getFrameContainerRect(),
-  )
-}
-const handleLoaded = (e: Event) => {
-  isLoading.value = false
-  emits('loaded', e)
-}
-const handleError = (e: string | Event) => {
-  isLoading.value = false
-  isError.value = true
-  emits('error', e)
-}
-
-const showFrame = () => {
-  IFrameManager.showFrame(uid, getFrameContainerRect())
-}
-const hideFrame = () => {
-  IFrameManager.hideFrame(uid)
-}
-const resizeFrame = useThrottleFn(() => {
-  IFrameManager.resizeFrame(uid, getFrameContainerRect())
-})
-
-const destroyFrame = () => {
-  IFrameManager.destroyFrame(uid)
-}
-
-const getFrame = () => {
-  return IFrameManager.getFrame(uid)
-}
-
-useResizeObserver(frameContainer, () => {
-  resizeFrame()
-})
-
-onBeforeUnmount(() => {
-  destroyFrame()
-  readyFlag = false
-})
-
-onDeactivated(() => {
-  if (props.keepAlive) {
-    hideFrame()
-  } else {
-    destroyFrame()
-  }
-})
-
-onActivated(() => {
-  if (props.keepAlive) {
-    showFrame()
-    return
-  }
-  if (readyFlag) {
-    createFrame()
-  }
-})
-
-watch(
-  () => [frameContainer.value, props.src],
-  (el, src) => {
-    if (el && src) {
-      createFrame()
-      readyFlag = true
-    } else {
-      destroyFrame()
-      readyFlag = false
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-
-defineExpose({
-  getRef: () => getFrame()?.instance,
-})
-</script>
-
-<style lang="scss" scoped>
-.k-frame {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  &-tips {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>
+<template>
+  <div ref="frameContainer"class="k-frame">
+    <span v-if="!src" class="k-frame-tips">
+      <slot name="placeholder">暂无数据</slot>
+    </span>
+    <span v-else-if="isLoading"class="k-frame-tips">
+      <slot name="loading">加载中... </slot>
+    </span>
+    <span v-else-if="isError" class="k-frame-tips"> <slot name="error">加载失败 </slot></span>
+  </div>
+</template>
+<script setup lang="ts">
+import { onActivated, onBeforeUnmount, onDeactivated, ref, watch } from'vue'
+// import { IFrameManager, getIncreaseId } from './core'
+import { useResizeObserver, useThrottleFn } from'@vueuse/core'
+import { IFrameManager } from './IframeOptions.ts'
+import { v4 as uuidv4 } from 'uuid'
+defineOptions({
+  name: 'KFrame',
+})
+
+const props = withDefaults(
+  defineProps<{
+    src: string
+    zIndex?: string | number
+    keepAlive?: boolean
+  }>(),
+  {
+    src: '',
+    keepAlive: true,
+  },
+)
+
+const emits = defineEmits(['loaded', 'error'])
+
+const uid = `kFrame-${uuidv4().replaceAll('-', '')}`
+const frameContainer = ref()
+const isLoading = ref(false)
+const isError = ref(false)
+let readyFlag = false
+
+const getFrameContainerRect = () => {
+  const { x, y, width, height } = frameContainer.value?.getBoundingClientRect() || {}
+  return {
+    left: x || 0,
+    top: y || 0,
+    width: width || 0,
+    height: height || 0,
+    zIndex: props.zIndex ?? 'auto',
+  }
+}
+
+const createFrame = () => {
+  isError.value = false
+  isLoading.value = true
+
+  IFrameManager.createFame(
+    {
+      uid,
+      name: uid,
+      src: props.src,
+      onLoad: handleLoaded,
+      onError: handleError,
+      allow: 'fullscreen;autoplay',
+    },
+    getFrameContainerRect(),
+  )
+}
+const handleLoaded = (e: Event) => {
+  isLoading.value = false
+  emits('loaded', e)
+}
+const handleError = (e: string | Event) => {
+  isLoading.value = false
+  isError.value = true
+  emits('error', e)
+}
+
+const showFrame = () => {
+  IFrameManager.showFrame(uid, getFrameContainerRect())
+}
+const hideFrame = () => {
+  IFrameManager.hideFrame(uid)
+}
+const resizeFrame = useThrottleFn(() => {
+  IFrameManager.resizeFrame(uid, getFrameContainerRect())
+})
+
+const destroyFrame = () => {
+  IFrameManager.destroyFrame(uid)
+}
+
+const getFrame = () => {
+  return IFrameManager.getFrame(uid)
+}
+
+useResizeObserver(frameContainer, () => {
+  resizeFrame()
+})
+
+onBeforeUnmount(() => {
+  destroyFrame()
+  readyFlag = false
+})
+
+onDeactivated(() => {
+  if (props.keepAlive) {
+    hideFrame()
+  } else {
+    destroyFrame()
+  }
+})
+
+onActivated(() => {
+  if (props.keepAlive) {
+    showFrame()
+    return
+  }
+  if (readyFlag) {
+    createFrame()
+  }
+})
+
+watch(
+  () => [frameContainer.value, props.src],
+  (el, src) => {
+    if (el && src) {
+      createFrame()
+      readyFlag = true
+    } else {
+      destroyFrame()
+      readyFlag = false
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+defineExpose({
+  getRef: () => getFrame()?.instance,
+})
+</script>
+
+<style lang="scss" scoped>
+.k-frame {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &-tips {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>