vft 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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