bfg-common 1.0.15 → 1.0.16

package/components/atoms/nav/VerticalNavBar.vue

@@ -1,89 +1,89 @@
-<template>
-  <nav class="clr-vertical-nav">
-    <NuxtLink
-      v-for="(item, key) in props.items"
-      :id="`${props.testId}-link-${key}`"
-      :key="key"
-      class="clr-treenode-link"
-      :to="item.path"
-      active-class="active"
-      @contextmenu="showContextMenu($event, item)"
-    >
-      <span
-        v-if="item.iconClassName"
-        :class="['icon', item.iconClassName]"
-      ></span>
-      <span class="clr-treenode-item text-ellipsis">{{ item.text }}</span>
-    </NuxtLink>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { UI_I_NavItem } from '~/components/atoms/nav/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    testId?: string
-    items: UI_I_NavItem[]
-  }>(),
-  { testId: 'ui-vertical-nav-bar' }
-)
-const emits = defineEmits<{
-  (event: 'contextmenu', value: [Event, UI_I_NavItem]): void
-}>()
-
-const showContextMenu = (event: Event, item: UI_I_NavItem): void => {
-  // navigateTo(item.path)
-  emits('contextmenu', [event, item])
-}
-</script>
-
-<style scoped lang="scss">
-.clr-vertical-nav {
-  padding-top: 0;
-  width: 100%;
-  background-color: transparent;
-
-  .clr-treenode-link {
-    display: flex;
-    align-items: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: 2px 12px;
-    border-radius: 0;
-
-    &.active {
-      background: var(--vertical-nav-active-bg-color);
-      color: var(--vertical-nav-active-item-color);
-      .clr-treenode-item {
-        color: var(--vertical-nav-active-item-color);
-      }
-    }
-    &:hover:not(.active) {
-      background: var(--vertical-nav-hover-bg-color);
-      color: var(--vertical-nav-hover-item-color);
-      margin-bottom: -1px;
-      border-bottom: 1px solid var(--row-hover-border-color);
-
-      .clr-treenode-item {
-        color: var(--vertical-nav-hover-item-color);
-      }
-    }
-    .icon {
-      margin: 1px 4px 0;
-    }
-  }
-}
-</style>
-
-<style>
-/* :root {
-  --vertical-nav-active-item-color: #fff;
-  --vertical-nav-active-bg-color: #29414e;
-}
-:root.dark-theme {
-  --vertical-nav-active-item-color: #000;
-  --vertical-nav-active-bg-color: #d8e3e9;
-} */
-</style>
+<template>
+  <nav class="clr-vertical-nav">
+    <NuxtLink
+      v-for="(item, key) in props.items"
+      :id="`${props.testId}-link-${key}`"
+      :key="key"
+      class="clr-treenode-link"
+      :to="item.path"
+      active-class="active"
+      @contextmenu="showContextMenu($event, item)"
+    >
+      <span
+        v-if="item.iconClassName"
+        :class="['icon', item.iconClassName]"
+      ></span>
+      <span class="clr-treenode-item text-ellipsis">{{ item.text }}</span>
+    </NuxtLink>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { UI_I_NavItem } from '~/components/atoms/nav/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    testId?: string
+    items: UI_I_NavItem[]
+  }>(),
+  { testId: 'ui-vertical-nav-bar' }
+)
+const emits = defineEmits<{
+  (event: 'contextmenu', value: [Event, UI_I_NavItem]): void
+}>()
+
+const showContextMenu = (event: Event, item: UI_I_NavItem): void => {
+  // navigateTo(item.path)
+  emits('contextmenu', [event, item])
+}
+</script>
+
+<style scoped lang="scss">
+.clr-vertical-nav {
+  padding-top: 0;
+  width: 100%;
+  background-color: transparent;
+
+  .clr-treenode-link {
+    display: flex;
+    align-items: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 2px 12px;
+    border-radius: 0;
+
+    &.active {
+      background: var(--vertical-nav-active-bg-color);
+      color: var(--vertical-nav-active-item-color);
+      .clr-treenode-item {
+        color: var(--vertical-nav-active-item-color);
+      }
+    }
+    &:hover:not(.active) {
+      background: var(--vertical-nav-hover-bg-color);
+      color: var(--vertical-nav-hover-item-color);
+      margin-bottom: -1px;
+      border-bottom: 1px solid var(--row-hover-border-color);
+
+      .clr-treenode-item {
+        color: var(--vertical-nav-hover-item-color);
+      }
+    }
+    .icon {
+      margin: 1px 4px 0;
+    }
+  }
+}
+</style>
+
+<style>
+/* :root {
+  --vertical-nav-active-item-color: #fff;
+  --vertical-nav-active-bg-color: #29414e;
+}
+:root.dark-theme {
+  --vertical-nav-active-item-color: #000;
+  --vertical-nav-active-bg-color: #d8e3e9;
+} */
+</style>

package/components/atoms/notificationBar/NotificationBar.vue

@@ -1,175 +1,175 @@
-<template>
-  <div class="notification-bar">
-    <div class="alerts" :style="{ 'background-color': bgPageControl }">
-      <div
-        v-if="props.items.length > 1"
-        :class="['alerts-pager ng-star-inserted']"
-      >
-        <div class="alerts-pager-control page-control">
-          <div class="alerts-page-down">
-            <button
-              :id="`${props.testId}-prev-button`"
-              class="alerts-pager-button"
-              @click="prevPage"
-            >
-              <atoms-the-icon class="page-control__prev" name="angle" />
-            </button>
-          </div>
-
-          <div class="alerts-pager-text">
-            {{ stepPosition }} / {{ props.items.length }}
-          </div>
-
-          <div class="alerts-page-up">
-            <button
-              :id="`${props.testId}-next-button`"
-              class="alerts-pager-button"
-              @click="nextPage"
-            >
-              <atoms-the-icon class="page-control__next" name="angle" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="alert-text-truncate">
-        <div class="alert alert-app-level" :class="currentPage.status">
-          <div class="alert-items">
-            <div class="alert-item">
-              <div class="alert-icon-wrapper">
-                <atoms-the-icon
-                  :class="['alert-icon', iconName]"
-                  :name="iconName"
-                  stroke="none"
-                  fill="#fff"
-                />
-              </div>
-
-              <span class="alert-text">{{ setMessage }}</span>
-
-              <div class="alert-actions" @click="clickButton">
-                <button
-                  :id="`${props.testId}-action-button`"
-                  class="btn alert-action"
-                >
-                  {{ setActionText }}
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <button
-            :id="`${props.testId}-remove-button`"
-            class="close"
-            @click="removeCurrentNotificationByKey(currentPage.id)"
-          >
-            <atoms-the-icon name="close" fill="#fff" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useLocal } from '~/composables/useLocal'
-import { UI_I_NotificationItem } from '~/components/atoms/notificationBar/models/interfaces'
-import {
-  UI_E_ActionTextByStatus,
-  UI_E_ColorsPageControl,
-  UI_E_IconsByStatus,
-  UI_E_MsgByStatus,
-} from '~/components/atoms/notificationBar/models/enums'
-import { UI_T_ColorsPageControlKey } from '~/components/atoms/notificationBar/models/types'
-
-const { $store } = useNuxtApp()
-const localization = computed<any>(() => useLocal())
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_NotificationItem[]
-    testId?: string
-  }>(),
-  { testId: 'ui-notification-bar' }
-)
-
-const stepPosition = ref<number>(1)
-
-const removeCurrentNotificationByKey = (key: number | string): void => {
-  stepPosition.value = Math.min(props.items.length - 1, stepPosition.value)
-  $store.dispatch('main/A_REMOVE_NOTIFICATION_ITEM', key)
-}
-const prevPage = (): void => {
-  if (stepPosition.value === 1) {
-    stepPosition.value = props.items.length
-  } else {
-    stepPosition.value--
-  }
-}
-const nextPage = (): void => {
-  if (stepPosition.value === props.items.length) {
-    stepPosition.value = 1
-  } else {
-    stepPosition.value++
-  }
-}
-const clickButton = (): void => {
-  console.log('action')
-}
-
-const currentPage = computed(() => {
-  return props.items.find((_, i) => i + 1 === stepPosition.value)
-})
-
-const status = computed<UI_T_ColorsPageControlKey>(
-  () => currentPage.value?.status || 'alert-success'
-)
-const setActionText = computed<string>(
-  () => localization.value[UI_E_ActionTextByStatus[status.value]]
-)
-
-const setMessage = computed<string>(
-  () => localization.value[UI_E_MsgByStatus[status.value]]
-)
-
-const iconName = computed<string>(
-  () => UI_E_IconsByStatus[currentPage.value.status]
-)
-
-const bgPageControl = computed<string>(
-  () => UI_E_ColorsPageControl[status.value]
-)
-</script>
-
-<style lang="scss" scoped>
-@import '~/assets/scss/common/mixins';
-.notification-bar {
-  .alert {
-    &-app-level {
-      .close {
-        &:focus {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-.page-control {
-  :is(.alerts-page-down, .alerts-page-up) {
-    @include flex($align: center, $just: center);
-  }
-  .alerts-pager-button {
-    @include flex($align: center);
-  }
-  svg {
-    width: 15px;
-    fill: #fff;
-  }
-  &__prev {
-    transform: rotate(-90deg);
-  }
-  &__next {
-    transform: rotate(90deg);
-  }
-}
-</style>
+<template>
+  <div class="notification-bar">
+    <div class="alerts" :style="{ 'background-color': bgPageControl }">
+      <div
+        v-if="props.items.length > 1"
+        :class="['alerts-pager ng-star-inserted']"
+      >
+        <div class="alerts-pager-control page-control">
+          <div class="alerts-page-down">
+            <button
+              :id="`${props.testId}-prev-button`"
+              class="alerts-pager-button"
+              @click="prevPage"
+            >
+              <atoms-the-icon class="page-control__prev" name="angle" />
+            </button>
+          </div>
+
+          <div class="alerts-pager-text">
+            {{ stepPosition }} / {{ props.items.length }}
+          </div>
+
+          <div class="alerts-page-up">
+            <button
+              :id="`${props.testId}-next-button`"
+              class="alerts-pager-button"
+              @click="nextPage"
+            >
+              <atoms-the-icon class="page-control__next" name="angle" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="alert-text-truncate">
+        <div class="alert alert-app-level" :class="currentPage.status">
+          <div class="alert-items">
+            <div class="alert-item">
+              <div class="alert-icon-wrapper">
+                <atoms-the-icon
+                  :class="['alert-icon', iconName]"
+                  :name="iconName"
+                  stroke="none"
+                  fill="#fff"
+                />
+              </div>
+
+              <span class="alert-text">{{ setMessage }}</span>
+
+              <div class="alert-actions" @click="clickButton">
+                <button
+                  :id="`${props.testId}-action-button`"
+                  class="btn alert-action"
+                >
+                  {{ setActionText }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <button
+            :id="`${props.testId}-remove-button`"
+            class="close"
+            @click="removeCurrentNotificationByKey(currentPage.id)"
+          >
+            <atoms-the-icon name="close" fill="#fff" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocal } from '~/composables/useLocal'
+import { UI_I_NotificationItem } from '~/components/atoms/notificationBar/models/interfaces'
+import {
+  UI_E_ActionTextByStatus,
+  UI_E_ColorsPageControl,
+  UI_E_IconsByStatus,
+  UI_E_MsgByStatus,
+} from '~/components/atoms/notificationBar/models/enums'
+import { UI_T_ColorsPageControlKey } from '~/components/atoms/notificationBar/models/types'
+
+const { $store } = useNuxtApp()
+const localization = computed<any>(() => useLocal())
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_NotificationItem[]
+    testId?: string
+  }>(),
+  { testId: 'ui-notification-bar' }
+)
+
+const stepPosition = ref<number>(1)
+
+const removeCurrentNotificationByKey = (key: number | string): void => {
+  stepPosition.value = Math.min(props.items.length - 1, stepPosition.value)
+  $store.dispatch('main/A_REMOVE_NOTIFICATION_ITEM', key)
+}
+const prevPage = (): void => {
+  if (stepPosition.value === 1) {
+    stepPosition.value = props.items.length
+  } else {
+    stepPosition.value--
+  }
+}
+const nextPage = (): void => {
+  if (stepPosition.value === props.items.length) {
+    stepPosition.value = 1
+  } else {
+    stepPosition.value++
+  }
+}
+const clickButton = (): void => {
+  console.log('action')
+}
+
+const currentPage = computed(() => {
+  return props.items.find((_, i) => i + 1 === stepPosition.value)
+})
+
+const status = computed<UI_T_ColorsPageControlKey>(
+  () => currentPage.value?.status || 'alert-success'
+)
+const setActionText = computed<string>(
+  () => localization.value[UI_E_ActionTextByStatus[status.value]]
+)
+
+const setMessage = computed<string>(
+  () => localization.value[UI_E_MsgByStatus[status.value]]
+)
+
+const iconName = computed<string>(
+  () => UI_E_IconsByStatus[currentPage.value.status]
+)
+
+const bgPageControl = computed<string>(
+  () => UI_E_ColorsPageControl[status.value]
+)
+</script>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins';
+.notification-bar {
+  .alert {
+    &-app-level {
+      .close {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
+.page-control {
+  :is(.alerts-page-down, .alerts-page-up) {
+    @include flex($align: center, $just: center);
+  }
+  .alerts-pager-button {
+    @include flex($align: center);
+  }
+  svg {
+    width: 15px;
+    fill: #fff;
+  }
+  &__prev {
+    transform: rotate(-90deg);
+  }
+  &__next {
+    transform: rotate(90deg);
+  }
+}
+</style>

package/components/atoms/perPage/PerPage.vue

@@ -1,52 +1,52 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-select`"
-        :value="props.pageSize"
-        class="clr-page-size-select"
-        @change="change"
-      >
-        <option
-          v-for="(item, key) in props.options"
-          :key="key"
-          :value="item.value"
-        >
-          {{ item.text }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-    testId?: string
-  }>(),
-  {
-    testId: 'ui-per-page',
-    label: 'itemsPerPage',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', num: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(() => localization.value[props.label])
-
-const change = (e: InputEvent): void => {
-  emits('change', +(e.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-select`"
+        :value="props.pageSize"
+        class="clr-page-size-select"
+        @change="change"
+      >
+        <option
+          v-for="(item, key) in props.options"
+          :key="key"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+    testId?: string
+  }>(),
+  {
+    testId: 'ui-per-page',
+    label: 'itemsPerPage',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', num: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(() => localization.value[props.label])
+
+const change = (e: InputEvent): void => {
+  emits('change', +(e.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>