@firerian/fireui 1.0.0

package/src/components/input/types.ts

@@ -0,0 +1,100 @@
+export interface InputProps {
+  /**
+   * 输入框类型
+   */
+  type?: string
+  /**
+   * 绑定值
+   */
+  modelValue?: string | number
+  /**
+   * 占位符
+   */
+  placeholder?: string
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 是否只读
+   */
+  readonly?: boolean
+  /**
+   * 是否为密码输入框
+   */
+  password?: boolean
+  /**
+   * 最大长度
+   */
+  maxlength?: number
+  /**
+   * 最小长度
+   */
+  minlength?: number
+  /**
+   * 是否显示字数统计
+   */
+  showWordLimit?: boolean
+  /**
+   * 输入框大小
+   */
+  size?: 'large' | 'medium' | 'small'
+  /**
+   * 前缀图标
+   */
+  prefixIcon?: string | object
+  /**
+   * 后缀图标
+   */
+  suffixIcon?: string | object
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface InputEmits {
+  /**
+   * 输入事件
+   */
+  (e: 'update:modelValue', value: string | number): void
+  /**
+   * 输入事件
+   */
+  (e: 'input', value: string | number): void
+  /**
+   * 焦点事件
+   */
+  (e: 'focus', event: FocusEvent): void
+  /**
+   * 失焦事件
+   */
+  (e: 'blur', event: FocusEvent): void
+  /**
+   * 回车事件
+   */
+  (e: 'enter', event: KeyboardEvent): void
+  /**
+   * 清除事件
+   */
+  (e: 'clear'): void
+}
+
+export interface InputSlots {
+  /**
+   * 前缀
+   */
+  prefix?: () => any
+  /**
+   * 后缀
+   */
+  suffix?: () => any
+  /**
+   * 输入框内容
+   */
+  default?: () => any
+}

package/src/components/layout/aside.vue

@@ -0,0 +1,89 @@
+<template>
+  <aside
+    :class="[
+      ns.b,
+      {
+        [ns.m('collapsed')]: collapsed
+      }
+    ]"
+    :style="asideStyle"
+  >
+    <slot></slot>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNamespace } from '../../utils'
+
+const ns = useNamespace('aside')
+
+const props = withDefaults(defineProps<{
+  /**
+   * 侧边栏宽度
+   */
+  width?: string | number
+  /**
+   * 是否折叠
+   */
+  collapsed?: boolean
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}>(), {
+  width: 240,
+  collapsed: false
+})
+
+defineEmits<{
+  /**
+   * 折叠状态变化事件
+   */
+  (e: 'update:collapsed', value: boolean): void
+}>()
+
+const asideStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.width) {
+    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+  return style
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-aside {
+  width: 240px;
+  flex-shrink: 0;
+  background-color: #ffffff;
+  box-shadow: $shadow-sm;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  height: 100%;
+  z-index: 99;
+
+  &--collapsed {
+    width: 64px;
+    flex-basis: 64px;
+  }
+
+  @media (max-width: 768px) {
+    position: fixed;
+    left: 0;
+    top: 64px;
+    height: calc(100vh - 64px);
+    transform: translateX(-100%);
+
+    &:not(.#{$namespace}-aside--collapsed) {
+      transform: translateX(0);
+    }
+  }
+}
+</style>

package/src/components/layout/container.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      ns.m(`direction-${direction}`)
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNamespace } from '../../utils'
+
+const ns = useNamespace('container')
+
+withDefaults(defineProps<{
+  /**
+   * 布局方向
+   */
+  direction?: 'horizontal' | 'vertical'
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}>(), {
+  direction: 'horizontal'
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  background-color: $bg-color;
+
+  &--direction-vertical {
+    flex-direction: column;
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+</style>

package/src/components/layout/footer.vue

@@ -0,0 +1,57 @@
+<template>
+  <footer
+    :class="ns.b"
+    :style="footerStyle"
+  >
+    <slot></slot>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNamespace } from '../../utils'
+
+const ns = useNamespace('footer')
+
+const props = withDefaults(defineProps<{
+  /**
+   * 底部高度
+   */
+  height?: string | number
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}>(), {
+  height: 64
+})
+
+const footerStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.height) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  }
+  return style
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  background-color: #ffffff;
+  box-shadow: $shadow-sm inset;
+  flex-shrink: 0;
+  height: 64px;
+  color: #666666;
+  font-size: 14px;
+}
+</style>

package/src/components/layout/header.vue

@@ -0,0 +1,56 @@
+<template>
+  <header
+    :class="ns.b"
+    :style="headerStyle"
+  >
+    <slot></slot>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNamespace } from '../../utils'
+
+const ns = useNamespace('header')
+
+const props = withDefaults(defineProps<{
+  /**
+   * 头部高度
+   */
+  height?: string | number
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}>(), {
+  height: 64
+})
+
+const headerStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.height) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  }
+  return style
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background-color: #ffffff;
+  box-shadow: $shadow-sm;
+  z-index: 100;
+  height: 64px;
+  flex-shrink: 0;
+}
+</style>

package/src/components/layout/index.ts

@@ -0,0 +1,28 @@
+import Container from './container.vue'
+import Header from './header.vue'
+import Aside from './aside.vue'
+import Main from './main.vue'
+import Footer from './footer.vue'
+import { withInstall } from '../../utils'
+
+const FireContainer = withInstall(Container)
+const FireHeader = withInstall(Header)
+const FireAside = withInstall(Aside)
+const FireMain = withInstall(Main)
+const FireFooter = withInstall(Footer)
+
+export {
+  FireContainer,
+  FireHeader,
+  FireAside,
+  FireMain,
+  FireFooter
+}
+
+export default {
+  FireContainer,
+  FireHeader,
+  FireAside,
+  FireMain,
+  FireFooter
+}

package/src/components/layout/main.vue

@@ -0,0 +1,36 @@
+<template>
+  <main
+    :class="ns.b"
+  >
+    <slot></slot>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useNamespace } from '../../utils'
+
+const ns = useNamespace('main')
+
+withDefaults(defineProps<{
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}>(), {})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-main {
+  flex: 1;
+  padding: 24px;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  min-height: 0;
+}
+</style>

package/src/components/layout/types.ts

@@ -0,0 +1,74 @@
+export interface ContainerProps {
+  /**
+   * 布局方向
+   */
+  direction?: 'horizontal' | 'vertical'
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface HeaderProps {
+  /**
+   * 头部高度
+   */
+  height?: string | number
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface AsideProps {
+  /**
+   * 侧边栏宽度
+   */
+  width?: string | number
+  /**
+   * 折叠状态
+   */
+  collapsed?: boolean
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface MainProps {
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface FooterProps {
+  /**
+   * 底部高度
+   */
+  height?: string | number
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}

package/src/components/table/index.ts

@@ -0,0 +1,16 @@
+import Table from './table.vue'
+import TableColumn from './table-column.vue'
+import { withInstall } from '../../utils'
+
+const FireTable = withInstall(Table)
+const FireTableColumn = withInstall(TableColumn)
+
+export {
+  FireTable,
+  FireTableColumn
+}
+
+export default {
+  FireTable,
+  FireTableColumn
+}

package/src/components/table/table-column.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="display: none;">
+    <!-- TableColumn 只是一个配置组件，不直接渲染内容 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, useSlots, computed } from 'vue'
+import { useTableContext, useTableColumn } from '../../hooks/useTable'
+import type { TableColumnProps } from '../../types/table'
+
+const props = withDefaults(defineProps<TableColumnProps>(), {
+  prop: '',
+  label: '',
+  width: '',
+  fixed: undefined,
+  sortable: false,
+  sortOrder: null,
+  filters: undefined,
+  filteredValue: undefined
+})
+
+const slots = useSlots()
+
+const tableContext = useTableContext()
+const { columnInstance } = useTableColumn(props)
+
+// 扩展 columnInstance，添加 slots 信息
+const columnWithSlots = computed(() => {
+  return {
+    ...columnInstance.column,
+    $slots: slots
+  }
+})
+
+onMounted(() => {
+  // 注册列到表格
+  const table = (tableContext as any).table
+  if (table && table.registerColumn) {
+    table.registerColumn(columnWithSlots.value)
+  }
+  
+  // 也可以直接通过表格实例注册
+  const tableElement = document.querySelector('.fire-table')
+  if (tableElement && (tableElement as any).__vueParentComponent) {
+    const parent = (tableElement as any).__vueParentComponent
+    if (parent.proxy && parent.proxy.registerColumn) {
+      parent.proxy.registerColumn(columnWithSlots.value)
+    }
+  }
+})
+
+onUnmounted(() => {
+  // 从表格中移除列
+  const table = (tableContext as any).table
+  if (table && table.unregisterColumn) {
+    table.unregisterColumn(columnWithSlots.value)
+  }
+  
+  // 也可以直接通过表格实例移除
+  const tableElement = document.querySelector('.fire-table')
+  if (tableElement && (tableElement as any).__vueParentComponent) {
+    const parent = (tableElement as any).__vueParentComponent
+    if (parent.proxy && parent.proxy.unregisterColumn) {
+      parent.proxy.unregisterColumn(columnWithSlots.value)
+    }
+  }
+})
+</script>