bfg-common 1.3.229 → 1.3.230

package/components/atoms/alert/Notification.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="notification">
-    <div
-      class="notification-container-wrap animation"
-      :class="{ active: isActive }"
-    >
-      <div class="notification-container">
-        <div v-show="props.show" class="toast">
-          <atoms-the-icon
-            class="toast-icon"
-            :class="iconName !== 'info' && 'with'"
-            :name="iconName"
-          />
-          <div class="toast-content">
-            <div class="flex-align-center flex-space-between">
-              <h4>{{ props.title }}</h4>
-              <button
-                :id="`${props.testId}-close-button`"
-                :title="localization.closeNotification"
-                @click="hide"
-              >
-                <atoms-the-icon name="close" />
-              </button>
-            </div>
-            <div class="description">
-              <slot>
-                <p class="pre-line">{{ props.description }}</p>
-              </slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_T_NotificationStatus,
-  UI_T_NotificationIcon,
-} from '~/components/atoms/alert/lib/models/types'
-import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
-
-const props = withDefaults(
-  defineProps<{
-    status: UI_T_NotificationStatus
-    id: number
-    show: boolean
-    title: string
-    description: string
-    testId?: string
-  }>(),
-  { testId: 'ui-notification' }
-)
-const emits = defineEmits<{
-  (event: 'hide', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const hide = (): void => {
-  isActive.value = false
-
-  setTimeout(() => {
-    emits('hide', props.id)
-  }, 200)
-}
-const isActive = ref<boolean>(false)
-
-const iconName = computed<UI_T_NotificationIcon>(
-  () => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
-)
-
-setTimeout(() => {
-  isActive.value = true
-}, 1000)
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-
-.notification {
-  .notification-container-wrap {
-    display: block;
-    margin-top: 10px;
-    width: 414px;
-    position: relative;
-    right: -600px;
-    opacity: 0;
-
-    &.active {
-      right: 0;
-      opacity: 1;
-    }
-
-    .notification-container {
-      @include flex($dir: column, $just: flex-end);
-      margin-right: 0;
-
-      .toast {
-        @include flex($dir: row);
-        background-color: #25333d;
-        border-radius: 3px;
-        box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
-        margin: 0;
-        padding: 12px;
-        transform: scale(1);
-        transform-origin: 100% 0;
-        width: 100%;
-
-        .toast-icon {
-          width: 36px;
-          height: 36px;
-          &.with {
-            width: 26px;
-            height: 26px;
-          }
-        }
-
-        .toast-content {
-          padding-left: 12px;
-          width: 100%;
-
-          h4 {
-            color: #e9ecef;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 24px;
-            margin-top: 0;
-            max-width: 240px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          button {
-            background: transparent;
-            border: none;
-            border-radius: 100%;
-            cursor: pointer;
-            display: inline-block;
-            height: 30px;
-            position: absolute;
-            right: 8px;
-            top: 8px;
-            width: 30px;
-
-            svg {
-              width: 16px;
-              height: 16px;
-              fill: #adbbc4;
-              margin-left: 1px;
-              margin-top: -8px;
-            }
-          }
-
-          .description {
-            max-height: 60vh;
-            overflow: auto;
-
-            p {
-              color: var(--global-font-color6);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="notification">
+    <div
+      class="notification-container-wrap animation"
+      :class="{ active: isActive }"
+    >
+      <div class="notification-container">
+        <div v-show="props.show" class="toast">
+          <atoms-the-icon
+            class="toast-icon"
+            :class="iconName !== 'info' && 'with'"
+            :name="iconName"
+          />
+          <div class="toast-content">
+            <div class="flex-align-center flex-space-between">
+              <h4>{{ props.title }}</h4>
+              <button
+                :id="`${props.testId}-close-button`"
+                :title="localization.closeNotification"
+                @click="hide"
+              >
+                <atoms-the-icon name="close" />
+              </button>
+            </div>
+            <div class="description">
+              <slot>
+                <p class="pre-line">{{ props.description }}</p>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_T_NotificationStatus,
+  UI_T_NotificationIcon,
+} from '~/components/atoms/alert/lib/models/types'
+import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    status: UI_T_NotificationStatus
+    id: number
+    show: boolean
+    title: string
+    description: string
+    testId?: string
+  }>(),
+  { testId: 'ui-notification' }
+)
+const emits = defineEmits<{
+  (event: 'hide', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const hide = (): void => {
+  isActive.value = false
+
+  setTimeout(() => {
+    emits('hide', props.id)
+  }, 200)
+}
+const isActive = ref<boolean>(false)
+
+const iconName = computed<UI_T_NotificationIcon>(
+  () => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
+)
+
+setTimeout(() => {
+  isActive.value = true
+}, 1000)
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+
+.notification {
+  .notification-container-wrap {
+    display: block;
+    margin-top: 10px;
+    width: 414px;
+    position: relative;
+    right: -600px;
+    opacity: 0;
+
+    &.active {
+      right: 0;
+      opacity: 1;
+    }
+
+    .notification-container {
+      @include flex($dir: column, $just: flex-end);
+      margin-right: 0;
+
+      .toast {
+        @include flex($dir: row);
+        background-color: #25333d;
+        border-radius: 3px;
+        box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
+        margin: 0;
+        padding: 12px;
+        transform: scale(1);
+        transform-origin: 100% 0;
+        width: 100%;
+
+        .toast-icon {
+          width: 36px;
+          height: 36px;
+          &.with {
+            width: 26px;
+            height: 26px;
+          }
+        }
+
+        .toast-content {
+          padding-left: 12px;
+          width: 100%;
+
+          h4 {
+            color: #e9ecef;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 24px;
+            margin-top: 0;
+            max-width: 240px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          button {
+            background: transparent;
+            border: none;
+            border-radius: 100%;
+            cursor: pointer;
+            display: inline-block;
+            height: 30px;
+            position: absolute;
+            right: 8px;
+            top: 8px;
+            width: 30px;
+
+            svg {
+              width: 16px;
+              height: 16px;
+              fill: #adbbc4;
+              margin-left: 1px;
+              margin-top: -8px;
+            }
+          }
+
+          .description {
+            max-height: 60vh;
+            overflow: auto;
+
+            p {
+              color: var(--global-font-color6);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/atoms/switch/Switch.vue

@@ -1,111 +1,111 @@
-<template>
-  <div class="flex-align-center">
-    <div class="switch-body">
-      <input :id="props.testId" v-model="value" type="checkbox" />
-      <label class="switch-label" :for="props.testId"></label>
-    </div>
-    <label :for="props.testId"><slot></slot></label>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-    defineProps<{
-      modelValue: boolean
-      testId?: string
-    }>(),
-    { testId: 'ui-switch' }
-)
-
-const emits = defineEmits<{
-  (event: 'update:model-value', value: boolean): void
-}>()
-
-const value = computed<boolean>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<style>
-:root {
-  --label-before-bg-color: #737373;
-  --label-after-bg-color: #fff;
-  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
-}
-
-:root.dark-theme {
-  --label-before-bg-color: #fff;
-  --label-after-bg-color: #1b2a32;
-  --label-before-box-shadow: 0 0 0;
-}
-</style>
-
-<style scoped lang="scss">
-.switch-body {
-  width: 33px;
-  height: 18px;
-  position: relative;
-  margin-right: 4px;
-
-  input[type='checkbox'] {
-    position: absolute;
-    top: 0.3rem;
-    right: 0.3rem;
-    height: 0.8rem;
-    width: 0.8rem;
-    opacity: 0;
-  }
-  .switch-label {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    height: 1.2rem;
-  }
-  .switch-label {
-    &:before {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 18px;
-      width: 33px;
-      border-radius: 0.45rem;
-      border: 2px solid var(--label-before-bg-color);
-      background-color: var(--label-before-bg-color);
-      transition: 0.15s ease-in;
-      transition-property: border-color, background-color;
-    }
-
-    &:after {
-      position: absolute;
-      display: inline-block;
-      content: '';
-      height: 14.5px;
-      width: 14.5px;
-      border: 1px solid var(--label-after-bg-color);
-      border-radius: 50%;
-      background-color: var(--label-after-bg-color);
-      bottom: 12.5px;
-      transition: 0.15s ease-in;
-    }
-  }
-
-  & input[type='checkbox']:focus + label:before {
-    box-shadow: var(--label-before-box-shadow);
-  }
-  & input[type='checkbox']:checked + label:before {
-    border-color: #62a420;
-    background-color: #62a420;
-  }
-  & input[type='checkbox']:checked + label:after {
-    left: 15px;
-  }
-  & input[type='checkbox'] + label:after {
-    left: 3px;
-  }
-}
-</style>
+<template>
+  <div class="flex-align-center">
+    <div class="switch-body">
+      <input :id="props.testId" v-model="value" type="checkbox" />
+      <label class="switch-label" :for="props.testId"></label>
+    </div>
+    <label :for="props.testId"><slot></slot></label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+      modelValue: boolean
+      testId?: string
+    }>(),
+    { testId: 'ui-switch' }
+)
+
+const emits = defineEmits<{
+  (event: 'update:model-value', value: boolean): void
+}>()
+
+const value = computed<boolean>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<style>
+:root {
+  --label-before-bg-color: #737373;
+  --label-after-bg-color: #fff;
+  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
+}
+
+:root.dark-theme {
+  --label-before-bg-color: #fff;
+  --label-after-bg-color: #1b2a32;
+  --label-before-box-shadow: 0 0 0;
+}
+</style>
+
+<style scoped lang="scss">
+.switch-body {
+  width: 33px;
+  height: 18px;
+  position: relative;
+  margin-right: 4px;
+
+  input[type='checkbox'] {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.3rem;
+    height: 0.8rem;
+    width: 0.8rem;
+    opacity: 0;
+  }
+  .switch-label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    height: 1.2rem;
+  }
+  .switch-label {
+    &:before {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 18px;
+      width: 33px;
+      border-radius: 0.45rem;
+      border: 2px solid var(--label-before-bg-color);
+      background-color: var(--label-before-bg-color);
+      transition: 0.15s ease-in;
+      transition-property: border-color, background-color;
+    }
+
+    &:after {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      height: 14.5px;
+      width: 14.5px;
+      border: 1px solid var(--label-after-bg-color);
+      border-radius: 50%;
+      background-color: var(--label-after-bg-color);
+      bottom: 12.5px;
+      transition: 0.15s ease-in;
+    }
+  }
+
+  & input[type='checkbox']:focus + label:before {
+    box-shadow: var(--label-before-box-shadow);
+  }
+  & input[type='checkbox']:checked + label:before {
+    border-color: #62a420;
+    background-color: #62a420;
+  }
+  & input[type='checkbox']:checked + label:after {
+    left: 15px;
+  }
+  & input[type='checkbox'] + label:after {
+    left: 3px;
+  }
+}
+</style>