@flyanra/vue-core 0.1.0

package/src/components/AppButton/AppButton.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElButton } from 'element-plus'
+
+import './AppButton.element.scss'
+import type { AppButtonProps } from './AppButton.types'
+
+const props = withDefaults(defineProps<AppButtonProps>(), {
+  disabled: false,
+  label: 'Button',
+  size: 'md',
+  variant: 'primary'
+})
+
+const buttonType = computed(() => {
+  if (props.variant === 'primary') {
+    return 'primary'
+  }
+
+  return 'default'
+})
+
+const buttonSize = computed(() => {
+  if (props.size === 'sm') {
+    return 'small'
+  }
+
+  if (props.size === 'lg') {
+    return 'large'
+  }
+
+  return 'default'
+})
+
+const isPlain = computed(() => props.variant === 'secondary')
+const isText = computed(() => props.variant === 'ghost')
+</script>
+
+<template>
+  <ElButton
+    :disabled="props.disabled"
+    :plain="isPlain"
+    :size="buttonSize"
+    :text="isText"
+    :type="buttonType"
+  >
+    <slot>{{ props.label }}</slot>
+  </ElButton>
+</template>
+
+<style scoped>
+:deep(.el-button) {
+  font-weight: 600;
+  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.12);
+}
+
+:deep(.el-button.is-text) {
+  padding-inline: 0.25rem;
+}
+
+:global(html.dark) :deep(.el-button:not(.is-text)) {
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
+}
+</style>

package/src/components/AppButton/index.ts

@@ -0,0 +1,6 @@
+import AppButton from './AppButton.vue'
+
+export default AppButton
+export { AppButton }
+
+export type { AppButtonProps, AppButtonSize, AppButtonVariant } from './AppButton.types'

package/src/components/AppCard/AppCard.types.ts

@@ -0,0 +1,5 @@
+export interface AppCardProps {
+  eyebrow?: string
+  title: string
+  body?: string
+}

package/src/components/AppCard/AppCard.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { AppCardProps } from './AppCard.types'
+
+const props = withDefaults(defineProps<AppCardProps>(), {
+  eyebrow: 'Featured',
+  body: ''
+})
+</script>
+
+<template>
+  <article class="app-card">
+    <p v-if="props.eyebrow" class="app-card__eyebrow">{{ props.eyebrow }}</p>
+    <h2 class="app-card__title">{{ props.title }}</h2>
+    <p v-if="props.body" class="app-card__body">{{ props.body }}</p>
+    <div v-if="$slots.default" class="app-card__content">
+      <slot />
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.app-card {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 1rem;
+  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
+  color: #111827;
+}
+
+.app-card__eyebrow {
+  margin: 0;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #2563eb;
+}
+
+.app-card__title {
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.3;
+}
+
+.app-card__body {
+  margin: 0;
+  line-height: 1.6;
+  color: #4b5563;
+}
+
+.app-card__content {
+  display: grid;
+  gap: 0.75rem;
+}
+</style>

package/src/components/AppCard/index.ts

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

package/src/components/basic/fly-button/FlyButton.element.scss

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

package/src/components/basic/fly-button/FlyButton.mixins.scss

@@ -0,0 +1,58 @@
+@use '././../../../styles/mixins/shadows.scss' as shadow;
+
+$disabledOpacity: 0.5;
+
+@mixin fly-button-overrides {
+  &.ep-button {
+    &.aspect-1 {
+      aspect-ratio: 1;
+    }
+
+    &.active {
+      border-color: var(--anra-primary);
+      @include shadow.shadow-lg;
+    }
+
+    &--primary {
+      &:not(.is-link) {
+        --ep-button-text-color: var(--anra-white);
+        --ep-button-hover-text-color: var(--anra-white);
+
+        &.is-plain {
+          --ep-button-text-color: var(--default-text-color);
+        }
+      }
+    }
+    &--success {
+      --ep-button-text-color: var(--dynamic-dark);
+      --ep-button-hover-text-color: var(--dynamic-dark);
+
+      &.is-plain {
+        --ep-button-text-color: var(--default-text-color);
+      }
+    }
+    &--warning {
+      --ep-button-text-color: var(--dynamic-dark);
+      --ep-button-hover-text-color: var(--dynamic-dark);
+
+      &.is-plain {
+        --ep-button-text-color: var(--default-text-color);
+      }
+    }
+  }
+}
+
+@mixin fly-button-overrides-dark {
+  &.ep-button {
+    &--primary {
+      &:not(.is-link) {
+        --ep-button-text-color: var(--anra-black);
+        --ep-button-hover-text-color: var(--anra-black);
+
+        &.is-plain {
+          --ep-button-text-color: var(--default-text-color);
+        }
+      }
+    }
+  }
+}

package/src/components/basic/fly-button/FlyButton.types.ts

@@ -0,0 +1,29 @@
+import type { ButtonType, ElButton, UseTooltipProps } from 'element-plus'
+
+import type { T_FlyIconTypes } from '../../general/fly-icon/FlyIcon.types'
+
+export type FlyButtonIconPosition = 'left' | 'right'
+
+export type FlyButtonSizes = InstanceType<typeof ElButton>['$props']['size']
+export type FlyButtonTypes = ButtonType
+
+export type FlyButtonProps = {
+  active?: boolean
+  appButtonClass?: string
+  aspect1?: boolean
+  /**
+   * Test
+   */
+  clipRound?: boolean
+  full?: boolean
+  icon?: string | object
+  iconPosition?: FlyButtonIconPosition
+  iconType?: T_FlyIconTypes
+  imageUrl?: string
+  label?: string
+  size?: FlyButtonSizes
+  stop?: boolean
+  title?: string
+  tooltip?: UseTooltipProps
+  type?: FlyButtonTypes
+}

package/src/components/basic/fly-button/FlyButton.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="fly-button" :class="[{ full }, appButtonClass]">
+    <FlyTooltip
+      :tooltip="{
+        // effect: 'dark',
+        content: title,
+        placement: tooltip?.placement ?? 'bottom',
+        disabled: !!tooltip?.disabled || isEmpty(title)
+      }"
+    >
+      <el-button
+        v-bind="additionalButtonBindingValues"
+        :class="[{ active, 'aspect-1': aspect1 }]"
+        @click="handleClick"
+      >
+        <FlyIcon
+          v-if="icon && resolvedIconPosition === 'left'"
+          :type="iconType"
+          :icon="icon"
+          :class="[{ 'left-icon': slots.default }]"
+        />
+
+        <slot></slot>
+
+        <FlyIcon
+          v-if="icon && resolvedIconPosition === 'right'"
+          :type="iconType"
+          :icon="icon"
+          :class="[{ 'right-icon': slots.default }]"
+        />
+
+        <span v-if="imageUrl" class="btn-image" :class="[{ 'clip-round': clipRound }]">
+          <img :src="imageUrl" />
+        </span>
+      </el-button>
+    </FlyTooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs, useSlots } from 'vue'
+
+import { ElButton } from 'element-plus'
+
+import { isEmpty } from 'lodash'
+
+import FlyTooltip from '../../feedback/tooltip/FlyTooltip.vue'
+import FlyIcon from '../../general/fly-icon/FlyIcon.vue'
+
+import './FlyButton.element.scss'
+import type { FlyButtonIconPosition, FlyButtonProps } from './FlyButton.types'
+
+const attrs = useAttrs()
+const slots = useSlots()
+const emit = defineEmits(['click'])
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<FlyButtonProps>(), {
+  active: false,
+  aspect1: false,
+  clipRound: false,
+  full: false,
+  stop: false,
+  tooltip: () => ({
+    placement: 'bottom',
+    disabled: false
+  })
+})
+
+const additionalButtonBindingValues = computed(() => {
+  const { type, size } = props
+
+  return {
+    ...attrs,
+    size,
+    type
+  } as object
+})
+
+const resolvedIconPosition = computed<FlyButtonIconPosition>(() => props.iconPosition || 'left')
+
+function handleClick(e: MouseEvent) {
+  /**
+   * Stop the event propagation if the stop prop is set to true
+   */
+  if (props.stop) {
+    e.stopPropagation()
+  }
+
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+.fly-button {
+  pointer-events: auto;
+
+  &.full button {
+    width: 100%;
+  }
+
+  :deep(.ep-button) {
+    &.active {
+      /* 1px ring stile */
+      box-shadow: 0 0 0 1px var(--anra-white);
+    }
+
+    .fly-icon {
+      svg {
+        width: calc(1em + 2px);
+      }
+    }
+  }
+
+  :deep(.fly-icon.left-icon) {
+    padding-inline-end: 0.25rem;
+  }
+
+  :deep(.fly-icon.right-icon) {
+    padding-inline-start: 0.25rem;
+  }
+
+  .btn-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    &.clip-round {
+      -webkit-box-align: stretch;
+      align-items: stretch;
+      border-radius: 50%;
+      box-sizing: content-box;
+      display: flex;
+      flex-direction: column;
+      -webkit-box-pack: center;
+      justify-content: center;
+      overflow: hidden;
+
+      img {
+        border: 5px solid transparent;
+        border-radius: 50%;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex: 1 1 100%;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@use './FlyButton.mixins.scss' as button;
+
+.ep-button-group {
+  display: flex;
+}
+
+html.dark {
+  button.ep-button {
+    @include button.fly-button-overrides-dark;
+  }
+}
+
+button.ep-button {
+  position: relative;
+  overflow: hidden;
+  transition: 0.1s;
+  text-wrap: balance;
+  @include button.fly-button-overrides;
+}
+</style>

package/src/components/basic/fly-button/index.ts

@@ -0,0 +1,11 @@
+import FlyButton from './FlyButton.vue'
+
+export default FlyButton
+export { FlyButton }
+
+export type {
+  FlyButtonProps,
+  FlyButtonSizes,
+  FlyButtonIconPosition,
+  FlyButtonTypes
+} from './FlyButton.types'

package/src/components/basic/index.ts

@@ -0,0 +1,2 @@
+export { default as FlyButton } from './fly-button'
+export type * from './fly-button'

package/src/components/feedback/index.ts

@@ -0,0 +1,2 @@
+export { default as FlyTooltip } from './tooltip'
+export type * from './tooltip'

package/src/components/feedback/tooltip/FlyTooltip.element.scss

@@ -0,0 +1,4 @@
+@use '../../../../styles/element/common.scss' as *;
+
+@use 'element-plus/theme-chalk/src/popper.scss' as *;
+@use 'element-plus/theme-chalk/src/tooltip.scss' as *;

package/src/components/feedback/tooltip/FlyTooltip.types.ts

@@ -0,0 +1,5 @@
+import type { UseTooltipProps } from 'element-plus'
+
+export type T_FlyTooltipProps = {
+  tooltip?: UseTooltipProps
+}

package/src/components/feedback/tooltip/FlyTooltip.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-tooltip
+    v-bind="mergedElProps"
+    :popper-class="`fly-tooltip-popper ${popperClasses}`"
+    class="fly-tooltip"
+  >
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+
+    <template v-if="$slots.content" #content>
+      <slot name="content"></slot>
+    </template>
+  </el-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { ElTooltip, type UseTooltipProps } from 'element-plus'
+
+import type { T_FlyTooltipProps } from './FlyTooltip.types'
+
+const props = defineProps<T_FlyTooltipProps>()
+
+const mergedElProps = computed<UseTooltipProps>(() => {
+  return {
+    enterable: false,
+    showAfter: 1000,
+    ...props.tooltip
+  }
+})
+
+const popperClasses = computed(() => {
+  const classes = []
+
+  if (!mergedElProps.value.enterable) {
+    classes.push('fly-tooltip-popper__no-enter')
+  }
+
+  return classes.join(' ')
+})
+</script>
+
+<style lang="scss">
+@use '../../../styles/mixins/shadows.scss' as shadow;
+
+.fly-tooltip-popper {
+  @include shadow.shadow-lg;
+  max-width: 400px;
+
+  &__no-enter {
+    .fly-tooltip {
+      pointer-events: none;
+      max-width: 400px;
+    }
+  }
+}
+</style>

package/src/components/feedback/tooltip/index.ts

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

package/src/components/general/fly-icon/FlyIcon.types.ts

@@ -0,0 +1,12 @@
+import { type Component } from 'vue'
+
+export type T_FlyIconTypes = 'mdi' | 'ri'
+
+export type T_FlyIcon =
+  | string // mdi:home
+  | Component // RiHomeLine, EP icons, etc.
+
+export type T_FlyIconProps = {
+  type?: T_FlyIconTypes
+  icon: T_FlyIcon
+}

package/src/components/general/fly-icon/FlyIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <i class="fly-icon">
+    <svg-icon v-if="iconType === 'mdi'" :type="iconType" :path="icon as string" />
+    <component :is="icon" v-else-if="iconType === 'ri'" />
+  </i>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import SvgIcon from '@jamescoyle/vue-icon'
+
+import type { T_FlyIconProps } from './FlyIcon.types.ts'
+
+type Props = T_FlyIconProps
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'mdi'
+})
+
+const iconType = computed(() => props.type || 'mdi')
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/general/fly-icon/index.ts

@@ -0,0 +1,6 @@
+import FlyIcon from './FlyIcon.vue'
+
+export default FlyIcon
+export { FlyIcon }
+
+export type { T_FlyIconProps } from './FlyIcon.types.ts'

package/src/components/general/index.ts

@@ -0,0 +1,2 @@
+export { default as FlyIcon } from './fly-icon'
+export type * from './fly-icon'

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { default as AppButton } from './AppButton'
+export type * from './AppButton'
+
+export { default as AppCard } from './AppCard'
+export type * from './AppCard'
+
+export * from './navigation'
+
+export * from './basic'
+export * from './feedback'
+export * from './general'
+export * from './navigation'

package/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export * from './menu'

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

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

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

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