bfg-common 1.5.695 → 1.5.697

package/components/atoms/collapse/CollapseNav.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="tabs-overflow bottom-right">
-    <button
-      :id="collapsedBtnId"
-      :class="[
-        'btn btn-link nav-link dropdown-toggle',
-        { active: collapsedBtnActive },
-      ]"
-      :data-id="`${props.testId}-toggle-button`"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <atoms-the-icon
-        :class="['collapse-icon', { active: open }]"
-        name="ellipsis-horizontal"
-        width="16px"
-        height="16px"
-      />
-    </button>
-
-    <Teleport to="body">
-      <ul
-        v-show="open"
-        :class="['navbar-dropdown-menu', props.popupClass]"
-        :style="dropdownMenuStyles"
-      >
-        <li
-          v-for="(item, key) in props.items"
-          :key="key"
-          v-permission="item.permission"
-          :title="item.title"
-          class="navbar-dropdown-menu-item"
-          @mousedown.stop
-        >
-          <div
-            v-if="item.separate"
-            class="navbar-dropdown-menu-separator"
-          ></div>
-          <atoms-collapse-nav-item
-            v-else
-            :is-link="props.isLink"
-            :item="item"
-            :value="value"
-            btn-class="btn"
-            @change="change"
-            @select-file="onSelectFile($event, key)"
-          />
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    isLink?: boolean
-    value?: number | string
-    popupClass?: string
-    closeAfterClick?: boolean
-    testId?: string
-  }>(),
-  {
-    isLink: undefined,
-    value: undefined,
-    popupClass: undefined,
-    closeAfterClick: undefined,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-  (event: 'select-file', value1: Event, value2: string, value3: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('change', value)
-  props.closeAfterClick && (open.value = false)
-}
-const onSelectFile = (event: Event, type: string, key: number): void => {
-  emits('select-file', event, type, key)
-}
-
-const collapsedBtnId = ref<string>('')
-
-const route = useRoute()
-const collapsedBtnActive = computed<boolean>(() => {
-  if (props.isLink)
-    return props.items.some((item) => route.path.includes(item.path || ''))
-
-  return props.items.some((item) => item.value === props.value)
-})
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref<any>({})
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${collapsedBtnId.value}`)
-  const { top, height, right } = btn!.getBoundingClientRect()
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${right}px`,
-  }
-}
-const hideMenu = (force?: boolean): void => {
-  if (hover.value && !force) return
-
-  open.value = false
-}
-
-const windowClick = (): void => {
-  hideMenu()
-}
-const windowResize = (): void => {
-  hideMenu(true)
-}
-onMounted(() => {
-  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
-  window.addEventListener('mousedown', windowClick)
-  window.addEventListener('resize', windowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousedown', windowClick)
-  window.removeEventListener('resize', windowResize)
-})
-</script>
-
-<style scoped lang="scss">
-.tabs-overflow {
-  position: absolute;
-  top: 0;
-  right: 24px;
-
-  .dropdown-toggle {
-    .collapse-icon {
-      fill: var(--main-color-mode);
-
-      &.active {
-        fill: #0077b8;
-      }
-    }
-  }
-}
-
-.navbar-dropdown-menu {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  transform: translateX(-100%);
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  margin-top: 2px;
-  background-color: var(--global-bg-color);
-  padding: 12px 0;
-}
-.navbar-dropdown-menu-separator {
-  margin: 6px 0;
-  border-bottom: 0.8px solid #e8e8e8;
-}
-</style>
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      :data-id="`${props.testId}-toggle-button`"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        :class="['collapse-icon', { active: open }]"
+        name="ellipsis-horizontal"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in props.items"
+          :key="key"
+          v-permission="item.permission"
+          :title="item.title"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile($event, key)"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    isLink?: boolean
+    value?: number | string
+    popupClass?: string
+    closeAfterClick?: boolean
+    testId?: string
+  }>(),
+  {
+    isLink: undefined,
+    value: undefined,
+    popupClass: undefined,
+    closeAfterClick: undefined,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string, value3: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string, key: number): void => {
+  emits('select-file', event, type, key)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref<any>({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowResize = (): void => {
+  hideMenu(true)
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+  window.addEventListener('resize', windowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+  window.removeEventListener('resize', windowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>

package/components/atoms/perPage/PerPage.vue

@@ -1,58 +1,58 @@
-<template>
-  <div class="page-size">
-    {{ selectLabel }}
-
-    <div class="clr-select-wrapper">
-      <select
-        :id="`${props.testId}-select`"
-        v-development="props.development"
-        :data-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 type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    pageSize: number
-    options: UI_I_OptionItem[]
-    label?: string
-    testId?: string
-    development?: boolean
-  }>(),
-  {
-    testId: 'ui-per-page',
-    label: 'itemsPerPage',
-    development: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const selectLabel = computed<string>(
-  () => localization.value.common[props.label]
-)
-
-const change = (event: InputEvent): void => {
-  emits('change', +(event.target as HTMLInputElement).value)
-}
-</script>
-
-<style scoped></style>
+<template>
+  <div class="page-size">
+    {{ selectLabel }}
+
+    <div class="clr-select-wrapper">
+      <select
+        :id="`${props.testId}-select`"
+        v-development="props.development"
+        :data-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 type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    pageSize: number
+    options: UI_I_OptionItem[]
+    label?: string
+    testId?: string
+    development?: boolean
+  }>(),
+  {
+    testId: 'ui-per-page',
+    label: 'itemsPerPage',
+    development: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const selectLabel = computed<string>(
+  () => localization.value.common[props.label]
+)
+
+const change = (event: InputEvent): void => {
+  emits('change', +(event.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped></style>

package/components/atoms/switch/Switch.vue

@@ -1,103 +1,103 @@
-<template>
-  <div class="flex-align-center">
-    <div class="switch-body">
-      <input
-        :id="props.testId"
-        v-model="value"
-        type="checkbox"
-        @change="emits('change', value)"
-      />
-      <label :for="props.testId" class="switch-label"></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
-  (event: 'change', value: boolean): void
-}>()
-
-const value = computed<boolean>({
-  get() {
-    return props.modelValue
-  },
-  set(newValue) {
-    emits('update:model-value', newValue)
-  },
-})
-</script>
-
-<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"
+        @change="emits('change', value)"
+      />
+      <label :for="props.testId" class="switch-label"></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
+  (event: 'change', value: boolean): void
+}>()
+
+const value = computed<boolean>({
+  get() {
+    return props.modelValue
+  },
+  set(newValue) {
+    emits('update:model-value', newValue)
+  },
+})
+</script>
+
+<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>