vft 0.0.1

package/src/web/scrollbar/types.ts

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

package/src/web/scrollbar/util.ts

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

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

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

package/src/web/select/index.vue

@@ -0,0 +1,555 @@
+<template>
+  <div ref="selectWrapper" v-click-outside:[popperPaneRef]="handleClose" :class="wrapperKls" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @click.stop="toggleMenu">
+    <el-tooltip
+      ref="tooltipRef"
+      :visible="dropMenuVisible"
+      :placement="placement"
+      :teleported="teleported"
+      :popper-class="[nsSelect.e('popper'), popperClass]"
+      :fallback-placements="['bottom-start', 'top-start', 'right', 'left']"
+      :effect="effect"
+      pure
+      trigger="click"
+      :transition="`${nsSelect.namespace.value}-zoom-in-top`"
+      :stop-popper-mouse-event="false"
+      :gpu-acceleration="false"
+      :persistent="persistent"
+      @show="handleMenuEnter"
+    >
+      <template #default>
+        <div class="select-trigger" @mouseenter="inputHovering = true" @mouseleave="inputHovering = false">
+          <div v-if="multiple" ref="tags" :class="nsSelect.e('tags')" :style="selectTagsStyle">
+            <span v-if="collapseTags && selected.length" :class="[nsSelect.b('tags-wrapper'), { 'has-prefix': prefixWidth && selected.length }]">
+              <el-tag
+                :closable="!selectDisabled && !selected[0].isDisabled"
+                :size="collapseTagSize"
+                :hit="selected[0].hitState"
+                :type="tagType"
+                disable-transitions
+                @close="deleteTag($event, selected[0])"
+              >
+                <span :class="nsSelect.e('tags-text')" :style="tagTextStyle">
+                  {{ selected[0].currentLabel }}
+                </span>
+              </el-tag>
+              <el-tag v-if="selected.length > 1" :closable="false" :size="collapseTagSize" :type="tagType" disable-transitions>
+                <el-tooltip
+                  v-if="collapseTagsTooltip"
+                  :disabled="dropMenuVisible"
+                  :fallback-placements="['bottom', 'top', 'right', 'left']"
+                  :effect="effect"
+                  placement="bottom"
+                  :teleported="teleported"
+                >
+                  <template #default>
+                    <span :class="nsSelect.e('tags-text')">+ {{ selected.length - 1 }}</span>
+                  </template>
+                  <template #content>
+                    <div :class="nsSelect.e('collapse-tags')">
+                      <div v-for="(item, idx) in selected.slice(1)" :key="idx" :class="nsSelect.e('collapse-tag')">
+                        <el-tag
+                          :key="getValueKey(item)"
+                          class="in-tooltip"
+                          :closable="!selectDisabled && !item.isDisabled"
+                          :size="collapseTagSize"
+                          :hit="item.hitState"
+                          :type="tagType"
+                          disable-transitions
+                          :style="{ margin: '2px' }"
+                          @close="deleteTag($event, item)"
+                        >
+                          <span
+                            :class="nsSelect.e('tags-text')"
+                            :style="{
+                              maxWidth: inputWidth - 75 + 'px'
+                            }"
+                          >
+                            {{ item.currentLabel }}
+                          </span>
+                        </el-tag>
+                      </div>
+                    </div>
+                  </template>
+                </el-tooltip>
+                <span v-else :class="nsSelect.e('tags-text')">+ {{ selected.length - 1 }}</span>
+              </el-tag>
+            </span>
+            <!-- <div> -->
+            <transition v-if="!collapseTags" @after-leave="resetInputHeight">
+              <span :class="[nsSelect.b('tags-wrapper'), { 'has-prefix': prefixWidth && selected.length }]">
+                <el-tag
+                  v-for="item in selected"
+                  :key="getValueKey(item)"
+                  :closable="!selectDisabled && !item.isDisabled"
+                  :size="collapseTagSize"
+                  :hit="item.hitState"
+                  :type="tagType"
+                  disable-transitions
+                  @close="deleteTag($event, item)"
+                >
+                  <span :class="nsSelect.e('tags-text')" :style="{ maxWidth: inputWidth - 75 + 'px' }">{{ item.currentLabel }}</span>
+                </el-tag>
+              </span>
+            </transition>
+            <!-- </div> -->
+            <input
+              v-if="filterable"
+              ref="input"
+              v-model="query"
+              type="text"
+              :class="[nsSelect.e('input'), nsSelect.is(selectSize)]"
+              :disabled="selectDisabled"
+              :autocomplete="autocomplete"
+              :style="{
+                marginLeft: (prefixWidth && !selected.length) || tagInMultiLine ? `${prefixWidth}px` : '',
+                flexGrow: 1,
+                width: `${inputLength / (inputWidth - 32)}%`,
+                maxWidth: `${inputWidth - 42}px`
+              }"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              @keyup="managePlaceholder"
+              @keydown="resetInputState"
+              @keydown.down.prevent="navigateOptions('next')"
+              @keydown.up.prevent="navigateOptions('prev')"
+              @keydown.esc="handleKeydownEscape"
+              @keydown.enter.stop.prevent="selectOption"
+              @keydown.delete="deletePrevTag"
+              @keydown.tab="visible = false"
+              @compositionstart="handleComposition"
+              @compositionupdate="handleComposition"
+              @compositionend="handleComposition"
+              @input="debouncedQueryChange"
+            />
+          </div>
+          <div v-else>
+            <slot name="title" />
+          </div>
+          <v-input
+            v-if="false"
+            :id="id"
+            ref="reference"
+            v-model="selectedLabel"
+            type="text"
+            :placeholder="currentPlaceholder"
+            :name="name"
+            :autocomplete="autocomplete"
+            :size="selectSize"
+            :disabled="selectDisabled"
+            :readonly="readonly"
+            :validate-event="false"
+            :class="[nsSelect.is('focus', visible)]"
+            :tabindex="multiple && filterable ? -1 : undefined"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @input="debouncedOnInputChange"
+            @paste="debouncedOnInputChange"
+            @compositionstart="handleComposition"
+            @compositionupdate="handleComposition"
+            @compositionend="handleComposition"
+            @keydown.down.stop.prevent="navigateOptions('next')"
+            @keydown.up.stop.prevent="navigateOptions('prev')"
+            @keydown.enter.stop.prevent="selectOption"
+            @keydown.esc="handleKeydownEscape"
+            @keydown.tab="visible = false"
+          >
+            <template v-if="$slots.prefix" #prefix>
+              <div style="height: 100%; display: flex; justify-content: center; align-items: center">
+                <slot name="prefix" />
+              </div>
+            </template>
+            <template #suffix>
+              <v-icon v-if="iconComponent?.icon && !showClose" v-bind="iconComponent" :class="[nsSelect.e('caret'), nsSelect.e('icon'), iconReverse]" />
+              <span @click="handleClearClick" :class="[nsSelect.e('caret'), nsSelect.e('icon')]">
+                <v-icon v-if="showClose" v-bind="{ icon: 'vi-close-full', size: 16 }" />
+              </span>
+            </template>
+          </v-input>
+        </div>
+      </template>
+      <template #content>
+        <select-menu>
+          <v-scrollbar
+            v-show="options.size > 0 && !loading"
+            ref="scrollbar"
+            tag="ul"
+            :wrap-class="nsSelect.be('dropdown', 'wrap')"
+            :view-class="nsSelect.be('dropdown', 'list')"
+            :class="[nsSelect.is('empty', !allowCreate && Boolean(query) && filteredOptionsCount === 0)]"
+          >
+            <SeOption v-if="showNewOption" :value="query" :created="true" />
+            <slot />
+          </v-scrollbar>
+          <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.size === 0))">
+            <slot v-if="$slots.empty" name="empty" />
+            <p v-else :class="nsSelect.be('dropdown', 'empty')">
+              {{ emptyText }}
+            </p>
+          </template>
+        </select-menu>
+      </template>
+    </el-tooltip>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, onMounted, provide, reactive, toRefs, unref } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import { placements } from '@popperjs/core';
+import { ClickOutside, useFocus, useLocale, ElTooltip, ElTag } from 'element-plus';
+import { useNamespace } from '../../use';
+import { Input as VInput } from '../input';
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@vri/constants';
+import { type ComponentSize, isValidComponentSize } from './constants';
+import SeOption from './option.vue';
+import { Icon as VIcon } from '../../web';
+import { Scrollbar as VScrollbar } from '../scrollbar';
+import SelectMenu from './select-dropdown.vue';
+import { useSelect, useSelectStates } from './useSelect';
+import { selectKey } from './token';
+import type { PropType } from 'vue';
+import type { SelectContext } from './token';
+
+const COMPONENT_NAME = 'vri-select';
+export default defineComponent({
+  name: COMPONENT_NAME,
+  components: {
+    VInput,
+    SelectMenu,
+    SeOption,
+    ElTag,
+    ElTooltip,
+    VIcon,
+    VScrollbar
+  },
+  directives: { ClickOutside },
+  props: {
+    name: String,
+    id: String,
+    modelValue: {
+      type: [Array, String, Number, Boolean, Object],
+      default: undefined
+    },
+    autocomplete: {
+      type: String,
+      default: 'off'
+    },
+    automaticDropdown: Boolean,
+    size: {
+      type: String as PropType<ComponentSize>,
+      validator: isValidComponentSize
+    },
+    effect: {
+      type: String as PropType<'light' | 'dark' | string>,
+      default: 'light'
+    },
+    disabled: Boolean,
+    clearable: Boolean,
+    filterable: Boolean,
+    allowCreate: Boolean,
+    loading: Boolean,
+    popperClass: {
+      type: String,
+      default: ''
+    },
+    remote: Boolean,
+    loadingText: String,
+    noMatchText: String,
+    noDataText: String,
+    remoteMethod: Function,
+    filterMethod: Function,
+    single: Boolean,
+    multiple: Boolean,
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    placeholder: {
+      type: String
+    },
+    defaultFirstOption: Boolean,
+    reserveKeyword: {
+      type: Boolean,
+      default: true
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    collapseTags: Boolean,
+    collapseTagsTooltip: {
+      type: Boolean,
+      default: false
+    },
+    teleported: {
+      type: Boolean,
+      default: true
+    },
+    persistent: {
+      type: Boolean,
+      default: true
+    },
+
+    fitInputWidth: {
+      type: Boolean,
+      default: false
+    },
+    // eslint-disable-next-line vue/require-prop-types
+    tagType: {
+      type: String,
+      values: ['success', 'info', 'warning', 'danger', ''],
+      default: 'info'
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    remoteShowSuffix: {
+      type: Boolean,
+      default: false
+    },
+    suffixTransition: {
+      type: Boolean,
+      default: true
+    },
+    placement: {
+      type: String,
+      values: placements,
+      default: 'bottom-start'
+    }
+  },
+  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'remove-tag', 'clear', 'visible-change', 'focus', 'blur'],
+
+  setup(props, ctx) {
+    const nsSelect = useNamespace('select');
+    const nsInput = useNamespace('input');
+    const { t } = useLocale();
+    const states = useSelectStates(props);
+    const {
+      optionsArray,
+      selectSize,
+      readonly,
+      handleResize,
+      collapseTagSize,
+      debouncedOnInputChange,
+      debouncedQueryChange,
+      deletePrevTag,
+      deleteTag,
+      deleteSelected,
+      handleOptionSelect,
+      scrollToOption,
+      setSelected,
+      resetInputHeight,
+      managePlaceholder,
+      showClose,
+      selectDisabled,
+      iconComponent,
+      iconReverse,
+      showNewOption,
+      emptyText,
+      toggleLastOptionHitState,
+      resetInputState,
+      handleComposition,
+      onOptionCreate,
+      onOptionDestroy,
+      handleMenuEnter,
+      handleFocus,
+      blur,
+      handleBlur,
+      handleClearClick,
+      handleClose,
+      handleKeydownEscape,
+      toggleMenu,
+      selectOption,
+      getValueKey,
+      navigateOptions,
+      dropMenuVisible,
+
+      reference,
+      input,
+      tooltipRef,
+      tags,
+      selectWrapper,
+      scrollbar,
+      queryChange,
+      groupQueryChange,
+      handleMouseEnter,
+      handleMouseLeave
+    } = useSelect(props, states, ctx);
+
+    const { focus } = useFocus(reference);
+
+    const {
+      inputWidth,
+      selected,
+      inputLength,
+      filteredOptionsCount,
+      visible,
+      softFocus,
+      selectedLabel,
+      hoverIndex,
+      query,
+      inputHovering,
+      currentPlaceholder,
+      menuVisibleOnFocus,
+      isOnComposition,
+      isSilentBlur,
+      options,
+      cachedOptions,
+      optionsCount,
+      prefixWidth,
+      tagInMultiLine
+    } = toRefs(states);
+
+    const wrapperKls = computed(() => {
+      const classList = [nsSelect.b()];
+      const _selectSize = unref(selectSize);
+      if (_selectSize) {
+        classList.push(nsSelect.m(_selectSize));
+      }
+      if (props.disabled) {
+        classList.push(nsSelect.m('disabled'));
+      }
+      return classList;
+    });
+
+    const selectTagsStyle = computed(() => ({
+      maxWidth: `${unref(inputWidth) - 32}px`,
+      width: '100%'
+    }));
+
+    const tagTextStyle = computed(() => {
+      const maxWidth = unref(inputWidth) > 123 ? unref(inputWidth) - 123 : unref(inputWidth) - 75;
+      return { maxWidth: `${maxWidth}px` };
+    });
+
+    provide(
+      selectKey,
+      reactive({
+        props,
+        options,
+        optionsArray,
+        cachedOptions,
+        optionsCount,
+        filteredOptionsCount,
+        hoverIndex,
+        handleOptionSelect,
+        onOptionCreate,
+        onOptionDestroy,
+        selectWrapper,
+        selected,
+        setSelected,
+        queryChange,
+        groupQueryChange
+      }) as unknown as SelectContext
+    );
+
+    onMounted(() => {
+      states.cachedPlaceHolder = currentPlaceholder.value = props.placeholder || t('el.select.placeholder');
+      if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        currentPlaceholder.value = '';
+      }
+      useResizeObserver(selectWrapper, handleResize);
+      if (props.remote && props.multiple) {
+        resetInputHeight();
+      }
+      nextTick(() => {
+        const refEl = reference.value && reference.value.$el;
+        if (!refEl) return;
+        inputWidth.value = refEl.getBoundingClientRect().width;
+
+        if (ctx.slots.prefix) {
+          const prefix = refEl.querySelector(`.${nsInput.e('prefix')}`);
+          prefixWidth.value = Math.max(prefix.getBoundingClientRect().width + 5, 30);
+        }
+      });
+      setSelected();
+    });
+
+    if (props.multiple && !Array.isArray(props.modelValue)) {
+      ctx.emit(UPDATE_MODEL_EVENT, []);
+    }
+    if (!props.multiple && Array.isArray(props.modelValue)) {
+      ctx.emit(UPDATE_MODEL_EVENT, '');
+    }
+
+    const popperPaneRef = computed(() => {
+      return tooltipRef.value?.popperRef?.contentRef;
+    });
+
+    return {
+      tagInMultiLine,
+      prefixWidth,
+      selectSize,
+      readonly,
+      handleResize,
+      collapseTagSize,
+      debouncedOnInputChange,
+      debouncedQueryChange,
+      deletePrevTag,
+      deleteTag,
+      deleteSelected,
+      handleOptionSelect,
+      scrollToOption,
+      inputWidth,
+      selected,
+      inputLength,
+      filteredOptionsCount,
+      visible,
+      softFocus,
+      selectedLabel,
+      hoverIndex,
+      query,
+      inputHovering,
+      currentPlaceholder,
+      menuVisibleOnFocus,
+      isOnComposition,
+      isSilentBlur,
+      options,
+      resetInputHeight,
+      managePlaceholder,
+      showClose,
+      selectDisabled,
+      iconComponent,
+      iconReverse,
+      showNewOption,
+      emptyText,
+      toggleLastOptionHitState,
+      resetInputState,
+      handleComposition,
+      handleMenuEnter,
+      handleFocus,
+      blur,
+      handleBlur,
+      handleClearClick,
+      handleClose,
+      handleKeydownEscape,
+      toggleMenu,
+      selectOption,
+      getValueKey,
+      navigateOptions,
+      dropMenuVisible,
+      focus,
+
+      reference,
+      input,
+      tooltipRef,
+      popperPaneRef,
+      tags,
+      selectWrapper,
+      scrollbar,
+
+      wrapperKls,
+      selectTagsStyle,
+      nsSelect,
+      tagTextStyle,
+      handleMouseEnter,
+      handleMouseLeave
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import './select.scss';
+</style>

package/src/web/select/option-group.scss

@@ -0,0 +1,49 @@
+@include b(select-group) {
+  $gap: 20px;
+
+  margin: 0;
+  padding: 0;
+
+  @include e(wrap) {
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &:not(:last-of-type) {
+      padding-bottom: 24px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: $gap;
+        right: $gap;
+        bottom: 12px;
+        height: 1px;
+        background: getCssVar('border-color-light');
+      }
+    }
+  }
+
+  @include e(split) {
+    &-dash {
+      position: absolute;
+      left: $gap;
+      right: $gap;
+      height: 1px;
+      background: getCssVar('border-color-light');
+    }
+  }
+
+  @include e(title) {
+    padding-left: $gap;
+    font-size: map-get($select-group, 'font-size');
+    color: map-get($select-group, 'text-color');
+    line-height: map-get($select-group, 'height');
+  }
+
+  & .#{$namespace}-select-dropdown__item {
+    padding-left: $gap;
+  }
+}