vft 0.0.1

package/src/styles/vars.scss

@@ -0,0 +1,500 @@
+$layout-header: () !default;
+$layout-header: map-merge(
+    (
+      height: 64px,
+      top-height: 40px,
+      bg-color: white,
+      color: black,
+      z-index: 2001,
+      border-bottom: 1px solid rgb(231, 231, 231)
+    ),
+    $layout-header
+);
+
+$layout-footer: () !default;
+$layout-footer: map-merge(
+    (
+      'bg-color': #f7f8fa,
+      'border-top': '1px solid #f7f8fa',
+      'left': getCssVar('menu-width'),
+      'height': '30px',
+      'left-min-width': 'auto',
+      'right-min-width': 'auto'
+    ),
+    $layout-footer
+);
+
+$name: side-menu;
+$side-menu: () !default;
+$side-menu: map-merge(
+    (
+      'border': getCssVar('menu-border-right'),
+      'width': 200px,
+      'collapse-width': 200px,
+      'scroll-mr': 0
+    ),
+    $side-menu
+);
+
+$iframe-page: () !default;
+$iframe-page: map-merge(
+    (
+      'text-color': white
+    ),
+    $iframe-page
+);
+
+$icon: () !default;
+$icon: map-merge(
+    (
+      'text-color': black
+    ),
+    $icon
+);
+
+$message: () !default;
+$message: map-merge(
+    (
+      'border-radius': 2px,
+      'border-width': 2px,
+      'border-color': red,
+      'padding': 15px 19px,
+      'bg-color': getCssVar('color', 'info', 'light-9')
+    ),
+    $message
+);
+
+$divider: () !default;
+$divider: map-merge(
+    (
+      'margin-y': '24px',
+      'margin-x': '8px',
+      'border-color': #dcdfe6,
+      'border-style': 'solid'
+    ),
+    $divider
+);
+
+$tabs: () !default;
+$tabs: map-merge(
+    (
+      'padding': 0,
+      'font-size': 14px,
+      'font-weight': 400,
+      'font-weight-active': 500,
+      'header-height': 40px,
+      'border-bottom': 1px solid #eee,
+      'nav-color': #eee,
+      'header-margin': 0 0 15px,
+      'header-padding': 0,
+      'header-border-bottom': none,
+      'item-padding': 0 20px,
+      'item-max-width': 100%,
+      'item-bg-color': white,
+      'item-bg-color-active': #15b4f1,
+      'item-bg-color-hover': #15b4f1,
+      'item-color': black,
+      'item-color-active': white,
+      'item-color-hover': white,
+      'item-border': 1px solid #eee,
+      'item-border-active': 0 solid transparent,
+      'item-border-hover': 0 solid transparent,
+      'item-distance': 10px,
+      'item-border-radius': 2px 2px 0 0,
+      'close-icon-left': 5px,
+      'close-icon-hover-color': white,
+      'close-icon-hover-bg-color': #a8abb2,
+      'add-icon-right': 30px,
+      'add-icon-padding-left': 20px,
+      'scroll-padding': 0 60px 0 20px,
+      'active-distance': 14px,
+      'show-border-bottom': block
+    ),
+    $tabs
+);
+
+$multiple-tabs: () !default;
+$multiple-tabs: map-merge(
+    (
+      'bg-color': #f8f8f8,
+      'height': 31px
+    ),
+    $multiple-tabs
+);
+
+$menu: () !default;
+$menu: map-merge(
+    (
+      'bg-color': getCssVar('theme-color'),
+      'sub-menu-bg-color': getCssVar('theme-color'),
+      'active-color': getCssVar('primary-color'),
+      'text-color': getCssVar('text-primary-color'),
+      'hover-text-color': getCssVar('primary-color'),
+      'hover-bg-color': getCssVar('primary-color-light-9'),
+      'focus-text-color': getCssVar('primary-color'),
+      'focus-bg-color': getCssVar('primary-color-light-9'),
+      'item-height': 56px,
+      'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
+      'horizontal-sub-item-height': 36px,
+      'item-font-size': getCssVar('font-size-base'),
+      'item-hover-fill': getCssVar('primary-color-light-9'),
+      'border-color': #dcdfe6,
+      'border-bottom': getCssVar('border'),
+      'base-level-padding': 20px,
+      'level-padding': 20px,
+      'icon-mr': 8px,
+      'border': 0 solid transparent,
+      'border-right': 1px solid #dcdfe6,
+      'item-min-width': 200px,
+      'popup-border-radius': getCssVar('border-radius')
+    ),
+    $menu
+);
+
+$logo: () !default;
+$logo: map-merge(
+    (
+      img-width: 30px,
+      img-height: 30px,
+      title-color: black,
+      title-font-size: 16px,
+      title-font-weight: 400,
+      cursor: pointer
+    ),
+    $logo
+);
+
+$loading: () !default;
+$loading: map-merge(
+    (
+      'mask-color': rgba(255, 255, 255, 0.9),
+      'spinner-size': 20px,
+      'fullscreen-spinner-size': 50px,
+      'rotate-animation': loading-rotate 2s linear infinite,
+      'color': #409eff,
+      'text-size': 14px,
+      'margin': 3px 0
+    ),
+    $loading
+);
+
+$full-screen: () !default;
+$full-screen: map-merge(
+    (
+      'color': #434343,
+      'hover-color': #0171f6,
+      'font-size': 12px
+    ),
+    $full-screen
+);
+
+// Select
+$select: () !default;
+$select: map-merge(
+    (
+      'border-color-hover': getCssVar('border-color-hover'),
+      'disabled-border': getCssVar('disabled-border-color'),
+      'font-size': getCssVar('font-size-base'),
+      'close-hover-color': getCssVar('text-secondary-color'),
+      'input-color': getCssVar('text-placeholder-color'),
+      'multiple-input-color': getCssVar('text-regular-color'),
+      'input-focus-border-color': getCssVar('primary-color'),
+      'input-font-size': 14px
+    ),
+    $select
+);
+
+$select-option: () !default;
+$select-option: map-merge(
+    (
+      'text-color': getCssVar('text-regular-color'),
+      'disabled-color': getCssVar('text-placeholder-color'),
+      'height': 34px,
+      'hover-background': getCssVar('fill-color', 'light'),
+      'selected-text-color': getCssVar('primary-color')
+    ),
+    $select-option
+);
+
+$select-group: () !default;
+$select-group: map-merge(
+    (
+      'text-color': getCssVar('info-color'),
+      'height': 30px,
+      'font-size': 12px
+    ),
+    $select-group
+);
+
+$select-dropdown: () !default;
+$select-dropdown: map-merge(
+    (
+      'bg-color': getCssVar('bg-color', 'overlay'),
+      'shadow': getCssVar('box-shadow-light'),
+      'empty-color': getCssVar('text-secondary-color'),
+      'max-height': 274px,
+      'padding': 6px 0,
+      'empty-padding': 10px 0,
+      'border': 1px solid getCssVar('border-color-light')
+    ),
+    $select-dropdown
+);
+
+$select-tags-prefix-padding: () !default;
+$select-tags-prefix-padding: map-merge(
+    (
+      'large': 8px,
+      'default': 6px,
+      'small': 4px
+    ),
+    $select-tags-prefix-padding
+);
+
+$input: () !default;
+$input: map-merge(
+    (
+      'width': '100%',
+      'text-color': getCssVar('text-regular-color'),
+      'border': getCssVar('border'),
+      'hover-border': getCssVar('border-color-hover'),
+      'focus-border': getCssVar('primary-color'),
+      'transparent-border': 0 0 0 1px transparent inset,
+      'border-color': getCssVar('border-color'),
+      'border-radius': getCssVar('border-radius-base'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'icon-color': getCssVar('text-placeholder-color'),
+      'placeholder-color': getCssVar('text-placeholder-color'),
+      'hover-border-color': getCssVar('border-color-hover'),
+      'clear-hover-color': getCssVar('text-secondary-color'),
+      'focus-border-color': getCssVar('primary-color')
+    ),
+    $input
+);
+
+$input-disabled: () !default;
+$input-disabled: map-merge(
+    (
+      'fill': getCssVar('disabled-bg-color'),
+      'border': getCssVar('disabled-border-color'),
+      'text-color': getCssVar('disabled-text-color'),
+      'placeholder-color': getCssVar('text-placeholder-color')
+    ),
+    $input-disabled
+);
+
+$input-font-size: () !default;
+$input-font-size: map-merge(
+    (
+      'large': 14px,
+      'default': 14px,
+      'small': 12px
+    ),
+    $input-font-size
+);
+
+$input-height: () !default;
+$input-height: map-merge($common-component-size, $input-height);
+
+$input-line-height: () !default;
+$input-line-height: map-merge($common-component-size, $input-line-height);
+
+$input-number-width: () !default;
+$input-number-width: map-merge(
+    (
+      'large': 180px,
+      'default': 150px,
+      'small': 120px
+    ),
+    $input-number-width
+);
+
+$input-padding-horizontal: () !default;
+$input-padding-horizontal: map-merge(
+    (
+      'large': 16px,
+      'default': 12px,
+      'small': 8px
+    ),
+    $input-padding-horizontal
+);
+
+$cascader: () !default;
+$cascader: map-merge(
+    (
+      'menu-text-color': getCssVar('text-regular-color'),
+      'menu-selected-text-color': getCssVar('primary-color'),
+      'menu-fill': getCssVar('bg-color', 'overlay'),
+      'menu-font-size': getCssVar('font-size-base'),
+      'menu-radius': getCssVar('border-radius-base'),
+      'menu-border': solid 1px getCssVar('border-color-light'),
+      'menu-shadow': getCssVar('box-shadow-light'),
+      'node-background-hover': getCssVar('fill-color', 'light'),
+      'node-color-disabled': getCssVar('text-placeholder-color'),
+      'color-empty': getCssVar('text-placeholder-color'),
+      'tag-background': getCssVar('fill-color')
+    ),
+    $cascader
+);
+
+$scrollbar: () !default;
+$scrollbar: map-merge(
+    (
+      'opacity': 0.3,
+      'bg-color': getCssVar('text-secondary-color'),
+      'hover-opacity': 0.5,
+      'hover-bg-color': getCssVar('text-secondary-color')
+    ),
+    $scrollbar
+);
+
+$popover: () !default;
+$popover: map-merge(
+    (
+      'bg-color': getCssVar('bg-color', 'overlay'),
+      'font-size': getCssVar('font-size-base'),
+      'border-color': getCssVar('border-color-lighter'),
+      'padding': 12px,
+      'padding-large': 18px 20px,
+      'title-font-size': 16px,
+      'title-text-color': getCssVar('text-primary-color'),
+      'border-radius': 4px
+    ),
+    $popover
+);
+
+$avatar: () !default;
+$avatar: map-merge(
+    (
+      'text-color': getCssVar('color-white'),
+      'bg-color': getCssVar('text-color', 'disabled'),
+      'text-size': 14px,
+      'icon-size': 18px,
+      'border-radius': getCssVar('border-radius-base')
+    ),
+    $avatar
+);
+
+$avatar-size: () !default;
+$avatar-size: map-merge(
+    (
+      'large': 56px,
+      'default': 40px,
+      'small': 24px
+    ),
+    $avatar-size
+);
+
+$descriptions: () !default;
+$descriptions: map-merge(
+    (
+      'table-border': 1px solid getCssVar('border-color-lighter'),
+      'item-bordered-label-background': getCssVar('fill-color', 'light')
+    ),
+    $descriptions
+);
+
+$md: () !default;
+$md: map-merge(
+    (
+      'primary-color': $primary-color,
+      'content-max-width': 800px,
+      'code-bg-color': #fff5f5,
+      'line-numbers-width': '2.5rem',
+      'icon-copy':
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"),
+      'icon-copied':
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"),
+      // info
+      info-title-color: #193c47,
+      info-bg-color: #eef9fd,
+      info-border-color: #4cb3d4,
+      info-code-bg-color: rgb(76 179 212 / 10%),
+      // note
+      note-title-color: #474748,
+      note-bg-color: #fdfdfe,
+      note-border-color: #ccc,
+      note-code-bg-color: rgb(212 213 216 / 20%),
+      // tip
+      tip-title-color: #003100,
+      tip-bg-color: #e6f6e6,
+      tip-border-color: #009400,
+      tip-code-bg-color: rgb(0 148 0 / 15%),
+      // warning
+      warning-title-color: #4d3800,
+      warning-bg-color: #fff8e6,
+      warning-border-color: #e6a700,
+      warning-code-bg-color: rgb(230 167 0 / 15%),
+      // danger
+      danger-title-color: #4b1113,
+      danger-bg-color: #ffebec,
+      danger-border-color: #e13238,
+      danger-code-bg-color: rgb(225 50 56 / 15%),
+      // detail
+      detail-bg-color: #eee,
+      detail-text-color: inherit,
+      detail-code-bg-color: rgb(127 127 127 / 15%)
+    ),
+    $md
+);
+
+$pagination: () !default;
+$pagination: map-merge(
+    (
+      'font-size': 14px,
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'text-color': getCssVar('text-primary-color'),
+      'border-radius': 2px,
+      'button-color': getCssVar('text-primary-color'),
+      'button-width': 32px,
+      'button-height': 32px,
+      'button-disabled-color': getCssVar('text-placeholder-color'),
+      'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
+      'button-bg-color': getCssVar('fill-color'),
+      'hover-color': getCssVar('primary-color'),
+      'font-size-small': 12px,
+      'button-width-small': 24px,
+      'button-height-small': 24px,
+      'item-gap': 16px
+    ),
+    $pagination
+);
+
+$tag: () !default;
+$tag: map-merge((
+  'font-size': 12px,
+  'border-radius': 4px,
+  'border-radius-rounded': 9999px,
+  'content-line-clamp-num': 1,
+  'content-max-width': 100%
+), $tag);
+
+
+$tag-height: () !default;
+$tag-height: map-merge(
+    (
+      'large': 32px,
+      'default': 24px,
+      'small': 20px,
+    ),
+    $tag-height
+);
+
+$tag-padding: () !default;
+$tag-padding: map-merge(
+    (
+      'large': 12px,
+      'default': 10px,
+      'small': 8px,
+    ),
+    $tag-padding
+);
+
+$tag-icon-size: () !default;
+$tag-icon-size: map-merge(
+    (
+      'large': 16px,
+      'default': 14px,
+      'small': 12px,
+    ),
+    $tag-icon-size
+);

package/src/use/index.ts

@@ -0,0 +1,14 @@
+export * from './useLockScroll';
+export * from './useLazyRender';
+export * from './useGlobalZIndex';
+export * from './onPopupReopen';
+export * from './use-global-config';
+export * from './use-namespace';
+export * from './use-floating';
+export * from './use-z-index';
+export * from './use-ordered-children';
+export * from './use-id';
+export * from './use-forward-ref';
+export * from './use-popper-container';
+export * from './use-delayed-toggle';
+export * from './use-model-toggle';

package/src/use/onPopupReopen.ts

@@ -0,0 +1,15 @@
+import { inject, type InjectionKey, watch } from 'vue';
+
+export const POPUP_TOGGLE_KEY: InjectionKey<() => boolean> = Symbol();
+
+export function onPopupReopen(callback: () => void) {
+  const popupToggleStatus = inject(POPUP_TOGGLE_KEY, null);
+
+  if (popupToggleStatus) {
+    watch(popupToggleStatus, (show) => {
+      if (show) {
+        callback();
+      }
+    });
+  }
+}

package/src/use/use-delayed-toggle/index.ts

@@ -0,0 +1,30 @@
+import { unref } from 'vue';
+import { useTimeout } from '../use-timeout';
+
+export type UseDelayedToggleProps = {
+  open: (event?: Event) => void;
+  close: (event?: Event) => void;
+  showAfter: number;
+  hideAfter: number;
+};
+
+export const useDelayedToggle = ({ showAfter = 0, hideAfter = 200, open, close }: UseDelayedToggleProps) => {
+  const { registerTimeout } = useTimeout();
+
+  const onOpen = (event?: Event) => {
+    registerTimeout(() => {
+      open(event);
+    }, unref(showAfter));
+  };
+
+  const onClose = (event?: Event) => {
+    registerTimeout(() => {
+      close(event);
+    }, unref(hideAfter));
+  };
+
+  return {
+    onOpen,
+    onClose
+  };
+};

package/src/use/use-floating/index.ts

@@ -0,0 +1,121 @@
+export {};
+// import { isRef, onMounted, ref, unref, watchEffect } from 'vue';
+// import { isClient, unrefElement } from '@vueuse/core';
+// import { isNil } from 'lodash';
+// import { arrow as arrowCore, computePosition } from '@floating-ui/dom';
+//
+// import type { Ref, ToRefs } from 'vue';
+// import type {
+//   ComputePositionReturn,
+//   Middleware,
+//   Placement,
+//   SideObject,
+//   Strategy,
+//   VirtualElement
+// } from '@floating-ui/dom';
+//
+//
+// export type UseFloatingProps = ToRefs<{
+//   middleware: Array<Middleware>
+//   placement: Placement
+//   strategy: Strategy
+// }>
+//
+// type ElementRef = Parameters<typeof unrefElement>['0']
+//
+// const unrefReference = (
+//   elRef: ElementRef | Ref<VirtualElement | undefined>
+// ) => {
+//   if (!isClient) return;
+//   if (!elRef) return elRef;
+//   const unrefEl = unrefElement(elRef as ElementRef);
+//   if (unrefEl) return unrefEl;
+//   return isRef(elRef) ? unrefEl : (elRef as VirtualElement);
+// };
+//
+// export const getPositionDataWithUnit = <T extends Record<string, number>>(
+//   record: T | undefined,
+//   key: keyof T
+// ) => {
+//   const value = record?.[key];
+//   return isNil(value) ? '' : `${value}px`;
+// };
+//
+// export const useFloating = ({
+//   middleware,
+//   placement,
+//   strategy
+// }: UseFloatingProps) => {
+//   const referenceRef = ref<HTMLElement | VirtualElement>();
+//   const contentRef = ref<HTMLElement>();
+//   const x = ref<number>();
+//   const y = ref<number>();
+//   const middlewareData = ref<ComputePositionReturn['middlewareData']>({});
+//
+//   const states = {
+//     x,
+//     y,
+//     placement,
+//     strategy,
+//     middlewareData
+//   } as const;
+//
+//   const update = async () => {
+//     if (!isClient) return;
+//
+//     const referenceEl = unrefReference(referenceRef);
+//     const contentEl = unrefElement(contentRef);
+//     if (!referenceEl || !contentEl) return;
+//
+//     const data = await computePosition(referenceEl, contentEl, {
+//       placement: unref(placement),
+//       strategy: unref(strategy),
+//       middleware: unref(middleware)
+//     });
+//
+//     Object.keys(states).forEach((key) => {
+//       states[key].value = data[key];
+//     });
+//   };
+//
+//   onMounted(() => {
+//     watchEffect(() => {
+//       update();
+//     });
+//   });
+//
+//   return {
+//     ...states,
+//     update,
+//     referenceRef,
+//     contentRef
+//   };
+// };
+//
+// export type ArrowMiddlewareProps = {
+//   arrowRef: Ref<HTMLElement | null | undefined>
+//   padding?: number | SideObject
+// }
+//
+// export const arrowMiddleware = ({
+//   arrowRef,
+//   padding
+// }: ArrowMiddlewareProps): Middleware => {
+//   return {
+//     name: 'arrow',
+//     options: {
+//       element: arrowRef,
+//       padding
+//     },
+//
+//     fn(args) {
+//       const arrowEl = unref(arrowRef);
+//       if (!arrowEl) return {};
+//
+//       return arrowCore({
+//         element: arrowEl,
+//         padding
+//       }).fn(args);
+//     }
+//   };
+// };