@jetlinks-web/components 2.0.2 → 2.0.3

package/src/Scrollbar/Scrollbar.vue

@@ -1,260 +0,0 @@
-<template>
-  <div ref="scrollbarRef" class="j-scrollbar">
-    <div
-      ref="wrapRef"
-      :class="wrapKls"
-      :style="wrapStyle"
-      @scroll="handleScroll"
-    >
-      <component
-        :is="tag"
-        :id="id"
-        ref="resizeRef"
-        :class="resizeKls"
-        :role="role"
-        :aria-label="ariaLabel"
-        :aria-orientation="ariaOrientation"
-      >
-        <slot/>
-      </component>
-    </div>
-    <template v-if="!native">
-      <bar ref="barRef" :always="always" :min-size="minSize"/>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import {
-  computed,
-  nextTick,
-  onMounted,
-  onUpdated,
-  provide,
-  reactive,
-  ref,
-  watch,
-} from 'vue'
-import { useEventListener, useResizeObserver } from '@vueuse/core'
-import { isNumber, isObject } from '@jetlinks-web/utils'
-import Bar from './Bar.vue'
-import { scrollbarContextKey } from './constants'
-import { scrollbarEmits, scrollbarProps, BarInstance } from './scrollbar'
-import type { CSSProperties, StyleValue } from 'vue'
-
-const COMPONENT_NAME = 'JScrollbar'
-
-defineOptions({
-  name: COMPONENT_NAME,
-})
-
-const props = defineProps(scrollbarProps)
-const emit = defineEmits(scrollbarEmits)
-
-let stopResizeObserver: (() => void) | undefined = undefined
-let stopResizeListener: (() => void) | undefined = undefined
-
-const scrollbarRef = ref<HTMLDivElement>()
-const wrapRef = ref<HTMLDivElement>()
-const resizeRef = ref<HTMLElement>()
-const barRef = ref<BarInstance>()
-
-const wrapStyle = computed<StyleValue>(() => {
-  const style: CSSProperties = {}
-  if (props.height) style.height = `${props.height}px`
-  if (props.maxHeight) style.maxHeight = `${props.maxHeight}px`
-  return [props.wrapStyle, style]
-})
-
-const wrapKls = computed(() => {
-  return [
-    'j-scrollbar__wrap',
-    'j-scrollbar__wrap--hidden-default'
-  ]
-})
-
-const resizeKls = computed(() => {
-  return ['j-scrollbar__view', props.viewClass]
-})
-
-const handleScroll = () => {
-  if (wrapRef.value) {
-    barRef.value?.handleScroll(wrapRef.value)
-
-    emit('scroll', {
-      scrollTop: wrapRef.value.scrollTop,
-      scrollLeft: wrapRef.value.scrollLeft,
-    })
-  }
-}
-
-function scrollTo(xCord: number, yCord?: number): void
-function scrollTo(options: ScrollToOptions): void
-function scrollTo(arg1: any, arg2?: number) {
-  if (isObject(arg1)) {
-    wrapRef.value!.scrollTo(arg1)
-  } else if (isNumber(arg1) && isNumber(arg2)) {
-    wrapRef.value!.scrollTo(arg1, arg2)
-  }
-}
-
-const setScrollTop = (value: number) => {
-  if (!isNumber(value)) {
-    throw new Error('value must be a number');
-  }
-  wrapRef.value!.scrollTop = value
-}
-
-const setScrollLeft = (value: number) => {
-  if (!isNumber(value)) {
-    throw new Error(`[${COMPONENT_NAME}] value must be a number`);
-  }
-  wrapRef.value!.scrollLeft = value
-}
-
-const update = () => {
-  barRef.value?.update()
-}
-
-watch(
-  () => props.noresize,
-  (noResize) => {
-    if (noResize) {
-      stopResizeObserver?.()
-      stopResizeListener?.()
-    } else {
-      ;({stop: stopResizeObserver} = useResizeObserver(resizeRef, update))
-      stopResizeListener = useEventListener('resize', update)
-    }
-  },
-  {immediate: true}
-)
-
-watch(
-  () => [props.maxHeight, props.height],
-  () => {
-    if (!props.native)
-      nextTick(() => {
-        update()
-        if (wrapRef.value) {
-          barRef.value?.handleScroll(wrapRef.value)
-        }
-      })
-  }
-)
-
-provide(
-  scrollbarContextKey,
-  reactive({
-    scrollbarElement: scrollbarRef,
-    wrapElement: wrapRef,
-  })
-)
-
-onMounted(() => {
-  if (!props.native)
-    nextTick(() => {
-      update()
-    })
-})
-onUpdated(() => update())
-
-defineExpose({
-  /** @description scrollbar wrap ref */
-  wrapRef,
-  /** @description update scrollbar state manually */
-  update,
-  /** @description scrolls to a particular set of coordinates */
-  scrollTo,
-  /** @description set distance to scroll top */
-  setScrollTop,
-  /** @description set distance to scroll left */
-  setScrollLeft,
-  /** @description handle scroll event */
-  handleScroll,
-})
-</script>
-
-<style lang="less">
-@scrollbar-bg-color: #909399;
-@scrollbar-hover-bg-color: #909399;
-@scrollbar-hover-opacity: 0.5;
-@scrollbar-opacity: 0.3;
-@transition-duration: 0.3s;
-
-.j-scrollbar {
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-
-  &__wrap {
-    overflow: auto;
-    height: 100%;
-
-    &--hidden-default {
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  &__thumb {
-    position: relative;
-    display: block;
-    width: 0;
-    height: 0;
-    cursor: pointer;
-    border-radius: inherit;
-    background-color: @scrollbar-bg-color;
-    transition: @transition-duration background-color;
-    opacity: @scrollbar-opacity;
-
-    &:hover {
-      background-color: @scrollbar-hover-bg-color;
-      opacity: @scrollbar-hover-opacity;
-    }
-  }
-
-  &__bar {
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    z-index: 1;
-    border-radius: 4px;
-
-    &--vertical {
-      width: 6px;
-      top: 2px;
-
-      > div {
-        width: 100%;
-      }
-    }
-
-    &--horizontal {
-      height: 6px;
-      left: 2px;
-
-      > div {
-        height: 100%;
-      }
-    }
-  }
-}
-
-.j-scrollbar-fade {
-  &-enter-active {
-    transition: opacity 340ms ease-out;
-  }
-
-  &-leave-active {
-    transition: opacity 120ms ease-out;
-  }
-
-  &-enter-from,
-  &-leave-active {
-    opacity: 0;
-  }
-}
-</style>

package/src/Scrollbar/Thumb.vue

@@ -1,163 +0,0 @@
-<template>
-  <transition name="j-scrollbar-fade">
-    <div
-      v-show="always || visible"
-      ref="instance"
-      :class="['j-scrollbar__bar', props.vertical ? 'is-vertical' : 'is-horizontal']"
-      @mousedown="clickTrackHandler"
-    >
-      <div
-        ref="thumb"
-        class="j-scrollbar__thumb"
-        :style="thumbStyle"
-        @mousedown="clickThumbHandler"
-      />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import { isClient } from '@jetlinks-web/utils'
-import { scrollbarContextKey } from './constants'
-import { BAR_MAP, renderThumbStyle } from './util'
-import { thumbProps } from './thumb'
-
-const props = defineProps(thumbProps)
-
-const scrollbar = inject(scrollbarContextKey)
-
-if (!scrollbar) throw new Error('can not inject scrollbar context')
-
-const instance = ref<HTMLDivElement>()
-const thumb = ref<HTMLDivElement>()
-
-const thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})
-const visible = ref(false)
-
-let cursorDown = false
-let cursorLeave = false
-let originalOnSelectStart:
-  | ((this: GlobalEventHandlers, ev: Event) => any)
-  | null = isClient ? document.onselectstart : null
-
-const bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])
-
-const thumbStyle = computed(() =>
-  renderThumbStyle({
-    size: props.size,
-    move: props.move,
-    bar: bar.value,
-  })
-)
-
-const offsetRatio = computed(
-  () =>
-    instance.value![bar.value.offset] ** 2 /
-    scrollbar.wrapElement![bar.value.scrollSize] /
-    props.ratio /
-    Thumb.value![bar.value.offset]
-)
-
-const clickThumbHandler = (e: MouseEvent) => {
-  // prevent click event of middle and right button
-  e.stopPropagation()
-  if (e.ctrlKey || [1, 2].includes(e.button)) return
-
-  window.getSelection()?.removeAllRanges()
-  startDrag(e)
-
-  const el = e.currentTarget as HTMLDivElement
-  if (!el) return
-  thumbState.value[bar.value.axis] =
-    el[bar.value.offset] -
-    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])
-}
-
-const clickTrackHandler = (e: MouseEvent) => {
-  if (!Thumb.value || !instance.value || !scrollbar.wrapElement) return
-
-  const offset = Math.abs(
-    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -
-    e[bar.value.client]
-  )
-  const thumbHalf = Thumb.value[bar.value.offset] / 2
-  const thumbPositionPercentage =
-    ((offset - thumbHalf) * 100 * offsetRatio.value) /
-    instance.value[bar.value.offset]
-
-  scrollbar.wrapElement[bar.value.scroll] =
-    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /
-    100
-}
-
-const startDrag = (e: MouseEvent) => {
-  e.stopImmediatePropagation()
-  cursorDown = true
-  document.addEventListener('mousemove', mouseMoveDocumentHandler)
-  document.addEventListener('mouseup', mouseUpDocumentHandler)
-  originalOnSelectStart = document.onselectstart
-  document.onselectstart = () => false
-}
-
-const mouseMoveDocumentHandler = (e: MouseEvent) => {
-  if (!instance.value || !Thumb.value) return
-  if (cursorDown === false) return
-
-  const prevPage = thumbState.value[bar.value.axis]
-  if (!prevPage) return
-
-  const offset =
-    (instance.value.getBoundingClientRect()[bar.value.direction] -
-      e[bar.value.client]) *
-    -1
-  const thumbClickPosition = Thumb.value[bar.value.offset] - prevPage
-  const thumbPositionPercentage =
-    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /
-    instance.value[bar.value.offset]
-  scrollbar.wrapElement[bar.value.scroll] =
-    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /
-    100
-}
-
-const mouseUpDocumentHandler = () => {
-  cursorDown = false
-  thumbState.value[bar.value.axis] = 0
-  document.removeEventListener('mousemove', mouseMoveDocumentHandler)
-  document.removeEventListener('mouseup', mouseUpDocumentHandler)
-  restoreOnselectstart()
-  if (cursorLeave) visible.value = false
-}
-
-const mouseMoveScrollbarHandler = () => {
-  cursorLeave = false
-  visible.value = !!props.size
-}
-
-const mouseLeaveScrollbarHandler = () => {
-  cursorLeave = true
-  visible.value = cursorDown
-}
-
-onBeforeUnmount(() => {
-  restoreOnselectstart()
-  document.removeEventListener('mouseup', mouseUpDocumentHandler)
-})
-
-const restoreOnselectstart = () => {
-  if (document.onselectstart !== originalOnSelectStart)
-    document.onselectstart = originalOnSelectStart
-}
-
-useEventListener(
-  toRef(scrollbar, 'scrollbarElement'),
-  'mousemove',
-  mouseMoveScrollbarHandler
-)
-useEventListener(
-  toRef(scrollbar, 'scrollbarElement'),
-  'mouseleave',
-  mouseLeaveScrollbarHandler
-)
-</script>

package/src/Scrollbar/constants.ts

@@ -1,10 +0,0 @@
-import type { InjectionKey } from 'vue'
-
-export interface ScrollbarContext {
-  scrollbarElement: HTMLDivElement
-  wrapElement: HTMLDivElement
-}
-
-export const scrollbarContextKey: InjectionKey<ScrollbarContext> = Symbol(
-  'scrollbarContextKey'
-)

package/src/Scrollbar/index.ts

@@ -1,4 +0,0 @@
-import Scrollbar from './Scrollbar.vue'
-
-export default Scrollbar;
-

package/src/Scrollbar/thumb.ts

@@ -1,16 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import type Thumb from './Thumb.vue'
-
-export const thumbProps = {
-    vertical: Boolean,
-    size: String,
-    move: Number,
-    ratio: {
-        type: Number,
-        required: true,
-    },
-    always: Boolean,
-}
-export type ThumbProps = ExtractPropTypes<typeof thumbProps>
-
-export type ThumbInstance = InstanceType<typeof Thumb>

package/src/Scrollbar/util.ts

@@ -1,38 +0,0 @@
-import type { CSSProperties } from 'vue'
-import type { ThumbProps } from './thumb'
-
-export const GAP = 4 // top 2 + bottom 2 of bar instance
-
-export const BAR_MAP = {
-  vertical: {
-    offset: 'offsetHeight',
-    scroll: 'scrollTop',
-    scrollSize: 'scrollHeight',
-    size: 'height',
-    key: 'vertical',
-    axis: 'Y',
-    client: 'clientY',
-    direction: 'top',
-  },
-  horizontal: {
-    offset: 'offsetWidth',
-    scroll: 'scrollLeft',
-    scrollSize: 'scrollWidth',
-    size: 'width',
-    key: 'horizontal',
-    axis: 'X',
-    client: 'clientX',
-    direction: 'left',
-  },
-} as const
-
-export const renderThumbStyle = ({
-                                   move,
-                                   size,
-                                   bar,
-                                 }: Pick<ThumbProps, 'move' | 'size'> & {
-  bar: typeof BAR_MAP[keyof typeof BAR_MAP]
-}): CSSProperties => ({
-  [bar.size]: size,
-  transform: `translate${bar.axis}(${move}%)`,
-})

package/src/Search/Advanced/History.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="search-history-warp">
-    <FormItemRest>
-      <Button
-          class="search-history-button"
-          type="primary"
-          html-type="submit"
-      >
-        搜索
-      </Button>
-    </FormItemRest>
-    <Popover
-        placement="bottom"
-        trigger="click"
-        overlay-class-name="search-history-list-pop"
-        :visible="historyVisible"
-        @visibleChange="visibleChange"
-    >
-      <template #content>
-        <div v-if="!showEmpty" class="search-history-items">
-          <div
-              v-for="item in historyList"
-              :key="item.id"
-              class="search-history-item"
-          >
-            <div
-                class="history-item--title"
-                @click="itemClick(item.content)"
-            >
-              <Ellipsis style="width: 100%">{{
-                  item.name
-                }}
-              </Ellipsis>
-            </div>
-            <Popconfirm
-                title="确认删除吗？"
-                placement="top"
-                @confirm="deleteHistory(item)"
-            >
-                            <span class="delete">
-                                <AIcon type="DeleteOutlined"/>
-                            </span>
-            </Popconfirm>
-          </div>
-        </div>
-        <div v-else class="search-history-empty">
-          <Empty/>
-        </div>
-      </template>
-      <div
-          class="search-history-button-icon"
-          @click.stop="showHistoryList"
-      >
-        <AIcon type="DownOutlined"/>
-      </div>
-    </Popover>
-  </div>
-</template>
-
-<script setup lang="ts" name="SearchHistory">
-import type { SearchHistoryList } from '../typing';
-import { computed, ref } from 'vue';
-import type { PropType } from 'vue';
-import { isFunction } from 'lodash-es';
-import { AIcon, Empty, Ellipsis } from '../../../';
-import { Popconfirm, Button, FormItemRest, Popover, message } from 'ant-design-vue'
-
-type Emit = {
-  (event: 'click'): void;
-  (event: 'itemClick', data: string): void;
-};
-const emit = defineEmits<Emit>();
-
-const props = defineProps({
-  target: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  request: {
-    type: Function as PropType<(target: string) => Promise<any>>,
-    default: null,
-  },
-  deleteRequest: {
-    type: Function as PropType<(target: string, item: any) => Promise<any>>,
-    default: null,
-  },
-  deleteKey: {
-    type: String,
-    default: 'key',
-  },
-});
-
-const historyList = ref<SearchHistoryList[]>([]);
-const historyVisible = ref(false);
-const showEmpty = computed(() => {
-  return historyList.value.length === 0;
-});
-
-const showHistoryList = async () => {
-  if (props.request) {
-    const resp = await props.request(props.target);
-    if (resp.success && resp.result.length) {
-      historyList.value = resp.result.filter((item) => item.content);
-    } else {
-      historyList.value = [];
-    }
-  }
-};
-
-const visibleChange = async (v: boolean) => {
-  historyVisible.value = v;
-};
-
-const click = () => {
-  emit('click');
-};
-
-const itemClick = (content: string) => {
-  historyVisible.value = false;
-  emit('itemClick', content);
-};
-
-const deleteHistory = async (item: any) => {
-  if (props.deleteRequest && isFunction(props.deleteRequest)) {
-    const resp = await props.deleteRequest(
-        props.target,
-        item[props.deleteKey],
-    );
-    historyVisible.value = false;
-    if (resp.success || resp.status === 200 || resp.code === 200) {
-      message.success('操作成功');
-    } else {
-      message.error('操作失败');
-    }
-  }
-};
-</script>
-
-<style scoped lang="less"></style>