classcard-ui 0.2.1489 → 0.2.1490-beta.0

package/src/components/NumberAnimator.vue

@@ -1,113 +1,113 @@
-<template>
-    <span>{{ displayValue }}</span>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-      value: {
-        required: true,
-        type: [Number, String]
-      },
-      duration: {
-        type: Number,
-        default: 1000
-      },
-      prefix: {
-        type: String,
-        default: ''
-      },
-      suffix: {
-        type: String,
-        default: ''
-      }
-    },
-    data() {
-      return {
-        displayValue: '0',
-        interval: null,
-        startTimestamp: null,
-        currentValue: 0,
-        targetValue: 0
-      }
-    },
-    watch: {
-      value: {
-        immediate: true,
-        handler(newValue) {
-          // Clear any existing animation
-          clearInterval(this.interval);
-          
-          // Parse the new value - handle formatted strings with commas
-          const parsedNewValue = typeof newValue === 'string' 
-            ? parseFloat(newValue.replace(/,/g, '')) 
-            : parseFloat(newValue);
-            
-          // Set target
-          this.targetValue = isNaN(parsedNewValue) ? 0 : parsedNewValue;
-          
-          // Start from 0 for the first animation only
-          if (this.currentValue === 0) {
-            this.currentValue = 0;
-          }
-          
-          // Set the start timestamp
-          this.startTimestamp = Date.now();
-          
-          // Start the animation
-          this.startAnimation();
-        }
-      }
-    },
-    methods: {
-      formatValue(value) {
-        // Format numeric value similar to your existing format
-        if (typeof this.value === 'string' && this.value.includes(',')) {
-          // If original value has commas, format with commas
-          return this.prefix + value.toLocaleString() + this.suffix;
-        }
-        
-        // Just add prefix/suffix for numbers or simpler strings
-        return this.prefix + value.toString() + this.suffix;
-      },
-      
-      startAnimation() {
-        const startValue = this.currentValue;
-        const changeInValue = this.targetValue - startValue;
-        const startTime = this.startTimestamp;
-        const duration = this.duration;
-        
-        this.interval = setInterval(() => {
-          const elapsed = Date.now() - startTime;
-          const progress = Math.min(elapsed / duration, 1);
-          
-          // Calculate current value using an easing function
-          this.currentValue = startValue + changeInValue * this.easeOutCubic(progress);
-          
-          // Update the displayed value
-          if (Number.isInteger(this.targetValue)) {
-            // For integers, round to whole numbers during animation
-            this.displayValue = this.formatValue(Math.round(this.currentValue));
-          } else {
-            // For decimals, keep 2 decimal places during animation
-            this.displayValue = this.formatValue(parseFloat(this.currentValue.toFixed(2)));
-          }
-          
-          // If animation complete
-          if (progress === 1) {
-            clearInterval(this.interval);
-            this.displayValue = this.formatValue(this.targetValue);
-          }
-        }, 16); // ~60fps
-      },
-      
-      easeOutCubic(x) {
-        // Cubic easing function for smooth animation
-        return 1 - Math.pow(1 - x, 3);
-      }
-    },
-    beforeDestroy() {
-      clearInterval(this.interval);
-    }
-  }
+<template>
+    <span>{{ displayValue }}</span>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      value: {
+        required: true,
+        type: [Number, String]
+      },
+      duration: {
+        type: Number,
+        default: 1000
+      },
+      prefix: {
+        type: String,
+        default: ''
+      },
+      suffix: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        displayValue: '0',
+        interval: null,
+        startTimestamp: null,
+        currentValue: 0,
+        targetValue: 0
+      }
+    },
+    watch: {
+      value: {
+        immediate: true,
+        handler(newValue) {
+          // Clear any existing animation
+          clearInterval(this.interval);
+          
+          // Parse the new value - handle formatted strings with commas
+          const parsedNewValue = typeof newValue === 'string' 
+            ? parseFloat(newValue.replace(/,/g, '')) 
+            : parseFloat(newValue);
+            
+          // Set target
+          this.targetValue = isNaN(parsedNewValue) ? 0 : parsedNewValue;
+          
+          // Start from 0 for the first animation only
+          if (this.currentValue === 0) {
+            this.currentValue = 0;
+          }
+          
+          // Set the start timestamp
+          this.startTimestamp = Date.now();
+          
+          // Start the animation
+          this.startAnimation();
+        }
+      }
+    },
+    methods: {
+      formatValue(value) {
+        // Format numeric value similar to your existing format
+        if (typeof this.value === 'string' && this.value.includes(',')) {
+          // If original value has commas, format with commas
+          return this.prefix + value.toLocaleString() + this.suffix;
+        }
+        
+        // Just add prefix/suffix for numbers or simpler strings
+        return this.prefix + value.toString() + this.suffix;
+      },
+      
+      startAnimation() {
+        const startValue = this.currentValue;
+        const changeInValue = this.targetValue - startValue;
+        const startTime = this.startTimestamp;
+        const duration = this.duration;
+        
+        this.interval = setInterval(() => {
+          const elapsed = Date.now() - startTime;
+          const progress = Math.min(elapsed / duration, 1);
+          
+          // Calculate current value using an easing function
+          this.currentValue = startValue + changeInValue * this.easeOutCubic(progress);
+          
+          // Update the displayed value
+          if (Number.isInteger(this.targetValue)) {
+            // For integers, round to whole numbers during animation
+            this.displayValue = this.formatValue(Math.round(this.currentValue));
+          } else {
+            // For decimals, keep 2 decimal places during animation
+            this.displayValue = this.formatValue(parseFloat(this.currentValue.toFixed(2)));
+          }
+          
+          // If animation complete
+          if (progress === 1) {
+            clearInterval(this.interval);
+            this.displayValue = this.formatValue(this.targetValue);
+          }
+        }, 16); // ~60fps
+      },
+      
+      easeOutCubic(x) {
+        // Cubic easing function for smooth animation
+        return 1 - Math.pow(1 - x, 3);
+      }
+    },
+    beforeDestroy() {
+      clearInterval(this.interval);
+    }
+  }
   </script> 

package/src/components/index.js

@@ -1,59 +1,59 @@
-export { default as CAlerts } from "./CAlerts";
-export { default as CAnchorTabs } from "./CAnchorTabs";
-export { default as CLinearProgressBar } from "./CLinearProgressBar";
-export { default as CAnchorTag } from "./CAnchorTag";
-export { default as CAvatar } from "./CAvatar";
-export { default as CAvatarGroup } from "./CAvatarGroup";
-export { default as CBasicTable } from "./CBasicTable";
-export { default as CBreadcrumbs } from "./CBreadcrumbs";
-export { default as CButton } from "./CButton";
-export { default as CButtonGroup } from "./CButtonGroup";
-export { default as CButtonIcon } from "./CButtonIcon";
-export { default as CButtonLink } from "./CButtonLink";
-export { default as CButtonSelect } from "./CButtonSelect";
-export { default as CButtonWithDropdown } from "./CButtonWithDropdown";
-export { default as CCard } from "./CCard";
-export { default as CCheckbox } from "./CCheckbox";
-export { default as CCollapsibleSection } from "./CCollapsibleSection";
-export { default as CColorDots } from "./CColorDots";
-export { default as CDatepicker } from "./CDatepicker";
-export { default as CDualSelect } from "./CEditor";
-export { default as CEditor } from "./CDualSelect";
-export { default as CFormSectionHeading } from "./CFormSectionHeading";
-export { default as CGroupedFilterDropdown } from "./CGroupedFilterDropdown";
-export { default as CIcon } from "./CIcon";
-export { default as CGroupedSelect } from "./CGroupedSelect";
-export { default as CIconDropdown } from "./CIconDropdown";
-export { default as CInput } from "./CInput";
-export { default as CInputAddon } from "./CInputAddon";
-export { default as CInputEmail } from "./CInputEmail";
-export { default as CModalHeading } from "./CModalHeading";
-export { default as CModuleHelpLinks } from "./CModuleHelpLinks";
-export { default as CMultiselect } from "./CMultiselect";
-export { default as CPageHeading } from "./CPageHeading";
-export { default as CPagination } from "./CPagination";
-export { default as CPhoneNumber } from "./CPhoneNumber";
-export { default as CRadio } from "./CRadio";
-export { default as CRadioGroup } from "./CRadioGroup";
-export { default as CReorderableStackedList } from "./CReorderableStackedList";
-export { default as CSelect } from "./CSelect";
-export { default as CSmallTimeline } from "./CSmallTimeline";
-export { default as CStackedList } from "./CStackedList";
-export { default as CStats } from "./CStats";
-export { default as CSwitch } from "./CSwitch";
-export { default as CTable } from "./CTable";
-export { default as CTabs } from "./CTabs";
-export { default as CTag } from "./CTag";
-export { default as CTextarea } from "./CTextarea";
-export { default as CTimeline } from "./CTimeline";
-export { default as CUpload } from "./CUpload";
-export { default as CConfirmActionModal } from "./CConfirmActionModal";
-export { default as CCalendar } from "./CCalendar";
-export { default as CButtonSelectBorder } from "./CButtonSelectBorder";
-export { default as CInsetTabs } from "./CInsetTabs";
-export { default as CTabLazy } from "./CTabLazy";
-export { default as CCircularButton } from "./CCircularButton";
-export { default as CProgress } from "./CProgress";
-export { default as CToolTip } from "./CToolTip";
-export { default as CIconSelect } from "./CIconSelect";
+export { default as CAlerts } from "./CAlerts";
+export { default as CAnchorTabs } from "./CAnchorTabs";
+export { default as CLinearProgressBar } from "./CLinearProgressBar";
+export { default as CAnchorTag } from "./CAnchorTag";
+export { default as CAvatar } from "./CAvatar";
+export { default as CAvatarGroup } from "./CAvatarGroup";
+export { default as CBasicTable } from "./CBasicTable";
+export { default as CBreadcrumbs } from "./CBreadcrumbs";
+export { default as CButton } from "./CButton";
+export { default as CButtonGroup } from "./CButtonGroup";
+export { default as CButtonIcon } from "./CButtonIcon";
+export { default as CButtonLink } from "./CButtonLink";
+export { default as CButtonSelect } from "./CButtonSelect";
+export { default as CButtonWithDropdown } from "./CButtonWithDropdown";
+export { default as CCard } from "./CCard";
+export { default as CCheckbox } from "./CCheckbox";
+export { default as CCollapsibleSection } from "./CCollapsibleSection";
+export { default as CColorDots } from "./CColorDots";
+export { default as CDatepicker } from "./CDatepicker";
+export { default as CDualSelect } from "./CEditor";
+export { default as CEditor } from "./CDualSelect";
+export { default as CFormSectionHeading } from "./CFormSectionHeading";
+export { default as CGroupedFilterDropdown } from "./CGroupedFilterDropdown";
+export { default as CIcon } from "./CIcon";
+export { default as CGroupedSelect } from "./CGroupedSelect";
+export { default as CIconDropdown } from "./CIconDropdown";
+export { default as CInput } from "./CInput";
+export { default as CInputAddon } from "./CInputAddon";
+export { default as CInputEmail } from "./CInputEmail";
+export { default as CModalHeading } from "./CModalHeading";
+export { default as CModuleHelpLinks } from "./CModuleHelpLinks";
+export { default as CMultiselect } from "./CMultiselect";
+export { default as CPageHeading } from "./CPageHeading";
+export { default as CPagination } from "./CPagination";
+export { default as CPhoneNumber } from "./CPhoneNumber";
+export { default as CRadio } from "./CRadio";
+export { default as CRadioGroup } from "./CRadioGroup";
+export { default as CReorderableStackedList } from "./CReorderableStackedList";
+export { default as CSelect } from "./CSelect";
+export { default as CSmallTimeline } from "./CSmallTimeline";
+export { default as CStackedList } from "./CStackedList";
+export { default as CStats } from "./CStats";
+export { default as CSwitch } from "./CSwitch";
+export { default as CTable } from "./CTable";
+export { default as CTabs } from "./CTabs";
+export { default as CTag } from "./CTag";
+export { default as CTextarea } from "./CTextarea";
+export { default as CTimeline } from "./CTimeline";
+export { default as CUpload } from "./CUpload";
+export { default as CConfirmActionModal } from "./CConfirmActionModal";
+export { default as CCalendar } from "./CCalendar";
+export { default as CButtonSelectBorder } from "./CButtonSelectBorder";
+export { default as CInsetTabs } from "./CInsetTabs";
+export { default as CTabLazy } from "./CTabLazy";
+export { default as CCircularButton } from "./CCircularButton";
+export { default as CProgress } from "./CProgress";
+export { default as CToolTip } from "./CToolTip";
+export { default as CIconSelect } from "./CIconSelect";
 export { default as CAlertModal } from "./CAlertModal";

package/src/helper.js

@@ -1,8 +1,8 @@
-export const getActionID = (name, id) => {
-  if (name == null) {
-    return "";
-  }
-  let parts = name.split(" ");
-  parts = parts.map((item) => item.toLowerCase());
-  return id + "_" + parts.join("_");
-};
+export const getActionID = (name, id) => {
+  if (name == null) {
+    return "";
+  }
+  let parts = name.split(" ");
+  parts = parts.map((item) => item.toLowerCase());
+  return id + "_" + parts.join("_");
+};