bfg-common 1.2.53 → 1.2.55

package/components/common/diagramMain/modals/editSettings/tabs/Security.vue

@@ -1,183 +1,183 @@
-<template>
-  <div class="wizard-content__container">
-    <div class="wizard-content">
-      <form action="">
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.promiscuousMode }}
-          </span>
-
-          <div class="flex-property-value-group overridable-dropdown">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline"
-                  >
-                    <input
-                      id="promiscuous-mode"
-                      v-model="fieldsValues.promiscuousMode.checked"
-                      type="checkbox"
-                    />
-                    <label for="promiscuous-mode" class="normal-weight">
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div class="flex-property-value-group">
-                    <div class="select">
-                      <select
-                        id="promiscuous-mode-select"
-                        v-model="fieldsValues.promiscuousMode.selected"
-                        :disabled="!fieldsValues.promiscuousMode.checked"
-                        name="selectName"
-                      >
-                        <option value="no" :label="localization.reject">
-                          {{ localization.reject }}
-                        </option>
-                        <option value="yes" :label="localization.accept">
-                          {{ localization.accept }}
-                        </option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.macAddressChanges }}
-          </span>
-
-          <div class="flex-property-value-group overridable-dropdown">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline"
-                  >
-                    <input
-                      id="mac-address-changes"
-                      v-model="fieldsValues.macAddressChanges.checked"
-                      type="checkbox"
-                    />
-                    <label for="mac-address-changes" class="normal-weight">
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div class="flex-property-value-group">
-                    <div class="select">
-                      <select
-                        id="mac-address-select"
-                        v-model="fieldsValues.macAddressChanges.selected"
-                        :disabled="!fieldsValues.macAddressChanges.checked"
-                        name="selectName"
-                      >
-                        <option value="no" :label="localization.reject">
-                          {{ localization.reject }}
-                        </option>
-                        <option value="yes" :label="localization.accept">
-                          {{ localization.accept }}
-                        </option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <span class="flex-property-label-group large">
-            {{ localization.forgedTransmits }}
-          </span>
-
-          <div class="flex-property-value-group overridable-dropdown">
-            <div class="horizontal-flex-container no-margin">
-              <div class="flex-property-value-group">
-                <div class="horizontal-flex-container">
-                  <div
-                    v-if="!props.isSwitch"
-                    class="flex-property-label-group small checkbox-inline"
-                  >
-                    <input
-                      id="forged-transmits"
-                      v-model="fieldsValues.forgedTransmits.checked"
-                      type="checkbox"
-                    />
-                    <label for="forged-transmits" class="normal-weight">
-                      {{ localization.override }}
-                    </label>
-                  </div>
-                  <div class="flex-property-value-group">
-                    <div class="select">
-                      <select
-                        id="forged-transmits"
-                        v-model="fieldsValues.forgedTransmits.selected"
-                        :disabled="!fieldsValues.forgedTransmits.checked"
-                        name="selectName"
-                      >
-                        <option value="no" :label="localization.reject">
-                          {{ localization.reject }}
-                        </option>
-                        <option value="yes" :label="localization.accept">
-                          {{ localization.accept }}
-                        </option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_ModalsInitialData,
-  UI_I_SecurityFields,
-} from '~/components/common/diagramMain/models/interfaces'
-import { securityFieldsInitialFunc } from '~/components/common/diagramMain/modals/config'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    isSwitch: boolean
-    initialData?: UI_I_ModalsInitialData
-  }>(),
-  {
-    isSwitch: false,
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const fieldsValues = ref<UI_I_SecurityFields>(
-  securityFieldsInitialFunc(props.isSwitch, props.initialData)
-)
-
-const emits = defineEmits<{
-  (event: 'change-edit-security-data', securityData: UI_I_SecurityFields): void
-}>()
-
-onMounted(() => {
-  emits('change-edit-security-data', fieldsValues.value)
-})
-
-watch(
-  fieldsValues,
-  (newFieldsValues: UI_I_SecurityFields) => {
-    emits('change-edit-security-data', newFieldsValues)
-  },
-  { deep: true }
-)
-</script>
+<template>
+  <div class="wizard-content__container">
+    <div class="wizard-content">
+      <form action="">
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.promiscuousMode }}
+          </span>
+
+          <div class="flex-property-value-group overridable-dropdown">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline"
+                  >
+                    <input
+                      id="promiscuous-mode"
+                      v-model="fieldsValues.promiscuousMode.checked"
+                      type="checkbox"
+                    />
+                    <label for="promiscuous-mode" class="normal-weight">
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div class="flex-property-value-group">
+                    <div class="select">
+                      <select
+                        id="promiscuous-mode-select"
+                        v-model="fieldsValues.promiscuousMode.selected"
+                        :disabled="!fieldsValues.promiscuousMode.checked"
+                        name="selectName"
+                      >
+                        <option value="no" :label="localization.reject">
+                          {{ localization.reject }}
+                        </option>
+                        <option value="yes" :label="localization.accept">
+                          {{ localization.accept }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.macAddressChanges }}
+          </span>
+
+          <div class="flex-property-value-group overridable-dropdown">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline"
+                  >
+                    <input
+                      id="mac-address-changes"
+                      v-model="fieldsValues.macAddressChanges.checked"
+                      type="checkbox"
+                    />
+                    <label for="mac-address-changes" class="normal-weight">
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div class="flex-property-value-group">
+                    <div class="select">
+                      <select
+                        id="mac-address-select"
+                        v-model="fieldsValues.macAddressChanges.selected"
+                        :disabled="!fieldsValues.macAddressChanges.checked"
+                        name="selectName"
+                      >
+                        <option value="no" :label="localization.reject">
+                          {{ localization.reject }}
+                        </option>
+                        <option value="yes" :label="localization.accept">
+                          {{ localization.accept }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="horizontal-flex-container">
+          <span class="flex-property-label-group large">
+            {{ localization.forgedTransmits }}
+          </span>
+
+          <div class="flex-property-value-group overridable-dropdown">
+            <div class="horizontal-flex-container no-margin">
+              <div class="flex-property-value-group">
+                <div class="horizontal-flex-container">
+                  <div
+                    v-if="!props.isSwitch"
+                    class="flex-property-label-group small checkbox-inline"
+                  >
+                    <input
+                      id="forged-transmits"
+                      v-model="fieldsValues.forgedTransmits.checked"
+                      type="checkbox"
+                    />
+                    <label for="forged-transmits" class="normal-weight">
+                      {{ localization.override }}
+                    </label>
+                  </div>
+                  <div class="flex-property-value-group">
+                    <div class="select">
+                      <select
+                        id="forged-transmits"
+                        v-model="fieldsValues.forgedTransmits.selected"
+                        :disabled="!fieldsValues.forgedTransmits.checked"
+                        name="selectName"
+                      >
+                        <option value="no" :label="localization.reject">
+                          {{ localization.reject }}
+                        </option>
+                        <option value="yes" :label="localization.accept">
+                          {{ localization.accept }}
+                        </option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_ModalsInitialData,
+  UI_I_SecurityFields,
+} from '~/components/common/diagramMain/models/interfaces'
+import { securityFieldsInitialFunc } from '~/components/common/diagramMain/modals/config'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    isSwitch: boolean
+    initialData?: UI_I_ModalsInitialData
+  }>(),
+  {
+    isSwitch: false,
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const fieldsValues = ref<UI_I_SecurityFields>(
+  securityFieldsInitialFunc(props.isSwitch, props.initialData)
+)
+
+const emits = defineEmits<{
+  (event: 'change-edit-security-data', securityData: UI_I_SecurityFields): void
+}>()
+
+onMounted(() => {
+  emits('change-edit-security-data', fieldsValues.value)
+})
+
+watch(
+  fieldsValues,
+  (newFieldsValues: UI_I_SecurityFields) => {
+    emits('change-edit-security-data', newFieldsValues)
+  },
+  { deep: true }
+)
+</script>