@flyanra/vue-core 0.3.0 → 0.4.1

package/src/components/navigation/menu/fly-sidebar/FlySidebar.vue

@@ -1,150 +1,150 @@
-<template>
-  <div class="fly-sidebar">
-    <el-scrollbar :height="height">
-      <el-menu
-        :default-active="defaultActive"
-        :collapse="isCollapsed"
-        :router="router"
-        popper-class="fly-sidebar-popper"
-      >
-        <FlySidebarNode v-for="node in menu" :key="node.index" :node="node" />
-      </el-menu>
-    </el-scrollbar>
-
-    <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
-      <FlyIcon :icon="isCollapsed ? mdiChevronRight : mdiChevronLeft" type="mdi" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-import { ElMenu, ElScrollbar } from 'element-plus'
-
-import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
-
-import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
-
-import './FlySidebar.element.scss'
-import type { T_FlySidebarProps } from './FlySidebar.types'
-import FlySidebarNode from './FlySidebarNode.vue'
-
-const props = withDefaults(defineProps<T_FlySidebarProps>(), {
-  localStorageKey: 'fly-sidebar-collapsed',
-  router: true,
-  defaultActive: undefined
-})
-
-const isCollapsed = ref(props.isCollapsed ?? false)
-
-function toggleCollapse() {
-  isCollapsed.value = !isCollapsed.value
-}
-</script>
-
-<style lang="scss" scoped>
-$radius: 9999px;
-$height: 30px;
-$trigger-height: 20px;
-
-.fly-sidebar {
-  position: relative;
-  display: inline-block;
-  height: 100%;
-  background-color: var(--el-menu-bg-color);
-  border-inline-end: 1px solid var(--anra-border-color);
-
-  :deep(.el-menu) {
-    border-right: 0;
-    &.el-menu--vertical {
-      --el-menu-item-height: #{$height};
-      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
-
-      padding-inline-end: 1rem;
-      padding-top: calc(#{$trigger-height} + 10px);
-      padding-bottom: 1rem;
-      min-height: auto;
-      height: 100%;
-
-      &.el-menu--collapse {
-        padding-inline-end: 0.3rem;
-      }
-
-      &:not(.el-menu--collapse) {
-        width: 200px;
-      }
-    }
-  }
-}
-
-.fly_sidebar__collapse-trigger {
-  position: absolute;
-  top: 5px;
-  inset-inline-end: 0;
-  width: calc(#{$trigger-height} + 5px);
-  height: $trigger-height;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid var(--anra-border-color);
-  border-left: 1px solid var(--anra-border-color);
-  border-bottom: 1px solid var(--anra-border-color);
-  color: var(--dynamic-light);
-  border-start-start-radius: 5px;
-  border-end-start-radius: 5px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--anra-primary);
-  }
-}
-</style>
-
-<style lang="scss">
-$radius: 9999px;
-$height: 30px;
-
-.fly-sidebar .el-menu.el-menu--vertical,
-.fly-sidebar-popper {
-  --el-menu-item-height: #{$height};
-  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
-
-  & > li:not(:last-child),
-  .el-sub-menu .el-menu .el-menu-item {
-    margin-bottom: 4px;
-  }
-
-  .el-sub-menu {
-    --el-menu-item-height: #{$height};
-
-    .el-menu {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
-  }
-
-  .el-sub-menu__title,
-  .el-menu-item {
-    border-top-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-  }
-
-  .el-menu-item.is-active {
-    font-weight: 500;
-    background-color: var(--anra-primary);
-    color: var(--anra-text-on-primary);
-  }
-}
-
-.fly-sidebar {
-  --el-menu-base-level-padding: 10px;
-
-  .el-menu-item [class^='el-icon'],
-  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
-    margin-right: 10px;
-    font-size: 15px;
-  }
-}
-</style>
+<template>
+  <div class="fly-sidebar">
+    <el-scrollbar :height="height">
+      <el-menu
+        :default-active="defaultActive"
+        :collapse="isCollapsed"
+        :router="router"
+        popper-class="fly-sidebar-popper"
+      >
+        <FlySidebarNode v-for="node in menu" :key="node.index" :node="node" />
+      </el-menu>
+    </el-scrollbar>
+
+    <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
+      <FlyIcon :icon="isCollapsed ? mdiChevronRight : mdiChevronLeft" type="mdi" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { ElMenu, ElScrollbar } from 'element-plus'
+
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+
+import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+
+import './FlySidebar.element.scss'
+import type { T_FlySidebarProps } from './FlySidebar.types'
+import FlySidebarNode from './FlySidebarNode.vue'
+
+const props = withDefaults(defineProps<T_FlySidebarProps>(), {
+  localStorageKey: 'fly-sidebar-collapsed',
+  router: true,
+  defaultActive: undefined
+})
+
+const isCollapsed = ref(props.isCollapsed ?? false)
+
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+</script>
+
+<style lang="scss" scoped>
+$radius: 9999px;
+$height: 30px;
+$trigger-height: 20px;
+
+.fly-sidebar {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  background-color: var(--el-menu-bg-color);
+  border-inline-end: 1px solid var(--anra-border-color);
+
+  :deep(.el-menu) {
+    border-right: 0;
+    &.el-menu--vertical {
+      --el-menu-item-height: #{$height};
+      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
+
+      padding-inline-end: 1rem;
+      padding-top: calc(#{$trigger-height} + 10px);
+      padding-bottom: 1rem;
+      min-height: auto;
+      height: 100%;
+
+      &.el-menu--collapse {
+        padding-inline-end: 0.3rem;
+      }
+
+      &:not(.el-menu--collapse) {
+        width: 200px;
+      }
+    }
+  }
+}
+
+.fly_sidebar__collapse-trigger {
+  position: absolute;
+  top: 5px;
+  inset-inline-end: 0;
+  width: calc(#{$trigger-height} + 5px);
+  height: $trigger-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--anra-border-color);
+  border-left: 1px solid var(--anra-border-color);
+  border-bottom: 1px solid var(--anra-border-color);
+  color: var(--dynamic-light);
+  border-start-start-radius: 5px;
+  border-end-start-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--anra-primary);
+  }
+}
+</style>
+
+<style lang="scss">
+$radius: 9999px;
+$height: 30px;
+
+.fly-sidebar .el-menu.el-menu--vertical,
+.fly-sidebar-popper {
+  --el-menu-item-height: #{$height};
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
+
+  & > li:not(:last-child),
+  .el-sub-menu .el-menu .el-menu-item {
+    margin-bottom: 4px;
+  }
+
+  .el-sub-menu {
+    --el-menu-item-height: #{$height};
+
+    .el-menu {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+
+  .el-sub-menu__title,
+  .el-menu-item {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+
+  .el-menu-item.is-active {
+    font-weight: 500;
+    background-color: var(--anra-primary);
+    color: var(--anra-text-on-primary);
+  }
+}
+
+.fly-sidebar {
+  --el-menu-base-level-padding: 10px;
+
+  .el-menu-item [class^='el-icon'],
+  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
+    margin-right: 10px;
+    font-size: 15px;
+  }
+}
+</style>

package/src/components/navigation/menu/fly-sidebar/FlySidebarNode.vue

@@ -1,47 +1,47 @@
-<template>
-  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
-    <template v-if="node.icon">
-      <i class="el-icon">
-        <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
-      </i>
-    </template>
-
-    <template #title>
-      {{ node.label }}
-    </template>
-  </el-menu-item>
-
-  <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
-    <template #title>
-      <template v-if="node.icon">
-        <i class="el-icon">
-          <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
-        </i>
-      </template>
-
-      <span>{{ node.label }}</span>
-    </template>
-
-    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
-  </el-sub-menu>
-
-  <el-menu-item-group v-else>
-    <template v-if="node.label" #title>
-      <span>{{ node.label }}</span>
-    </template>
-
-    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
-  </el-menu-item-group>
-</template>
-
-<script lang="ts" setup>
-import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
-
-import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
-
-import type { T_FlySidebarNode } from './FlySidebar.types'
-
-defineProps<{
-  node: T_FlySidebarNode
-}>()
-</script>
+<template>
+  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
+    <template v-if="node.icon">
+      <i class="el-icon">
+        <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
+      </i>
+    </template>
+
+    <template #title>
+      {{ node.label }}
+    </template>
+  </el-menu-item>
+
+  <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
+    <template #title>
+      <template v-if="node.icon">
+        <i class="el-icon">
+          <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
+        </i>
+      </template>
+
+      <span>{{ node.label }}</span>
+    </template>
+
+    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
+  </el-sub-menu>
+
+  <el-menu-item-group v-else>
+    <template v-if="node.label" #title>
+      <span>{{ node.label }}</span>
+    </template>
+
+    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
+  </el-menu-item-group>
+</template>
+
+<script lang="ts" setup>
+import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
+
+import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+
+import type { T_FlySidebarNode } from './FlySidebar.types'
+
+defineProps<{
+  node: T_FlySidebarNode
+}>()
+</script>

package/src/components/navigation/menu/fly-sidebar/index.ts

@@ -1,12 +1,12 @@
-import FlySidebar from './FlySidebar.vue'
-
-export default FlySidebar
-export { FlySidebar }
-
-export type {
-  T_FlySidebar,
-  T_FlySidebarNode,
-  T_FlySidebarGroup,
-  T_FlySidebarSubMenu,
-  T_FlySidebarBase
-} from './FlySidebar.types'
+import FlySidebar from './FlySidebar.vue'
+
+export default FlySidebar
+export { FlySidebar }
+
+export type {
+  T_FlySidebar,
+  T_FlySidebarNode,
+  T_FlySidebarGroup,
+  T_FlySidebarSubMenu,
+  T_FlySidebarBase
+} from './FlySidebar.types'

package/src/components/navigation/menu/index.ts

@@ -1,5 +1,5 @@
-export { default as FlySidebar } from './fly-sidebar'
-export type * from './fly-sidebar'
-
-export { default as FlyMiniSidebar } from './fly-mini-sidebar'
-export type * from './fly-mini-sidebar'
+export { default as FlySidebar } from './fly-sidebar'
+export type * from './fly-sidebar'
+
+export { default as FlyMiniSidebar } from './fly-mini-sidebar'
+export type * from './fly-mini-sidebar'

package/src/index.ts

@@ -1 +1 @@
-export {}
+export {}

package/src/styles/_scss-tokens.scss

@@ -1,76 +1,76 @@
-// global colors
-$anra-primary: #58baa8;
-$anra-primary-dark: #15826e;
-$anra-primary-accent: #57baa7;
-$anra-black: #000000;
-$anra-white: #ffffff;
-
-// dark theme
-$anra-dark-dynamic-light: #ffffff;
-$anra-dark-dynamic-dark: #000000;
-$anra-dark-default-text-color: #cfd3dc;
-$anra-dark-bg-10: #29555a;
-$anra-dark-bg-15: #274452;
-$anra-dark-bg-15-accent: #253e4a;
-$anra-dark-bg-15-accent-1: #395969;
-$anra-dark-bg-20: #18323f;
-$anra-dark-bg-20-rgb: 24, 50, 63;
-$anra-dark-bg-20-subtitle: #c7c7c7;
-$anra-dark-bg-25: #19282f;
-$anra-dark-bg-blue-50: #293470;
-$anra-dark-state-danger: #ff0e0e;
-$anra-dark-state-error: #ff0e0e;
-$anra-dark-state-error-lighter: #e76f6f;
-$anra-dark-state-error-lighter-50: #ffa5a5;
-$anra-dark-state-success: #068c53;
-$anra-dark-state-info: #6a7174;
-$anra-dark-state-info-lighter: #c0c9cd;
-$anra-dark-state-warning: #ffc427;
-$anra-dark-state-warning-50: #896a3d;
-$anra-dark-text-placeholder: #b3b7bf;
-$anra-dark-border-color: #4f626c;
-$anra-dark-border-color-light: #616161;
-$anra-dark-fill-color-light: #405661;
-$anra-dark-mask-color: rgba(24, 50, 63, 0.79);
-$anra-dark-scroll-shadow: #02020224;
-$anra-dark-disabled-bg: #1f3845;
-$anra-dark-form-item-error-color: #ffcac9;
-$anra-dark-tag-info-bg: #344b56;
-$anra-dark-form-input-border: #979797;
-$anra-dark-text-on-primary: black;
-$anra-dark-text-subtle: #99a1af;
-
-// light theme
-$anra-light-dynamic-light: #000000;
-$anra-light-dynamic-dark: #ffffff;
-$anra-light-default-text-color: #1a1f24;
-$anra-light-bg-10: #f1f5f6;
-$anra-light-bg-15: #ffffff;
-$anra-light-bg-15-accent: #f2f2f2;
-$anra-light-bg-15-accent-1: #d9e3e6;
-$anra-light-bg-20: #f4f5f7;
-$anra-light-bg-20-rgb: 244, 245, 247;
-$anra-light-bg-20-subtitle: #4c5a66;
-$anra-light-bg-25: #c7d3d8;
-$anra-light-bg-blue-50: #dbe3f0;
-$anra-light-state-danger: #d60000;
-$anra-light-state-error: #d60000;
-$anra-light-state-error-lighter: #ef7a7a;
-$anra-light-state-error-lighter-50: #f7bcbc;
-$anra-light-state-success: #068c53;
-$anra-light-state-info: #5a6367;
-$anra-light-state-info-lighter: #5b6164;
-$anra-light-state-warning: #dca217;
-$anra-light-state-warning-50: #b88c3c;
-$anra-light-text-placeholder: #8a929a;
-$anra-light-border-color: #cad4d9;
-$anra-light-border-color-light: #e0e4e5;
-$anra-light-fill-color-light: #f3f6f7;
-$anra-light-mask-color: rgba(208, 218, 222, 0.6);
-$anra-light-scroll-shadow: #00000012;
-$anra-light-disabled-bg: #e6ecef;
-$anra-light-form-item-error-color: #d68080;
-$anra-light-tag-info-bg: #e4ecef;
-$anra-light-form-input-border: #969696;
-$anra-light-text-on-primary: black;
-$anra-light-text-subtle: #000000;
+// global colors
+$anra-primary: #58baa8 !default;
+$anra-primary-dark: #15826e !default;
+$anra-primary-accent: #57baa7 !default;
+$anra-black: #000000 !default;
+$anra-white: #ffffff !default;
+
+// dark theme
+$anra-dark-dynamic-light: #ffffff !default;
+$anra-dark-dynamic-dark: #000000 !default;
+$anra-dark-default-text-color: #cfd3dc !default;
+$anra-dark-bg-10: #29555a !default;
+$anra-dark-bg-15: #274452 !default;
+$anra-dark-bg-15-accent: #253e4a !default;
+$anra-dark-bg-15-accent-1: #395969 !default;
+$anra-dark-bg-20: #18323f !default;
+$anra-dark-bg-20-rgb: 24, 50, 63 !default;
+$anra-dark-bg-20-subtitle: #c7c7c7 !default;
+$anra-dark-bg-25: #19282f !default;
+$anra-dark-bg-blue-50: #293470 !default;
+$anra-dark-state-danger: #ff0e0e !default;
+$anra-dark-state-error: #ff0e0e !default;
+$anra-dark-state-error-lighter: #e76f6f !default;
+$anra-dark-state-error-lighter-50: #ffa5a5 !default;
+$anra-dark-state-success: #068c53 !default;
+$anra-dark-state-info: #6a7174 !default;
+$anra-dark-state-info-lighter: #c0c9cd !default;
+$anra-dark-state-warning: #ffc427 !default;
+$anra-dark-state-warning-50: #896a3d !default;
+$anra-dark-text-placeholder: #b3b7bf !default;
+$anra-dark-border-color: #4f626c !default;
+$anra-dark-border-color-light: #616161 !default;
+$anra-dark-fill-color-light: #405661 !default;
+$anra-dark-mask-color: rgba(24, 50, 63, 0.79) !default;
+$anra-dark-scroll-shadow: #02020224 !default;
+$anra-dark-disabled-bg: #1f3845 !default;
+$anra-dark-form-item-error-color: #ffcac9 !default;
+$anra-dark-tag-info-bg: #344b56 !default;
+$anra-dark-form-input-border: #979797 !default;
+$anra-dark-text-on-primary: black !default;
+$anra-dark-text-subtle: #99a1af !default;
+
+// light theme
+$anra-light-dynamic-light: #000000 !default;
+$anra-light-dynamic-dark: #ffffff !default;
+$anra-light-default-text-color: #1a1f24 !default;
+$anra-light-bg-10: #f1f5f6 !default;
+$anra-light-bg-15: #ffffff !default;
+$anra-light-bg-15-accent: #f2f2f2 !default;
+$anra-light-bg-15-accent-1: #d9e3e6 !default;
+$anra-light-bg-20: #f4f5f7 !default;
+$anra-light-bg-20-rgb: 244, 245, 247 !default;
+$anra-light-bg-20-subtitle: #4c5a66 !default;
+$anra-light-bg-25: #c7d3d8 !default;
+$anra-light-bg-blue-50: #dbe3f0 !default;
+$anra-light-state-danger: #d60000 !default;
+$anra-light-state-error: #d60000 !default;
+$anra-light-state-error-lighter: #ef7a7a !default;
+$anra-light-state-error-lighter-50: #f7bcbc !default;
+$anra-light-state-success: #068c53 !default;
+$anra-light-state-info: #5a6367 !default;
+$anra-light-state-info-lighter: #5b6164 !default;
+$anra-light-state-warning: #dca217 !default;
+$anra-light-state-warning-50: #b88c3c !default;
+$anra-light-text-placeholder: #8a929a !default;
+$anra-light-border-color: #cad4d9 !default;
+$anra-light-border-color-light: #e0e4e5 !default;
+$anra-light-fill-color-light: #f3f6f7 !default;
+$anra-light-mask-color: rgba(208, 218, 222, 0.6) !default;
+$anra-light-scroll-shadow: #00000012 !default;
+$anra-light-disabled-bg: #e6ecef !default;
+$anra-light-form-item-error-color: #d68080 !default;
+$anra-light-tag-info-bg: #e4ecef !default;
+$anra-light-form-input-border: #969696 !default;
+$anra-light-text-on-primary: black !default;
+$anra-light-text-subtle: #000000 !default;

package/src/styles/core/animations.scss

@@ -1,40 +1,40 @@
-@keyframes invisible-in {
-  0% {
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  100% {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-@keyframes fade-in-out {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.invisible-in {
-  visibility: hidden;
-  animation: invisible-in 0.1s ease-in 0.2s forwards;
-}
-
-.invisible-in-slow-sm {
-  visibility: hidden;
-  animation: invisible-in 0.2s ease-in 0.2s forwards;
-}
-
-.invisible-in-slow-md {
-  visibility: hidden;
-  animation: invisible-in 0.3s ease-in 0.5s forwards;
-}
+@keyframes invisible-in {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes fade-in-out {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.invisible-in {
+  visibility: hidden;
+  animation: invisible-in 0.1s ease-in 0.2s forwards;
+}
+
+.invisible-in-slow-sm {
+  visibility: hidden;
+  animation: invisible-in 0.2s ease-in 0.2s forwards;
+}
+
+.invisible-in-slow-md {
+  visibility: hidden;
+  animation: invisible-in 0.3s ease-in 0.5s forwards;
+}