@flyanra/vue-core 0.3.0 → 1.0.0

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

@@ -12,19 +12,20 @@
     </el-scrollbar>
 
     <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
-      <FlyIcon :icon="isCollapsed ? mdiChevronRight : mdiChevronLeft" type="mdi" />
+      <FlyIconV2 :icon="isCollapsed ? IconMdiChevronRight : IconMdiChevronLeft" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import IconMdiChevronLeft from '~icons/mdi/chevron-left'
+import IconMdiChevronRight from '~icons/mdi/chevron-right'
+
 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 FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
 
 import './FlySidebar.element.scss'
 import type { T_FlySidebarProps } from './FlySidebar.types'

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

@@ -2,7 +2,7 @@
   <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" />
+        <FlyIconV2 :icon="node.icon" />
       </i>
     </template>
 
@@ -15,7 +15,7 @@
     <template #title>
       <template v-if="node.icon">
         <i class="el-icon">
-          <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
+          <FlyIconV2 :icon="node.icon" />
         </i>
       </template>
 
@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
 
-import FlyIcon from '../../../general/fly-icon/FlyIcon.vue'
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
 
 import type { T_FlySidebarNode } from './FlySidebar.types'
 

package/src/styles/element/mixins/collapse.scss

@@ -1,7 +1,7 @@
 @mixin el-collapse-operation-style {
   .el-collapse-item {
     &__header {
-      padding: 0.5rem 0rem 0.5rem 0rem;
+      padding: 0.5rem 0.5rem 0.5rem 0rem;
       min-height: 48px;
       text-align: left;
     }
@@ -38,7 +38,7 @@
   .el-collapse-item {
     border-bottom: 10px solid transparent;
     &__header {
-      padding: 0.25rem 0rem 0.25rem 0rem;
+      padding: 0.25rem 0.5rem 0.25rem 0rem;
       // min-height: 30px;
       text-align: left;
       border-top: 1px solid var(--el-collapse-border-color);

package/src/styles/element/overrides/date-time.scss

@@ -0,0 +1,11 @@
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/button.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';
+
+@use 'element-plus/theme-chalk/src/date-picker.scss';
+@use 'element-plus/theme-chalk/src/date-picker-panel.scss';
+@use 'element-plus/theme-chalk/src/time-picker.scss';
+@use 'element-plus/theme-chalk/src/time-select.scss';
+
+@use 'element-plus/theme-chalk/src/popper.scss';
+@use 'element-plus/theme-chalk/src/scrollbar.scss';

package/src/styles/element/overrides/form.scss

@@ -1,14 +1,29 @@
-@use 'element-plus/theme-chalk/src/form.scss' as *;
-@use 'element-plus/theme-chalk/src/form-item.scss' as *;
-@use 'element-plus/theme-chalk/src/input.scss' as *;
-@use 'element-plus/theme-chalk/src/input-number.scss' as *;
-@use 'element-plus/theme-chalk/src/option.scss' as *;
-@use 'element-plus/theme-chalk/src/select.scss' as *;
-@use 'element-plus/theme-chalk/src/radio.scss' as *;
-@use 'element-plus/theme-chalk/src/radio-group.scss' as *;
-@use 'element-plus/theme-chalk/src/checkbox.scss' as *;
-@use 'element-plus/theme-chalk/src/date-picker.scss' as *;
-@use 'element-plus/theme-chalk/src/switch.scss' as *;
+@use 'element-plus/theme-chalk/src/form.scss';
+@use 'element-plus/theme-chalk/src/form-item.scss';
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/input-number.scss';
+@use 'element-plus/theme-chalk/src/input-tag.scss';
+@use './select.scss';
+@use './radio.scss';
+@use 'element-plus/theme-chalk/src/checkbox.scss';
+@use './date-time.scss';
+@use 'element-plus/theme-chalk/src/switch.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';
+
+:root {
+  .el-input,
+  .el-textarea,
+  .el-date-editor {
+    --el-input-border-color: var(--anra-form-input-border);
+  }
+  .el-input-tag,
+  .el-select {
+    --el-border-color: var(--anra-form-input-border);
+  }
+  .el-switch__core {
+    --el-switch-border-color: var(--anra-form-input-border);
+  }
+}
 
 .el-form-item {
   &__error,
@@ -64,7 +79,6 @@
 
 .el-select__wrapper {
   --el-fill-color-blank: var(--anra-bg-20);
-  --el-border-color: var(--anra-form-input-border);
 
   &.is-disabled {
     background-color: var(--anra-disabled-bg);

package/src/styles/element/overrides/message-box.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/overlay.scss' as *;
+@use 'element-plus/theme-chalk/src/message-box.scss' as *;

package/src/styles/element/overrides/radio.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/radio.scss';
+@use 'element-plus/theme-chalk/src/radio-group.scss';

package/src/styles/element/overrides/select.scss

@@ -0,0 +1,9 @@
+@use 'element-plus/theme-chalk/src/select.scss';
+@use 'element-plus/theme-chalk/src/option.scss';
+
+@use 'element-plus/theme-chalk/src/input.scss';
+@use 'element-plus/theme-chalk/src/tag.scss';
+
+@use 'element-plus/theme-chalk/src/popper.scss';
+@use 'element-plus/theme-chalk/src/scrollbar.scss';
+@use 'element-plus/theme-chalk/src/icon.scss';

package/dist/types/components/AppButton/AppButton.types.d.ts

@@ -1,8 +0,0 @@
-export type AppButtonVariant = 'primary' | 'secondary' | 'ghost';
-export type AppButtonSize = 'sm' | 'md' | 'lg';
-export interface AppButtonProps {
-    disabled?: boolean;
-    label?: string;
-    size?: AppButtonSize;
-    variant?: AppButtonVariant;
-}

package/dist/types/components/AppButton/AppButton.vue.d.ts

@@ -1,20 +0,0 @@
-import './AppButton.element.scss';
-import type { AppButtonProps } from './AppButton.types';
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<AppButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppButtonProps> & Readonly<{}>, {
-    disabled: boolean;
-    label: string;
-    size: import("./AppButton.types").AppButtonSize;
-    variant: import("./AppButton.types").AppButtonVariant;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/AppButton/index.d.ts

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

package/dist/types/components/AppCard/AppCard.types.d.ts

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

package/dist/types/components/AppCard/AppCard.vue.d.ts

@@ -1,17 +0,0 @@
-import type { AppCardProps } from './AppCard.types';
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<AppCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppCardProps> & Readonly<{}>, {
-    eyebrow: string;
-    body: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/AppCard/index.d.ts

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

package/src/components/AppButton/AppButton.element.scss

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

package/src/components/AppButton/AppButton.types.ts

@@ -1,10 +0,0 @@
-export type AppButtonVariant = 'primary' | 'secondary' | 'ghost'
-
-export type AppButtonSize = 'sm' | 'md' | 'lg'
-
-export interface AppButtonProps {
-  disabled?: boolean
-  label?: string
-  size?: AppButtonSize
-  variant?: AppButtonVariant
-}

package/src/components/AppButton/AppButton.vue

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

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

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

package/src/components/AppCard/AppCard.vue

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

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