its_ui_vite 0.0.2 → 0.0.4

package/src/components/CSelect.vue

@@ -1,28 +1,51 @@
 <template>
-  <div :style="`--transition: ${transition}ms`" :class="[classes.root, variant]">
-    <CInput ref="input" :placeholder="activePlaceholder" v-model.trim="findValue" :class="classes.input">
+  <div
+    ref="root"
+    :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
+    :class="[classes.root, variant, size, { disabled }]"
+  >
+    <CInput :placeholder="activePlaceholder" :disabled="disabled" :size="size" :width="width" v-model.trim="findValue" :class="[classes.input, {open: isOpen}]">
       <template #customIcon>
-        <CIcons class="c-select__inp_icon" :iconId="isMultiple ? 'arrow' : 'lens'" />
+        <CIcons :class="['c-select__inp_icon']" :iconId="isMultiple ? 'arrow' : 'lens'" />
       </template>
     </CInput>
 
-    <CScroll :scrollY="scrollY" :class="['c-select__list', {open: isOpen}]">
-      <button 
+    <CScroll :scrollY="scrollY" :class="[classes.list, listPosition, {open: isOpen}]">
+      <button
+        v-if="isSelectAll && foundOptions.length > 1"
         :class="classes.optionBtn"
+        @click="debounceEvent({}, $event)"
+      >
+        <CCheckbox
+          :class="classes.option"
+          size='sm'
+          :modelValue="options.length === activeOptions.size"
+        >
+          <span class="c-select__list_item-text">
+            {{ text.selectAll }}
+          </span>
+        </CCheckbox>
+      </button>
+      <button 
         v-for="item in foundOptions"
-        :key="item.id"
+        :key="item.value"
         @click="debounceEvent(item, $event)"
+        :class="classes.optionBtn"
       >
         <component 
           :class="classes.option"
           :is="isMultiple ? 'CCheckbox' : 'div'"
-          v-bind.props="{size: 'sm'}"
+          v-bind.props="getCheckboxProp(item)"
         >
-          {{ item.text }}
+          <span class="c-select__list_item-text">
+            {{ item.text }}
+          </span>
         </component>
       </button>
       <div v-if="foundOptions.length < 1" :class="[classes.option, 'not-found']">
-        ничего не найдено
+        <span class="c-select__list_item-text">
+          {{ text.notFound }}
+        </span>
       </div>
     </CScroll>
   </div>
@@ -41,23 +64,36 @@ export default {
     return {
       transition: 200,
       isMultiple: this.variant === 'multiple',
+      isSelectAll: this.selectAll && this.variant === 'multiple',
+      listIndentY: 12,
       scrollY: 0,
       activeOptions: new Set(),
+      oldActiveOptions: new Set(),
       findValue: '',
       activePlaceholder: this.placeholder,
+      listPosition: 'bottom',
 
       debounceEvent: () => {},
 
       isOpen: false,
+
       classes: {
         root: 'c-select',
         input: 'c-select__inp',
+        list: 'c-select__list',
         option: 'c-select__list_item',
         optionBtn: 'c-select__list_btn',
       },
     }
   },
 
+  emits: ['change'],
+
+  model: {
+    event: 'change',
+    prop: 'modelValue',
+  },
+
   props: {
     options: {
       type: Array,
@@ -72,55 +108,200 @@ export default {
       validator: getPropValidator('CSelect', 'variant', ['default', 'multiple']),
     },
 
+    size: {
+      type: String,
+
+      default: 'lg',
+      validator: getPropValidator('CSelect', 'size', ['lg', 'md', 'sm'])
+    },
+
+    selectAll: {
+      type: Boolean,
+
+      default: false,
+    },
+
+    autocomplete: {
+      type: Boolean,
+
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+
+      default: false,
+    },
+
+    transformVal: {
+      type: Boolean,
+
+      default: false,
+    },
+
+    locale: {
+      type: String,
+
+      default: 'rus',
+      validator: getPropValidator('CSelect', 'variant', ['rus', 'usa', 'tur', 'spa']),
+    },
+
     placeholder: {
       type: String,
 
-      default: 'выберете вариант',
-    }
+      default: 'выберите вариант',
+    },
+
+    width: {
+      type: String,
+
+      default: '100%'
+    },
+
+    modelValue: {
+      type: Array
+    },
   },
 
   methods: {
     handleOption(option, evt) {
-      const input = evt.target.closest(`.${this.classes.optionBtn}`).querySelector('input');
+      if (this.isSelectAll) this.setAllOption(evt)
+      this.setOption(option, evt);
+
+      this.setActivePlaceholder()
+      if (!this.isMultiple) this.dispatchEmit()
+    },
+
+    setOption(option, evt) {
+      if (!option?.value) return;
+
+      const input = evt?.target?.closest(`.${this.classes.optionBtn}`)?.querySelector('input');
       const isAdd = !this.isMultiple || input?.checked
 
       if (!this.isMultiple) this.activeOptions.clear()
 
       this.activeOptions[isAdd ? 'add' : 'delete'](option)
+    },
 
-      this.setActivePlaceholder()
-      this.$emit('change', [...this.activeOptions])
+
+    getCheckboxProp(option) {
+      const isChecked = !!([...this.activeOptions].find(({ value }) => option.value === value));
+      
+      if (!this.isMultiple) return {}
+      return {
+        size: 'sm',
+        modelValue: isChecked,
+      }
+    },
+
+    setAllOption(evt) {
+      const list = evt.target.closest(`.${this.classes.list}`);
+      const inputs = list.querySelectorAll(`.${this.classes.optionBtn} input`);
+      const inputsChecked = list.querySelectorAll(`.${this.classes.optionBtn}:not(:first-child) input:checked`);
+      const selectAllInput = inputs[0];
+
+      const isSelectAllInput = evt.target.closest(`.${this.classes.option}`).querySelector(`.${this.classes.option} input`) === selectAllInput;
+      const isOneNotChecked = inputs.length - 1 === inputsChecked.length;
+
+      if (isSelectAllInput) {
+        inputs.forEach((inp) => {
+          inp.checked = selectAllInput.checked;
+        });
+
+        this.options.forEach((option) => {
+          this.activeOptions[selectAllInput.checked ? 'add' : 'delete'](option);
+        });
+      } else {
+        selectAllInput.checked = isOneNotChecked;
+      }
     },
 
     setActivePlaceholder() {
       this.findValue = ''
 
       const placeholderText = [...this.activeOptions].map(({text}) => text).join('')
-      const newPlaceholder = this.activeOptions.size > 1 ? 'несколько' : placeholderText
-
-      console.log([...this.activeOptions], 'placeholderText');
+      const newPlaceholder = this.activeOptions.size > 1 ? this.text.multiple : placeholderText
 
       this.activePlaceholder = newPlaceholder || this.placeholder
     },
-  },
 
-  mounted() {
-    this.debounceEvent = fixDblEvent(this.handleOption)
-    console.log(this.debounceEvent);
+    isChange() {
+      let biggerSet = this.activeOptions
+      let smallerSet = this.oldActiveOptions
+      let isChange = false
+      
+      if (biggerSet.size < smallerSet.size) [biggerSet, smallerSet] = [smallerSet, biggerSet]
+
+      biggerSet.forEach((item) => {
+        if (!isChange) isChange = !smallerSet.has(item)
+      }) 
 
-    document.body.addEventListener('click', (evt) => {
-      const input = evt.target.closest(`.${this.classes.input}`)
+      return isChange
+    },
 
-      if (input === this.$refs.input?.$el) return this.isOpen = true
+    setOldOptions() {
+      this.oldActiveOptions.clear()
+      this.activeOptions.forEach((item) => this.oldActiveOptions.add(item))
+    },
+
+    setListPosition() {
+      const windowHeight = window.innerHeight;
+      const inputHeight = this.$refs.root.clientHeight;
+      const listPosition = this.$refs.root.querySelector(`.${this.classes.list}`).getBoundingClientRect()
+      const isTop = this.listPosition === 'top'
       
-      this.isOpen = false
+      const indentTop = (listPosition.height + inputHeight) * (isTop ? 1 : 0) + this.listIndentY
+      const indent = windowHeight - listPosition.y - indentTop
+
+      this.listPosition = indent > listPosition.height ? 'bottom' : 'top'
+    },
+
+    handleClick(evt) {
+      const classes = `.${this.classes.input},.c-input__custom-icon${this.isMultiple ? ',.c-input__custom-icon,.c-select__list_btn' : ''}`
+      const root = evt.target.closest(`.${this.classes.root}`)
+      const domElements = evt.target.closest(classes)
+
+      const isRoot = root === this.$refs.root
+      const isToggle = evt.target.closest('.c-input__custom-icon')
+
+      if (isRoot && domElements) {
+        this.setListPosition()
+        this.isOpen = isToggle ? !this.isOpen : true
+
+        return
+      }
+
+      if (this.isOpen) {
+        this.isOpen = false
+
+        if (this.isMultiple) this.dispatchEmit()
+      }
+    },
+
+    dispatchEmit() {
+      const options = [...this.activeOptions].map((option) => this.transformVal ? option.value : option)
+      if (this.isChange()) this.$emit('change', options)
 
       setTimeout(() => {
         this.findValue = ''
+        
+        this.setOldOptions()
       }, this.transition);
-    })
+    },
   },
 
+  mounted() {
+    this.debounceEvent = fixDblEvent(this.handleOption)
+
+    document.body.addEventListener('click', this.handleClick)
+    if (!this.isMultiple && this.autocomplete) this.debounceEvent(this.options[0], {});
+  },
+
+  unmounted() {
+    document.body.removeEventListener('click', this.handleClick)
+  },
+
+
   computed: {
     foundOptions() {
       const reg = new RegExp(this.findValue.replace(/\W/g, '\\$&'), 'i')
@@ -128,6 +309,68 @@ export default {
 
       return this.options.filter(({text}) => reg.test(text))
     },
+
+    text() {
+      const lang = {
+        rus: {
+          multiple: "несколько",
+          notFound: "Ничего не найдено",
+          selectAll: "Выбрать все варианты",
+        },
+
+        usa: {
+          multiple: "Multiple",
+          notFound: "There are no matches",
+          selectAll: "Choose all options",
+        },
+
+        tur: {
+          multiple: "Multiple",
+          notFound: "There are no matches",
+          selectAll: "Choose all options",
+        },
+
+        spa: {
+          multiple: "Multiple",
+          notFound: "No se encontraron coincidencias",
+          selectAll: "Seleccionar todas las opciones",
+        },
+      };
+
+      return lang[this.locale]
+    },
+  },
+
+  watch: {
+    modelValue: {
+      handler(options) {
+        if (!(options?.length || options?.size)) return;
+        this.activeOptions.clear();
+        this.oldActiveOptions.clear();
+
+        options = this.isMultiple ? options : options.slice(0, 1);
+        [...options].forEach((item) => {
+
+          let option = this.options.find(({ value }) => value === (item?.value || item))
+
+          if (!item?.value) {
+            option = this.options.find(({ value }) => value === item);
+          } else {
+
+          }
+          
+          if (undefined === option) return;
+
+          this.activeOptions.add(option);
+          this.oldActiveOptions.add(option);
+        })
+
+        this.setActivePlaceholder()
+      },
+
+      deep: true,
+      immediate: true,
+    }
   },
 
   components: {
@@ -141,50 +384,104 @@ export default {
 
 <style lang="scss">
 .c-select {
+  --icon-indent: 50px;
+  --icon-position: 15px;
+  --option-height: 48px;
+  --font-size: 16px;
+
   position: relative;
 
+  width: var(--width, 100%);
+
+  button,
+  input,
+  div,
+  a {
+    font-family: inherit;
+    font-weight: inherit;
+  }
+
   // prop.variant
   &.default {
     .c-select__inp .c-input {
-      padding-left: 50px;
+      padding-left: var(--icon-indent);
     }
 
     .c-input__custom-icon {
-      left: 15px;
+      left: var(--icon-position);
       right: auto;
     }
   }
 
   &.multiple {
-    .c-input:focus {
-      &~ .c-input__custom-icon svg {
-        transform: rotate(0deg);
+    .c-select__inp {
+      &.open {
+        .c-input__custom-icon svg {
+          transform: rotate(0deg);
+        }
       }
-    }
 
-    .c-input__custom-icon svg {
-      transform: rotate(180deg);
+      .c-input {
+        padding-right: var(--icon-indent);
+      }
+
+      .c-input__custom-icon {
+        right: var(--icon-position);
+
+        pointer-events: all;
+
+        svg {
+          transform: rotate(180deg);
+        }
+      }
     }
   }
   // ./prop.variant
 
+  // prop.size
+  &.sm {
+    --icon-indent: 40px;
+    --icon-position: 10px;
+    --option-height: 44px;
+    --font-size: 14px;
+  }
+  // ./prop.size
+
+  // prop.disabled
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  // ./prop.disabled
+  
+
   &__inp {
+    &.open {
+      .c-input {
+        border-color: var(--green-light);
+      }
+
+      .c-input__custom-icon svg {
+        stroke: var(--green-light);
+      }
+    }
+
     .c-input__custom-icon {
+      cursor: pointer;
+
       opacity: 1;
-    }
 
-    .c-input:focus {
-      &~ .c-input__custom-icon svg {
-        stroke: var(--green-light);
+      svg {
+        stroke: var(--white);
       }
     }
   }
 
   &__list {
     position: absolute;
-    top: 100%;
     left: 0;
     transform: translate(0px, 0px);
+    z-index: 20;
 
     width: 100%;
     max-height: 240px;
@@ -200,8 +497,20 @@ export default {
     opacity: 0;
     pointer-events: none;
 
+    &.bottom {
+      --indent-y: var(--list-indent-y);
+
+      top: 100%;
+    }
+
+    &.top {
+      --indent-y: calc(var(--list-indent-y) * -1);
+
+      bottom: 100%;
+    }
+
     &.open {
-      transform: translate(0, 12px);
+      transform: translate(0, var(--indent-y));
 
       opacity: 1;
       pointer-events: all;
@@ -235,13 +544,16 @@ export default {
         }
       }
 
+      &-text {
+        font-size: var(--font-size);       
+      }
+
       .c-checkbox__text {
         color: inherit;
       }
     }
 
     &_btn {
-      height: 48px;
       width: 100%;
       
       flex-shrink: 0;
@@ -249,15 +561,26 @@ export default {
       align-items: center;
 
       border: none;
+      padding: 0;
 
-      font-size: 16px;
+      text-align: left;
+      font-size: var(--font-size);
 
       background: transparent;
 
+      cursor: pointer;
+
       &:hover {
         background: var(--green-dark);
       }
+
+      .c-checkbox__wrap {
+        min-height: var(--option-height);
+
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
     }
   }
 }
-</style>
+</style>