vft 0.0.1

package/src/web/result/index.scss

@@ -0,0 +1,69 @@
+$name: result;
+$result: () !default;
+$result: map-merge((
+  'padding': 40px 30px,
+  'icon-font-size': 64px,
+  'title-font-size': 20px,
+  'title-margin-top': 20px,
+  'sub-title-margin-top': 10px,
+  'extra-margin-top': 30px,
+), $result);
+
+@include set-root-css-vars($name, $result);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+  padding: getCssVar('result-padding');
+
+  @include e(icon) {
+    svg {
+      width: getCssVar('result-icon-font-size');
+      height: getCssVar('result-icon-font-size');
+    }
+    [class~='#{$namespace}-icon'] {
+      font-size: getCssVar('result-icon-font-size');
+    }
+  }
+
+  @include e(title) {
+    margin-top: getCssVar('result-title-margin-top');
+
+    p {
+      margin: 0;
+      font-size: getCssVar('result-title-font-size');
+      color: getCssVar('text-color', 'primary');
+      line-height: 1.3;
+    }
+  }
+
+  @include e(sub-title) {
+    margin-top: getCssVar('result-sub-title-margin-top');
+
+    p {
+      margin: 0;
+      font-size: getCssVar('font-size', 'base');
+      color: getCssVar('text-color', 'regular');
+      line-height: 1.3;
+    }
+  }
+
+  @include e(extra) {
+    margin-top: getCssVar('result-extra-margin-top');
+  }
+
+  @each $type in $types {
+    .icon-#{$type} {
+      @include css-var-from-global(('result', 'color'), ('color', $type));
+      color: getCssVar('result-color');
+    }
+  }
+}

package/src/web/result/index.ts

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

package/src/web/result/index.vue

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,91 @@
+@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

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

package/src/web/scrollbar/index.vue

@@ -0,0 +1,236 @@
+<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

@@ -0,0 +1,183 @@
+<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

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