vft 0.0.1

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

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

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

@@ -0,0 +1,66 @@
+
+
+@include b(select-dropdown) {
+  @include e(option-item) {
+    font-size: getCssVar('select-font-size');
+    // 20 as the padding of option item, 12 as the size of ✓ icon size
+    padding: 0 #{20 + 12}px 0 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: map-get($select-option, 'text-color');
+    height: map-get($select-option, 'height');
+    line-height: map-get($select-option, 'height');
+    box-sizing: border-box;
+    cursor: pointer;
+
+    @include when(disabled) {
+      color: map-get($select-option, 'disabled-color');
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: getCssVar('bg-color');
+      }
+    }
+
+    @include when(selected) {
+      background-color: map-get($select-option, 'hover-background');
+      font-weight: 700;
+
+      &:not(.is-multiple) {
+        color: map-get($select-option, 'selected-text-color');
+      }
+    }
+
+    &.hover {
+      background-color: map-get($select-option, 'hover-background') !important;
+    }
+
+    &:hover {
+      background-color: map-get($select-option, 'hover-background');
+    }
+  }
+
+  @include when(multiple) {
+    .#{$namespace}-select-dropdown__option-item {
+      &.is-selected {
+        color: map-get($select-option, 'selected-text-color');
+        background-color: map-get($select-dropdown, 'bg-color');
+
+        & .#{$namespace}-icon {
+          position: absolute;
+          right: 20px;
+          top: 0;
+          height: inherit;
+          font-size: 12px;
+
+          svg {
+            height: inherit;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+}

package/src/web/select/option.scss

@@ -0,0 +1,32 @@
+@include b(select-dropdown) {
+  @include e(item) {
+    font-size: map-get($select, 'font-size');
+    // 20 as the padding of option item, 12 as the size of ✓ icon size
+    padding: 0 #{20 + 12}px 0 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: map-get($select-option, 'text-color');
+    height: map-get($select-option, 'height');
+    line-height: map-get($select-option, 'height');
+    box-sizing: border-box;
+    cursor: pointer;
+
+    @include when(disabled) {
+      color: map-get($select-option, 'disabled-color');
+      cursor: not-allowed;
+    }
+
+    &.hover,
+    &:hover {
+      background-color: map-get($select-option, 'hover-background');
+    }
+
+    &.selected {
+      color: map-get($select-option, 'selected-text-color');
+      font-weight: 400;
+      
+    }
+  }
+}

package/src/web/select/option.vue

@@ -0,0 +1,110 @@
+<template>
+  <li
+    v-show="visible"
+    :class="[
+      ns.be('dropdown', 'item'),
+      ns.is('disabled', isDisabled),
+      {
+        selected: itemSelected,
+        hover,
+      },
+    ]"
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+  >
+    <slot>
+      <span>{{ currentLabel }}</span>
+    </slot>
+  </li>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  reactive,
+  toRefs
+} from 'vue';
+import { useNamespace } from '../../use';
+import { useOption } from './useOption';
+import type { SelectOptionProxy } from './token';
+
+export default defineComponent({
+  name: 'VriOption',
+  componentName: 'VriOption',
+
+  props: {
+    value: {
+      required: true,
+      type: [String, Number, Boolean, Object]
+    },
+    label: [String, Number],
+    created: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup(props) {
+    const ns = useNamespace('select');
+    const states = reactive({
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hitState: false,
+      hover: false
+    });
+
+    const { currentLabel, itemSelected, isDisabled, select, hoverItem } =
+      useOption(props, states);
+
+    const { visible, hover } = toRefs(states);
+
+    const vm = getCurrentInstance()!.proxy;
+
+    select?.onOptionCreate(vm as unknown as SelectOptionProxy);
+
+    onBeforeUnmount(() => {
+      const key = (vm as unknown as SelectOptionProxy).value;
+      const { selected } = select;
+      const selectedOptions = select?.props.multiple ? selected : [selected];
+      const doesSelected = selectedOptions.some((item: { value: string | number | Record<string, string>; }) => {
+        return item.value === (vm as unknown as SelectOptionProxy).value;
+      });
+      // if option is not selected, remove it from cache
+      nextTick(() => {
+        if (select?.cachedOptions.get(key) === vm && !doesSelected) {
+          select?.cachedOptions.delete(key);
+        }
+      });
+      select?.onOptionDestroy(key, vm);
+    });
+
+    function selectOptionClick() {
+      if (props.disabled !== true && states.groupDisabled !== true) {
+        select?.handleOptionSelect(vm, true);
+      }
+    }
+
+    return {
+      ns,
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      visible,
+      hover,
+      selectOptionClick,
+      states
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import "./option.scss";
+</style>

package/src/web/select/select-dropdown.scss

@@ -0,0 +1,86 @@
+$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+
+@mixin checked-icon {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: map-get($select-option, 'selected-text-color');
+  mask: url('#{$checked-icon}') no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url('#{$checked-icon}') no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+}
+
+@include b(select-dropdown) {
+  z-index: calc(#{getCssVar('index-top')} + 1);
+  border-radius: getCssVar('border-radius-base');
+  box-sizing: border-box;
+
+  @include when(multiple) {
+    & .#{$namespace}-select-dropdown__item.selected {
+      color: map-get($select-option, 'selected-text-color');
+      background-color: map-get($select-dropdown, 'bg-color');
+
+      &.hover {
+        background-color: map-get($select-option, 'hover-background');
+      }
+
+      &::after {
+        @include checked-icon;
+      }
+
+      &.is-disabled {
+        &::after {
+          background-color: getCssVar('text-placeholder-color');
+        }
+      }
+    }
+  }
+
+  & .#{$namespace}-select-dropdown__option-item.is-selected {
+    &::after {
+      @include checked-icon;
+    }
+  }
+
+  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
+    padding: 0;
+  }
+
+  .#{$namespace}-select-dropdown__item.is-disabled {
+    &:hover {
+      background-color: unset;
+    }
+
+    &.selected {
+      color: getCssVar('text-placeholder-color');
+    }
+  }
+}
+
+@include b(select-dropdown__empty) {
+  padding: map-get($select-dropdown, 'empty-padding');
+  margin: 0;
+  text-align: center;
+  color: map-get($select-dropdown, 'empty-color');
+  font-size: getCssVar('select-font-size');
+}
+
+@include b(select-dropdown__wrap) {
+  max-height: map-get($select-dropdown, 'max-height');
+}
+
+@include b(select-dropdown__list) {
+  list-style: none;
+  padding: map-get($select-dropdown, 'padding');
+  margin: 0;
+  box-sizing: border-box;
+}

package/src/web/select/select-dropdown.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    :class="[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]"
+    :style="{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, ref } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import { useNamespace } from '../../use';
+import { selectKey } from './token';
+
+export default defineComponent({
+  name: 'VriSelectDropdown',
+
+  componentName: 'VriSelectDropdown',
+
+  setup() {
+    const select = inject(selectKey)!;
+    const ns = useNamespace('select');
+
+    // computed
+    const popperClass = computed(() => select.props.popperClass);
+    const isMultiple = computed(() => select.props.multiple);
+    const isFitInputWidth = computed(() => select.props.fitInputWidth);
+    const minWidth = ref('');
+
+    function updateMinWidth() {
+      minWidth.value = `${select.selectWrapper?.offsetWidth}px`;
+    }
+
+    onMounted(() => {
+      // TODO: updatePopper
+      // popper.value.update()
+      updateMinWidth();
+      useResizeObserver(select.selectWrapper, updateMinWidth);
+    });
+
+    return {
+      ns,
+      minWidth,
+      popperClass,
+      isMultiple,
+      isFitInputWidth
+    };
+  }
+});
+</script>

package/src/web/select/select.scss

@@ -0,0 +1,213 @@
+@import './select-dropdown.scss';
+
+@mixin select-common($name) {
+  .#{$namespace}-#{$name}__tags-text {
+    @include line-clamp(1);
+
+    display: inline-block;
+    line-height: normal;
+  }
+}
+
+@mixin select-tag-normal {
+  white-space: normal;
+  z-index: getCssVar('index-normal');
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  cursor: pointer;
+
+  .#{$namespace}-tag {
+    box-sizing: border-box;
+    border-color: transparent;
+    margin: 2px 6px 2px 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .#{$namespace}-icon-close {
+      background-color: getCssVar('text-color', 'placeholder');
+      right: -7px;
+      top: 0;
+      color: $color-white;
+
+      &:hover {
+        background-color: getCssVar('text-color', 'secondary');
+      }
+
+      &::before {
+        display: block;
+        transform: translate(0, 0.5px);
+      }
+    }
+  }
+  .#{$namespace}-tag--info {
+    background-color: getCssVar('fill-color');
+  }
+}
+
+@include b(select) {
+  @include set-component-css-var('select', $select);
+}
+
+@include b(select) {
+  @include e(popper) {
+    @include picker-popper(map-get($select-dropdown, 'bg-color'), map-get($select-dropdown, 'border'), map-get($select-dropdown, 'shadow'));
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      line-height: map-get($input-height, $size);
+      .#{$namespace}-select-tags-wrapper {
+        &.has-prefix {
+          margin-left: map-get($select-tags-prefix-padding, $size);
+        }
+      }
+    }
+  }
+
+  @include select-common(select);
+
+  @include e(input) {
+    @include when(small) {
+      height: 14px;
+    }
+
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: getCssVar('select-multiple-input-color');
+    font-size: getCssVar('select-font-size');
+    appearance: none;
+    height: 28px;
+    background-color: transparent;
+  }
+
+  @include e(close) {
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    z-index: getCssVar('index-top');
+    right: 25px;
+    color: getCssVar('select-input-color');
+    line-height: 18px;
+    font-size: getCssVar('select-input-font-size');
+
+    &:hover {
+      color: getCssVar('select-close-hover-color');
+    }
+  }
+
+  @include e(tags) {
+    @include select-tag-normal;
+
+    position: absolute;
+    line-height: normal;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include e(collapse-tags) {
+    @include select-tag-normal;
+  }
+
+  @include e(collapse-tag) {
+    line-height: inherit;
+    height: inherit;
+    display: flex;
+  }
+
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  line-height: map-get($input-height, 'default');
+
+  .#{$namespace}-select-tags-wrapper {
+    &.has-prefix {
+      margin-left: map-get($select-tags-prefix-padding, 'default');
+    }
+  }
+
+  .#{$namespace}-select__tags > span {
+    display: inline-block;
+  }
+
+  &:hover:not(.#{$namespace}-select--disabled) {
+    .#{$namespace}-input__wrapper {
+      box-shadow: 0 0 0 1px getCssVar('select-border-color-hover') inset;
+    }
+  }
+
+  .#{$namespace}-input__wrapper {
+    //@include when(focus) {
+    //  @include inset-input-border(getCssVar('select-input-focus-border-color'), true);
+    //}
+
+    cursor: pointer;
+  }
+
+  .#{$namespace}-input__inner {
+    cursor: pointer;
+
+    &::selection {
+      outline: none;
+    }
+  }
+
+  .#{$namespace}-input {
+    display: flex;
+
+    & .#{$namespace}-select__caret {
+      @include when(reverse) {
+        transform: rotateZ(-180deg);
+      }
+
+      @include when(show-close) {
+        font-size: getCssVar('select-font-size');
+        text-align: center;
+        transform: rotateZ(0deg);
+        border-radius: getCssVar('border-radius-circle');
+        color: getCssVar('select-input-color');
+        transition: getCssVar('transition', 'color');
+
+        &:hover {
+          color: getCssVar('select-close-hover-color');
+        }
+      }
+
+      color: getCssVar('select-input-color');
+      font-size: getCssVar('select-input-font-size');
+      transition: transform getCssVar('transition-duration');
+      transform: rotateZ(0deg);
+      cursor: pointer;
+
+      &.#{$namespace}-icon {
+        position: relative;
+        height: inherit;
+        z-index: 2;
+      }
+    }
+
+    &.is-disabled {
+      & .#{$namespace}-input__wrapper {
+        cursor: not-allowed;
+
+        &:hover {
+          //@include inset-input-border(#{getCssVar('select-disabled-border')});
+        }
+      }
+      & .#{$namespace}-input__inner {
+        cursor: not-allowed;
+      }
+      & .#{$namespace}-select__caret {
+        cursor: not-allowed;
+      }
+    }
+
+    &.is-focus .#{$namespace}-input__wrapper {
+      //@include inset-input-border(getCssVar('select-input-focus-border-color'), true);
+    }
+  }
+}

package/src/web/select/token.ts

@@ -0,0 +1,56 @@
+import type { InjectionKey, Ref } from 'vue';
+
+interface SelectGroupContext {
+  disabled: boolean
+}
+
+export interface QueryChangeCtx {
+  query: string
+}
+
+export interface SelectContext {
+  props: {
+    multiple?: boolean
+    multipleLimit?: number
+    valueKey?: string
+    modelValue?: string | number | unknown | unknown[]
+    popperClass?: string
+    remote?: boolean
+    fitInputWidth?: boolean
+  }
+  queryChange: Ref<QueryChangeCtx>
+  groupQueryChange: Ref<string>
+  selectWrapper: HTMLElement
+  cachedOptions: Map<any, any>
+  hoverIndex: number
+  optionsCount: number
+  filteredOptionsCount: number
+  options: Map<any, any>
+  optionsArray: any[]
+  selected: any | any[]
+  setSelected(): void
+  onOptionCreate(vm: SelectOptionProxy): void
+  onOptionDestroy(key: number | string | Record<string, any>): void
+  handleOptionSelect(vm: unknown, byClick: boolean): void
+}
+
+// For individual build sharing injection key, we had to make `Symbol` to string
+export const selectGroupKey =
+  'VriSelectGroup' as unknown as InjectionKey<SelectGroupContext>;
+
+export const selectKey = 'VriSelect' as unknown as InjectionKey<SelectContext>;
+
+export interface SelectOptionProxy {
+  value: string | number | Record<string, string>
+  label: string | number
+  created: boolean
+  disabled: boolean
+  currentLabel: string
+  itemSelected: boolean
+  isDisabled: boolean
+  select: SelectContext
+  hoverItem: () => void
+  visible: boolean
+  hover: boolean
+  selectOptionClick: () => void
+}