fantasia-ui 0.1.29 → 0.1.31

package/README.en.md

@@ -0,0 +1,103 @@
+# Fantasia UI Component Library
+
+### Upload Component
+
+*For detailed API usage, refer to [Secondary encapsulation based on el-upload to achieve multi-functional upload - CSDN Blog](https://blog.csdn.net/weixin_60818087/article/details/148193542?spm=1001.2014.3001.5502)*
+
+> Import styles in `main.ts`: `import 'fantasia-ui/dist/index.css'`
+> 
+> Missing icons? You need to install **Element-plus** icons for them to display.
+
+```vue
+<script lang="ts">
+import { FUpload } from 'fantasia-ui';
+
+export default {
+    components: {
+        FUpload
+    },
+    methods: {
+        handleUpload: (file, done, error) => {
+            try {
+                console.log(file);
+                done();
+            } catch (err) {
+                error(err);
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <FUpload crop mosaic @upload="handleUpload" />
+</template>
+```
+
+### Table Component
+
+```vue
+<script lang="ts" setup>
+import { FTable } from 'fantasia-ui';
+import type { Actions, Columns } from 'fantasia-ui/dist';
+import { reactive } from 'vue';
+
+const data = [
+    {
+        id: 1,
+        nickname: 'Test User'
+    }
+]
+
+const columns = reactive<Columns[]>([
+    {
+        prop: 'id',
+        label: 'ID'
+    },
+    {
+        prop: 'nickname',
+        label: 'Nickname'
+    }
+])
+
+const actions = reactive<Actions[]>([
+    {
+        action: 'switch',
+        event: 'change',
+        prop: 'change',
+        config: {
+            activeText: 'Enable',
+            inactiveText: 'Disable',
+            activeValue: 0,
+            inactiveValue: 1
+        }
+    },
+    {
+        action: 'button',
+        event: 'delete',
+        label: 'Delete',
+        type: 'danger',
+        icon: 'delete'
+    }
+])
+
+const handleAction = (row: any, event: string) => {
+    switch (event) {
+        case 'change':
+            console.log("Switched");
+            break;
+        case 'delete':
+            console.log("Deleted");
+            break;
+    }
+}
+</script>
+
+<template>
+    <FTable :data="data" :columns="columns" :actions="actions" @action="handleAction">
+        <template #id="{ row }">
+            <h1>{{ row }}</h1>
+        </template>
+    </FTable>
+</template>
+```

package/README.md

@@ -37,96 +37,66 @@ export default {
 ### Table 组件
 
 ```vue
-<script lang="ts">
+<script lang="ts" setup>
 import { FTable } from 'fantasia-ui';
-import type { Actions, Columns } from 'fantasia-ui';
-import { ElEmpty } from 'element-plus';
+import type { Actions, Columns } from 'fantasia-ui/dist';
+import { reactive } from 'vue';
 
-interface Data {
-  id: number;
-  nickname: string;
-}
+const data = [
+  {
+    id: 1,
+    nickname: '测试用户'
+  }
+]
 
-export default {
-  components: {
-    FTable
-  },
-  data: {
-    columns: [
-      {
-        prop: 'id',
-        label: 'ID',
-        sortable: true
-      },
-      {
-        prop: 'nickname',
-        label: '昵称',
-      },
-      {
-        prop: 'username',
-        label: '用户名',
-        align: 'center',
-        filters: [
-          {
-            text: '测试',
-            value: '测试'
-          }
-        ]
-      }
-    ],
-    actions: [
-      {
-        action: 'button',
-        label: '删除',
-        event: 'delete',
-        type: 'danger'
-      },
-      {
-        action: 'button',
-        label: '删除',
-        event: 'delete',
-        type: 'danger'
-      },
-      {
-        action: 'button',
-        label: '删除',
-        event: 'delete',
-        type: 'danger'
-      },
-    ],
-    data: [
-      {
-        id: 1,
-        nickname: '测试'
-      }
-    ]
+const columns = reactive<Columns[]>([
+  {
+    prop: 'id',
+    label: 'ID'
   },
-  methods: {
-    handleAction: (row: Data, event: string) => {
-      switch (event) {
-        case 'delete':
-          ElMessageBox.confirm(
-            '确认删除?',
-            '警告',
-            {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning',
-            }
-          )
-          break;
-        default:
-          return
-      }
+  {
+    prop: 'nickname',
+    label: '昵称'
+  }
+])
+
+const actions = reactive<Actions[]>([
+  {
+    action: 'switch',
+    event: 'change',
+    prop: 'change',
+    config: {
+      activeText: '启用',
+      inactiveText: '禁用',
+      activeValue: 0,
+      inactiveValue: 1
     }
+  },
+  {
+    action: 'button',
+    event: 'delete',
+    label: '删除',
+    type: 'danger',
+    icon: 'delete'
+  }
+])
+
+const handleAction = (row: any, event: string) => {
+  switch (event) {
+    case 'change':
+      console.log("切换了");
+      break;
+    case 'delete':
+      console.log("删除了");
+      break;
   }
 }
 </script>
 
 <template>
-  <FTable :columns="columns" :data="data" :actions="actions" @action="handleAction" border>
-    <template #empty>
-      <ElEmpty description="暂无数据" />
+  <FTable :data="data" :columns="columns" :actions="actions" @action="handleAction">
+    <template #id="{ row }">
+      <h1>{{ row }}</h1>
     </template>
   </FTable>
 </template>

package/dist/components/modules/FTable.vue.d.ts

@@ -1,14 +1,35 @@
 import { PropType } from 'vue';
-import { Actions, Columns, Data } from '../../types';
+import { Actions, Columns, Data, Pagination } from '../../types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: Partial<Record<string, (_: {
-        row: any;
-    }) => any>> & {
-        actions?(_: {
+    slots: Readonly<{
+        [prop: string]: {
             row: any;
-        }): any;
-        empty?(_: {}): any;
+        };
+        /**
+         * 自定义空内容插槽
+         * @param props 插槽属性
+         */
+        empty: any;
+        /**
+         * 自定义操作列插槽
+         * @param props 插槽属性
+         */
+        actions: any;
+    }> & {
+        [prop: string]: {
+            row: any;
+        };
+        /**
+         * 自定义空内容插槽
+         * @param props 插槽属性
+         */
+        empty: any;
+        /**
+         * 自定义操作列插槽
+         * @param props 插槽属性
+         */
+        actions: any;
     };
     refs: {};
     rootEl: any;
@@ -44,7 +65,24 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             children: string;
         };
     };
+    pagination: {
+        type: PropType<Pagination>;
+        default: () => {
+            enable: boolean;
+            options: {
+                currentPage: number;
+                pageSize: number;
+                total: number;
+                layout: string;
+                pageSizes: number[];
+                pagerCount: number;
+                justifyContent: string;
+            };
+        };
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:pageSize": (...args: any[]) => void;
+    "update:currentPage": (...args: any[]) => void;
     action: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     columns: {
@@ -76,7 +114,24 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             children: string;
         };
     };
+    pagination: {
+        type: PropType<Pagination>;
+        default: () => {
+            enable: boolean;
+            options: {
+                currentPage: number;
+                pageSize: number;
+                total: number;
+                layout: string;
+                pageSizes: number[];
+                pagerCount: number;
+                justifyContent: string;
+            };
+        };
+    };
 }>> & Readonly<{
+    "onUpdate:pageSize"?: (...args: any[]) => any;
+    "onUpdate:currentPage"?: (...args: any[]) => any;
     onAction?: (...args: any[]) => any;
 }>, {
     data: Data[];
@@ -87,6 +142,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     treeProps: {
         children: string;
     };
+    pagination: Pagination;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;