Front end input update feature (#17)

* add lock/unlock feature | Fix Bootstrap53Dto

* Auto stash before rebase of "main"

* update fe input types

* add StringInput | add IntInput | add FloatInput | Fix SizeInput | FixColorInput | Fix cs

* fix download file name

assets/vue/Store/store.js

@@ -4,23 +4,12 @@ const state = reactive({
     variables: {},
     css: null,
     isLoading: true,
-    sourcesOptions: [
-        '/examples/example.bootstrap.5.3.html',
-        '/examples/custom.html',
-    ],
-    lockedColors: {}, // Track which colors are locked
+    lockedColors: {},
 });
 
 export const store = {
     state,
 
-    get sourcesOptions() {
-        return state.sourcesOptions;
-    },
-    set sourcesOptions(value) {
-        state.sourcesOptions = value;
-    },
-
     // Getter and Setter for `variables`
     get variables() {
         return state.variables;
@@ -66,7 +55,7 @@ export const store = {
         if (state.variables[sectionKey]) {
             Object.keys(state.variables[sectionKey]).forEach((key) => {
                 const item = state.variables[sectionKey][key];
-                item.default = item.default;
+                item.value = item.default;
             });
         }
     },

assets/vue/controllers/Input/ColorPickerInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label class="fw-bold text-muted text-capitalize" :for="id">
+    <label class="fw-bold text-muted text-capitalize" :for="modelValue.label">
       <span>{{ modelValue.label }}</span>
       <!-- Lock icon toggle -->
       <i
@@ -13,8 +13,8 @@
       <!-- Text input for color hex value or SCSS variable -->
       <input
           type="text"
-          :id="id"
-          :placeholder="label"
+          :id="modelValue.label"
+          :placeholder="modelValue.label"
           v-model="inputValue"
           @input="onInput"
           @focus="showSuggestions = true"
@@ -158,4 +158,4 @@ export default {
   max-height: 150px;
   overflow-y: auto;
 }
-</style>
+</style>

assets/vue/controllers/Input/FloatInput.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <label class="fw-bold text-muted text-capitalize" :for="modelValue.label">{{ modelValue.label }}</label>
+    <div class="input-group w-100">
+      <!-- Input for float values -->
+      <input
+          type="number"
+          step="0.01"
+          class="form-control"
+          v-model="computedFloat"
+          @input="emitUpdatedValue"
+          aria-label="Float value input"
+          placeholder="Enter a float value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FloatInput",
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    // Computed property to handle the float value
+    computedFloat: {
+      get() {
+        return this.modelValue.value !== null && this.modelValue.value !== undefined
+            ? parseFloat(this.modelValue.value)
+            : parseFloat(this.modelValue.default) || 0;
+      },
+      set(newValue) {
+        this.$set(this.modelValue, "value", newValue);
+      },
+    },
+  },
+  methods: {
+    emitUpdatedValue() {
+      this.$emit("update:modelValue", this.modelValue);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

assets/vue/controllers/Input/IntegerInput.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <label class="fw-bold text-muted text-capitalize" :for="modelValue.label">{{ modelValue.label }}</label>
+    <div class="input-group w-100">
+      <!-- Input for integer values -->
+      <input
+          type="number"
+          step="1"
+          class="form-control"
+          v-model="computedInteger"
+          @input="emitUpdatedValue"
+          aria-label="Integer value input"
+          placeholder="Enter an integer"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "IntegerInput",
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    // Computed property to handle integer values, defaulting if value is null
+    computedInteger: {
+      get() {
+        return this.modelValue.value !== null && this.modelValue.value !== undefined
+            ? parseInt(this.modelValue.value, 10)
+            : parseInt(this.modelValue.default, 10) || 0;
+      },
+      set(newValue) {
+        this.$set(this.modelValue, "value", parseInt(newValue, 10));
+      },
+    },
+  },
+  methods: {
+    emitUpdatedValue() {
+      // Emit the updated modelValue object to the parent
+      this.$emit("update:modelValue", this.modelValue);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

assets/vue/controllers/Input/SizeInput.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
-    <label class="fw-bold text-muted text-capitalize" :for="modelValue.title">{{ modelValue.label }}</label>
+    <label class="fw-bold text-muted text-capitalize" :for="modelValue.label">{{ modelValue.label }}</label>
+    {{this.modelValue.value}}
     <div class="input-group w-100">
-      <!-- Input for the size value with unit -->
+      <!-- Input for the size value -->
+
       <input
-          :id="modelValue.title"
-          type="text"
+          type="number"
           class="form-control"
-          v-model="computedSize"
-          @input="emitUpdatedValue"
+          v-model="size"
+          @input="updateSize"
           aria-label="Size value input"
           placeholder="Size"
       />
@@ -18,17 +19,17 @@
           data-bs-toggle="dropdown"
           aria-expanded="false"
       >
-        {{ extractUnit(computedSize) }}
+        {{ unit }}
       </button>
 
       <!-- Dropdown menu for selecting a unit -->
       <ul class="dropdown-menu dropdown-menu-end">
         <li
-            v-for="unit in units"
-            :key="unit"
-            @click="selectUnit(unit)"
+            v-for="unitOption in units"
+            :key="unitOption"
+            @click="selectUnit(unitOption)"
         >
-          <a class="dropdown-item" href="#">{{ unit }}</a>
+          <a class="dropdown-item">{{ unitOption }}</a>
         </li>
       </ul>
     </div>
@@ -47,34 +48,32 @@ export default {
   data() {
     return {
       units: ["px", "%", "em", "rem", "vw", "vh"], // List of CSS units
+      size: null, // Numeric part of the size
+      unit: "px", // Default unit if none specified
     };
   },
-  computed: {
-    // Computed property for size with unit, falling back to default if value is null
-    computedSize: {
-      get() {
-        return this.modelValue.value || this.modelValue.default || "0px";
-      },
-      set(newValue) {
-        this.$set(this.modelValue, "value", newValue);
-      },
-    },
+  mounted() {
+    // Initialize size and unit based on modelValue's default or value
+    const initialSize = this.modelValue.value || this.modelValue.default || "0px";
+    const match = initialSize.match(/^([\d.]+)([a-zA-Z%]+)$/);
+    if (match) {
+      this.size = parseFloat(match[1]);
+      this.unit = match[2];
+    } else {
+      this.size = parseFloat(initialSize) || 0;
+      this.unit = "px"; // Default to px if no unit is found
+    }
   },
   methods: {
-    emitUpdatedValue() {
-      // Emit the updated modelValue object to the parent
+    updateSize() {
+      // Update the model value with the current size and unit
+      this.modelValue.value = `${this.size}${this.unit}`;
       this.$emit("update:modelValue", this.modelValue);
     },
-    selectUnit(unit) {
-      // Extract the numeric part of the computed size and combine it with the selected unit
-      const valueWithoutUnit = parseFloat(this.computedSize);
-      this.computedSize = `${valueWithoutUnit}${unit}`;
-      this.emitUpdatedValue();
-    },
-    extractUnit(value) {
-      // Extract the unit from the given value
-      const match = value.match(/[a-zA-Z%]+$/);
-      return match ? match[0] : "px";
+    selectUnit(selectedUnit) {
+      // Update the unit and emit the new combined value
+      this.unit = selectedUnit;
+      this.updateSize();
     },
   },
 };

assets/vue/controllers/Input/StringInput.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <label class="fw-bold text-muted text-capitalize" :for="modelValue.label">{{ modelValue.label }}</label>
+    <div class="input-group w-100">
+      <!-- Input for string values -->
+      <input
+          type="text"
+          class="form-control"
+          v-model="computedString"
+          @input="emitUpdatedValue"
+          aria-label="String value input"
+          placeholder="Enter a text value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StringInput",
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    // Computed property for string value, using modelValue.value or falling back to modelValue.default
+    computedString: {
+      get() {
+        return this.modelValue.value !== null && this.modelValue.value !== undefined
+            ? this.modelValue.value
+            : this.modelValue.default || "";
+      },
+      set(newValue) {
+        this.$set(this.modelValue, "value", newValue);
+      },
+    },
+  },
+  methods: {
+    emitUpdatedValue() {
+      // Emit the updated modelValue object to the parent
+      this.$emit("update:modelValue", this.modelValue);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

assets/vue/controllers/Input/SwitchInput.vue

@@ -4,36 +4,27 @@
     <input
         class="form-check-input"
         type="checkbox"
-        :id="modelValue.label"
-        v-model="computedValue"
+        :id="id"
+        v-model="modelValue.default"
         @change="emitUpdatedValue"
         role="switch"
     />
     <!-- Label for the switch -->
-    <label class="form-check-label" :for="modelValue.label">{{ modelValue.label }}</label>
+    <label class="form-check-label" :for="id">{{ modelValue.label }}</label>
   </div>
 </template>
 
 <script>
 export default {
   name: 'SwitchInput',
   props: {
+    id: String,
+    label: String,
     modelValue: {
       type: Object,
       required: true,
     },
   },
-  computed: {
-    // Computed property to access value or fallback to default
-    computedValue: {
-      get() {
-        return this.modelValue.value ?? this.modelValue.default;
-      },
-      set(newValue) {
-        this.$set(this.modelValue, 'value', newValue);
-      },
-    },
-  },
   methods: {
     emitUpdatedValue() {
       this.$emit('update:modelValue', this.modelValue);