@rypen-dev/shared-components 7.0.16 → 7.0.18

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 6, this package is built with Webpack 5 and Vue 3.",
-	"version": "7.0.16",
+	"version": "7.0.18",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/src/components/DateInput.vue

@@ -13,7 +13,7 @@
     </div>
 </template>
 <script setup>
-    import { onMounted, ref, useTemplateRef } from "vue";
+    import { ref } from "vue";
     import moment from "moment";
 
     const props = defineProps({
@@ -37,8 +37,7 @@
     });
     const emit = defineEmits(['change', 'truechange']);
 
-    const testref = ref('testing!');
-    //const inputref = useTemplateRef('inputref');
+    const inputref = ref(null);
 
     // methods
     function dateToYYYYMMDD(date) {
@@ -63,14 +62,11 @@
         }
     }
 
-    onMounted(() => {
-        console.log(testref);
-    });
+    function triggerBlur() {
+        inputref.value && inputref.value.blur();
+    }
 
     defineExpose({
-        triggerBlur: () => {
-            //inputref.value.blur();
-            console.log('blur triggered');
-        },
+        triggerBlur,
     });
 </script>

package/src/components/DebouncedTextBox.vue

@@ -4,45 +4,41 @@
         <a v-if="includeClear && value.length" class="clear-button" @click="clearInput"><i class="fa-solid fa-times"></i></a>
     </div>
 </template>
-<script>
+<script setup>
+    import { onBeforeMount, watch, ref } from "vue";
+
     import { debounce } from "@rypen-dev/helpers";
 
-    export default {
-        name: 'DebouncedTextBox',
-        props: {
-            cssClass: String,
-            initialValue: String,
-            includeClear: {
-                type: Boolean,
-                default: false,
-            },
-        },
-        data: () => {
-            return {
-                value: '',
-                debouncedValue: '',
-            };
+    const props = defineProps({
+        cssClass: String,
+        initialValue: String,
+        includeClear: {
+            type: Boolean,
+            default: false,
         },
-        created: function() {
-            this.debouncedAction = debounce(value => {
-                this.debouncedValue = value;
-                this.$emit('change', value);
-            });
+    });
+    const emit = defineEmits(['change']);
 
-            if (this.initialValue) {
-                this.value = this.initialValue;
-            }
-        },
-        methods: {
-            clearInput() {
-                this.value = '';
-                this.debouncedAction('');
-            },
-        },
-        watch: {
-            value(newValue) {
-                this.debouncedAction(newValue);
-            },
-        },
-    };
+    const value = ref('');
+    const debouncedValue = ref('');
+
+    onBeforeMount(() => {
+        if (props.initialValue) {
+            value.value = props.initialValue;
+        }
+    });
+
+    const debouncedAction = debounce((newValue) => {
+        debouncedValue.value = newValue;
+        emit('change', newValue);
+    });
+
+    function clearInput() {
+        value.value = '';
+        emit('change', '');
+    }
+
+    watch(value, (newValue) => {
+        debouncedAction(newValue);
+    });
 </script>

package/src/components/NumberInput.vue

@@ -1,143 +1,141 @@
 <template>
     <input type="number"
-        :value="internalValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :pattern="pattern"
-        inputmode="numeric"
-        ref="input"
-        @keydown.up.prevent="increment"
-        @keydown.down.prevent="decrement"
-        @keydown.enter="triggerChange"
-        @change="change"
-        @paste="paste"
-        @blur="blur"
-        @focus="focus"
-    />
+           :value="internalValue"
+           :placeholder="placeholder"
+           :disabled="disabled"
+           :pattern="pattern"
+           inputmode="numeric"
+           ref="inputref"
+           @keydown.up.prevent="increment"
+           @keydown.down.prevent="decrement"
+           @keydown.enter="triggerChange"
+           @change="change"
+           @paste="paste"
+           @blur="blur"
+           @focus="focus" />
 </template>
-<script>
+<script setup>
+    import { ref, watch } from "vue";
+
     const REGEXP_NUMBER = /^-?(?:\d+|\d+\.\d+|\.\d+)(?:[eE][-+]?\d+)?$/;
 
-    export default {
-        name: 'NumberInput',
-        props: {
-            value: {
-                type: Number,
-            },
-            min: {
-                type: Number,
-                default: 0,
-            },
-            max: {
-                type: Number,
-                default: Infinity,
-            },
-            step: {
-                type: Number,
-                default: 1,
-            },
-            placeholder: String,
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
-            pattern: {
-                type: String,
-                default: '[0-9]*', // this allows ONLY NUMBERS
-            },
-            selectOnFocus: {
-                type: Boolean,
-                default: false,
-            },
+    const props = defineProps({
+        initialValue: Number,
+        min: {
+            type: Number,
+            default: 0,
         },
-        data () {
-            return {
-                internalValue: this.value,
-            };
+        max: {
+            type: Number,
+            default: Infinity,
         },
-        created: function () {
-            
+        step: {
+            type: Number,
+            default: 1,
         },
-        methods: {
-            triggerChange(e) {
-                this.change(e);
-            },
-            change(e) {
-                this.setValue(e.target.value);
-            },
-            blur(e) {
-                let val = this.between(this.min, e.target.value, this.max);
-                if (this.value !== val) {
-                    this.setValue(e.target.value);
-                }
-            },
-            focus(e) {
-                if (this.selectOnFocus) {
-                    this.$refs.input.select();
-                }
-            },
-            paste(e) {
-                const clipboardData = e.clipboardData || window.clipboardData;
-                if (clipboardData && !REGEXP_NUMBER.test(clipboardData.getData('text'))) {
-                    e.preventDefault();
-                }
-            },
-            between(min, val, max) {
-                if (min <= max) {
-                    return Math.min(max, Math.max(min, val));
-                }
-
-                return val;
-            },
-            setValue(value) {
-                const oldValue = this.internalValue;
-                let newValue = Math.round(value);
-
-                if (this.min <= this.max) {
-                    newValue = this.between(this.min, newValue, this.max);
-                }
-
-                this.internalValue = newValue;
-
-                if (newValue === oldValue) {
-                    this.$refs.input.value = newValue;
-                }
-                
-                this.$emit('change', newValue, oldValue);
-            },
-
-            crement(up = true) {
-                let step = this.step;
-                if (!up) {
-                    step = -step;
-                }
-
-                this.internalValue += step;
-            },
-            increment(e) {
-                if (this.internalValue < this.max) {
-                    this.crement();
-                }
-            },
-            decrement(e) {
-                if (this.internalValue > this.min) {
-                    this.crement(false);
-                }
-            },
+        placeholder: String,
+        disabled: {
+            type: Boolean,
+            default: false,
         },
-        computed: {
-            
+        pattern: {
+            type: String,
+            default: '[0-9]*', // this allows ONLY NUMBERS
         },
-        watch: {
-            value: {
-                immediate: true,
-                handler(value) {
-                    value = parseInt(value);
-                    if (!isNaN(value) && value !== this.internalValue) {
-                        this.setValue(value);
-                    }
-                }
-            }
+        selectOnFocus: {
+            type: Boolean,
+            default: false,
         },
-    };
+    });
+
+    const emit = defineEmits(['change']);
+
+    const inputref = ref(null);
+
+    const internalValue = ref(props.initialValue);
+
+    // methods
+    function triggerChange(e) {
+        change(e);
+    }
+
+    function change(e) {
+        setValue(e.target.value);
+    }
+
+    function blur(e) {
+        let val = between(props.min, e.target.value, props.max);
+        if (internalValue.value !== val) {
+            setValue(e.target.value);
+        }
+    }
+
+    function focus(e) {
+        if (props.selectOnFocus) {
+            e.target.select();
+        }
+    }
+
+    function paste(e) {
+        const clipboardData = e.clipboardData || window.clipboardData;
+        if (clipboardData && !REGEXP_NUMBER.test(clipboardData.getData('text'))) {
+            e.preventDefault();
+        }
+    }
+
+    function between(min, val, max) {
+        if (min <= max) {
+            return Math.min(max, Math.max(min, val));
+        }
+        return val;
+    }
+
+    function setValue(value) {
+        const oldValue = internalValue.value;
+        let newValue = Math.round(value);
+
+        if (props.min <= props.max) {
+            newValue = between(props.min, newValue, props.max);
+        }
+
+        internalValue.value = newValue;
+
+        if (newValue === oldValue) {
+            inputref.value.value = newValue;
+        }
+
+        emit('change', newValue, oldValue);
+    }
+
+    function crement(up = true) {
+        let step = props.step;
+        if (!up) {
+            step = -step;
+        }
+
+        internalValue.value += step;
+    }
+
+    function increment(e) {
+        if (internalValue.value < props.max) {
+            crement();
+        }
+    }
+
+    function decrement(e) {
+        if (internalValue.value > props.min) {
+            crement(false);
+        }
+    }
+
+    watch(() => props.initialValue, (newValue) => {
+        const value = parseInt(newValue);
+        if (!isNaN(value) && value !== internalValue.value) {
+            setValue(value);
+        }
+    });
+
+    defineExpose({
+        triggerChange,
+    });
 </script>

package/src/components/SuccessCheckmark.vue

@@ -7,22 +7,11 @@
     </svg>
 </template>
 
-<script>
-    export default {
-        name: 'SuccessCheckmark',
-        props: {
-            on: {
-                type: Boolean,
-                default: false,
-            },
+<script setup>
+    const props = defineProps({
+        on: {
+            type: Boolean,
+            default: false,
         },
-        data: () => {
-            return {
-                
-            }
-        },
-        created: function () {
-            
-        },
-    }
+    });
 </script>

package/src/components/SwitchInput.vue

@@ -4,44 +4,36 @@
         <label :for="id" class="switch-paddle" :data-true-label="trueLabel" :data-false-label="falseLabel"></label>
     </div>
 </template>
-<script>
-    export default {
-        name: 'SwitchInput',
-        props: {
-            value: {
-                type: Boolean,
-            },
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
-            trueLabel: {
-                type: String,
-                default: 'Yes',
-            },
-            falseLabel: {
-                type: String,
-                default: 'No',
-            },
-            id: String,
-            cssClass: String,
+<script setup>
+    import { ref } from "vue";
+
+    const props = defineProps({
+        value: {
+            type: Boolean,
+            default: false,
         },
-        data () {
-            return {
-                internalValue: false,
-            };
+        disabled: {
+            type: Boolean,
+            default: false,
         },
-        created: function () {
-            this.internalValue = this.value;
+        trueLabel: {
+            type: String,
+            default: 'Yes',
         },
-        methods: {
-            change() {
-                this.internalValue = !this.internalValue;
-                this.$emit('change', this.internalValue);
-            },
+        falseLabel: {
+            type: String,
+            default: 'No',
         },
-        computed: {
-            
-        },
-    };
+        id: String,
+        cssClass: String,
+    });
+
+    const internalValue = ref(props.value);
+
+    const emit = defineEmits(['change']);
+
+    function change() {
+        internalValue.value = !internalValue.value;
+        emit('change', internalValue.value);
+    }
 </script>