its_ui_vite 1.0.4 → 1.0.6

package/README.md

@@ -78,6 +78,7 @@ slots: ['без имени']
 
   width?: string,
   type?: string,
+  iconPosition?: Array<'left' | 'right'>,
   size?: 'lg' | 'md' | 'sm',
   name?: string,
   disabled?: Boolean,
@@ -116,6 +117,8 @@ slots: ['без имени' <!-- есть дефольное значение (p
   variant: 'default' | 'multiple',
   size?: 'lg' | 'md' | 'sm',
   placeholder?: string,
+  iconPosition?: Array<'left' | 'right'>,
+  iconName?: string,
   disabled?: Boolean,
   autocomplete?: Boolean,
   selectAll?: Boolean,
@@ -123,6 +126,8 @@ slots: ['без имени' <!-- есть дефольное значение (p
   locale?: string,
   transformVal?: Boolean,
 }
+
+slots: ['customIcon' <!-- есть дефольное значение -->]
 ```
 
 * CTooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [

package/src/components/CIcons/CIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="svg" v-html="iconHTML">
+  <div class="svg" :style="`--svg-size: ${size}px`" v-html="iconHTML">
 
   </div>
 </template>
@@ -21,6 +21,14 @@ const iconHTML = computed(() => {
 });
 
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+  .svg {
+    width: var(--svg-size, 20px);
+    height: var(--svg-size, 20px);
+  }
 
+  .svg:deep(svg) {
+    width: var(--svg-size, 20px);
+    height: var(--svg-size, 20px);
+  }
 </style>

package/src/components/CInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['c-input__wrap', status, size, {disabled}]" :style="`--c-input-width: ${width}`">
+  <div :class="['c-input__wrap', status, size, iconPositionClass, {disabled}]" :style="`--c-input-width: ${width}`">
     <input 
       class="c-input" 
       :type="type" 
@@ -29,11 +29,12 @@
 </template>
 
 <script setup lang="ts">
-import { InputTypeHTMLAttribute } from 'vue';
+import { computed, InputTypeHTMLAttribute } from 'vue'
 import CIcon from './CIcons/index.vue'
 
 type TProps = {
   status?: 'static' | 'focus' | 'error' | 'success',
+  iconPosition?: Array<'left' | 'right'>
   size?: 'lg' | 'md' | 'sm',
   width?: string,
   disabled?: boolean,
@@ -43,7 +44,7 @@ type TProps = {
   modelValue?: any,
 }
 
-const pops = withDefaults(defineProps<TProps>(), {
+const props = withDefaults(defineProps<TProps>(), {
   status: 'static',
   size: 'lg',
   width: '350px',
@@ -58,6 +59,11 @@ const emits = defineEmits<{
   (name: 'update:modelValue', value: any): void
 }>()
 
+const iconPositionClass = computed(() => {
+  const strClass = props?.iconPosition?.map((iconPosition) => `icon-${iconPosition}`).join(' ')
+  return strClass || ''
+})
+
 </script>
 
 <style lang="scss">
@@ -148,28 +154,60 @@ const emits = defineEmits<{
       // prop.size
       &.lg {
         --padding: 15px 25px;
+        --padding-icon: 45px;
+        --distance-icon: 15px;
         --font-size: 21px;
         --radius: 8px
       }
 
       &.md {
         --padding: 10px 17px;
+        --padding-icon: 45px;
+        --distance-icon: 15px;
         --font-size: 21px;
         --radius: 5px
       }
 
       &.sm {
         --padding: 10px 12px;
+        --padding-icon: 40px;
+        --distance-icon: 10px;
         --font-size: 14px;
         --radius: 5px
       }
       // ./prop.size
+
+      // prop.iconPosition
+      &.icon-left {
+        .c-input {
+          padding-left: var(--padding-icon);
+        }
+
+        .c-input__custom-icon {
+          left: var(--distance-icon);
+          right: auto;
+          opacity: 1;
+        }
+      }
+
+      &.icon-right {
+        .c-input {
+          padding-right: var(--padding-icon);
+        }
+
+        .c-input__custom-icon {
+          opacity: 1;
+          pointer-events: all;
+          cursor: pointer;
+        }
+      }
+      // ./prop.iconPosition
     }
 
     &__icon {
       position: absolute;
       top: 50%;
-      right: 15px;
+      right:  var(--distance-icon);;
       transform: translate(0, -50%);
 
       display: flex;

package/src/components/CSelect.vue

@@ -4,9 +4,19 @@
     :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}]">
+    <CInput
+      :placeholder="activePlaceholder"
+      :disabled="disabled"
+      :size="size"
+      :width="width"
+      :iconPosition="iconInfo.position.value"
+      v-model.trim="findValue"
+      :class="[classes.input, {open: isOpen}]"
+    >
       <template #customIcon>
-        <CIcons :class="['c-select__inp_icon']" :iconId="isMultiple ? 'arrow' : 'lens'" />
+        <slot name="customIcon">
+          <CIcon :class="['c-select__inp_icon']" :size="24" :name="iconInfo.name.value" />
+        </slot>
       </template>
     </CInput>
 
@@ -19,7 +29,7 @@
         <CCheckbox
           :class="classes.option"
           size='sm'
-          :modelValue="options.length === activeOptions.size"
+          :modelValue="options?.length === activeOptions.size"
         >
           <span class="c-select__list_item-text">
             {{ text.selectAll }}
@@ -54,9 +64,10 @@
 <script setup lang="ts">
 import CInput from './CInput.vue'
 import CCheckbox from './CCheckbox.vue'
-import CIcons from './CIcons/index.vue'
-import CScroll from './CScroll.vue';
+import CIcon from './CIcons/CIcon.vue'
+import CScroll from './CScroll.vue'
 
+import { TIcon } from '../assets/icon/icons-manifest'
 import { fixDblEvent } from '../assets/js/helpers';
 import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
 
@@ -75,6 +86,9 @@ type TProps = {
   autocomplete?: boolean,
   disabled?: boolean,
   transformVal?: boolean,
+  iconPosition?: Array<'left' | 'right'>,
+  iconName?: keyof TIcon,
+  isOpen?: boolean,
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
   placeholder?: string,
   width?: string,
@@ -89,6 +103,7 @@ const props = withDefaults(defineProps<TProps>(), {
   autocomplete: false,
   disabled: false,
   transformVal: false,
+  isOpen: false,
   locale: 'rus',
   placeholder: 'выберите вариант',
   width: '100%',
@@ -96,15 +111,16 @@ const props = withDefaults(defineProps<TProps>(), {
 })
 
 const emit = defineEmits<{
-  (name: 'update:modelValue', value: any[])
-  (name: 'change_cselect', value: any[])
+  (name: 'update:modelValue', value: any[]),
+  (name: 'change_cselect', value: any[]),
+  (name: 'update:isOpen', value: boolean)
 }>();
 
 const transition = 200,
   listIndentY = 12  
 
 let findValue = ref(''),
-  isOpen = ref(false),
+  isOpen = ref(props.isOpen || false),
   scrollY = ref(0),
   root = ref(),
   activePlaceholder = ref(props.placeholder),
@@ -156,6 +172,22 @@ const text = computed(() => {
   return lang[props.locale]
 })
 
+const iconInfo = {
+  position: computed(() => {
+    const defaultIconPosition: Array<'left' | 'right'> = [isMultiple.value ? 'right' : 'left'];
+    return props.iconPosition || defaultIconPosition
+  }),
+
+   name: computed(() => {
+    const strIconName = String(props?.iconName)
+    const propIcon = {[strIconName]: true}
+
+    const defaultIcon = isMultiple ? {'Dropdown': true} : {'Search': true}
+
+    return props.iconName ? propIcon : defaultIcon
+  })
+}
+
 const foundOptions = computed(() => {
   const reg = new RegExp(findValue.value.replace(/\W/g, '\\$&'), 'i')
   scrollY.value = Math.random();
@@ -305,12 +337,14 @@ function handleClick(evt: MouseEvent) {
   if (isRoot && domElements) {
     setListPosition()
     isOpen.value = isToggle ? !isOpen.value : true
+    emit('update:isOpen', isOpen.value)
 
     return
   }
 
   if (isOpen.value) {
     isOpen.value = false
+    emit('update:isOpen', isOpen.value)
 
     if (isMultiple.value) dispatchEmit()
   }
@@ -349,35 +383,20 @@ function dispatchEmit() {
   }
 
   // prop.variant
-  &.default {
-    .c-select__inp .c-input {
-      padding-left: var(--icon-indent);
-    }
-
-    .c-input__custom-icon {
-      left: var(--icon-position);
-      right: auto;
-    }
-  }
+  &.default {}
 
   &.multiple {
     .c-select__inp {
       &.open {
-        .c-input__custom-icon svg {
+        .c-input__custom-icon .c-select__inp_icon svg {
           transform: rotate(0deg);
         }
       }
 
-      .c-input {
-        padding-right: var(--icon-indent);
-      }
-
       .c-input__custom-icon {
-        right: var(--icon-position);
-
         pointer-events: all;
 
-        svg {
+        .c-select__inp_icon svg {
           transform: rotate(180deg);
         }
       }

package/src/pages/index.vue

@@ -538,7 +538,15 @@
             </div>
 
             <div class="table__item">
-              <CInput v-model="inpError" :status="errorStatus" /> 
+              <CInput v-model="inpError" :status="errorStatus" />
+            </div>
+
+            <div class="table__item">
+              <CInput v-model="inpError" size="md" :icon-position="['right', 'left']" :status="errorStatus">
+                <template #customIcon>
+                  <CIcon :name="{'Bar-chart': true}" />
+                </template>
+              </CInput>
             </div>
           </div>
           <!-- ./col -->
@@ -554,7 +562,11 @@
             </div>
 
             <div class="table__item">
-              <CInput v-model="inpError" size="sm" :status="errorStatus" /> 
+              <CInput v-model="inpError" size="sm" :icon-position="['right', 'left']" :status="errorStatus">
+                <template #customIcon>
+                  <CIcon :name="{'Bar-chart': true}" />
+                </template>
+              </CInput> 
             </div>
           </div>
           <!-- ./col -->
@@ -715,9 +727,9 @@
 
           <!-- col -->
           <div class="table__col">
-            
+            <h4>isOpen: {{ selectIsOpen }}</h4>
             <div class="table__item">
-              <CSelect variant="multiple" @change_cselect="(evt) => log(['CSelect multiple', evt])" size="sm" :select-all="true" :options="option.slice(-2)" :model-value="VModelOption" />
+              <CSelect variant="multiple" @change_cselect="(evt) => log(['CSelect multiple', evt])" size="sm" :select-all="true" :options="option.slice(-2)" iconName="Cart" v-model:is-open="selectIsOpen" :model-value="VModelOption" />
             </div>
             <h2 @click="VModelOption.length ? VModelOption.splice(0) : VModelOption.push('jj889')">{{ VModelOption }}</h2>
 
@@ -927,6 +939,7 @@ export default {
       iconContent: iconContent,
 
       isToggleTabs: true,
+      selectIsOpen: false,
 
       option: [
         {