refactor: progress bar props exact

uiv-lib · Dec 10, 2021 · c7267b9 · c7267b9
1 parent af5fd78
commit c7267b9
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 61 deletions.
diff --git a/src/components/button/Btn.vue b/src/components/button/Btn.vue
@@ -91,8 +91,8 @@ const classes = computed(() => ({
   active: props.inputType ? isInputActive.value : props.active,
   disabled: props.disabled,
   'btn-block': props.block,
-  [`btn-${props.type}`]: Boolean(props.type),
-  [`btn-${props.size}`]: Boolean(props.size),
+  [`btn-${props.type}`]: !!props.type,
+  [`btn-${props.size}`]: !!props.size,
 }));
 
 function onClick(e) {

diff --git a/src/components/messagebox/MessageBox.vue b/src/components/messagebox/MessageBox.vue
@@ -110,7 +110,7 @@ const dirty = ref(false);
 const modal = ref(null);
 
 const closeOnBackdropClick = computed(() =>
-  isExist(props.backdrop) ? Boolean(props.backdrop) : props.type !== TYPES.ALERT
+  isExist(props.backdrop) ? !!props.backdrop : props.type !== TYPES.ALERT
 );
 const inputError = computed(() => props.validator(input.value));
 const inputNotValid = computed(() => dirty.value && inputError.value);

diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
@@ -108,7 +108,7 @@ export default {
   computed: {
     modalSizeClass() {
       return {
-        [`modal-${this.size}`]: Boolean(this.size),
+        [`modal-${this.size}`]: !!this.size,
       };
     },
   },

diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
@@ -108,10 +108,10 @@ const emit = defineEmits(['update:modelValue', 'change']);
 const sliceStart = ref(0);
 
 const navClasses = computed(() => ({
-  [`text-${props.align}`]: Boolean(props.align),
+  [`text-${props.align}`]: !!props.align,
 }));
 const classes = computed(() => ({
-  [`pagination-${props.size}`]: Boolean(props.size),
+  [`pagination-${props.size}`]: !!props.size,
 }));
 const sliceArray = computed(() =>
   range(props.totalPage).slice(

diff --git a/src/components/progressbar/ProgressBar.vue b/src/components/progressbar/ProgressBar.vue
@@ -6,33 +6,9 @@
 </template>
 
 <script setup>
-import ProgressBarStack from './ProgressBarStack.vue';
+import { progressBarProps } from '../../props/progress-bar.props';
 
 defineProps({
-  modelValue: {
-    type: Number,
-    validator(value) {
-      return value >= 0 && value <= 100;
-    },
-    default: 0,
-  },
-  labelText: { type: String, default: undefined },
-  type: { type: String, default: undefined },
-  label: {
-    type: Boolean,
-    default: false,
-  },
-  minWidth: {
-    type: Boolean,
-    default: false,
-  },
-  striped: {
-    type: Boolean,
-    default: false,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
+  ...progressBarProps,
 });
 </script>
diff --git a/src/components/progressbar/ProgressBarStack.vue b/src/components/progressbar/ProgressBarStack.vue
@@ -4,7 +4,7 @@
       'progress-bar': true,
       'progress-bar-striped': striped,
       active: striped && active,
-      [`progress-bar-${type}`]: Boolean(type),
+      [`progress-bar-${type}`]: !!type,
     }"
     :style="{
       minWidth: minWidth ? '2em' : null,
@@ -20,31 +20,9 @@
 </template>
 
 <script setup>
+import { progressBarProps } from '../../props/progress-bar.props';
+
 defineProps({
-  modelValue: {
-    type: Number,
-    required: true,
-    validator(value) {
-      return value >= 0 && value <= 100;
-    },
-  },
-  labelText: { type: String, default: undefined },
-  type: { type: String, default: undefined },
-  label: {
-    type: Boolean,
-    default: false,
-  },
-  minWidth: {
-    type: Boolean,
-    default: false,
-  },
-  striped: {
-    type: Boolean,
-    default: false,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
+  ...progressBarProps,
 });
 </script>
diff --git a/src/components/typeahead/Typeahead.vue b/src/components/typeahead/Typeahead.vue
@@ -212,15 +212,15 @@ function fetchItems(value, debounce) {
     open.value = false;
   } else if (props.data) {
     prepareItems(props.data);
-    open.value = hasEmptySlot() || Boolean(items.value.length);
+    open.value = hasEmptySlot() || !!items.value.length;
   } else if (props.asyncSrc) {
     timeoutID = setTimeout(() => {
       emit('loading');
       request(props.asyncSrc + encodeURIComponent(value))
         .then((data) => {
           if (inputEl.value.matches(':focus')) {
             prepareItems(props.asyncKey ? data[props.asyncKey] : data, true);
-            open.value = hasEmptySlot() || Boolean(items.value.length);
+            open.value = hasEmptySlot() || !!items.value.length;
           }
           emit('loaded');
         })
@@ -233,7 +233,7 @@ function fetchItems(value, debounce) {
     const cb = (data) => {
       if (inputEl.value.matches(':focus')) {
         prepareItems(data, true);
-        open.value = hasEmptySlot() || Boolean(items.value.length);
+        open.value = hasEmptySlot() || !!items.value.length;
       }
       emit('loaded');
     };

diff --git a/src/props/progress-bar.props.js b/src/props/progress-bar.props.js
@@ -0,0 +1,15 @@
+export const progressBarProps = {
+  modelValue: {
+    type: Number,
+    required: true,
+    validator(value) {
+      return value >= 0 && value <= 100;
+    },
+  },
+  labelText: { type: String, default: undefined },
+  type: { type: String, default: undefined },
+  label: { type: Boolean, default: false },
+  minWidth: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  active: { type: Boolean, default: false },
+};