bfg-common 1.3.489 → 1.3.490

package/components/common/layout/theHeader/userMenu/UserMenu.vue

@@ -23,6 +23,7 @@
       :time-format="props.timeFormat"
       :user="props.userFromStore"
       :new-view="props.newView"
+      :is-new-view="isNewView"
       :selected-language-type="props.selectedLanguageType"
       :selected-language="props.selectedLanguage"
       :project="props.project"

package/components/common/layout/theHeader/userMenu/modals/preferences/Preferences.vue

@@ -1,92 +1,53 @@
 <template>
-  <atoms-modal
-    show
-    test-id="user-preferences-modal"
-    width="580px"
-    height="345px"
-    :title="localization.preferences"
-    @hide="onHide"
-  >
-    <template #modalBody>
-      <atoms-nav-bar
-        v-model="selectedTab"
-        test-id="user-preferences-nav-bar"
-        :items="tabsItems"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-time-format
-        v-if="selectedTab === 'time-tab'"
-        :time-format="props.timeFormat"
-        @update="emits('update-time-format', $event)"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-change-language
-        v-if="selectedTab === 'language-tab'"
-        :selected-type="props.selectedLanguageType"
-        :selected-language="props.selectedLanguage"
-        :project="props.project"
-        @update-language-type="emits('update-language-type', $event)"
-        @update="emits('update-language', $event)"
-        @update-is-browser="emits('update-is-browser', $event)"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-inventory
-        v-if="selectedTab === 'inventory-tab' && isSphere"
-        :vm-cluster="props.user?.ui_options?.vm_in_hosts_clusters"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-default-console
-        v-if="selectedTab === 'console-tab' && isSphere"
-        :remote-console="props.user?.ui_options?.remote_console"
-        :project="props.project"
-      />
-
-      <common-layout-the-header-user-menu-modals-preferences-view
-        v-if="selectedTab === 'view-tab'"
-        :project="props.project"
-        :is-new-view="props.newView"
-        @update="emits('update-is-new-view', $event)"
-      />
-    </template>
-
-    <template #modalFooter>
-      <button
-        id="user-preferences-cancel-button"
-        data-id="user-preferences-cancel-button"
-        class="btn btn-outline"
-        @click="onHide"
-      >
-        {{ localization.cancel }}
-      </button>
-      <button
-        id="user-preferences-apply-button"
-        data-id="user-preferences-apply-button"
-        class="btn btn-primary"
-        @click="emits('submit')"
-      >
-        {{ localization.save }}
-      </button>
-    </template>
-  </atoms-modal>
+  <common-layout-the-header-user-menu-modals-preferences-new
+    v-if="props.isNewView"
+    :project="props.project"
+    :time-format="props.timeFormat"
+    :user="props.user"
+    :new-view="props.newView"
+    :selected-language-type="props.selectedLanguageType"
+    :selected-language="props.selectedLanguage"
+    @hide="emits('hide')"
+    @update-time-format="emits('update-time-format', $event)"
+    @update-language="emits('update-language', $event)"
+    @update-language-type="emits('update-language-type', $event)"
+    @update-is-browser="emits('update-is-browser', $event)"
+    @update-is-new-view="emits('update-is-new-view', $event)"
+    @submit="emits('submit')"
+  />
+  <common-layout-the-header-user-menu-modals-preferences-old
+    v-else
+    :project="props.project"
+    :time-format="props.timeFormat"
+    :user="props.user"
+    :new-view="props.newView"
+    :selected-language-type="props.selectedLanguageType"
+    :selected-language="props.selectedLanguage"
+    @hide="emits('hide')"
+    @update-time-format="emits('update-time-format', $event)"
+    @update-language="emits('update-language', $event)"
+    @update-language-type="emits('update-language-type', $event)"
+    @update-is-browser="emits('update-is-browser', $event)"
+    @update-is-new-view="emits('update-is-new-view', $event)"
+    @submit="emits('submit')"
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
-import type { UI_T_UserPreferenceTab } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/models/types'
 import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
 import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
-import { preferencesTabs } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs'
 
 const props = defineProps<{
   project: UI_T_Project
   timeFormat: UI_T_TimeValue
-  selectedLanguage: UI_T_LangValue
-  selectedLanguageType: UI_T_LangValue
-  newView: boolean
   user?: UI_I_User
+  newView: boolean
+  selectedLanguageType: UI_T_LangValue
+  selectedLanguage: UI_T_LangValue
+  isNewView: boolean
 }>()
+
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'update-time-format', value: UI_T_TimeValue): void
@@ -96,24 +57,4 @@ const emits = defineEmits<{
   (event: 'update-is-new-view', value: boolean): void
   (event: 'submit'): void
 }>()
-
-const { $store }: any = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isSphere = ref<boolean>(props.project === 'sphere')
-const selectedTab = ref<UI_T_UserPreferenceTab>('time-tab')
-
-const tabsItems = computed<UI_I_CollapseNavItem[]>(() =>
-  preferencesTabs(localization.value, props.project)
-)
-
-const onHide = (): void => {
-  emits('hide')
-
-  if (isSphere.value) {
-    selectedTab.value = 'time-tab'
-    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', { clear: true })
-  }
-}
 </script>

package/components/common/layout/theHeader/userMenu/modals/preferences/PreferencesNew.vue

@@ -0,0 +1,91 @@
+<template>
+  <ui-modal
+    test-id="user-preferences-modal"
+    width="580px"
+    :title="localization.preferences"
+    @submit="emits('submit')"
+    @hide="onHide"
+  >
+    <template #content>
+      <ui-modal-block-standard>
+        <ui-modal-block-form-standard>
+          <common-layout-the-header-user-menu-modals-preferences-time-format-new
+            :time-format="props.timeFormat"
+            @update="emits('update-time-format', $event)"
+          />
+        </ui-modal-block-form-standard>
+
+        <ui-modal-block-form-standard>
+          <common-layout-the-header-user-menu-modals-preferences-change-language-new
+            :selected-type="props.selectedLanguageType"
+            :selected-language="props.selectedLanguage"
+            :project="props.project"
+            @update-language-type="emits('update-language-type', $event)"
+            @update="emits('update-language', $event)"
+            @update-is-browser="emits('update-is-browser', $event)"
+          />
+        </ui-modal-block-form-standard>
+
+        <ui-modal-block-form-standard v-if="isSphere">
+          <common-layout-the-header-user-menu-modals-preferences-inventory
+            :vm-cluster="props.user?.ui_options?.vm_in_hosts_clusters"
+          />
+        </ui-modal-block-form-standard>
+
+        <ui-modal-block-form-standard v-if="isSphere">
+          <common-layout-the-header-user-menu-modals-preferences-default-console
+            :remote-console="props.user?.ui_options?.remote_console"
+            :project="props.project"
+          />
+        </ui-modal-block-form-standard>
+
+        <ui-modal-block-form-standard without-border-bottom>
+          <common-layout-the-header-user-menu-modals-preferences-view-new
+            :project="props.project"
+            :is-new-view="props.newView"
+            @update="emits('update-is-new-view', $event)"
+          />
+        </ui-modal-block-form-standard>
+      </ui-modal-block-standard>
+    </template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
+import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+
+const props = defineProps<{
+  project: UI_T_Project
+  timeFormat: UI_T_TimeValue
+  selectedLanguage: UI_T_LangValue
+  selectedLanguageType: UI_T_LangValue
+  newView: boolean
+  user?: UI_I_User
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language-type', value: string): void
+  (event: 'update-language', value: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isSphere = ref<boolean>(props.project === 'sphere')
+
+const onHide = (): void => {
+  emits('hide')
+
+  if (isSphere.value) {
+    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', { clear: true })
+  }
+}
+</script>

package/components/common/layout/theHeader/userMenu/modals/preferences/PreferencesOld.vue

@@ -0,0 +1,119 @@
+<template>
+  <atoms-modal
+    show
+    test-id="user-preferences-modal"
+    width="580px"
+    height="345px"
+    :title="localization.preferences"
+    @hide="onHide"
+  >
+    <template #modalBody>
+      <atoms-nav-bar
+        v-model="selectedTab"
+        test-id="user-preferences-nav-bar"
+        :items="tabsItems"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-time-format-old
+        v-if="selectedTab === 'time-tab'"
+        :time-format="props.timeFormat"
+        @update="emits('update-time-format', $event)"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-change-language-old
+        v-if="selectedTab === 'language-tab'"
+        :selected-type="props.selectedLanguageType"
+        :selected-language="props.selectedLanguage"
+        :project="props.project"
+        @update-language-type="emits('update-language-type', $event)"
+        @update="emits('update-language', $event)"
+        @update-is-browser="emits('update-is-browser', $event)"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-inventory
+        v-if="selectedTab === 'inventory-tab' && isSphere"
+        :vm-cluster="props.user?.ui_options?.vm_in_hosts_clusters"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-default-console
+        v-if="selectedTab === 'console-tab' && isSphere"
+        :remote-console="props.user?.ui_options?.remote_console"
+        :project="props.project"
+      />
+
+      <common-layout-the-header-user-menu-modals-preferences-view-old
+        v-if="selectedTab === 'view-tab'"
+        :project="props.project"
+        :is-new-view="props.newView"
+        @update="emits('update-is-new-view', $event)"
+      />
+    </template>
+
+    <template #modalFooter>
+      <button
+        id="user-preferences-cancel-button"
+        data-id="user-preferences-cancel-button"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.cancel }}
+      </button>
+      <button
+        id="user-preferences-apply-button"
+        data-id="user-preferences-apply-button"
+        class="btn btn-primary"
+        @click="emits('submit')"
+      >
+        {{ localization.save }}
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
+import type { UI_T_UserPreferenceTab } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/models/types'
+import type { UI_I_User } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import { preferencesTabs } from '~/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs'
+
+const props = defineProps<{
+  project: UI_T_Project
+  timeFormat: UI_T_TimeValue
+  selectedLanguage: UI_T_LangValue
+  selectedLanguageType: UI_T_LangValue
+  newView: boolean
+  user?: UI_I_User
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'update-time-format', value: UI_T_TimeValue): void
+  (event: 'update-language-type', value: string): void
+  (event: 'update-language', value: string): void
+  (event: 'update-is-browser', value: string): void
+  (event: 'update-is-new-view', value: boolean): void
+  (event: 'submit'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isSphere = ref<boolean>(props.project === 'sphere')
+const selectedTab = ref<UI_T_UserPreferenceTab>('time-tab')
+
+const tabsItems = computed<UI_I_CollapseNavItem[]>(() =>
+  preferencesTabs(localization.value, props.project)
+)
+
+const onHide = (): void => {
+  emits('hide')
+
+  if (isSphere.value) {
+    selectedTab.value = 'time-tab'
+    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', { clear: true })
+  }
+}
+</script>

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/ChangeLanguageNew.vue

@@ -0,0 +1,155 @@
+<template>
+  <form id="change-language-form">
+    <div class="flex">
+      <ui-modal-icon>
+        <ui-icon-icon3 name="language-new" width="20" height="20" />
+      </ui-modal-icon>
+
+      <div>
+        <div class="form-first-title">
+          {{ localization.language }}
+        </div>
+        <div class="form-second-title">
+          {{ description }}
+        </div>
+
+        <div v-for="(item, key) in radioOptions" :key="key" class="radio flex">
+          <input
+            :id="item.label"
+            v-model="languageMode"
+            :data-id="item.testId"
+            type="radio"
+            :value="item.value"
+            @change="onChange"
+          />
+          <label :for="item.label"> {{ item.label }} </label>
+
+          <span v-if="item.selectLang" class="select select-lang">
+            <select
+              id="language-select"
+              v-model="selectedLanguageLocal"
+              :disabled="languageMode !== item.value"
+              data-id="language-select"
+              @change="onSelectLang"
+            >
+              <option
+                v-for="(item2, key2) in langOptions"
+                :key="key2"
+                :value="item2.value"
+              >
+                {{ item2.text }}
+              </option>
+            </select>
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_T_LangValue, UI_T_Project } from '~/lib/models/types'
+import type { UI_T_SelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/types'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_LanguageItem,
+  UI_I_RadioItemLang,
+} from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/interfaces'
+import { UI_E_DetectSelectedRadio } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/models/enums'
+import { langConfig } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/lang'
+import { radioOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/lib/config/radioOptions'
+import { defineBrowserLangFunc } from '~/components/common/layout/theHeader/lib/utils/localization'
+
+const props = defineProps<{
+  selectedType: UI_T_LangValue
+  selectedLanguage: UI_T_LangValue
+  project: UI_T_Project
+}>()
+
+const emits = defineEmits<{
+  (event: 'update', value: string): void
+  (event: 'update-language-type', value: UI_T_SelectedRadio): void
+  (event: 'update-is-browser', value: string): void
+}>()
+
+const config = useRuntimeConfig()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const description = computed<string>(() => {
+  return localization.value.languageDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+})
+
+const languageMode = ref<UI_T_SelectedRadio>(
+  UI_E_DetectSelectedRadio[props.selectedType]
+)
+const radioOptions = readonly<UI_I_RadioItemLang[]>(
+  radioOptionsFunc(localization.value)
+)
+
+const langOptions = ref<UI_I_LanguageItem[]>(langConfig)
+
+const selectedLanguageLocal = ref<string>(props.selectedLanguage)
+
+const setPreferenceLang = (language: string): void => {
+  let browserLang = language
+
+  language === 'BROWSER' && (browserLang = defineBrowserLangFunc())
+
+  if (props.project === 'sphere') {
+    const { $store }: any = useNuxtApp()
+
+    $store.dispatch('profile/A_PREFERENCES_FOR_CHANGING', {
+      language: browserLang,
+    })
+  } else if (props.project === 'procurator') {
+    emits('update', browserLang)
+  }
+}
+
+const onSelectLang = (): void => {
+  selectedLanguageLocal.value && setPreferenceLang(selectedLanguageLocal.value)
+}
+
+const onChange = (): void => {
+  const lang =
+    languageMode.value === 'LANG'
+      ? selectedLanguageLocal.value
+      : languageMode.value
+
+  lang && setPreferenceLang(lang)
+
+  props.project === 'sphere' &&
+    emits('update-language-type', languageMode.value)
+}
+
+const updateIsBrowser = (value: string): void => {
+  emits('update-is-browser', value)
+}
+
+watch(
+  languageMode,
+  (newValue) => {
+    newValue && updateIsBrowser(newValue)
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.radio {
+  margin-bottom: 5px;
+  &:nth-child(2) {
+    margin-top: 10px;
+  }
+}
+.select-lang {
+  margin-left: 3px;
+  height: 24px;
+  & > select {
+    height: 100%;
+  }
+}
+</style>

package/components/common/layout/theHeader/userMenu/modals/preferences/changeLanguage/{ChangeLanguage.vue → ChangeLanguageOld.vue}

@@ -24,7 +24,6 @@
           v-model="selectedLanguageLocal"
           :disabled="languageMode !== item.value"
           data-id="language-select"
-          class="ng-touched ng-dirty ng-valid"
           @change="onSelectLang"
         >
           <option

package/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/TimeFormatNew.vue

@@ -0,0 +1,78 @@
+<template>
+  <form id="time-format-form">
+    <div class="flex">
+      <ui-modal-icon>
+        <ui-icon-icon3 name="clock" width="20" height="20" />
+      </ui-modal-icon>
+
+      <div>
+        <div class="form-first-title">
+          {{ localization.timeFormat }}
+        </div>
+        <div class="form-second-title">
+          {{ description }}
+        </div>
+
+        <div v-for="(item, key) in formatOptions" :key="key" class="radio">
+          <input
+            :id="item.value"
+            v-model="timeItem"
+            :data-id="item.testId"
+            type="radio"
+            :value="item.value"
+            @change="onChange"
+          />
+          <label :for="item.value">
+            {{ item.label }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_RadioItem } from '~/components/common/layout/theHeader/userMenu/lib/models/interfaces'
+import type { UI_T_TimeValue } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/models/types'
+import { formatOptionsFunc } from '~/components/common/layout/theHeader/userMenu/modals/preferences/timeFormat/lib/config/formatOptions'
+
+const props = defineProps<{
+  timeFormat: UI_T_TimeValue
+}>()
+const emits = defineEmits<{
+  (event: 'update', value: UI_T_TimeValue): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const config = useRuntimeConfig()
+const description = computed<string>(() =>
+  localization.value.timeFormatDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+)
+
+const formatOptions = readonly<UI_I_RadioItem[]>(
+  formatOptionsFunc(localization.value)
+)
+
+const timeItem = ref<UI_T_TimeValue>(props.timeFormat)
+
+const onChange = (): void => {
+  emits('update', timeItem.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.radio {
+  margin-bottom: 5px;
+  &:nth-child(2) {
+    margin-top: 10px;
+  }
+}
+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/layout/theHeader/userMenu/modals/preferences/view/ViewNew.vue

@@ -0,0 +1,124 @@
+<template>
+  <form id="view-form">
+    <!-- TODO Shorten code by the new component for the form -->
+    <div class="flex">
+      <ui-modal-icon>
+        <ui-icon-icon3 name="eye-open" width="20" height="20" />
+      </ui-modal-icon>
+      <div>
+        <div class="form-first-title">
+          {{ localization.view }}
+        </div>
+        <div class="form-second-title">
+          {{ description }}
+        </div>
+
+        <div class="flex-align-center">
+          <label for="view">{{ localization.newView }}</label>
+          <input
+            id="view"
+            v-model="isNewViewLocal"
+            type="checkbox"
+            class="switch"
+            @change="onChange"
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  isNewView: boolean
+}>()
+
+const isNewViewLocal = ref<boolean>(props.isNewView)
+
+const emits = defineEmits<{
+  (event: 'update', value: boolean): void
+}>()
+
+const config = useRuntimeConfig()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const description = computed<string>(() => {
+  return localization.value.viewDesc.replaceAll(
+    '{trademark}',
+    String(config.public[`TRADEMARK_${useEnvLanguage()}`])
+  )
+})
+
+const onChange = (): void => {
+  emits('update', isNewViewLocal.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin-bottom: 10px;
+}
+
+label {
+  margin-right: 6px;
+}
+
+input[type='checkbox'] {
+  --active: var(--checkbox-value-active-color);
+  --active-inner: var(--checkbox-mark-color);
+  --border: var(--checkbox-mark-color);
+  --background: var(--checkbox-mark-background-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  height: 20px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+  &:after {
+    content: '';
+    display: block;
+    left: 0;
+    top: 0;
+    position: absolute;
+    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
+      opacity var(--d-o, 0.2s);
+  }
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+}
+input[type='checkbox'] {
+  &.switch {
+    width: 35px;
+    border-radius: 11px;
+    &:after {
+      left: 2px;
+      top: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      width: 14px;
+      height: 14px;
+      border: 1px solid var(--bc, var(--border));
+      background: var(--ab, var(--border));
+      transform: translateX(var(--x, 0));
+    }
+    &:checked {
+      --ab: var(--active-inner);
+      --x: 14px;
+    }
+  }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.489",
+  "version": "1.3.490",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "^1.0.15",
-    "bfg-uikit": "1.0.64",
+    "bfg-uikit": "1.0.66",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }