vft 0.0.1

package/src/web/pagination/index.scss

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

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

package/src/web/pagination/pagination.ts

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

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

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

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

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