Merge pull request #518 from openWB/feature-refactor-base-components

Feature refactor base components

Author: benderl

src/App.vue

@@ -345,4 +345,12 @@ export default {
 .container[role="main"] {
   padding: 60px 15px 30px;
 }
+
+.clickable {
+  cursor: pointer;
+}
+
+.not-clickable {
+  cursor: not-allowed;
+}
 </style>

src/components/OpenwbBaseArrayInput.vue

@@ -1,22 +1,18 @@
 <template>
-  <div class="form-row mb-1">
-    <label
-      class="col-md-4 col-form-label"
-      @click="toggleHelp"
+  <openwb-base-setting-element>
+    <template #title>
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </template>
+    <template
+      v-if="$slots.help"
+      #help
     >
-      {{ title }}
-      <font-awesome-icon
-        v-if="$slots.help"
-        :icon="
-          showHelp
-            ? ['fas', 'question-circle']
-            : ['far', 'question-circle']
-        "
-        :class="showHelp ? 'text-info' : ''"
-      />
-    </label>
-    <div class="col-md-8">
-      <div class="form-row">
+      <slot name="help" />
+    </template>
+    <template #default>
+      <div class="w-100">
         <div class="input-group">
           <div class="input-group-prepend">
             <div class="input-group-text">
@@ -42,7 +38,7 @@
               :class="
                 newTagValid
                   ? 'bg-success clickable'
-                  : 'notClickable'
+                  : 'not-clickable'
               "
               @click="addTag"
             >
@@ -56,7 +52,7 @@
           </div>
         </div>
       </div>
-      <div class="form-row tagList mt-1">
+      <div class="tagList mt-1 w-100">
         <span
           v-if="value.length == 0"
           class="noTag"
@@ -80,31 +76,23 @@
           />
         </span>
       </div>
-      <span
-        v-if="showHelp"
-        class="form-row alert alert-info my-1 small"
-      >
-        <slot name="help" />
-      </span>
-    </div>
-  </div>
+    </template>
+  </openwb-base-setting-element>
 </template>
 
 <script>
+import OpenwbBaseSettingElement from "./OpenwbBaseSettingElement.vue";
+
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
-  faQuestionCircle as fasQuestionCircle,
   faTag as fasTag,
   faTimesCircle as fasTimesCircle,
   faPlus as fasPlus,
   faInfoCircle as fasInfoCircle,
 } from "@fortawesome/free-solid-svg-icons";
-import { faQuestionCircle as farQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 library.add(
-  fasQuestionCircle,
-  farQuestionCircle,
   fasTag,
   fasTimesCircle,
   fasPlus,
@@ -115,6 +103,7 @@ export default {
   name: "OpenwbArrayInput",
   components: {
     FontAwesomeIcon,
+    OpenwbBaseSettingElement,
   },
   inheritAttrs: false,
   props: {
@@ -152,27 +141,22 @@ export default {
       get() {
         return (
           this.newTag.length > 0 &&
-          this.value.indexOf(this.newTag) == -1
+          !this.value.includes(this.newTag)
         );
       },
     },
   },
   methods: {
-    toggleHelp() {
-      this.showHelp = !this.showHelp && this.$slots.help !== undefined;
-    },
     addTag() {
       if (this.newTagValid) {
-        let tempValue = this.value;
-        tempValue.push(this.newTag);
-        tempValue.sort();
+        const tempValue = [...this.value, this.newTag].sort();
         this.value = tempValue;
         this.newTag = "";
       }
       this.$refs.tagInput.focus();
     },
     removeTag(index) {
-      let tempValue = this.value;
+      let tempValue = [...this.value];
       tempValue.splice(index, 1);
       this.value = tempValue;
     },
@@ -181,14 +165,6 @@ export default {
 </script>
 
 <style scoped>
-.clickable {
-  cursor: pointer;
-}
-
-.notClickable {
-  cursor: not-allowed;
-}
-
 .remove-element:hover {
   color: var(--danger);
 }
@@ -203,6 +179,8 @@ input:invalid {
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   padding: 5px 5px 0 5px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .tag,

src/components/OpenwbBaseButtonGroupInput.vue

@@ -1,80 +1,65 @@
 <template>
-  <div class="form-row mb-1">
-    <label
-      class="col-md-4 col-form-label"
-      @click="toggleHelp"
-    >
-      <slot>
+  <openwb-base-setting-element>
+    <template #title>
+      <slot name="title">
         {{ title }}
       </slot>
-      <font-awesome-icon
-        v-if="$slots.help"
-        fixed-width
-        :icon="
-          showHelp
-            ? ['fas', 'question-circle']
-            : ['far', 'question-circle']
-        "
-        :class="showHelp ? 'text-info' : ''"
-      />
-    </label>
-    <div class="col-md-8">
-      <div class="form-row">
-        <div class="btn-group btn-block btn-group-toggle">
-          <label
-            v-for="button in buttons"
-            :key="button.value"
-            class="btn"
-            :class="[
-              value == button.buttonValue ? 'active' : '',
-              button.class ? button.class : 'btn-outline-info',
-            ]"
+    </template>
+    <template
+      v-if="$slots.help"
+      #help
+    >
+      <slot name="help" />
+    </template>
+    <template #default>
+      <div class="btn-group btn-block btn-group-toggle">
+        <label
+          v-for="button in buttons"
+          :key="button.value"
+          class="btn"
+          :class="[
+            value == button.buttonValue ? 'active' : '',
+            button.class ? button.class : 'btn-outline-info',
+          ]"
+        >
+          <input
+            v-model="value"
+            type="radio"
+            :value="button.buttonValue"
+            v-bind="$attrs"
           >
-            <input
-              v-model="value"
-              type="radio"
-              :value="button.buttonValue"
-              v-bind="$attrs"
-            >
-            <slot :name="'label-' + button.buttonValue">
-              {{ button.text }}
-            </slot>
-            <font-awesome-icon
-              :icon="['fas', 'check']"
-              :style="[
-                value == button.buttonValue
-                  ? 'visibility: visible'
-                  : 'visibility: hidden',
-              ]"
-            />
-          </label>
-        </div>
+          <slot :name="'label-' + button.buttonValue">
+            {{ button.text }}
+          </slot>
+          <font-awesome-icon
+            fixed-width
+            :icon="['fas', 'check']"
+            :style="[
+              value == button.buttonValue
+                ? 'visibility: visible'
+                : 'visibility: hidden',
+            ]"
+          />
+        </label>
       </div>
-      <span
-        v-if="showHelp"
-        class="form-row alert alert-info my-1 small"
-      >
-        <slot name="help" />
-      </span>
-    </div>
-  </div>
+    </template>
+  </openwb-base-setting-element>
 </template>
 
 <script>
+import OpenwbBaseSettingElement from "./OpenwbBaseSettingElement.vue";
+
 import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-  faQuestionCircle as fasQuestionCircle,
-  faCheck as fasCheck,
-} from "@fortawesome/free-solid-svg-icons";
-import { faQuestionCircle as farQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { faCheck as fasCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(fasQuestionCircle, farQuestionCircle, fasCheck);
+library.add(fasCheck);
 
 export default {
   name: "OpenwbButtonGroupInput",
   components: {
     FontAwesomeIcon,
+    OpenwbBaseSettingElement,
   },
   inheritAttrs: false,
   props: {
@@ -83,11 +68,6 @@ export default {
     buttons: { type: Array, required: true },
   },
   emits: ["update:modelValue"],
-  data() {
-    return {
-      showHelp: false,
-    };
-  },
   computed: {
     value: {
       get() {
@@ -98,10 +78,5 @@ export default {
       },
     },
   },
-  methods: {
-    toggleHelp() {
-      this.showHelp = !this.showHelp && this.$slots.help !== undefined;
-    },
-  },
 };
 </script>