bfg-common 1.0.69 → 1.0.71

package/components/common/select/radio/RadioGroup.vue

@@ -1,30 +1,23 @@
 <template>
   <div class="select-option">
     <div
-      v-for="{
-        value,
-        disabled,
-        label,
-        description,
-        isTooltip,
-        helpDesc,
-      } in options"
-      :key="value"
+      v-for="radio in options"
+      :key="radio.value"
       class="select-option__inner radio"
-      :class="disabled && 'disabled'"
+      :class="radio.disabled && 'disabled'"
     >
       <div class="select-option__wrapper">
         <input
-          :id="label"
+          :id="radio.label"
           v-model="selectedType"
           type="radio"
-          :value="value"
-          :disabled="disabled"
+          :value="radio.value"
+          :disabled="radio.disabled"
         />
-        <label :for="label">{{ label }}</label>
+        <label :for="radio.label">{{ radio.label }}</label>
 
         <div
-          :id="`${value}-select-tooltip-icon`"
+          :id="`${radio.value}-select-tooltip-icon`"
           class="signpost-container relative"
         >
           <atoms-the-icon
@@ -32,22 +25,22 @@
             width="24px"
             height="24px"
             name="info-circle"
-            @click="isTooltip = !isTooltip"
+            @click="radio.isTooltip = !radio.isTooltip"
           />
           <atoms-tooltip-signpost
-            v-if="isTooltip"
-            :elem-id="`${value}-select-tooltip-icon`"
-            @hide="isTooltip = false"
+            v-if="radio.isTooltip"
+            :elem-id="`${radio.value}-select-tooltip-icon`"
+            @hide="radio.isTooltip = false"
           >
             <div class="tooltip-content-container">
-              <p>{{ helpDesc }}</p>
+              <p>{{ radio.tooltipContent }}</p>
             </div>
           </atoms-tooltip-signpost>
         </div>
       </div>
 
-      <div v-if="description" class="select-option__description">
-        {{ description }}
+      <div v-if="radio.description" class="select-option__description">
+        {{ radio.description }}
       </div>
     </div>
   </div>

package/components/common/select/radio/models/interfaces.ts

@@ -2,13 +2,12 @@ export interface UI_I_RadioOption {
   label: string
   value: string | number
   disabled?: boolean
+  isTooltip?: boolean
   description?: string
-  isTooltip?: string
-  helpDesc?: string
+  tooltipContent?: string
 }
 
 export interface UI_I_DatastoreTypeOption extends UI_I_RadioOption {
   desc: string
   isShowHelp?: boolean
-  helpDesc?: string
 }

package/components/common/wizards/datastore/add/nfs/version/Version.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
 import { UI_T_NfsType } from '~/components/common/wizards/datastore/add/models/types'
 import { nfsVersionFunc } from '~/components/common/wizards/datastore/add/nfs/version/config/versionOptions'
 
@@ -35,7 +35,7 @@ const emits = defineEmits<{
 }>()
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const nfsVersion = readonly<UI_I_DatastoreTypeOption[]>(
+const nfsVersion = readonly<UI_I_RadioOption[]>(
   nfsVersionFunc(localization.value)
 )
 

package/components/common/wizards/datastore/add/types/Types.vue

@@ -26,55 +26,12 @@
       v-model="selectedType"
       :options="datastoreTypes"
     />
-
-    <div
-      v-for="item in datastoreTypes"
-      :key="item.value"
-      class="datastore-types__inner radio"
-      :class="item.disabled && 'disabled'"
-    >
-      <div class="header-row">
-        <input
-          :id="item.label"
-          v-model="selectedType"
-          type="radio"
-          :value="item.value"
-          :disabled="item.disabled"
-        />
-        <label :for="item.label">
-          {{ item.label }}
-        </label>
-        <div
-          :id="`${item.value}-select-help-icon`"
-          class="signpost-container relative"
-        >
-          <atoms-the-icon
-            fill="#0072a3"
-            width="24px"
-            height="24px"
-            name="info-circle"
-            @click="item.isShowHelp = !item.isShowHelp"
-          />
-          <atoms-tooltip-signpost
-            v-if="item.isShowHelp"
-            :elem-id="`${item.value}-select-help-icon`"
-            @hide="item.isShowHelp = false"
-          >
-            <div class="help-desc-container">
-              <p class="help-desc">{{ item.helpDesc }}</p>
-            </div>
-          </atoms-tooltip-signpost>
-        </div>
-      </div>
-
-      <div class="datastore-types__desc">{{ item.desc }}</div>
-    </div>
   </section>
 </template>
 
 <script lang="ts" setup>
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
 import { datastoreTypesFunc } from '~/components/common/wizards/datastore/add/types/config/typeOptions'
 
 const props = defineProps<{
@@ -85,7 +42,7 @@ const emits = defineEmits<{
 }>()
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const datastoreTypes = ref<UI_I_DatastoreTypeOption[]>(
+const datastoreTypes = ref<UI_I_RadioOption[]>(
   datastoreTypesFunc(localization.value)
 )
 
@@ -103,12 +60,6 @@ const isShowTypeHelp = ref<boolean>(false)
 
 <style lang="scss" scoped>
 .datastore-types {
-  //&__subtitle {
-  //}
-  //&__desc {
-  //  margin-left: 22px;
-  //}
-
   .signpost-container {
     display: flex;
     cursor: pointer;
@@ -123,20 +74,4 @@ const isShowTypeHelp = ref<boolean>(false)
     gap: 10px;
   }
 }
-
-//.radio {
-//  margin-bottom: 5px;
-//  &:nth-child(2) {
-//    margin-top: 10px;
-//  }
-//  &.disabled {
-//    opacity: 0.7;
-//  }
-//}
-//.radio {
-//}
-//input[type='radio']:focus:checked + label::before,
-//input[type='radio']:focus + label::before {
-//  box-shadow: inset 0 0 0 0.25rem #0094d2;
-//}
 </style>

package/components/common/wizards/datastore/add/types/config/typeOptions.ts

@@ -1,39 +1,33 @@
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_DatastoreTypeOption } from '~/components/common/select/radio/models/interfaces'
+import { UI_I_RadioOption } from '~/components/common/select/radio/models/interfaces'
 
 export const datastoreTypesFunc = (
   localization: UI_I_Localization
-): UI_I_DatastoreTypeOption[] => {
+): UI_I_RadioOption[] => {
   return [
     {
       label: localization.localStorage,
       value: 'local',
       disabled: false,
-      desc: localization.localDesc,
       description: localization.localDesc,
-      isShowHelp: false,
       isTooltip: false,
-      helpDesc: localization.localStorageHelpDesc,
+      tooltipContent: localization.localStorageHelpDesc,
     },
     {
       label: localization.stormSharedStorage,
       value: 'shared-storm',
       disabled: false,
-      desc: localization.sharedStormDesc,
       description: localization.sharedStormDesc,
-      isShowHelp: false,
       isTooltip: false,
-      helpDesc: localization.stormSharedStorageHelpDesc,
+      tooltipContent: localization.stormSharedStorageHelpDesc,
     },
     {
       label: localization.nfs,
       value: 'nfs',
       disabled: false,
-      desc: localization.nfsDesc,
       description: localization.nfsDesc,
-      isShowHelp: false,
       isTooltip: false,
-      helpDesc: localization.nfsHelpDesc,
+      tooltipContent: localization.nfsHelpDesc,
     },
     // {
     //   label: localization.vVol,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.0.69",
+  "version": "1.0.71",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",