bfg-common 1.5.408 → 1.5.410

package/components/atoms/collapse/CollapseNavItem.vue

@@ -1,226 +1,226 @@
-<template>
-  <div>
-    <nuxt-link
-      v-if="props.isLink"
-      :to="props.item.path"
-      :data-id="`${item.testId}-link`"
-    >
-      <button
-        :id="`${item.testId}-button`"
-        v-development="props.item.development"
-        v-permission="props.item.permission"
-        :data-id="`${item.testId}-button`"
-        :disabled="props.item.disabled"
-        :class="[
-          props.btnClass,
-          {
-            disabled: props.item.disabled,
-          },
-        ]"
-      >
-        <atoms-the-icon2
-          v-if="props.item.iconName"
-          :name="props.item.iconName"
-        />
-        <span
-          v-else-if="props.item.iconClassName"
-          :class="['icon', props.item.iconClassName]"
-        ></span>
-        <span v-else>{{ props.item.text }}</span>
-      </button>
-    </nuxt-link>
-    <label
-      v-else-if="props.item.uploaded"
-      v-development="props.item.development"
-      v-permission="props.item.permission"
-    >
-      <span class="btn btn-link">
-        {{ props.item.text }}
-      </span>
-      <input
-        :id="`select-file-button-${props.item.type}`"
-        :data-id="`${item.testId}-button`"
-        :disabled="props.item.disabled"
-        :multiple="false"
-        type="file"
-        class="input-file"
-        @change="(event) => onSelectFiles(event)"
-      />
-    </label>
-    <button
-      v-else
-      :id="`${item.testId}-button`"
-      :data-id="`${item.testId}-button`"
-      v-development="props.item.development"
-      v-permission="props.item.permission"
-      :disabled="props.item.disabled"
-      :class="[
-        props.btnClass,
-        {
-          active: props.value === props.item.value,
-          disabled: props.item.disabled,
-        },
-      ]"
-      @click="change(props.item.value)"
-    >
-      <atoms-the-icon2 v-if="props.item.iconName" :name="props.item.iconName" />
-      <span
-        v-else-if="props.item.iconClassName"
-        :class="['icon', props.item.iconClassName]"
-      ></span>
-      <span v-else>{{ props.item.text }}</span>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = defineProps<{
-  item: UI_I_CollapseNavItem
-  value?: number | string
-  isLink?: boolean
-  btnClass?: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'change', value: number | string): void
-  (event: 'select-file', value1: Event, value2: string): void
-}>()
-
-const change = (value: number | string): void => {
-  emits('change', value)
-}
-
-const onSelectFiles = (event: Event): void => {
-  emits('select-file', event, '' + props.item.value || '')
-}
-</script>
-
-<style>
-:root {
-  --collapse-nav-item-link-color: #4d5d69;
-  --collapse-nav-item-link-hover-color: #182531;
-  --collapse-nav-item-active-link-color: #008fd6;
-  --collapse-nav-item-active-link-hover-color: #0081c1;
-}
-:root.dark-theme {
-  --collapse-nav-item-link-color: #e9eaec;
-  --collapse-nav-item-link-hover-color: #ffffff;
-  --collapse-nav-item-active-link-color: #2ba2de;
-  --collapse-nav-item-active-link-hover-color: #0081c1;
-}
-</style>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-%hover-effect {
-  border-bottom: 1px solid var(--row-hover-border-color);
-  background-color: var(--row-hover-bg-color);
-  text-decoration: none;
-  cursor: pointer;
-}
-%active-mode {
-  background-color: var(--row-selected-bg-color);
-  color: var(--row-selected-text-color);
-}
-%border-effect {
-  box-shadow: 0 -0.15rem 0 var(--nav-active-box-shadow-color) inset;
-}
-
-.nav {
-  .router-link-active .nav-link:not(.nav-link.disabled) {
-    @extend %border-effect;
-    color: var(--collapse-nav-item-active-link-color);
-  }
-  &-link {
-    color: var(--collapse-nav-item-link-color);
-    &.active {
-      color: var(--collapse-nav-item-active-link-color);
-
-      &:hover {
-        color: var(--collapse-nav-item-active-link-hover-color);
-      }
-    }
-    &:hover:not(&.active) {
-      color: var(--collapse-nav-item-link-hover-color);
-    }
-    :is(&.active, &:hover) {
-      @extend %border-effect;
-    }
-    &.disabled {
-      cursor: not-allowed;
-      & > span {
-        pointer-events: none;
-      }
-      :is(&.active, &:hover) {
-        box-shadow: none;
-      }
-    }
-  }
-  .icon {
-    width: 24px;
-    height: 24px;
-    display: block;
-  }
-}
-
-.navbar-dropdown-menu {
-  &-item {
-    a {
-      text-decoration: none;
-    }
-    .btn {
-      @include text($fs: 14px, $fw: 200, $c: #666);
-      padding: 3px 24px;
-      background: transparent;
-      border: 0;
-      border-bottom: 1px solid transparent;
-      display: block;
-      height: auto;
-      line-height: inherit;
-      margin: 0;
-      text-transform: none;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      letter-spacing: normal;
-      text-align: left;
-
-      &.active {
-        @extend %active-mode;
-      }
-      &:hover {
-        @extend %hover-effect;
-      }
-      &:disabled {
-        cursor: not-allowed;
-        & > span {
-          pointer-events: none;
-        }
-      }
-    }
-    .router-link-active .btn {
-      @extend %active-mode;
-    }
-  }
-}
-.btn {
-  &--large {
-  }
-  &--medium {
-  }
-  &--small {
-    @include text($fs: 11px, $fw: 200, $c: #666);
-    height: 24px;
-    line-height: initial;
-    span {
-      @include text($fs: 11px, $fw: 200);
-    }
-  }
-}
-
-.input-file {
-  display: none;
-}
-</style>
+<template>
+  <div>
+    <nuxt-link
+      v-if="props.isLink"
+      :to="props.item.path"
+      :data-id="`${item.testId}-link`"
+    >
+      <button
+        :id="`${item.testId}-button`"
+        v-development="props.item.development"
+        v-permission="props.item.permission"
+        :data-id="`${item.testId}-button`"
+        :disabled="props.item.disabled"
+        :class="[
+          props.btnClass,
+          {
+            disabled: props.item.disabled,
+          },
+        ]"
+      >
+        <atoms-the-icon2
+          v-if="props.item.iconName"
+          :name="props.item.iconName"
+        />
+        <span
+          v-else-if="props.item.iconClassName"
+          :class="['icon', props.item.iconClassName]"
+        ></span>
+        <span v-else>{{ props.item.text }}</span>
+      </button>
+    </nuxt-link>
+    <label
+      v-else-if="props.item.uploaded"
+      v-development="props.item.development"
+      v-permission="props.item.permission"
+    >
+      <span class="btn btn-link">
+        {{ props.item.text }}
+      </span>
+      <input
+        :id="`select-file-button-${props.item.type}`"
+        :data-id="`${item.testId}-button`"
+        :disabled="props.item.disabled"
+        :multiple="false"
+        type="file"
+        class="input-file"
+        @change="(event) => onSelectFiles(event)"
+      />
+    </label>
+    <button
+      v-else
+      :id="`${item.testId}-button`"
+      :data-id="`${item.testId}-button`"
+      v-development="props.item.development"
+      v-permission="props.item.permission"
+      :disabled="props.item.disabled"
+      :class="[
+        props.btnClass,
+        {
+          active: props.value === props.item.value,
+          disabled: props.item.disabled,
+        },
+      ]"
+      @click="change(props.item.value)"
+    >
+      <atoms-the-icon2 v-if="props.item.iconName" :name="props.item.iconName" />
+      <span
+        v-else-if="props.item.iconClassName"
+        :class="['icon', props.item.iconClassName]"
+      ></span>
+      <span v-else>{{ props.item.text }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = defineProps<{
+  item: UI_I_CollapseNavItem
+  value?: number | string
+  isLink?: boolean
+  btnClass?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'change', value: number | string): void
+  (event: 'select-file', value1: Event, value2: string): void
+}>()
+
+const change = (value: number | string): void => {
+  emits('change', value)
+}
+
+const onSelectFiles = (event: Event): void => {
+  emits('select-file', event, '' + props.item.value || '')
+}
+</script>
+
+<style>
+:root {
+  --collapse-nav-item-link-color: #4d5d69;
+  --collapse-nav-item-link-hover-color: #182531;
+  --collapse-nav-item-active-link-color: #008fd6;
+  --collapse-nav-item-active-link-hover-color: #0081c1;
+}
+:root.dark-theme {
+  --collapse-nav-item-link-color: #e9eaec;
+  --collapse-nav-item-link-hover-color: #ffffff;
+  --collapse-nav-item-active-link-color: #2ba2de;
+  --collapse-nav-item-active-link-hover-color: #0081c1;
+}
+</style>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+%hover-effect {
+  border-bottom: 1px solid var(--row-hover-border-color);
+  background-color: var(--row-hover-bg-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+%active-mode {
+  background-color: var(--row-selected-bg-color);
+  color: var(--row-selected-text-color);
+}
+%border-effect {
+  box-shadow: 0 -0.15rem 0 var(--nav-active-box-shadow-color) inset;
+}
+
+.nav {
+  .router-link-active .nav-link:not(.nav-link.disabled) {
+    @extend %border-effect;
+    color: var(--collapse-nav-item-active-link-color);
+  }
+  &-link {
+    color: var(--collapse-nav-item-link-color);
+    &.active {
+      color: var(--collapse-nav-item-active-link-color);
+
+      &:hover {
+        color: var(--collapse-nav-item-active-link-hover-color);
+      }
+    }
+    &:hover:not(&.active) {
+      color: var(--collapse-nav-item-link-hover-color);
+    }
+    :is(&.active, &:hover) {
+      @extend %border-effect;
+    }
+    &.disabled {
+      cursor: not-allowed;
+      & > span {
+        pointer-events: none;
+      }
+      :is(&.active, &:hover) {
+        box-shadow: none;
+      }
+    }
+  }
+  .icon {
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+}
+
+.navbar-dropdown-menu {
+  &-item {
+    a {
+      text-decoration: none;
+    }
+    .btn {
+      @include text($fs: 14px, $fw: 200, $c: #666);
+      padding: 3px 24px;
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid transparent;
+      display: block;
+      height: auto;
+      line-height: inherit;
+      margin: 0;
+      text-transform: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      letter-spacing: normal;
+      text-align: left;
+
+      &.active {
+        @extend %active-mode;
+      }
+      &:hover {
+        @extend %hover-effect;
+      }
+      &:disabled {
+        cursor: not-allowed;
+        & > span {
+          pointer-events: none;
+        }
+      }
+    }
+    .router-link-active .btn {
+      @extend %active-mode;
+    }
+  }
+}
+.btn {
+  &--large {
+  }
+  &--medium {
+  }
+  &--small {
+    @include text($fs: 11px, $fw: 200, $c: #666);
+    height: 24px;
+    line-height: initial;
+    span {
+      @include text($fs: 11px, $fw: 200);
+    }
+  }
+}
+
+.input-file {
+  display: none;
+}
+</style>