vft 0.0.1 → 0.0.3

package/src/web/pagination/index.scss

@@ -1,231 +0,0 @@
-@import "@vri/styles/web";
-@import "../../styles/vars";
-
-@mixin pagination-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: getCssVar('pagination-font-size');
-  min-width: getCssVar('pagination-button-width');
-  height: getCssVar('pagination-button-height');
-  line-height: getCssVar('pagination-button-height');
-  color: getCssVar('pagination-button-color');
-  background: getCssVar('pagination-bg-color');
-  padding: 0 4px;
-  border: none;
-  border-radius: getCssVar('pagination-border-radius');
-  cursor: pointer;
-  text-align: center;
-  box-sizing: border-box;
-
-  .vri-icon {
-    color: inherit;
-  }
-
-  * {
-    pointer-events: none;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    color: getCssVar('pagination-hover-color');
-  }
-
-  &.is-active {
-    color: getCssVar('pagination-hover-color');
-    cursor: default;
-    font-weight: bold;
-
-    &.is-disabled {
-      font-weight: bold;
-      //
-      //.vri-icon {
-      //  color: getCssVar('text', 'secondary-color');
-      //}
-    }
-  }
-
-  &:disabled,
-  &.is-disabled {
-    color: getCssVar('pagination-button-disabled-color');
-    background-color: getCssVar('pagination-button-disabled-bg-color');
-    cursor: not-allowed;
-  }
-
-  &:focus-visible {
-    outline: 1px solid getCssVar('pagination-hover-color');
-    outline-offset: -1px;
-  }
-}
-
-@include set-root-css-vars('pagination', $pagination);
-
-@include b(pagination) {
-
-  white-space: nowrap;
-  color: getCssVar('pagination-text-color');
-  font-size: getCssVar('pagination-font-size');
-  font-weight: normal;
-  display: flex;
-  align-items: center;
-
-  .#{$namespace}-input__inner {
-    text-align: center;
-    -moz-appearance: textfield;
-  }
-
-  .#{$namespace}-select .#{$namespace}-input {
-    width: 128px;
-  }
-
-  button {
-    @include pagination-button;
-  }
-
-  .btn-prev,
-  .btn-next {
-    .#{$namespace}-icon {
-      display: block;
-      font-size: 12px;
-      font-weight: bold;
-      width: inherit;
-    }
-  }
-
-  & > * {
-    @include when(first) {
-      margin-left: 0 !important;
-    }
-    @include when(last) {
-      margin-right: 0 !important;
-    }
-  }
-
-  .btn-prev {
-    margin-left: getCssVar('pagination-item-gap');
-  }
-
-  @include e(sizes) {
-    margin-left: getCssVar('pagination-item-gap');
-    font-weight: normal;
-    color: getCssVar('text', 'regular-color');
-  }
-
-  @include e(total) {
-    margin-left: getCssVar('pagination-item-gap');
-    font-weight: normal;
-    color: getCssVar('text', 'regular-color');
-
-    &[disabled='true'] {
-      color: getCssVar('text', 'placeholder-color');
-    }
-  }
-
-  @include e(jump) {
-    display: flex;
-    align-items: center;
-    margin-left: getCssVar('pagination-item-gap');
-    font-weight: normal;
-    color: getCssVar('text', 'regular-color');
-
-    &[disabled='true'] {
-      color: getCssVar('text', 'placeholder-color');
-    }
-
-    @include e(goto) {
-      margin-right: 8px;
-    }
-
-    @include e(editor) {
-      text-align: center;
-      box-sizing: border-box;
-
-      &.#{$namespace}-input {
-        width: 56px;
-      }
-
-      .#{$namespace}-input__inner::-webkit-inner-spin-button,
-      .#{$namespace}-input__inner::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-    }
-
-    @include e(classifier) {
-      margin-left: 8px;
-    }
-  }
-
-  @include e(rightwrapper) {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  @include when(background) {
-    .btn-prev,
-    .btn-next,
-    .#{$namespace}-pager li {
-      margin: 0 4px;
-      background-color: getCssVar('pagination-button-bg-color');
-
-      &.is-active {
-        background-color: getCssVar('primary-color');
-        color: getCssVar('color-white');
-      }
-
-      &:disabled,
-      &.is-disabled {
-        color: getCssVar('text', 'placeholder-color');
-        background-color: getCssVar('disabled-bg-color');
-
-        &.is-active {
-          color: getCssVar('text', 'secondary-color');
-          background-color: getCssVar('fill-color', 'dark');
-        }
-      }
-    }
-
-    .btn-prev {
-      margin-left: getCssVar('pagination-item-gap');
-    }
-  }
-
-  @include m(small) {
-    .btn-prev,
-    .btn-next,
-    .#{$namespace}-pager li {
-      height: getCssVar('pagination-button-height-small');
-      line-height: getCssVar('pagination-button-height-small');
-      font-size: getCssVar('pagination-font-size-small');
-      min-width: getCssVar('pagination-button-width-small');
-    }
-
-    span:not([class*='suffix']),
-    button {
-      font-size: getCssVar('pagination-font-size-small');
-    }
-
-    .#{$namespace}-select .#{$namespace}-input {
-      width: 100px;
-    }
-  }
-}
-
-@include b(pager) {
-  user-select: none;
-  list-style: none;
-  font-size: 0;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-
-  li {
-    @include pagination-button;
-  }
-}

package/src/web/pagination/index.ts

@@ -1,5 +0,0 @@
-import Pagination from './pagination';
-
-export {
-  Pagination
-};

package/src/web/pagination/pagination.ts

@@ -1,363 +0,0 @@
-import { isNumber } from '@vri/utils';
-import { computed, type ComputedRef, defineComponent, getCurrentInstance, h, type InjectionKey, provide, ref, watch, type WritableComputedRef } from 'vue';
-import { useNamespace } from '../../use';
-
-import Prev from './components/prev.vue';
-import Next from './components/next.vue';
-import Sizes from './components/sizes.vue';
-import Jumper from './components/jumper.vue';
-import Total from './components/total.vue';
-import Pager from './components/pager.vue';
-
-import type { VNode } from 'vue';
-import { elPaginationKey } from './usePagination';
-import './index.scss';
-
-/**
- * It it user's responsibility to guarantee that the value of props.total... is number
- * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)
- * Otherwise we can reasonable infer that the corresponding field is absent
- */
-const isAbsent = (v: unknown): v is undefined => typeof v !== 'number';
-
-type LayoutKey = 'prev' | 'pager' | 'next' | 'jumper' | '->' | 'total' | 'sizes' | 'slot';
-
-export const paginationEmits = {
-  'update:current-page': (val: number) => isNumber(val),
-  'update:page-size': (val: number) => isNumber(val),
-  'size-change': (val: number) => isNumber(val),
-  'current-change': (val: number) => isNumber(val),
-  'prev-click': (val: number) => isNumber(val),
-  'next-click': (val: number) => isNumber(val)
-};
-export type PaginationEmits = typeof paginationEmits;
-
-const componentName = 'VriPagination';
-export default defineComponent({
-  name: componentName,
-  props: {
-    /**
-     * @description total item count
-     */
-    total: Number,
-    /**
-     * @description options of item count per page
-     */
-    pageSize: Number,
-    /**
-     * @description default initial value of page size
-     */
-    defaultPageSize: Number,
-    /**
-     * @description current page number
-     */
-    currentPage: Number,
-    /**
-     * @description default initial value of current-page
-     */
-    defaultCurrentPage: Number,
-    /**
-     * @description total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required
-     */
-    pageCount: Number,
-    /**
-     * @description number of pagers. Pagination collapses when the total page count exceeds this value
-     */
-    pagerCount: {
-      type: Number,
-      validator: (value: unknown) => {
-        return isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
-      },
-      default: 7
-    },
-    /**
-     * @description layout of Pagination, elements separated with a comma
-     */
-    layout: {
-      type: String,
-      default: (['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]).join(', ')
-    },
-    /**
-     * @description item count of each page
-     */
-    pageSizes: {
-      type: Array,
-      default: [10, 20, 30, 40, 50, 100]
-    },
-    /**
-     * @description custom class name for the page size Select's dropdown
-     */
-    popperClass: {
-      type: String,
-      default: ''
-    },
-    /**
-     * @description text for the prev button
-     */
-    prevText: {
-      type: String,
-      default: ''
-    },
-    /**
-     * @description icon for the prev button, higher priority of `prev-text`
-     */
-    prevIcon: {
-      type: String,
-      default: () => 'ArrowLeft'
-    },
-    /**
-     * @description text for the next button
-     */
-    nextText: {
-      type: String,
-      default: ''
-    },
-    /**
-     * @description icon for the next button, higher priority of `next-text`
-     */
-    nextIcon: {
-      type: String,
-      default: () => 'ArrowRight'
-    },
-    /**
-     * @description whether to use small pagination
-     */
-    small: Boolean,
-    /**
-     * @description whether the buttons have a background color
-     */
-    background: Boolean,
-    /**
-     * @description whether Pagination is disabled
-     */
-    disabled: Boolean,
-    /**
-     * @description whether to hide when there's only one page
-     */
-    hideOnSinglePage: Boolean
-  },
-  emits: paginationEmits,
-  setup(props, { emit, slots }) {
-    const ns = useNamespace('pagination');
-    const vnodeProps = getCurrentInstance()!.vnode.props || {};
-    // we can find @xxx="xxx" props on `vnodeProps` to check if user bind corresponding events
-    const hasCurrentPageListener = 'onUpdate:currentPage' in vnodeProps || 'onUpdate:current-page' in vnodeProps || 'onCurrentChange' in vnodeProps;
-    const hasPageSizeListener = 'onUpdate:pageSize' in vnodeProps || 'onUpdate:page-size' in vnodeProps || 'onSizeChange' in vnodeProps;
-    const assertValidUsage = computed(() => {
-      // Users have to set either one, otherwise count of pages cannot be determined
-      if (isAbsent(props.total) && isAbsent(props.pageCount)) return false;
-      // <el-pagination ...otherProps :current-page="xxx" /> without corresponding listener is forbidden now
-      // Users have to use two way binding of `currentPage`
-      // If users just want to provide a default value, `defaultCurrentPage` is here for you
-      if (!isAbsent(props.currentPage) && !hasCurrentPageListener) return false;
-      // When you want to change sizes, things get more complex, detailed below
-      // Basically the most important value we need is page count
-      // either directly from props.pageCount
-      // or calculated from props.total
-      // we will take props.pageCount precedence over props.total
-      if (props.layout.includes('sizes')) {
-        if (!isAbsent(props.pageCount)) {
-          // if props.pageCount is assign by user, then user have to watch pageSize change
-          // and recalculate pageCount
-          if (!hasPageSizeListener) return false;
-        } else if (!isAbsent(props.total)) {
-          // Otherwise, we will see if user have props.pageSize defined
-          // If so, meaning user want to have pageSize controlled himself/herself from component
-          // Thus page size listener is required
-          // users are account for page size change
-          if (!isAbsent(props.pageSize)) {
-            if (!hasPageSizeListener) {
-              return false;
-            }
-          } else {
-            // (else block just for explaination)
-            // else page size is controlled by el-pagination internally
-          }
-        }
-      }
-      return true;
-    });
-
-    const innerPageSize = ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
-    const innerCurrentPage = ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
-
-    const pageSizeBridge = computed({
-      get() {
-        return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize;
-      },
-      set(v: number) {
-        if (isAbsent(props.pageSize)) {
-          innerPageSize.value = v;
-        }
-        if (hasPageSizeListener) {
-          emit('update:page-size', v);
-          emit('size-change', v);
-        }
-      }
-    });
-
-    const pageCountBridge = computed<number>(() => {
-      let pageCount = 0;
-      if (!isAbsent(props.pageCount)) {
-        pageCount = props.pageCount;
-      } else if (!isAbsent(props.total)) {
-        pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value));
-      }
-      return pageCount;
-    });
-
-    const currentPageBridge = computed<number>({
-      get() {
-        return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage;
-      },
-      set(v) {
-        let newCurrentPage = v;
-        if (v < 1) {
-          newCurrentPage = 1;
-        } else if (v > pageCountBridge.value) {
-          newCurrentPage = pageCountBridge.value;
-        }
-        if (isAbsent(props.currentPage)) {
-          innerCurrentPage.value = newCurrentPage;
-        }
-        if (hasCurrentPageListener) {
-          emit('update:current-page', newCurrentPage);
-          emit('current-change', newCurrentPage);
-        }
-      }
-    });
-
-    watch(pageCountBridge, (val) => {
-      if (currentPageBridge.value > val) currentPageBridge.value = val;
-    });
-
-    function handleCurrentChange(val: number) {
-      currentPageBridge.value = val;
-    }
-
-    function handleSizeChange(val: number) {
-      pageSizeBridge.value = val;
-      const newPageCount = pageCountBridge.value;
-      if (currentPageBridge.value > newPageCount) {
-        currentPageBridge.value = newPageCount;
-      }
-    }
-
-    function prev() {
-      if (props.disabled) return;
-      currentPageBridge.value -= 1;
-      emit('prev-click', currentPageBridge.value);
-    }
-
-    function next() {
-      if (props.disabled) return;
-      currentPageBridge.value += 1;
-      emit('next-click', currentPageBridge.value);
-    }
-
-    function addClass(element: any, cls: string) {
-      if (element) {
-        if (!element.props) {
-          element.props = {};
-        }
-        element.props.class = [element.props.class, cls].join(' ');
-      }
-    }
-
-    provide(elPaginationKey, {
-      pageCount: pageCountBridge,
-      disabled: computed(() => props.disabled),
-      currentPage: currentPageBridge,
-      changeEvent: handleCurrentChange,
-      handleSizeChange
-    });
-
-    return () => {
-      if (!assertValidUsage.value) {
-        // debugWarn(componentName, t('el.pagination.deprecationWarning'));
-        return null;
-      }
-      if (!props.layout) return null;
-      if (props.hideOnSinglePage && pageCountBridge.value <= 1) return null;
-      const rootChildren: Array<VNode | VNode[] | null> = [];
-      const rightWrapperChildren: Array<VNode | VNode[] | null> = [];
-      const rightWrapperRoot = h('div', { class: ns.e('rightwrapper') }, rightWrapperChildren);
-      const TEMPLATE_MAP: Record<Exclude<LayoutKey, '->'>, VNode | VNode[] | null> = {
-        prev: h(Prev, {
-          disabled: props.disabled,
-          currentPage: currentPageBridge.value,
-          prevText: props.prevText,
-          prevIcon: props.prevIcon,
-          onClick: prev
-        }),
-        jumper: h(Jumper, {
-          size: props.small ? 'small' : 'default'
-        }),
-        pager: h(Pager, {
-          currentPage: currentPageBridge.value,
-          pageCount: pageCountBridge.value,
-          pagerCount: props.pagerCount,
-          onChange: handleCurrentChange,
-          disabled: props.disabled
-        }),
-        next: h(Next, {
-          disabled: props.disabled,
-          currentPage: currentPageBridge.value,
-          pageCount: pageCountBridge.value,
-          nextText: props.nextText,
-          nextIcon: props.nextIcon,
-          onClick: next
-        }),
-        sizes: h(Sizes, {
-          pageSize: pageSizeBridge.value,
-          pageSizes: props.pageSizes,
-          popperClass: props.popperClass,
-          disabled: props.disabled,
-          size: props.small ? 'small' : 'default'
-        }),
-        slot: slots?.default?.() ?? null,
-        total: h(Total, { total: isAbsent(props.total) ? 0 : props.total })
-      };
-
-      const components = props.layout.split(',').map((item: string) => item.trim()) as LayoutKey[];
-
-      let haveRightWrapper = false;
-
-      components.forEach((c) => {
-        if (c === '->') {
-          haveRightWrapper = true;
-          return;
-        }
-        if (!haveRightWrapper) {
-          rootChildren.push(TEMPLATE_MAP[c]);
-        } else {
-          rightWrapperChildren.push(TEMPLATE_MAP[c]);
-        }
-      });
-
-      addClass(rootChildren[0], ns.is('first'));
-      addClass(rootChildren[rootChildren.length - 1], ns.is('last'));
-
-      if (haveRightWrapper && rightWrapperChildren.length > 0) {
-        addClass(rightWrapperChildren[0], ns.is('first'));
-        addClass(rightWrapperChildren[rightWrapperChildren.length - 1], ns.is('last'));
-        rootChildren.push(rightWrapperRoot);
-      }
-      return h(
-        'div',
-        {
-          role: 'pagination',
-          'aria-label': 'pagination',
-          class: [
-            ns.b(),
-            ns.is('background', props.background),
-            {
-              [ns.m('small')]: props.small
-            }
-          ]
-        },
-        rootChildren
-      );
-    };
-  }
-});

package/src/web/pagination/usePagination.ts

@@ -1,13 +0,0 @@
-import type { ComputedRef, InjectionKey, WritableComputedRef } from 'vue';
-import { inject } from 'vue';
-export interface ElPaginationContext {
-  currentPage?: WritableComputedRef<number>;
-  pageCount?: ComputedRef<number>;
-  disabled?: ComputedRef<boolean>;
-  changeEvent?: (val: number) => void;
-  handleSizeChange?: (val: number) => void;
-}
-
-export const elPaginationKey: InjectionKey<ElPaginationContext> = Symbol('elPaginationKey');
-
-export const usePagination = () => inject(elPaginationKey, {});

package/src/web/popover/directive.ts

@@ -1,21 +0,0 @@
-import type { DirectiveBinding, ObjectDirective } from 'vue';
-import type { PopoverInstance } from './popover';
-
-const attachEvents = (el: HTMLElement, binding: DirectiveBinding) => {
-  const popperComponent: PopoverInstance = binding.arg || binding.value;
-  const popover = popperComponent?.popperRef;
-  if (popover) {
-    popover.triggerRef = el;
-  }
-};
-
-export default {
-  mounted(el, binding) {
-    attachEvents(el, binding);
-  },
-  updated(el, binding) {
-    attachEvents(el, binding);
-  }
-} as ObjectDirective;
-
-export const VPopover = 'popover';

package/src/web/popover/index.scss

@@ -1,58 +0,0 @@
-@include b(popover) {
-  @include set-component-css-var('popover', $popover);
-
-  &.#{$namespace}-popper {
-    background: getCssVar('popover-bg-color');
-    min-width: 150px;
-    border-radius: getCssVar('popover-border-radius');
-    border: 1px solid getCssVar('popover-border-color');
-    padding: getCssVar('popover-padding');
-    z-index: getCssVar('index-popper');
-    color: getCssVar('text-color', 'regular');
-    line-height: 1.4;
-    text-align: justify;
-    font-size: getCssVar('popover-font-size');
-    box-shadow: getCssVar('box-shadow-light');
-    word-break: break-all;
-    box-sizing: border-box;
-
-    @include m(plain) {
-      padding: getCssVar('popover-padding-large');
-    }
-
-    @include e(title) {
-      color: getCssVar('popover-title-text-color');
-      font-size: getCssVar('popover-title-font-size');
-      line-height: 1;
-      margin-bottom: 12px;
-    }
-
-    @include e(reference) {
-      &:focus:not(.focusing),
-      &:focus:hover {
-        outline-width: 0;
-      }
-    }
-
-    @include when(dark) {
-      @include set-css-var-value(
-        ('popover', 'bg-color'),
-        var(#{getCssVarName('text-color', 'primary')})
-      );
-      @include set-css-var-value(
-        ('popover', 'border-color'),
-        var(#{getCssVarName('text-color', 'primary')})
-      );
-      @include set-css-var-value(
-        ('popover', 'title-text-color'),
-        var(#{getCssVarName('bg-color')})
-      );
-      color: getCssVar('bg-color');
-    }
-
-    &:focus:active,
-    &:focus {
-      outline-width: 0;
-    }
-  }
-}

package/src/web/popover/index.ts

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