@flyanra/vue-core 0.3.0 → 0.4.1

package/src/components/navigation/fly-steps/FlySteps.element.scss

@@ -1,100 +1,100 @@
-@use 'element-plus/theme-chalk/src/steps.scss' as *;
-@use 'element-plus/theme-chalk/src/step.scss' as *;
-
-.el-steps {
-  &.el-steps--horizontal {
-    .el-step__head {
-      .el-step__line {
-        height: 1px;
-        top: 15px;
-      }
-
-      .el-step__icon {
-        width: 30px;
-        height: 30px;
-      }
-
-      &.is-process {
-        border-color: var(--primary);
-
-        .el-step__icon {
-          &.is-text {
-            background-color: var(--anra-primary);
-            color: var(--anra-black);
-          }
-        }
-      }
-
-      &.is-success {
-        border-color: var(--anra-primary-accent);
-
-        .el-step__icon {
-          &.is-text {
-            background-color: var(--anra-primary-accent);
-            color: var(--anra-black);
-          }
-        }
-      }
-    }
-
-    .el-step__main {
-      .el-step__title {
-        font-size: 13px;
-        line-height: normal;
-        padding-top: 0.25rem;
-
-        .clickable {
-          cursor: pointer;
-          text-decoration: underline;
-          border-bottom: 1px solid transparent;
-
-          &:hover {
-            color: var(--anra-primary);
-            border-color: transparent;
-          }
-        }
-
-        &.is-process,
-        &.is-success {
-          color: var(--default-text-color);
-        }
-
-        &.is-process {
-          text-decoration: none;
-          font-weight: 500;
-        }
-      }
-    }
-  }
-
-  .el-step {
-    &.is-center {
-      &:first-child {
-        .el-step__head {
-          text-align: start;
-          .el-step__line {
-            inset-inline-start: 0;
-          }
-        }
-        .el-step__main {
-          text-align: start;
-        }
-      }
-      &:last-child {
-        .el-step__head {
-          text-align: end;
-        }
-        .el-step__main {
-          text-align: end;
-        }
-      }
-      &:nth-last-child(2) {
-        .el-step__head {
-          .el-step__line {
-            inset-inline-end: -100%;
-          }
-        }
-      }
-    }
-  }
-}
+@use 'element-plus/theme-chalk/src/steps.scss' as *;
+@use 'element-plus/theme-chalk/src/step.scss' as *;
+
+.el-steps {
+  &.el-steps--horizontal {
+    .el-step__head {
+      .el-step__line {
+        height: 1px;
+        top: 15px;
+      }
+
+      .el-step__icon {
+        width: 30px;
+        height: 30px;
+      }
+
+      &.is-process {
+        border-color: var(--primary);
+
+        .el-step__icon {
+          &.is-text {
+            background-color: var(--anra-primary);
+            color: var(--anra-black);
+          }
+        }
+      }
+
+      &.is-success {
+        border-color: var(--anra-primary-accent);
+
+        .el-step__icon {
+          &.is-text {
+            background-color: var(--anra-primary-accent);
+            color: var(--anra-black);
+          }
+        }
+      }
+    }
+
+    .el-step__main {
+      .el-step__title {
+        font-size: 13px;
+        line-height: normal;
+        padding-top: 0.25rem;
+
+        .clickable {
+          cursor: pointer;
+          text-decoration: underline;
+          border-bottom: 1px solid transparent;
+
+          &:hover {
+            color: var(--anra-primary);
+            border-color: transparent;
+          }
+        }
+
+        &.is-process,
+        &.is-success {
+          color: var(--default-text-color);
+        }
+
+        &.is-process {
+          text-decoration: none;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .el-step {
+    &.is-center {
+      &:first-child {
+        .el-step__head {
+          text-align: start;
+          .el-step__line {
+            inset-inline-start: 0;
+          }
+        }
+        .el-step__main {
+          text-align: start;
+        }
+      }
+      &:last-child {
+        .el-step__head {
+          text-align: end;
+        }
+        .el-step__main {
+          text-align: end;
+        }
+      }
+      &:nth-last-child(2) {
+        .el-step__head {
+          .el-step__line {
+            inset-inline-end: -100%;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/navigation/fly-steps/FlySteps.types.ts

@@ -1,10 +1,10 @@
-export type T_FlyStepItem = {
-  label: string
-  id: number
-  clickable?: boolean
-}
-
-export type T_FlyStepProps = {
-  steps: T_FlyStepItem[]
-  activeIndex: number
-}
+export type T_FlyStepItem = {
+  label: string
+  id: number
+  clickable?: boolean
+}
+
+export type T_FlyStepProps = {
+  steps: T_FlyStepItem[]
+  activeIndex: number
+}

package/src/components/navigation/fly-steps/FlySteps.vue

@@ -1,30 +1,30 @@
-<template>
-  <div class="anra-steps">
-    <el-steps :active="activeIndex" align-center finish-status="success">
-      <el-step v-for="step in steps" :key="step.id" :title="step.label">
-        <template #title>
-          <div
-            :role="step.clickable ? 'button' : ''"
-            class="tw-text-sm tw-leading-normal tw-pt-px"
-            :class="step.clickable ? 'clickable' : ''"
-            @click="step.clickable ? emit('change-step', step.id) : null"
-          >
-            {{ step.label }}
-          </div>
-        </template>
-      </el-step>
-    </el-steps>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ElStep, ElSteps } from 'element-plus'
-
-import './FlySteps.element.scss'
-import type { T_FlyStepProps } from './FlySteps.types'
-
-const emit = defineEmits<{
-  (e: 'change-step', data: number): void
-}>()
-defineProps<T_FlyStepProps>()
-</script>
+<template>
+  <div class="anra-steps">
+    <el-steps :active="activeIndex" align-center finish-status="success">
+      <el-step v-for="step in steps" :key="step.id" :title="step.label">
+        <template #title>
+          <div
+            :role="step.clickable ? 'button' : ''"
+            class="tw-text-sm tw-leading-normal tw-pt-px"
+            :class="step.clickable ? 'clickable' : ''"
+            @click="step.clickable ? emit('change-step', step.id) : null"
+          >
+            {{ step.label }}
+          </div>
+        </template>
+      </el-step>
+    </el-steps>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElStep, ElSteps } from 'element-plus'
+
+import './FlySteps.element.scss'
+import type { T_FlyStepProps } from './FlySteps.types'
+
+const emit = defineEmits<{
+  (e: 'change-step', data: number): void
+}>()
+defineProps<T_FlyStepProps>()
+</script>

package/src/components/navigation/fly-steps/index.ts

@@ -1,6 +1,6 @@
-import FlySteps from './FlySteps.vue'
-
-export default FlySteps
-export { FlySteps }
-
-export type { T_FlyStepProps, T_FlyStepItem } from './FlySteps.types'
+import FlySteps from './FlySteps.vue'
+
+export default FlySteps
+export { FlySteps }
+
+export type { T_FlyStepProps, T_FlyStepItem } from './FlySteps.types'

package/src/components/navigation/index.ts

@@ -1,2 +1,2 @@
-export * from './menu'
-export * from './fly-steps'
+export * from './menu'
+export * from './fly-steps'

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

@@ -1,2 +1,2 @@
-@use '../../../../styles/element/common.scss' as *;
-@use 'element-plus/theme-chalk/src/scrollbar.scss' as *;
+@use '../../../../styles/element/common.scss' as *;
+@use 'element-plus/theme-chalk/src/scrollbar.scss' as *;

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

@@ -1,8 +1,8 @@
-import type { T_FlyIconProps } from '../../../general/fly-icon'
-
-export type T_FlyMiniSidebarItem = {
-  key: string | number
-  label: string
-  path: string
-  icon: T_FlyIconProps
-}
+import type { T_FlyIconProps } from '../../../general/fly-icon'
+
+export type T_FlyMiniSidebarItem = {
+  key: string | number
+  label: string
+  path: string
+  icon: T_FlyIconProps
+}

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

@@ -1,46 +1,46 @@
-<template>
-  <aside class="anra-mini-sidebar">
-    <el-scrollbar>
-      <div class="anra-mini-sidebar__menu">
-        <FlyMiniSidebarItem v-for="item in menu" :key="item.key" :menu="item" />
-      </div>
-    </el-scrollbar>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import { ElScrollbar } from 'element-plus'
-
-import './FlyMiniSidebar.element.scss'
-import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
-import FlyMiniSidebarItem from './FlyMiniSidebarItem.vue'
-
-defineProps<{
-  menu: T_FlyMiniSidebarItem[]
-}>()
-</script>
-
-<style lang="scss">
-.anra-mini-sidebar {
-  background-color: var(--anra-bg-20);
-  width: 5rem;
-  border-inline-end: 1px solid var(--anra-border-color);
-  flex-shrink: 0;
-  height: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  overflow: hidden;
-
-  &wrapper {
-    flex-grow: 1;
-    padding-top: 0.5rem;
-    overflow-y: auto;
-  }
-
-  &__menu {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-}
-</style>
+<template>
+  <aside class="anra-mini-sidebar">
+    <el-scrollbar>
+      <div class="anra-mini-sidebar__menu">
+        <FlyMiniSidebarItem v-for="item in menu" :key="item.key" :menu="item" />
+      </div>
+    </el-scrollbar>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ElScrollbar } from 'element-plus'
+
+import './FlyMiniSidebar.element.scss'
+import type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
+import FlyMiniSidebarItem from './FlyMiniSidebarItem.vue'
+
+defineProps<{
+  menu: T_FlyMiniSidebarItem[]
+}>()
+</script>
+
+<style lang="scss">
+.anra-mini-sidebar {
+  background-color: var(--anra-bg-20);
+  width: 5rem;
+  border-inline-end: 1px solid var(--anra-border-color);
+  flex-shrink: 0;
+  height: 100%;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  overflow: hidden;
+
+  &wrapper {
+    flex-grow: 1;
+    padding-top: 0.5rem;
+    overflow-y: auto;
+  }
+
+  &__menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+</style>

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

@@ -1,55 +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>
+<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

@@ -1,6 +1,6 @@
-import FlyMiniSidebar from './FlyMiniSidebar.vue'
-
-export default FlyMiniSidebar
-export { FlyMiniSidebar }
-
-export type { T_FlyMiniSidebarItem } from './FlyMiniSidebar.types'
+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

@@ -1,9 +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 *;
+@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

@@ -1,36 +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
-}
+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
+}