vft 0.0.1 → 0.0.3

package/src/web/result/index.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { renderTNode, singleAttrToObj } from '@vri/utils';
-import { h, getCurrentInstance, computed, useSlots } from 'vue';
-import { useNamespace } from '../../use';
-import { type IconProps, Icon } from '../../common';
-
-interface Props {
-  title?: string | number;
-  subTitle?: string | number;
-  icon?: IconProps;
-}
-
-const {
-  icon
-} = defineProps<Props>();
-
-const ns = /* hoist-static*/ useNamespace('result');
-
-defineOptions({
-  name: ns.b()
-});
-
-const instance = getCurrentInstance()!;
-
-const slots = useSlots();
-
-const _icon = computed(() => {
-  return singleAttrToObj(icon, 'icon') as IconProps;
-});
-
-const vIcon = _icon.value?.icon ? h('div', {
-  class: ns.e('icon')
-}, [h(Icon, { ..._icon.value })]) : slots.default?.();
-
-const vCon = (attrName: string) => {
-  const nodeCon = renderTNode(instance, attrName);
-  return nodeCon ? h(
-    'div',
-    {
-      class: ns.e(attrName)
-    }, [h('p', {}, { default: () => nodeCon })]
-  ) : null;
-};
-
-defineRender(() => {
-  return (
-    h(
-      'div', { class: ns.b() }, {
-        default: () => [
-          vIcon,
-          vCon('title'),
-          vCon('sub-title'),
-          slots.extra ? h('div', { class: ns.e('extra') }, { default: ()=> slots.extra?.() }) : null
-        ]
-      }
-    )
-  );
-});
-</script>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

package/src/web/scrollbar/bar.vue

@@ -1,48 +0,0 @@
-<template>
-  <thumb :move="moveX" :ratio="ratioX" :size="width" :always="always" />
-  <thumb
-    :move="moveY"
-    :ratio="ratioY"
-    :size="height"
-    vertical
-    :always="always"
-  />
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { GAP } from './util';
-import Thumb from './thumb.vue';
-
-interface Props {
-  always?: boolean
-  width?: string
-  height?: string
-  ratioX?: number
-  ratioY?: number
-}
-
-const {
-  always = true,
-  width,
-  height,
-  ratioX = 1,
-  ratioY = 1
-} = defineProps<Props>();
-
-const moveX = ref(0);
-const moveY = ref(0);
-
-const handleScroll = (wrap: HTMLDivElement) => {
-  if (wrap) {
-    const offsetHeight = wrap.offsetHeight - GAP;
-    const offsetWidth = wrap.offsetWidth - GAP;
-
-    moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY;
-    moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX;
-  }
-};
-
-defineExpose({
-  handleScroll
-});
-</script>

package/src/web/scrollbar/index.scss

@@ -1,91 +0,0 @@
-@include b(scrollbar) {
-  @include set-component-css-var('scrollbar', $scrollbar);
-}
-
-@include b(scrollbar) {
-  overflow: hidden;
-  position: relative;
-  height: 100%;
-
-  @include e(wrap) {
-    overflow: auto;
-    height: 100%;
-
-    @include m(hidden-default) {
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  @include e(thumb) {
-    position: relative;
-    display: block;
-    width: 0;
-    height: 0;
-    cursor: pointer;
-    border-radius: inherit;
-    background-color: var(
-      #{getCssVarName('scrollbar-bg-color')},
-      map-get($scrollbar, 'bg-color')
-    );
-    transition: getCssVar('transition-duration') background-color;
-    opacity: var(
-      #{getCssVarName('scrollbar-opacity')},
-      map-get($scrollbar, 'opacity')
-    );
-
-    &:hover {
-      background-color: var(
-        #{getCssVarName('scrollbar-hover-bg-color')},
-        map-get($scrollbar, 'hover-bg-color')
-      );
-      opacity: var(
-        #{getCssVarName('scrollbar-hover-opacity')},
-        map-get($scrollbar, 'hover-opacity')
-      );
-    }
-  }
-
-  @include e(bar) {
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    z-index: 1;
-    border-radius: 4px;
-
-    @include when(vertical) {
-      width: 6px;
-      top: 2px;
-
-      > div {
-        width: 100%;
-      }
-    }
-
-    @include when(horizontal) {
-      height: 6px;
-      left: 2px;
-
-      > div {
-        height: 100%;
-      }
-    }
-  }
-}
-
-.#{$namespace}-scrollbar-fade {
-  &-enter-active {
-    transition: opacity 340ms ease-out;
-  }
-
-  &-leave-active {
-    transition: opacity 120ms ease-out;
-  }
-
-  &-enter-from,
-  &-leave-active {
-    opacity: 0;
-  }
-}

package/src/web/scrollbar/index.ts

@@ -1,5 +0,0 @@
-import Scrollbar from './index.vue';
-
-export {
-  Scrollbar
-};

package/src/web/scrollbar/index.vue

@@ -1,236 +0,0 @@
-<template>
-  <div ref="scrollbarRef" :class="ns.b()">
-    <div ref="wrapRef" :class="wrapKls" :style="style" @scroll="handleScroll">
-      <component
-        :is="tag"
-        ref="resizeRef"
-        :class="resizeKls"
-        :style="viewStyle"
-      >
-        <slot />
-      </component>
-    </div>
-    <template v-if="!native">
-      <bar
-        ref="barRef"
-        :height="sizeHeight"
-        :width="sizeWidth"
-        :always="always"
-        :ratio-x="ratioX"
-        :ratio-y="ratioY"
-      />
-    </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 { addUnit, isNumber, isObject } from '@vri/utils';
-import { debugWarn } from '../../utils';
-import { scrollbarContextKey } from './tokens';
-import { useNamespace } from '../../use';
-import { GAP } from './util';
-import Bar from './bar.vue';
-import type { CSSProperties, StyleValue } from 'vue';
-
-interface Props {
-  height?: number | string
-  maxHeight?: number | string
-  native?: boolean
-  wrapStyle?: StyleValue
-  wrapClass?: string | Array<any>
-  viewClass?: string | Array<any>
-  viewStyle?: StyleValue
-  noresize?: boolean
-  tag?: string
-  always?: boolean
-  minSize?: number
-}
-
-const {
-  height,
-  maxHeight,
-  native = false,
-  wrapStyle,
-  wrapClass,
-  viewClass,
-  viewStyle,
-  noresize,
-  tag = 'div',
-  always,
-  minSize = 20
-} = defineProps<Props>();
-
-const ns = /* hoist-static*/ useNamespace('scrollbar');
-
-defineOptions({
-	name: ns.b()
-});
-
-const emit = defineEmits(['scroll']);
-
-let stopResizeObserver: (() => void) | undefined = undefined;
-let stopResizeListener: (() => void) | undefined = undefined;
-
-const scrollbarRef = ref<HTMLDivElement>();
-const wrapRef = ref<HTMLDivElement>();
-const resizeRef = ref<HTMLElement>();
-
-const sizeWidth = ref('0');
-const sizeHeight = ref('0');
-const barRef = ref();
-const ratioY = ref(1);
-const ratioX = ref(1);
-
-const style = computed<StyleValue>(() => {
-  const style: CSSProperties = {};
-  if (height) style.height = addUnit(height);
-  if (maxHeight) style.maxHeight = addUnit(maxHeight);
-  return [wrapStyle, style];
-});
-
-const wrapKls = computed(() => {
-  return [
-    wrapClass,
-    ns.e('wrap'),
-    { [ns.em('wrap', 'hidden-default')]: !native }
-  ];
-});
-
-const resizeKls = computed(() => {
-  return [ns.e('view'), viewClass];
-});
-
-const handleScroll = () => {
-  if (wrapRef.value) {
-    barRef.value?.handleScroll(wrapRef.value);
-
-    emit('scroll', {
-      scrollTop: wrapRef.value.scrollTop,
-      scrollLeft: wrapRef.value.scrollLeft
-    });
-  }
-};
-
-// TODO: refactor method overrides, due to script setup dts
-// @ts-nocheck
-function scrollTo(xCord: number, yCord?: number): void
-function scrollTo(options: ScrollToOptions): void
-function scrollTo(arg1: unknown, 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)) {
-    debugWarn(ns.b(), 'value must be a number');
-    return;
-  }
-  wrapRef.value!.scrollTop = value;
-};
-
-const setScrollLeft = (value: number) => {
-  if (!isNumber(value)) {
-    debugWarn(ns.b(), 'value must be a number');
-    return;
-  }
-  wrapRef.value!.scrollLeft = value;
-};
-
-const update = () => {
-  if (!wrapRef.value) return;
-  const offsetHeight = wrapRef.value.offsetHeight - GAP;
-  const offsetWidth = wrapRef.value.offsetWidth - GAP;
-
-  const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight;
-  const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth;
-  const height = Math.max(originalHeight, minSize);
-  const width = Math.max(originalWidth, minSize);
-
-  ratioY.value =
-    originalHeight /
-    (offsetHeight - originalHeight) /
-    (height / (offsetHeight - height));
-  ratioX.value =
-    originalWidth /
-    (offsetWidth - originalWidth) /
-    (width / (offsetWidth - width));
-
-  sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : '';
-  sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : '';
-};
-
-watch(
-  () => noresize,
-  (noresize) => {
-    if (noresize) {
-      stopResizeObserver?.();
-      stopResizeListener?.();
-    } else {
-      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
-      stopResizeListener = useEventListener('resize', update);
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => [maxHeight, height],
-  () => {
-    if (!native)
-      nextTick(() => {
-        update();
-        if (wrapRef.value) {
-          barRef.value?.handleScroll(wrapRef.value);
-        }
-      });
-  }
-);
-
-provide(
-  scrollbarContextKey,
-  reactive({
-    scrollbarElement: scrollbarRef,
-    wrapElement: wrapRef
-  })
-);
-
-onMounted(() => {
-  if (!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="scss">
-@import "./index.scss";
-</style>

package/src/web/scrollbar/thumb.vue

@@ -1,183 +0,0 @@
-<template>
-  <transition :name="ns.b('fade')">
-    <div
-      v-show="always || visible"
-      ref="instance"
-      :class="[ns.e('bar'), ns.is(bar.key)]"
-      @mousedown="clickTrackHandler"
-    >
-      <div
-        ref="thumb"
-        :class="ns.e('thumb')"
-        :style="thumbStyle"
-        @mousedown="clickThumbHandler"
-      />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue';
-import { isClient, useEventListener } from '@vueuse/core';
-import { scrollbarContextKey } from './tokens';
-import { throwError } from '../../utils';
-import { useNamespace } from '../../use';
-import { BAR_MAP, renderThumbStyle } from './util';
-
-const COMPONENT_NAME = 'Thumb';
-
-interface ThumbProps {
-  vertical?: boolean
-  size?: string
-  move?: number
-  ratio?: number
-  always?: boolean
-}
-
-const {
-  vertical,
-  size,
-  move,
-  ratio,
-  always
-} = defineProps<ThumbProps>();
-
-const scrollbar = inject(scrollbarContextKey);
-const ns = useNamespace('scrollbar');
-
-if (!scrollbar) throwError(COMPONENT_NAME, '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[vertical ? 'vertical' : 'horizontal']);
-
-const thumbStyle = computed(() =>
-  renderThumbStyle({
-    size: size,
-    move: move,
-    bar: bar.value
-  })
-);
-
-const offsetRatio = computed(
-  () =>
-    // offsetRatioX = original width of thumb / current width of thumb / ratioX
-    // offsetRatioY = original height of thumb / current height of thumb / ratioY
-    // instance height = wrap height - GAP
-    instance.value![bar.value.offset] ** 2 /
-    scrollbar.wrapElement![bar.value.scrollSize] /
-    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 = !!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/web/scrollbar/tokens.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/web/scrollbar/types.ts

@@ -1,7 +0,0 @@
-export interface ThumbProps {
-  vertical?: boolean
-  size?: string
-  move?: number
-  ratio?: number
-  always?: boolean
-}

package/src/web/scrollbar/util.ts

@@ -1,38 +0,0 @@
-import type { CSSProperties } from 'vue';
-import type { ThumbProps } from './types';
-
-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/web/select/constants.ts

@@ -1,13 +0,0 @@
-export const componentSizes = ['', 'default', 'small', 'large'] as const;
-
-export type ComponentSize = typeof componentSizes[number]
-
-export const componentSizeMap = {
-  large: 40,
-  default: 32,
-  small: 24
-} as const;
-
-export const isValidComponentSize = (val: string): val is ComponentSize | '' =>
-  ['', ...componentSizes].includes(val);
-

package/src/web/select/index.ts

@@ -1,11 +0,0 @@
-import Select from './index.vue';
-import Option from './option.vue';
-import OptionGroup from './option-group.vue';
-
-export {
-  Select,
-  Option,
-  OptionGroup
-};
-
-export * from './token';