bge-ui 1.0.21 → 1.0.22

package/src/message/index.vue

@@ -14,13 +14,13 @@
 import MonoCheckFill from "../icons/MonoCheckFill.vue"
 import MonoExclamationmarkFill from "../icons/MonoExclamationmarkFill.vue"
 
-import { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'
-import { defineEmits, onMounted, ref, computed, CSSProperties, shallowReactive, render } from 'vue'
+import { useResizeObserver, useTimeoutFn } from '@vueuse/core'
+import { defineEmits, onMounted, ref, computed, CSSProperties } from 'vue'
 
 const visible = ref(false)
 const messageRef = ref<HTMLDivElement>()
 const icon = computed(() => {
-  const map = {
+  const map: any = {
     success: MonoCheckFill,
     error: MonoExclamationmarkFill,
     info: ''
@@ -28,7 +28,11 @@ const icon = computed(() => {
   return map[props.type]
 })
 const props: any = defineProps({
-  id: String,
+  id: {
+    type: String,
+    default: '',
+    required: true
+  },
   type: {
     type: String,
     default: 'info',
@@ -47,7 +51,7 @@ const props: any = defineProps({
   message: {
     type: [Object, String]
   },
-  onClose: Function,
+  onClose: [Function, undefined],
   instances: Array
 })
 
@@ -70,7 +74,7 @@ function clearTimer() {
 }
 
 const getInstance = (id: string) => {
-  const idx = props.instances.findIndex((instance) => instance.id === id)
+  const idx = props.instances.findIndex((instance: {id: String}) => instance.id === id)
   const current = props.instances[idx]
   let prev: any | undefined
   if (idx > 0) {
@@ -84,7 +88,7 @@ const getLastOffset = (id: string): number => {
   return prev.vm.exposed!.bottom.value
 }
 const getOffsetOrSpace = (id: string, offset: number) => {
-  const idx = props.instances.findIndex((instance) => instance.id === id)
+  const idx = props.instances.findIndex((instance: {id: String}) => instance.id === id)
   return idx > 0 ? 12 : offset
 }
 
@@ -126,6 +130,7 @@ defineExpose({
   left: 50%;
   top: 60px;
   transform: translateX(-50%);
+  border-radius: var(--radius-small, 4px);
   display: inline-block;
   max-width: 320px;
   transition: opacity 0.3s, transform 0.4s, top 0.4s;
@@ -133,7 +138,7 @@ defineExpose({
   overflow: hidden;
   color: var(--persistent-white, #FFF);
   /* shadow1 */
-  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--shadow1, '0px 12px 40px 0px rgba(0, 0, 0, 0.08)');
 
   &.info {
     background: var(--bg-tooltip, #53677A);

package/src/notification/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <transition name="fade" @before-leave="onClose" @after-leave="$emit('destroy')">
+    <div v-show="visible" :id="id" ref="messageRef" :class="`bge-message ${type}`" :style="customStyle" role="alert"
+      @mouseenter="clearTimer" @mouseleave="startTimer">
+      <component v-if="icon" :is="icon" class="bge-message__icon" :size="20" />
+      <slot>
+        <p v-html="message"></p>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import MonoCheckFill from "../icons/MonoCheckFill.vue"
+import MonoExclamationmarkFill from "../icons/MonoExclamationmarkFill.vue"
+
+import { useResizeObserver, useTimeoutFn } from '@vueuse/core'
+import { defineEmits, onMounted, ref, computed, CSSProperties } from 'vue'
+
+const visible = ref(false)
+const messageRef = ref<HTMLDivElement>()
+const icon = computed(() => {
+  const map: any = {
+    success: MonoCheckFill,
+    error: MonoExclamationmarkFill,
+    info: ''
+  }
+  return map[props.type]
+})
+const props: any = defineProps({
+  id: {
+    type: String,
+    default: '',
+    required: true
+  },
+  type: {
+    type: String,
+    default: 'info',
+    value: [
+      'success',
+      'error',
+      'info',
+    ],
+  },
+  offset: {
+    type: Number,
+    default: 64,
+  },
+  stopTimer: Number,
+  duration: Number,
+  message: {
+    type: [Object, String]
+  },
+  onClose: [Function, undefined],
+  instances: Array
+})
+
+let stopTimer: (() => void) | undefined = undefined
+
+
+function startTimer() {
+  if (props.duration === 0) return
+    ; ({ stop: stopTimer } = useTimeoutFn(() => {
+      close()
+    }, props.duration))
+}
+
+function close() {
+  visible.value = false
+}
+
+function clearTimer() {
+  stopTimer?.()
+}
+
+const getInstance = (id: string) => {
+  const idx = props.instances.findIndex((instance: {id: String}) => instance.id === id)
+  const current = props.instances[idx]
+  let prev: any | undefined
+  if (idx > 0) {
+    prev = props.instances[idx - 1]
+  }
+  return { current, prev }
+}
+const getLastOffset = (id: string): number => {
+  const { prev } = getInstance(id)
+  if (!prev) return 0
+  return prev.vm.exposed!.bottom.value
+}
+const getOffsetOrSpace = (id: string, offset: number) => {
+  const idx = props.instances.findIndex((instance: {id: String}) => instance.id === id)
+  return idx > 0 ? 12 : offset
+}
+
+const height = ref(0)
+const lastOffset = computed(() => getLastOffset(props.id))
+const offset = computed(
+  () => getOffsetOrSpace(props.id, props.offset) + lastOffset.value
+)
+const bottom = computed((): number => height.value + offset.value)
+
+const customStyle = computed<CSSProperties>(() => {
+  return {
+    top: `${offset.value}px`,
+    zIndex: 3000,
+  }
+})
+onMounted(() => {
+  visible.value = true
+  startTimer()
+})
+const emit = defineEmits([
+  'destroy'
+])
+
+useResizeObserver(messageRef, () => {
+  height.value = messageRef.value!.getBoundingClientRect().height
+})
+
+defineExpose({
+  visible,
+  bottom,
+  close,
+})
+
+</script>
+<style lang="scss" >
+.bge-message {
+  position: fixed;
+  left: 50%;
+  top: 60px;
+  transform: translateX(-50%);
+  display: inline-block;
+  max-width: 320px;
+  transition: opacity 0.3s, transform 0.4s, top 0.4s;
+  padding: var(--layout-x-2, 8px) var(--layout-x-4, 16px);
+  overflow: hidden;
+  color: var(--persistent-white, #FFF);
+  /* shadow1 */
+  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+
+  &.info {
+    background: var(--bg-tooltip, #53677A);
+  }
+
+  &.error {
+    background: var(--bg-red, #D14770);
+
+    p {
+      width: calc(100% - 24px)
+    }
+  }
+
+  &.success {
+    background: var(--bg-green, #00A389);
+
+    p {
+      width: calc(100% - 24px)
+    }
+  }
+
+  .bge-message__icon {
+    vertical-align: middle;
+    margin-right: 4px;
+    flex-shrink: 0;
+    display: inline-block;
+  }
+
+  p {
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+    width: 100%;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    color: var(--persistent-white, #FFF);
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+
+  &.fade-enter-active {
+    transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+  }
+
+  &.fade-leave-active {
+    transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+
+    svg,
+    p {
+      opacity: 0.3;
+    }
+  }
+
+  &.fade-leave-to {
+    opacity: 0;
+    height: 0;
+  }
+
+  &.fade-enter-from {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+}
+</style>

package/src/select/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

package/src/tabs/index.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, provide, ref, watch, onMounted } from "vue"
+import { provide, ref, onMounted } from "vue"
 defineOptions({
   name: "Tabs",
 })
@@ -27,11 +27,11 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits('update:modelValue')
+const emits = defineEmits(['update:modelValue'])
 
 const panes = ref<any>([])
 
-function addPane(pane) {
+function addPane(pane: any) {
   panes.value.push(pane)
 }
 
@@ -48,15 +48,13 @@ provide(tabsKey, {
   changeValue
 })
 
-const getBarStyle: CSSProperties = () => {
+const getBarStyle: any = () => {
   let offset = 0
   let tabSize = 0
 
   const sizeName = 'width'
-  const sizeDir = sizeName === 'width' ? 'x' : 'y'
-  const position = sizeDir === 'x' ? 'left' : 'top'
 
-  panes.value.forEach((tab) => {
+  panes.value.forEach((tab: any) => {
     const $el = tab.ref as HTMLElement
     if (!$el) return false
     if (tab.value !== props.modelValue) {
@@ -75,7 +73,7 @@ const getBarStyle: CSSProperties = () => {
     transform: `translateX(${offset}px)`,
   }
 }
-const barStyle = ref<CSSProperties>()
+const barStyle = ref<any>()
 const update = () => (barStyle.value = getBarStyle())
 
 onMounted(() => {

package/src/tabs/tab-pane.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 import { ref, onMounted, inject, reactive } from "vue";
 const tabPaneRef = ref<HTMLDivElement>()
 const tabsKey = 'bge-tabs-context'
-const tabContext = inject(tabsKey, undefined)
+const tabContext: any = inject(tabsKey, undefined)
 function changeValue() {
   tabContext.changeValue(props.value)
 }
@@ -40,7 +40,7 @@ onMounted(() => {
     padding: var(--layout-x-2, 8px) var(--layout-x-3, 12px);
     justify-content: center;
     align-items: center;
-    border-radius: var(--radius-small, 0px);
+    border-radius: var(--radius-small, 4px);
     background: var(--bg-input, rgba(88, 126, 163, 0.08));
     margin-right: 4px;
     color: var(--tc-tertiary, #53677A);

package/src/tooltip/index.vue

@@ -1,27 +1,50 @@
 <template>
-  <ui-only-child ref="triggerRef" ariaDescribedby="tooltip">
+  <ui-only-child ref="triggerRef" ariaDescribedby="tooltip" @click="showToolTip">
     <slot />
   </ui-only-child>
   <!-- <component :is="triggerElement">
     <slot />
   </component> -->
-  <teleport v-if="teleported" to="body">
-    <component :is="tooltipElement">
+  <template v-if="sreenWidth <= 768">
+    <UiDialog v-model:visible="dislogVisible" :title="title" @close="closeToolTip">
+      <div><slot name="content" /></div>
+      <UiButton class="bge-tooltip__closeButton" type="primary" @click="closeToolTip">{{ buttonText }}</UiButton>
+    </UiDialog>
+  </template>
+  <template v-else>
+    <teleport v-if="teleported" to="body">
+      <component :is="tooltipElement">
+        <slot name="content" />
+      </component>
+    </teleport>
+    <component v-else :is="tooltipElement">
       <slot name="content" />
     </component>
-  </teleport>
-  <component v-else :is="tooltipElement">
-    <slot name="content" />
-  </component>
+  </template>
 </template>
 <script setup lang="ts">
 import { OnlyChild as UiOnlyChild } from './only-child'
 import type { PropType } from 'vue'
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, onBeforeMount, nextTick } from 'vue';
 import type { PositioningStrategy, Placement, Modifier } from '@popperjs/core'
+import UiDialog from '../dialog/index.vue'
+import UiButton from '../button/index.vue'
 import { usePopper } from './usePopper';
-
+const sreenWidth = ref(0)
 const props = defineProps({
+  /**
+   * title
+   */
+   title: {
+    type: String,
+    default: '详情',
+    required: true,
+   },
+   buttonText: {
+    type: String,
+    default: '知道了',
+    required: true,
+   },
   /**
    * 是否将弹出层追加到body元素下
    */
@@ -156,7 +179,34 @@ const triggerRef = ref()
 
 const popperInstance = ref<any>(), tooltipElement = ref<any>(), isOpened = ref<any>(), toggleTooltip = ref<any>()
 
-onMounted(() => {
+const dislogVisible = ref(false)
+
+onBeforeMount(() => { 
+  sreenWidth.value = window.innerWidth
+
+  window.addEventListener('resize', () => {
+    sreenWidth.value = window.innerWidth
+
+    if (sreenWidth.value > 768) {
+      dislogVisible.value = false
+    }
+    nextTick(() => {
+      initTooltip()
+    })
+  })
+})
+
+function showToolTip() {
+  if (sreenWidth.value <= 768) {
+    dislogVisible.value = true
+  }
+}
+
+function closeToolTip() {
+  dislogVisible.value = false
+}
+
+function initTooltip() {
   const result = usePopper(triggerRef, {
     hover: props.hover,
     disableClickOutside: props.disableClickOutside,
@@ -186,6 +236,10 @@ onMounted(() => {
   isOpened.value = result.isOpened
   toggleTooltip.value = result.toggleTooltip
   tooltipElement.value = result.tooltipElement
+}
+
+onMounted(() => {
+  initTooltip()
 })
 
 defineExpose({
@@ -224,7 +278,7 @@ defineExpose({
   .popper-content {
     max-width: 360px;
     box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
-    border-radius: var(--radius-small, 0px);
+    border-radius: var(--radius-small, 4px);
     background: var(--bg-tooltip, #53677A);
     padding: var(--layout-x-3, 12px) var(--layout-x-4, 16px);
     color: var(--persistent-tc-primary, #E0E0E0);
@@ -234,6 +288,11 @@ defineExpose({
   }
 }
 
+.bge-tooltip__closeButton {
+  width: 100%;
+  margin-top: 40px;
+}
+
 [data-popper-arrow] {
   position: absolute;
   width: 8px;