its_ui_vite 0.0.5 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "0.0.5",
+  "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

@@ -12,67 +12,32 @@
   </button>
 </template>
 
-<script>
+<script setup lang="ts">
 import CIcon from './CIcons/index.vue'
 
-import { getPropValidator } from '../assets/js/helpers.js'
-
-  export default {
-    data() {
-      return {
-        loadingSize: {
-          lg: 24,
-          md: 20,
-          sm: 16,
-        }
-      }
-    },
-
-    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,
-
-        default: false,
-      },
-
-      loading: {
-        type: Boolean,
-
-        default: false,
-      }
-    },
+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,
+}
 
-    components: {
-      CIcon
-    }
-  }
+const props = withDefaults(defineProps<TProps>(), {
+  size: 'lg',
+  variant: 'tonal',
+  color: 'green',
+  active: false,
+  disabled: false,
+  loading: false
+});
 </script>
 
 <style lang="scss">

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/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">