its_ui_vite 0.0.4 → 1.0.0

package/README.md

@@ -49,6 +49,7 @@ export default {
   variant?: 'tonal' | 'outlined' | 'text' | 'nav_item',
   color?: 'green' | 'black',
   disabled?: Boolean,
+  loading?: Boolean,
 }
 
 slots: ['без имени']

package/package.json

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

package/src/components/CAlert.vue

@@ -19,153 +19,123 @@
   </div>
 </template>
 
-<script>
-import { getPropValidator } from '../assets/js/helpers'
+<script setup lang="ts">
+import {
+  ref,
+  watch,
+  computed,
+  onMounted,
+  onUnmounted
+} from 'vue'
+
 import CIcon from './CIcons/index.vue'
 
-export default {
-  data() {
-    return {
-      isLockLiveTime: false,
-      isShow: true,
-      isFade: false,
-      timeFade: 5000,
-
-      timers: {
-        live: undefined,
-        fade: undefined,
-      },
-
-      classes: {
-        root: 'c-alert',
-      },
-    }
-  },
+type TProp = {
+  liveTime?: number,
+  variant?: 'notification' | 'success' | 'error',
+  width?: string,
+  text?: string,
+}
+
+const props = withDefaults(defineProps<TProp>(), {
+  liveTime: 10000,
+  variant: 'notification',
+  width: 'auto',
+  text: ''
+});
+
+onMounted(addListener)
+onUnmounted(removeListener)
+
+const iconId = computed(() => {
+  const iconsIds = {
+    notification: 'bell',
+    success: 'success',
+    error: 'error',
+  }
+
+  return iconsIds[props.variant]
+})
+
+let root = ref(null)
 
-  props: {
-    liveTime: {
-      type: Number,
+let isLockLiveTime = false,
+  isShow = ref(true),
+  isFade = ref(false)
 
-      default: 10000,
-    },
+const timeFade = 5000
+const classes = {
+  root: 'c-alert',
+}
 
-    variant: {
-      type: String,
+type TTimers = {
+  live: ReturnType<typeof setTimeout>,
+  fade: ReturnType<typeof setTimeout>,
+}
 
-      default: 'notification',
-      validator: getPropValidator('CAlert', 'variant', ['notification', 'success', 'error']),
-    },
+const timers: TTimers = {
+  live: 0,
+  fade: 0,
+}
 
-    width: {
-      type: String,
+watch(props, updateLiveTime, {
+  deep: true,
+  immediate: true,
+})
 
-      default: 'auto',
-    },
+function close() {
+  isShow.value = false
+  isLockLiveTime = true  
+}
 
-    text: {
-      type: String,
+function updateLiveTime() {
+  if (!isShow.value) return
 
-      default: '',
-    }
-  },
-
-  methods: {
-    close() {
-      this.isShow = false
-      this.isLockLiveTime = true  
-    },
-
-    updateLiveTime() {
-      if (!this.isShow) return
-
-      this.isShow = true
-      this.isFade = false
-
-      clearTimeout(this.timers.fade)
-      clearTimeout(this.timers.live)
-
-      if (this.isLockLiveTime) return
-
-      this.timers.fade = setTimeout(() => {
-        this.isFade = true
-      }, Math.max(this.liveTime - this.timeFade, 0));
-
-      this.timers.live = setTimeout(() => {
-        this.isShow = false
-      }, this.liveTime);
-    },
-
-    // слушатели
-    /**
-     * @param {MouseEvent} evt 
-     */
-     handleMouseover(evt){
-      const tooltipTarget = evt.target.closest(`.${this.classes.root}`)
-
-      if (tooltipTarget !== this.$refs.root) return
-
-      this.isLockLiveTime = true
-      evt.stopPropagation()
-      this.updateLiveTime()
-    },
-
-    /**
-     * @param {MouseEvent} evt 
-     */
-    handleMouseout(evt) {
-      const tooltipTarget = evt.target.closest(`.${this.classes.root}`)
-
-      if (tooltipTarget !== this.$refs.root) return 
-      
-      this.isLockLiveTime = false
-      this.updateLiveTime()
-    },
-
-    addListener() {
-      document.body.addEventListener('mouseover', this.handleMouseover)
-      document.body.addEventListener('mouseout', this.handleMouseout)  
-    },
-
-    removeListener() {
-      document.body.removeEventListener('mouseover', this.handleMouseover)
-      document.body.removeEventListener('mouseout', this.handleMouseout)  
-    },
-  },
-
-  mounted() {
-    this.addListener()
-  },
-
-  beforeDestroy() {
-    this.removeListener()
-  },
-
-  watch: {
-    $props: {
-      deep: true,
-      immediate: true,
-
-      handler(newWal) {
-        this.updateLiveTime()
-      },
-    },
-  },
-
-  computed: {
-    iconId() {
-      const iconsIds = {
-        notification: 'bell',
-        success: 'success',
-        error: 'error',
-      }
-
-      return iconsIds[this.variant]
-    },
-  },
-
-  components: {
-    CIcon,
-  },
+  isShow.value = true
+  isFade.value = false
+
+  clearTimeout(timers.fade)
+  clearTimeout(timers.live)
+
+  if (isLockLiveTime) return
+
+  timers.fade = setTimeout(() => {
+    isFade.value = true
+  }, Math.max(props.liveTime - timeFade, 0));
+
+  timers.live = setTimeout(() => {
+    isShow.value = false
+  }, props.liveTime);
+}
+
+// слушатели
+ function handleMouseover(evt: MouseEvent){
+  const tooltipTarget = (evt.target as HTMLDivElement).closest(`.${classes.root}`)
+
+  if (tooltipTarget !== root.value) return
+
+  isLockLiveTime = true
+  evt.stopPropagation()
+  updateLiveTime()
+}
+
+ function handleMouseout(evt: MouseEvent) {
+  const tooltipTarget = (evt.target as HTMLDivElement).closest(`.${classes.root}`)
+
+  if (tooltipTarget !== root.value) return 
+  
+  isLockLiveTime = false
+  updateLiveTime()
+}
+
+function addListener() {
+  document.body.addEventListener('mouseover', handleMouseover)
+  document.body.addEventListener('mouseout', handleMouseout)  
+}
+
+function removeListener() {
+  document.body.removeEventListener('mouseover', handleMouseover)
+  document.body.removeEventListener('mouseout', handleMouseout)  
 }
 
 </script>

package/src/components/CButton.vue

@@ -1,56 +1,50 @@
 <template>
-  <button :class="['c-btn', size, variant, color, { active }]" :disabled="disabled">
+  <button :class="['c-btn', size, variant, color, { active, loading }]" :disabled="disabled">
     <div class="c-btn__container">
       <slot></slot>
     </div>
+    <div class="c-btn__loading">
+      <CIcon
+        iconId="loading"
+        :size="loadingSize[size]"
+      />
+    </div>
   </button>
 </template>
 
-<script>
-import { getPropValidator } from '../assets/js/helpers.js'
-
-  export default {
-    props: {
-      size: {
-        type: String,
-
-        default: "lg",
-        validator: getPropValidator('CButton', 'size', ['lg', 'md', 'sm']),        
-      },
-
-      variant: {
-        type: String,
-
-        default: "tonal",
-        validator: getPropValidator('CButton', 'variant', ['tonal', 'outlined', 'text', 'nav_item']),
-      },
-
-      color: {
-        type: String,
-
-        default: "green",
-        validator: getPropValidator('CButton', 'color', ['green', 'black']),
-      },
-
-      active: {
-        type: Boolean,
-
-        default: false,
-      },
-
-      disabled: {
-        type: Boolean,
+<script setup lang="ts">
+import CIcon from './CIcons/index.vue'
+
+const loadingSize = {
+  lg: 24,
+  md: 20,
+  sm: 16,
+};
+
+type TProps = {
+  size?: 'lg' | 'md' | 'sm',
+  variant?: 'tonal' | 'outlined' | 'text' | 'nav_item',
+  color?: 'green' | 'black',
+  active?: boolean,
+  disabled?: boolean,
+  loading?: boolean,
+}
 
-        default: false,
-      },
-    },
-  }
+const props = withDefaults(defineProps<TProps>(), {
+  size: 'lg',
+  variant: 'tonal',
+  color: 'green',
+  active: false,
+  disabled: false,
+  loading: false
+});
 </script>
 
 <style lang="scss">
 @import "../assets/scss/main.scss";
 
 .c-btn {
+  position: relative;
   border-radius: 30px;
   
   transition: var(--transition);
@@ -59,9 +53,26 @@ import { getPropValidator } from '../assets/js/helpers.js'
   outline: none;
   border: none;
   
+  // prop.disabled
   &:disabled {
     cursor: default;
   }
+  // ./prop.disabled
+
+  // ./prop.loading
+  &.loading {
+    pointer-events: none;
+
+    .c-btn__container {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .c-btn__loading {
+      opacity: 1;
+    }
+  }
+  // ./prop.loading
 
   button,
   input,
@@ -188,5 +199,31 @@ import { getPropValidator } from '../assets/js/helpers.js'
     }
   }
   // ./prop.variant
+
+  &__loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+
+    svg {
+      animation: animation-rotation steps(100) 1.5s infinite;
+    }
+  }
+}
+
+@keyframes animation-rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  } 
 }
 </style>

package/src/components/CCheckbox.vue

@@ -7,11 +7,8 @@
       :value="modelValue || value"
       :checked="isRadio ? value === modelValue : modelValue"
       :disabled="disabled"
-      @change="$emit('update:modelValue', isRadio ? value : $event.target.checked)"
+      @change="({ target }) => $emit('update:modelValue', isRadio ? value : (target as HTMLInputElement).checked)"
     />
-      <!-- @change="(evt) => $emit('change', isRadio ? (modelValue || value) : evt.target.checked)" -->
-      <!-- @change="$emit('update:checked', $event.target.checked), $emit('update:modelValue', $event.target.value)" -->
-
     <div class="c-checkbox__checkmark"></div>
     <div class="c-checkbox__text">
       <slot>{{ text }}</slot>
@@ -19,66 +16,35 @@
   </label>
 </template>
 
-<script>
-import { getPropValidator } from '../assets/js/helpers.js'
-
-export default {
-  name: 'CCheckbox',
-
-  data() {
-    return {
-      isRadio: this.variant === 'radio',
-    }
-  },
-
-  emits: ['update:checked', 'update:modelValue'],
-
-  props: {
- 
-    variant: {
-      type: String,
+<script setup lang="ts">
 
-      default: 'checkbox',
-      validator: getPropValidator('CCheckbox', 'variant', ['checkbox', 'radio', 'toggle'])
-    },
-
-    size: {
-      type: String,
-      
-      default: 'lg',
-      // по сути sm используется только в CSelect
-      validator: getPropValidator('CCheckbox', 'size', ['lg', 'sm'])
-    },
-
-    disabled: {
-      type: Boolean,
+type TProps = {
+  variant?: 'checkbox' | 'radio' | 'toggle',
+  size?: 'lg' | 'sm',
+  disabled?: boolean,
+  text?: string,
+  name?: string,
+  value?: any,
+  modelValue: any,
+}
 
-      default: false,
-    },
+const props = withDefaults(defineProps<TProps>(), {
+  variant: 'checkbox',
+  size: 'lg',
+  disabled: false,
+  text: '',
+  name: 'c_checkbox',
+  value: '',
+  modelValue: '',
+});
 
-    text: {
-      type: String,
-    
-      default: '',
-    },
+const emits = defineEmits<{
+  (name: 'update:checked', value: boolean): void,
+  (name: 'update:modelValue', value: any): void,  
+}>();
 
-    name: {
-      type: String,
-      
-      default: 'c_checkbox',
-    },
+const isRadio = props.variant === 'radio'
 
-    value: {
-      default: '',
-    },
-
-    modelValue: {
-      type: [Boolean, String, Number, Array],
-      
-      default: '',
-    },
-  },
-}
 </script>
 
 <style lang="scss">

package/src/components/CIcons/index.vue

@@ -36,6 +36,10 @@
       <path d="M12 16V16.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
 
+    <svg v-if="iconId === 'loading'" :width="w" :height="h" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10 0C8.68678 -1.489e-08 7.38642 0.258657 6.17317 0.761204C4.95991 1.26375 3.85752 2.00035 2.92893 2.92893C2.00035 3.85752 1.26375 4.95991 0.761204 6.17317C0.258657 7.38642 -1.489e-08 8.68678 0 10C-4.96335e-08 11.3132 0.258657 12.6136 0.761204 13.8268C1.26375 15.0401 2.00035 16.1425 2.92893 17.0711C3.85752 17.9997 4.95991 18.7362 6.17317 19.2388C7.38642 19.7413 8.68678 20 10 20C11.3132 20 12.6136 19.7413 13.8268 19.2388C15.0401 18.7362 16.1425 17.9997 17.0711 17.0711C17.9997 16.1425 18.7362 15.0401 19.2388 13.8268C19.7413 12.6136 20 11.3132 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7362 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761204C12.6136 0.258657 11.3132 -4.96335e-08 10 0ZM10 1C11.314 1.00028 12.6119 1.28828 13.8027 1.84375L12.959 3.65625C12.0324 3.22403 11.0224 3.00003 10 3C8.97758 3.00003 7.96758 3.22403 7.04102 3.65625L6.19922 1.84961C7.38895 1.2924 8.68625 1.0024 10 1ZM10 4C10.7879 4 11.5681 4.15519 12.2961 4.45672C13.0241 4.75825 13.6855 5.20021 14.2426 5.75736C14.7998 6.31451 15.2417 6.97595 15.5433 7.7039C15.8448 8.43185 16 9.21207 16 10C16 10.7879 15.8448 11.5681 15.5433 12.2961C15.2417 13.0241 14.7998 13.6855 14.2426 14.2426C13.6855 14.7998 13.0241 15.2417 12.2961 15.5433C11.5681 15.8448 10.7879 16 10 16C8.4087 16 6.88258 15.3679 5.75736 14.2426C4.63214 13.1174 4 11.5913 4 10C4 8.4087 4.63214 6.88258 5.75736 5.75736C6.88258 4.63214 8.4087 4 10 4Z" fill="white"/>
+    </svg>
+
   </div>
 </template>
 

package/src/components/CInput.vue

@@ -7,7 +7,7 @@
       :placeholder="placeholder" 
       :value="modelValue"
       :disabled="disabled"
-      @input="$emit('update:modelValue', $event.target.value)"
+      @input="({target}) => $emit('update:modelValue', (target as HTMLInputElement).value)"
     />
 
     <div class="c-input__icon c-input__success-icon">
@@ -28,65 +28,36 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { InputTypeHTMLAttribute } from 'vue';
 import CIcon from './CIcons/index.vue'
 
-import { getPropValidator } from '../assets/js/helpers';
+type TProps = {
+  status?: 'static' | 'focus' | 'error' | 'success',
+  size?: 'lg' | 'md' | 'sm',
+  width?: string,
+  disabled?: boolean,
+  type?: InputTypeHTMLAttribute,
+  name?: string,
+  placeholder?: string,
+  modelValue?: any,
+}
+
+const pops = withDefaults(defineProps<TProps>(), {
+  status: 'static',
+  size: 'lg',
+  width: '350px',
+  disabled: false,
+  type: 'text',
+  name: '',
+  placeholder: '',
+  modelValue: ''
+})
+
+const emits = defineEmits<{
+  (name: 'update:modelValue', value: any): void
+}>()
 
-  export default {
-    emits: ['update:modelValue'],
-    components: {
-      CIcon
-    },
-    
-    props: {
-      status: {
-        type: String,
-
-        default: 'static',
-        validator: getPropValidator('CInput', 'status', ['static', 'focus'/* it rofls */, 'error', 'success'])
-      },
-
-      size: {
-        type: String,
-
-        default: 'lg',
-        validator: getPropValidator('CInput', 'size', ['lg', 'md', 'sm'])
-      },
-
-      width: {
-        type: String,
-
-        default: '350px'
-      },
-
-      disabled: {
-        type: Boolean,
-      },
-
-      type: {
-        type: String,
-        
-        default: 'text',
-      },
-
-      name: {
-        type: String,
-        
-        default: 'c_inp',
-      },
-
-      placeholder: {
-        type: String,
-
-        default: '',
-      },
-
-      modelValue: {
-        default: '',
-      }
-    },
-  }
 </script>
 
 <style lang="scss">

package/src/components/CPopup.vue

@@ -13,16 +13,13 @@
   </div>
 </template>
 
-<script>
-  export default {
-    props: {
-      isShowTitle: {
-        type: Boolean,
-
-        default: true
-      }
-    }
-  }
+<script setup lang="ts">
+type TProp = {
+  isShowTitle?: boolean,
+}
+const props = withDefaults(defineProps<TProp>(), {
+  isShowTitle: true
+})
 </script>
 
 <style lang="scss">