@rypen-dev/shared-components 8.0.11 → 8.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.",
-	"version": "8.0.11",
+	"version": "8.0.13",
 	"type": "module",
 	"main": "./dist/index.js",
 	"scripts": {

package/src/components/FileUpload.vue

@@ -18,7 +18,10 @@
         },
 
         file: [Object, File],
-        id: String,
+        id: {
+            type: String,
+            required: true,
+        },
         updating: {
             type: Boolean,
             default: false,
@@ -44,11 +47,12 @@
     const emit = defineEmits(['change']);
 
     const reader = ref(null);
+    const internalFile = ref('');
     const fileupload = ref(null);
 
     onMounted(() => {
         if (props.file) {
-            internalFile.value = props.assetBasePath + props.file;    
+            internalFile.value = props.assetBasePath + props.file;
         }
 
         reader.value = new FileReader();
@@ -60,7 +64,6 @@
         if (files[0]) {
             readFile(files[0]);
 
-            // emit the file change
             emit('change', files[0]);
         }
     }

package/src/components/Pagination.vue

@@ -58,7 +58,6 @@
             default: false,
         },
     });
-
     const emit = defineEmits(['navigate', 'top']);
 
     const initialPageset = reactive([]);

package/src/components/SearchableDropdownInput.vue

@@ -18,7 +18,10 @@
     import { ref, reactive, computed, watch, onMounted } from 'vue';
 
     const props = defineProps({
-        id: String,
+        id: {
+            type: String,
+            required: true,
+        },
         label: String,
         externalValueId: String,
         externalValueName: String,

package/src/components/SwitchInput.vue

@@ -24,14 +24,16 @@
             type: String,
             default: 'No',
         },
-        id: String,
+        id: {
+            type: String,
+            required: true,
+        },
         cssClass: String,
     });
+    const emit = defineEmits(['change']);
 
     const internalValue = ref(props.value);
 
-    const emit = defineEmits(['change']);
-
     function change() {
         internalValue.value = !internalValue.value;
         emit('change', internalValue.value);

package/src/components/TimespanInput.vue

@@ -1,13 +1,12 @@
 <template>
     <div class="timespan">
         <div class="input-container">
-            <input type="number" :min="0" :max="9999" @change="updateValue" :value="value" />
+            <input type="number" :min="0" :max="9999" @change="updateValue" :value="daysValue" />
         </div>
         <div class="input-container select">
             <select :value="selectedInterval" @change="updateTimeInterval">
                 <option :value="TIMESPAN_INTERVALS.DAYS">Days</option>
                 <option :value="TIMESPAN_INTERVALS.WEEKS">Weeks</option>
-                <option :value="TIMESPAN_INTERVALS.MONTHS">Months</option>
                 <option :value="TIMESPAN_INTERVALS.YEARS">Years</option>
             </select>
         </div>
@@ -17,7 +16,6 @@
     const TIMESPAN_INTERVALS = {
         DAYS: 'DAYS',
         WEEKS: 'WEEKS',
-        MONTHS: 'MONTHS',
         YEARS: 'YEARS',
     };
 
@@ -32,7 +30,7 @@
     });
     const emit = defineEmits(['update']);
 
-    const value = ref('');
+    const daysValue = ref('');
     const selectedInterval = ref(TIMESPAN_INTERVALS.DAYS);
 
     onMounted(() => {
@@ -53,7 +51,7 @@
             }
         }
 
-        value.value = newValue;
+        daysValue.value = newValue;
         selectedInterval.value = newInterval;
     }
 
@@ -70,9 +68,9 @@
                     newValue = newValue / 7;
                     newInterval = TIMESPAN_INTERVALS.WEEKS;
                 }
-            } else if (selectedInterval.value === TIMESPAN_INTERVALS.MONTHS) {
-                if (value % 12 === 0) {
-                    newValue = value / 12;
+            } else if (selectedInterval.value === TIMESPAN_INTERVALS.WEEKS) {
+                if (value % 52 === 0) {
+                    newValue = value / 52;
                     newInterval = TIMESPAN_INTERVALS.YEARS;
                 }
             }
@@ -81,7 +79,7 @@
             newInterval = TIMESPAN_INTERVALS.DAYS;
         }
 
-        value.value = newValue;
+        daysValue.value = newValue;
         selectedInterval.value = newInterval;
 
         if (callback !== undefined) {
@@ -93,7 +91,7 @@
         const { value } = e.target;
         selectedInterval.value = value;
 
-        syncValueAndInterval(value, sendUpdate);
+        syncValueAndInterval(daysValue.value, sendUpdate);
     };
 
     function updateValue(e) {
@@ -106,7 +104,7 @@
     };
 
     const realValue = computed(() => {
-        let finalValue = value.value;
+        let finalValue = daysValue.value;
 
         if (selectedInterval.value === TIMESPAN_INTERVALS.WEEKS) {
             finalValue = finalValue * 7;