vft 0.0.1 → 0.0.3

package/src/web/select/index.vue

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

@@ -1,49 +0,0 @@
-@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;
-  }
-}

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

@@ -1,97 +0,0 @@
-<template>
-  <ul v-show="visible" :class="ns.be('group', 'wrap')">
-    <li :class="ns.be('group', 'title')">{{ label }}</li>
-    <li>
-      <ul :class="ns.b('group')">
-        <slot />
-      </ul>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  getCurrentInstance,
-  inject,
-  onMounted,
-  provide,
-  reactive,
-  ref,
-  toRaw,
-  toRefs,
-  watch
-} from 'vue';
-import { useNamespace } from '../../use';
-import { selectGroupKey, selectKey } from './token';
-
-export default defineComponent({
-  name: 'VriOptionGroup',
-  componentName: 'VriOptionGroup',
-
-  props: {
-    label: String,
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const ns = useNamespace('select');
-    const visible = ref(true);
-    const instance = getCurrentInstance()!;
-    const children = ref([]);
-
-    provide(
-      selectGroupKey,
-      reactive({
-        ...toRefs(props)
-      })
-    );
-
-    const select = inject(selectKey);
-
-    onMounted(() => {
-      children.value = flattedChildren(instance.subTree);
-    });
-
-    // get all instances of options
-    const flattedChildren = (node: any) => {
-      const children: any[] = [];
-      if (Array.isArray(node.children)) {
-        node.children.forEach((child: { type: { name: string; }; component: { proxy: any; }; children: string | any[]; }) => {
-          if (
-            child.type &&
-            child.type.name === 'ElOption' &&
-            child.component &&
-            child.component.proxy
-          ) {
-            children.push(child.component.proxy);
-          } else if (child.children?.length) {
-            children.push(...flattedChildren(child));
-          }
-        });
-      }
-      return children;
-    };
-
-    const { groupQueryChange } = toRaw(select);
-    watch(
-      groupQueryChange,
-      () => {
-        visible.value = children.value.some((option) => option.visible === true);
-      },
-      { flush: 'post' }
-    );
-
-    return {
-      visible,
-      ns
-    };
-  }
-});
-</script>
-
-<style lang="scss">
-@import "./option-group.scss";
-</style>