bge-ui 1.0.1

package/src/tabs/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div :class="`bge-tabs bge-tabs__${type}`">
+    <div class="bge-tabs__panes">
+      <slot></slot>
+    </div>
+    <span class="bge-tabs__active-bar" :style="barStyle"></span>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, provide, ref, watch, onMounted } from "vue"
+defineOptions({
+  name: "Tabs",
+})
+
+const props = defineProps({
+  type: {
+    default: 'bordered',
+    value: ['bordered', 'pills']
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emits = defineEmits('update:modelValue')
+
+const panes = ref<any>([])
+
+function addPane(pane) {
+  panes.value.push(pane)
+}
+
+function changeValue(value: string) {
+  emits('update:modelValue', value)
+  setTimeout(() => {
+    update()
+  }, 100);
+}
+
+const tabsKey = 'bge-tabs-context'
+provide(tabsKey, {
+  addPane,
+  changeValue
+})
+
+const getBarStyle: CSSProperties = () => {
+  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) => {
+    const $el = tab.ref as HTMLElement
+    if (!$el) return false
+    if (tab.value !== props.modelValue) {
+      tab.setActive(false)
+      return true
+    }
+
+    tab.setActive(true)
+    offset = $el['offsetLeft']
+    tabSize = $el['clientWidth']
+    return false
+  })
+
+  return {
+    [sizeName]: `${tabSize}px`,
+    transform: `translateX(${offset}px)`,
+  }
+}
+const barStyle = ref<CSSProperties>()
+const update = () => (barStyle.value = getBarStyle())
+
+onMounted(() => {
+  update()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.bge-tabs {
+
+  &.bge-tabs__bordered,
+  &.bge-tabs__pills {
+    .bge-tabs__panes {
+      display: flex;
+      align-items: flex-start;
+      position: relative;
+    }
+  }
+
+  &.bge-tabs__bordered {
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      border-radius: var(--radius-small, 0px);
+      background: var(--separator-separator, #34414D);
+    }
+
+    .bge-tabs__active-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      z-index: 1;
+      list-style: none;
+      border-radius: var(--radius-small, 0px);
+      background: var(--tc-theme, #FFFF38);
+      transition: width .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1);
+    }
+  }
+
+  &.bge-tabs__pills {
+    .bge-tabs__active-bar {
+      display: none;
+    }
+  }
+}
+</style>

package/src/tabs/tab-pane.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="bge-tab__pane" :class="{ active: isActive }" ref="tabPaneRef" @click="changeValue">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts">
+defineOptions({
+  name: 'tabPane'
+})
+
+const props = defineProps({
+  value: {
+    default: '',
+    type: String
+  }
+})
+import { ref, onMounted, inject, reactive } from "vue";
+const tabPaneRef = ref<HTMLDivElement>()
+const tabsKey = 'bge-tabs-context'
+const tabContext = inject(tabsKey, undefined)
+function changeValue() {
+  tabContext.changeValue(props.value)
+}
+const isActive = ref<Boolean>(false)
+function setActive(active: Boolean) {
+  isActive.value = active
+}
+onMounted(() => {
+  tabContext.addPane(reactive({
+    ref: tabPaneRef.value,
+    value: props.value,
+    setActive
+  }))
+})
+</script>
+<style lang="scss" >
+.bge-tabs__pills {
+  .bge-tab__pane {
+    display: flex;
+    padding: var(--layout-x-2, 8px) var(--layout-x-3, 12px);
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--radius-small, 0px);
+    background: var(--bg-input, rgba(88, 126, 163, 0.08));
+    margin-right: 4px;
+    color: var(--tc-tertiary, #53677A);
+    cursor: pointer;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      background: var(--bg-input-hover, rgba(88, 126, 163, 0.12));
+      color: var(--tc-primary, #E0E0E0);
+    }
+
+    &.active {
+      color: var(--persistent-black, #000);
+      background: var(--btn-primary, #FFFF38);
+    }
+  }
+}
+
+.bge-tabs__bordered {
+  .bge-tab__pane {
+    display: flex;
+    padding: var(--layout-x-2, 8px) 0px;
+    justify-content: center;
+    align-items: center;
+    gap: var(--layout-x-1, 4px);
+    border-radius: var(--radius-small, 0px);
+    color: var(--tc-tertiary, #53677A);
+    cursor: pointer;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px;
+    margin-right: 16px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover,
+    &.active {
+      color: var(--tc-primary, #E0E0E0);
+    }
+  }
+}
+</style>

package/src/tooltip/index.vue

@@ -0,0 +1,338 @@
+<template>
+  <ui-only-child ref="triggerRef" ariaDescribedby="tooltip">
+    <slot />
+  </ui-only-child>
+  <!-- <component :is="triggerElement">
+    <slot />
+  </component> -->
+  <teleport v-if="teleported" to="body">
+    <component :is="tooltipElement">
+      <slot name="content" />
+    </component>
+  </teleport>
+  <component v-else :is="tooltipElement">
+    <slot name="content" />
+  </component>
+</template>
+<script setup lang="ts">
+import { OnlyChild as UiOnlyChild } from './only-child'
+import type { PropType } from 'vue'
+import { computed, ref, onMounted } from 'vue';
+import type { PositioningStrategy, Placement, Modifier } from '@popperjs/core'
+import { usePopper } from './usePopper';
+
+const props = defineProps({
+  /**
+   * 是否将弹出层追加到body元素下
+   */
+  teleported: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Trigger element on hover
+   */
+  hover: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Disable clicking outside to close
+   */
+  disableClickOutside: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * How many milliseconds to wait before opening the tooltip
+   */
+  openDelay: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => {
+      const isPositive = value >= 0;
+      if (!isPositive) {
+        console.warn('@kalimahapps/vue-popper: openDelay must be a positive number');
+        return false;
+      }
+      return true;
+    },
+  },
+
+  /**
+   * How many milliseconds to wait before closing the tooltip
+   */
+  closeDelay: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => {
+      const isPositive = value >= 0;
+      if (!isPositive) {
+        console.warn('@kalimahapps/vue-popper: closeDelay must be a positive number');
+        return false;
+      }
+
+      return true;
+    },
+  },
+
+  /**
+   * Display an arrow on the tooltip
+   */
+  showArrow: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Whether to interact with tooltip when hover is true
+   */
+  interactive: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * Set the strategy used to position the popper
+   *
+   * @values absolute | fixed
+   */
+  strategy: {
+    type: String as PropType<PositioningStrategy>,
+    default: 'absolute',
+  },
+
+  /**
+   * Set the placement of the popper
+   */
+  placement: {
+    type: String as PropType<Placement>,
+    default: 'top',
+  },
+
+  /**
+   * Set the modifiers of the popper
+   */
+  modifiers: {
+    type: Array as PropType<Modifier<any, any>[]>,
+    default: () => {
+      return [];
+    },
+  },
+
+  /**
+   * Set the type of animation
+   *
+   * @values none, fade, shift-in, shift-out, scale, CUSTOM
+   */
+  animation: {
+    type: String,
+    default: 'shift-in',
+  },
+
+  /**
+   * Animation duration in milliseconds
+   */
+  animationDuration: {
+    type: [Number, Array],
+    default: 300,
+    validator(value) {
+      if (Array.isArray(value)) {
+        return value.every((durationValue) => {
+          return typeof durationValue === 'number' && durationValue >= 0;
+        });
+      }
+      return typeof value === 'number' && value >= 0;
+    },
+  },
+});
+
+const emits = defineEmits(['opened', 'closed', 'transition']);
+
+const triggerRef = ref()
+
+const popperInstance = ref<any>(), tooltipElement = ref<any>(), isOpened = ref<any>(), toggleTooltip = ref<any>()
+
+onMounted(() => {
+  const result = usePopper(triggerRef, {
+    hover: props.hover,
+    disableClickOutside: props.disableClickOutside,
+    openDelay: props.openDelay,
+    closeDelay: props.closeDelay,
+    showArrow: props.showArrow,
+    strategy: props.strategy,
+    modifiers: props.modifiers,
+    animation: props.animation,
+    placement: props.placement,
+    interactive: props.interactive,
+    animationDuration: props.animationDuration as any,
+
+    onTransition: (transition: string, element: HTMLElement) => {
+      emits('transition', transition, element);
+    },
+    onOpened: () => {
+      emits('opened');
+    },
+    onClosed: () => {
+      emits('closed');
+    },
+  });
+
+  popperInstance.value = result.popperInstance
+  // triggerElement.value = result.triggerElement
+  isOpened.value = result.isOpened
+  toggleTooltip.value = result.toggleTooltip
+  tooltipElement.value = result.tooltipElement
+})
+
+defineExpose({
+  popper: popperInstance,
+  isOpened: computed(() => {
+    return isOpened.value;
+  }),
+  toggleTooltip,
+})
+</script>
+<style lang="scss">
+.bge-popper-wrapper {
+
+  z-index: 20;
+
+  &[data-popper-placement^="top"]>.popper-content>[data-popper-arrow] {
+    bottom: -4px;
+  }
+
+  &[data-popper-placement^="bottom"]>.popper-content>[data-popper-arrow] {
+    top: -4px;
+  }
+
+  &[data-popper-placement^="left"]>.popper-content>[data-popper-arrow] {
+    right: -4px;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+  }
+
+  &[data-popper-placement^="right"]>.popper-content>[data-popper-arrow] {
+    left: -4px;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+  }
+
+  .popper-content {
+    max-width: 360px;
+    box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+    border-radius: var(--radius-small, 0px);
+    background: var(--bg-tooltip, #53677A);
+    padding: var(--layout-x-3, 12px) var(--layout-x-4, 16px);
+    color: var(--persistent-tc-primary, #E0E0E0);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+}
+
+[data-popper-arrow] {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--bg-tooltip, #53677A);
+  visibility: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--bg-tooltip, #53677A);
+    visibility: visible;
+    transform: rotate(45deg);
+  }
+}
+
+.fade-enter-active {
+  transition: opacity var(--vue-popper-enter-duration, 0.3s);
+}
+
+.fade-leave-active {
+  transition: opacity var(--vue-popper-leave-duration, 0.3s);
+}
+
+.fade-leave-from,
+.fade-enter-to {
+  opacity: 1;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/**
+ * Shift in
+ */
+.shift-in-enter-active {
+  transition: transform var(--vue-popper-enter-duration, 0.3s);
+}
+
+.shift-in-leave-active {
+  transition: transform var(--vue-popper-leave-duration, 0.3s);
+}
+
+.shift-in-leave-form,
+.shift-in-enter-to {
+  transform: translate(0, 0);
+}
+
+.shift-in-enter-from,
+.shift-in-leave-to {
+  transform: var(--vue-popper-shift-transform);
+}
+
+/**
+ * Shift Out animation
+ * Enter/leave properties are handled by JS hooks to avoid flickering
+ */
+.shift-out-enter-active {
+  transition: transform var(--vue-popper-enter-duration, 0.3s);
+}
+
+.shift-out-leave-active {
+  transition: transform var(--vue-popper-leave-duration, 0.3s);
+}
+
+@keyframes shift-out {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: var(--vue-popper-shift-transform);
+  }
+}
+
+/**
+ * Scale animation
+ */
+.scale-enter-active {
+  transition: transform var(--vue-popper-enter-duration, 0.3s);
+  transform-origin: var(--vue-popper-scale-transform-origin, center center);
+}
+
+.scale-leave-active {
+  transition: transform var(--vue-popper-leave-duration, 0.3s);
+  transform-origin: var(--vue-popper-scale-transform-origin, center center);
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  transform: scale(0);
+}
+
+.scale-leave-form,
+.scale-enter-to {
+  transform: scale(1);
+}
+</style>

package/src/tooltip/only-child.tsx

@@ -0,0 +1,70 @@
+import {
+  Comment,
+  Fragment,
+  Text,
+  cloneVNode,
+  defineComponent,
+  inject,
+  withDirectives,
+} from 'vue'
+// import { NOOP, isObject } from '@vue/shared'
+
+import type { Ref, VNode } from 'vue'
+
+
+export const OnlyChild = defineComponent({
+  name: 'OnlyChild',
+  setup(_, { slots, attrs }) {
+    return () => {
+      const defaultSlot = slots.default?.(attrs)
+      if (!defaultSlot) return null
+
+      if (defaultSlot.length > 1) {
+        console.log('requires exact only one valid child.')
+        return null
+      }
+
+      const firstLegitNode = findFirstLegitChild(defaultSlot)
+      if (!firstLegitNode) {
+        console.log('no valid child node found')
+        return null
+      }
+
+      return withDirectives(cloneVNode(firstLegitNode!, attrs), [
+
+      ])
+    }
+  },
+})
+
+function findFirstLegitChild(node: VNode[] | undefined): VNode | null {
+  if (!node) return null
+  const children = node as VNode[]
+  for (const child of children) {
+    /**
+     * when user uses h(Fragment, [text]) to render plain string,
+     * this switch case just cannot handle, when the value is primitives
+     * we should just return the wrapped string
+     */
+    if (typeof child === 'object') {
+      switch (child.type) {
+        case Comment:
+          continue
+        case Text:
+        case 'svg':
+          return wrapTextContent(child)
+        case Fragment:
+          return findFirstLegitChild(child.children as VNode[])
+        default:
+          return child
+      }
+    }
+    return wrapTextContent(child)
+  }
+  return null
+}
+
+function wrapTextContent(s: string | VNode) {
+  // const ns = useNamespace('only-child')
+  <span class=""> {s}</span>
+}