@flyanra/vue-core 0.1.0

package/src/components/navigation/menu/fly-mini-sidebar/FlyMiniSidebarItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <router-link :to="menu.path" class="anra-sidebar-item" active-class="anra-sidebar-item--active">
+    <span class="anra-sidebar-item__icon">
+      <FlyIcon :icon="menu.icon.icon" :type="menu.icon.type" />
+    </span>
+
+    <span class="anra-sidebar-item__label">{{ menu.label }}</span>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+
+import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
+
+defineProps<{
+  menu: T_FlyMiniSidebarItem
+}>()
+</script>
+
+<style lang="scss">
+.anra-sidebar-item {
+  text-align: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  transition: all 0.2s ease;
+  color: var(--anra-text-subtle);
+  display: flex;
+  flex-direction: column;
+
+  &--active {
+    background-color: var(--anra-primary);
+    color: var(--anra-text-on-primary);
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 1em;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    font-size: 0.75rem;
+    letter-spacing: 0;
+    line-height: 1.5;
+  }
+}
+</style>

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

@@ -0,0 +1,6 @@
+import FlyMiniSidebar from './FlyMiniSidebar.vue'
+
+export default FlyMiniSidebar
+export { FlyMiniSidebar }
+
+export type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'

package/src/components/navigation/menu/fly-sidebar/FlySidebar.element.scss

@@ -0,0 +1,9 @@
+@use '../../../../styles/element/common.scss' as *;
+@use 'element-plus/theme-chalk/src/menu.scss' as *;
+@use 'element-plus/theme-chalk/src/sub-menu.scss' as *;
+@use 'element-plus/theme-chalk/src/menu-item.scss' as *;
+@use 'element-plus/theme-chalk/src/menu-item-group.scss' as *;
+@use 'element-plus/theme-chalk/src/popper.scss' as *;
+@use 'element-plus/theme-chalk/src/tooltip.scss' as *;
+@use 'element-plus/theme-chalk/src/icon.scss' as *;
+@use 'element-plus/theme-chalk/src/scrollbar.scss' as *;

package/src/components/navigation/menu/fly-sidebar/FlySidebar.types.ts

@@ -0,0 +1,36 @@
+import type { T_FlyIconProps } from '../../../general/fly-icon/FlyIcon.types'
+
+export type T_FlySidebarBase = {
+  index: string
+  label?: string
+  icon?: T_FlyIconProps
+  disabled?: boolean
+}
+
+export type T_FlySidebarItem = T_FlySidebarBase & {
+  type: 'item'
+}
+
+export type T_FlySidebarSubMenu = T_FlySidebarBase & {
+  type: 'submenu'
+  children: T_FlySidebarNode[]
+}
+
+export type T_FlySidebarGroup = {
+  index: string
+  type: 'group'
+  label?: string
+  children: T_FlySidebarItem[]
+}
+
+export type T_FlySidebarNode = T_FlySidebarItem | T_FlySidebarSubMenu | T_FlySidebarGroup
+
+export type T_FlySidebar = T_FlySidebarNode[]
+
+export type T_FlySidebarProps = {
+  isCollapsed?: boolean
+  router?: boolean
+  defaultActive?: string
+  menu: T_FlySidebarNode[]
+  height?: string
+}

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

@@ -0,0 +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(--ep-menu-bg-color);
+  border-inline-end: 1px solid var(--anra-border-color);
+
+  :deep(.ep-menu) {
+    border-right: 0;
+    &.ep-menu--vertical {
+      --ep-menu-item-height: #{$height};
+      --ep-menu-sub-item-height: calc(var(--ep-menu-item-height) - 6px);
+
+      padding-inline-end: 1rem;
+      padding-top: calc(#{$trigger-height} + 10px);
+      padding-bottom: 1rem;
+      min-height: auto;
+      height: 100%;
+
+      &.ep-menu--collapse {
+        padding-inline-end: 0.3rem;
+      }
+
+      &:not(.ep-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 .ep-menu.ep-menu--vertical,
+.fly-sidebar-popper {
+  --ep-menu-item-height: #{$height};
+  --ep-menu-sub-item-height: calc(var(--ep-menu-item-height) - 2px);
+
+  & > li:not(:last-child),
+  .ep-sub-menu .ep-menu .ep-menu-item {
+    margin-bottom: 4px;
+  }
+
+  .ep-sub-menu {
+    --ep-menu-item-height: #{$height};
+
+    .ep-menu {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+
+  .ep-sub-menu__title,
+  .ep-menu-item {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+
+  .ep-menu-item.is-active {
+    font-weight: 500;
+    background-color: var(--anra-primary);
+    color: var(--anra-text-on-primary);
+  }
+}
+
+.fly-sidebar {
+  --ep-menu-base-level-padding: 10px;
+
+  .ep-menu-item [class^='ep-icon'],
+  .ep-sub-menu__title [class^='ep-icon']:not(.ep-sub-menu__icon-arrow) {
+    margin-right: 10px;
+    font-size: 15px;
+  }
+}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
+    <template v-if="node.icon">
+      <i class="ep-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="ep-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

@@ -0,0 +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'

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

@@ -0,0 +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'

package/src/index.ts

@@ -0,0 +1 @@
+export {}

package/src/styles/_scss-tokens.scss

@@ -0,0 +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;

package/src/styles/element/common.scss

@@ -0,0 +1,57 @@
+@use '../scss-tokens' as *;
+
+@use './config.scss' as *;
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': $anra-primary-dark
+    )
+  ),
+  $border-color: (
+    '': $anra-light-border-color
+  ),
+  $fill-color: (
+    'light': $anra-light-fill-color-light
+  ),
+  $date-editor: (
+    'width': 100%
+  ),
+  $select-dropdown: (
+    'border': 1px solid var(--anra-border-color)
+  ),
+  $datepicker: (
+    'inner-border-color': var(--anra-border-color)
+  ),
+  $collapse: (
+    'border-color': var(--anra-border-color),
+    'header-height': auto
+  ),
+  $table: (
+    'header-bg-color': transparent,
+    'tr-bg-color': transparent,
+    'border-color': var(--dark-15-accent-1)
+  ),
+  $checkbox: (
+    'checked-icon-color': var(--anra-black),
+    'bg-color': var(--anra-bg-20)
+  ),
+  $radio-button: (
+    'checked-text-color': var(--anra-black)
+  ),
+  $disabled: (
+    'bg-color': var(--anra-disabled-bg)
+  ),
+  $loading: (
+    'fullscreen-spinner-size': 30px
+  ),
+  $dialog: (
+    'bg-color': var(--anra-bg-15)
+  ),
+  $input: (
+    'bg-color': var(--anra-bg-20),
+    'border-color': var(--anra-form-input-border)
+  ),
+  $menu: (
+    'bg-color': var(--anra-bg-20)
+  )
+);

package/src/styles/element/config.scss

@@ -0,0 +1,3 @@
+@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
+  $namespace: 'ep'
+);

package/src/styles/element/dark.scss

@@ -0,0 +1,39 @@
+@use './config.scss' as *;
+@use '../scss-tokens' as *;
+
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': $anra-primary
+    ),
+    'danger': (
+      'base': $anra-dark-state-danger
+    ),
+    'error': (
+      'base': $anra-dark-state-error
+    ),
+    'info': (
+      'base': $anra-dark-state-info
+    ),
+    'success': (
+      'base': $anra-dark-state-success
+    )
+  ),
+  $bg-color: (
+    '': $anra-dark-bg-20,
+    'overlay': $anra-dark-bg-20
+  ),
+  $border-color: (
+    '': $anra-dark-border-color,
+    'light': $anra-dark-border-color-light
+  ),
+  $fill-color: (
+    'light': $anra-dark-fill-color-light
+  ),
+  $text-color: (
+    'placeholder': $anra-dark-text-placeholder
+  ),
+  $mask-color: (
+    '': $anra-dark-mask-color
+  )
+);

package/src/styles/index.d.ts

@@ -0,0 +1 @@
+// Type declaration for side-effect style import

package/src/styles/index.scss

@@ -0,0 +1,5 @@
+@use './tokens.scss';
+@use './element/common.scss' as *;
+@use 'element-plus/theme-chalk/src/var.scss' as *;
+@use './element/dark.scss' as *;
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

package/src/styles/mixins/shadows.scss

@@ -0,0 +1,15 @@
+@mixin shadow {
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+@mixin shadow-lg {
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

package/src/styles/tokens.scss

@@ -0,0 +1,83 @@
+@use './scss-tokens' as vars;
+
+// Apply SCSS variables
+:root {
+  --anra-primary: #{vars.$anra-primary};
+  --anra-primary-accent: #{vars.$anra-primary-accent};
+  --anra-black: #{vars.$anra-black};
+  --anra-white: #{vars.$anra-white};
+}
+
+html.dark {
+  --anra-primary-theme: #{vars.$anra-primary};
+  --dynamic-light: #{vars.$anra-dark-dynamic-light};
+  --dynamic-dark: #{vars.$anra-dark-dynamic-dark};
+  --default-text-color: #{vars.$anra-dark-default-text-color};
+  --anra-bg-10: #{vars.$anra-dark-bg-10};
+  --anra-bg-15: #{vars.$anra-dark-bg-15};
+  --anra-bg-15-accent: #{vars.$anra-dark-bg-15-accent};
+  --anra-bg-15-accent-1: #{vars.$anra-dark-bg-15-accent-1};
+  --anra-bg-20: #{vars.$anra-dark-bg-20};
+  --anra-bg-20-rgb: #{vars.$anra-dark-bg-20-rgb};
+  --anra-bg-20-subtitle: #{vars.$anra-dark-bg-20-subtitle};
+  --anra-bg-25: #{vars.$anra-dark-bg-25};
+  --anra-bg-blue-50: #{vars.$anra-dark-bg-blue-50};
+  --anra-state-danger: #{vars.$anra-dark-state-danger};
+  --anra-state-error: #{vars.$anra-dark-state-error};
+  --anra-state-error-lighter: #{vars.$anra-dark-state-error-lighter};
+  --anra-state-error-lighter-50: #{vars.$anra-dark-state-error-lighter-50};
+  --anra-state-success: #{vars.$anra-dark-state-success};
+  --anra-state-info: #{vars.$anra-dark-state-info};
+  --anra-state-info-lighter: #{vars.$anra-dark-state-info-lighter};
+  --anra-state-warning: #{vars.$anra-dark-state-warning};
+  --anra-state-warning-50: #{vars.$anra-dark-state-warning-50};
+  --anra-text-placeholder: #{vars.$anra-dark-text-placeholder};
+  --anra-border-color: #{vars.$anra-dark-border-color};
+  --anra-border-color-light: #{vars.$anra-dark-border-color-light};
+  --anra-fill-color-light: #{vars.$anra-dark-fill-color-light};
+  --anra-mask-color: #{vars.$anra-dark-mask-color};
+  --anra-scroll-shadow: #{vars.$anra-dark-scroll-shadow};
+  --anra-disabled-bg: #{vars.$anra-dark-disabled-bg};
+  --anra-form-item-error-color: #{vars.$anra-dark-form-item-error-color};
+  --anra-info-bg: #{vars.$anra-dark-tag-info-bg};
+  --anra-form-input-border: #{vars.$anra-dark-form-input-border};
+  --anra-text-on-primary: #{vars.$anra-dark-text-on-primary};
+  --anra-text-subtle: #{vars.$anra-dark-text-subtle};
+}
+
+html.light {
+  --anra-primary-theme: #{vars.$anra-primary-dark};
+  --dynamic-light: #{vars.$anra-light-dynamic-light};
+  --dynamic-dark: #{vars.$anra-light-dynamic-dark};
+  --default-text-color: #{vars.$anra-light-default-text-color};
+  --anra-bg-10: #{vars.$anra-light-bg-10};
+  --anra-bg-15: #{vars.$anra-light-bg-15};
+  --anra-bg-15-accent: #{vars.$anra-light-bg-15-accent};
+  --anra-bg-15-accent-1: #{vars.$anra-light-bg-15-accent-1};
+  --anra-bg-20: #{vars.$anra-light-bg-20};
+  --anra-bg-20-rgb: #{vars.$anra-light-bg-20-rgb};
+  --anra-bg-20-subtitle: #{vars.$anra-light-bg-20-subtitle};
+  --anra-bg-25: #{vars.$anra-light-bg-25};
+  --anra-bg-blue-50: #{vars.$anra-light-bg-blue-50};
+  --anra-state-danger: #{vars.$anra-light-state-danger};
+  --anra-state-error: #{vars.$anra-light-state-error};
+  --anra-state-error-lighter: #{vars.$anra-light-state-error-lighter};
+  --anra-state-error-lighter-50: #{vars.$anra-light-state-error-lighter-50};
+  --anra-state-success: #{vars.$anra-light-state-success};
+  --anra-state-info: #{vars.$anra-light-state-info};
+  --anra-state-info-lighter: #{vars.$anra-light-state-info-lighter};
+  --anra-state-warning: #{vars.$anra-light-state-warning};
+  --anra-state-warning-50: #{vars.$anra-light-state-warning-50};
+  --anra-text-placeholder: #{vars.$anra-light-text-placeholder};
+  --anra-border-color: #{vars.$anra-light-border-color};
+  --anra-border-color-light: #{vars.$anra-light-border-color-light};
+  --anra-fill-color-light: #{vars.$anra-light-fill-color-light};
+  --anra-mask-color: #{vars.$anra-light-mask-color};
+  --anra-scroll-shadow: #{vars.$anra-light-scroll-shadow};
+  --anra-disabled-bg: #{vars.$anra-light-disabled-bg};
+  --anra-form-item-error-color: #{vars.$anra-light-form-item-error-color};
+  --anra-info-bg: #{vars.$anra-light-tag-info-bg};
+  --anra-form-input-border: #{vars.$anra-light-form-input-border};
+  --anra-text-on-primary: #{vars.$anra-light-text-on-primary};
+  --anra-text-subtle: #{vars.$anra-light-text-subtle};
+}