qtsk-vue3 0.0.13 → 0.0.15

package/package/component.js

@@ -13,7 +13,10 @@ import Dialog from './components/Dialog/index.vue'
 import Form from './components/Form/index.vue'
 import FormItem from './components/FormItem/index.vue'
 import Empty from './components/Empty/index.vue'
-
+import Tabs from './components/Tabs/index.vue'
+import TabPane from './components/TabPane/index.vue'
+import SelectRemote from './components/SelectRemote/index.vue'
+import Timeline from './components/Timeline/index.vue'
 const components = 
     [
         CommonButton, 
@@ -30,6 +33,10 @@ const components =
         Dialog,
         Form,
         FormItem,
-        Empty
+        Empty,
+        Tabs,
+        TabPane,
+        SelectRemote,
+        Timeline
     ]
 export default components

package/package/components/Container/index.vue

@@ -7,7 +7,7 @@
                 </slot>
             </el-header>
             <el-container>
-                <el-aside>
+                <el-aside v-if="$slots.menu">
                     <slot name="menu">
                         this is the menu
                     </slot>

package/package/components/Dialog/index.vue

@@ -38,10 +38,11 @@ defineProps({
 })
 
 let modelValue = defineModel('modelValue', {type: Boolean})
-let emits = defineEmits(['confirm'])
+let emits = defineEmits(['confirm', 'cancel'])
 // 点击取消
 const handleCancel = () => {
   modelValue.value = false
+  emits('cancel')
 }
 // 点击确认
 const handleConfirm = () => {

package/package/components/Empty/index.vue

@@ -1,5 +1,5 @@
 <template>
-     <el-empty :description="description" />
+     <el-empty :description="description" :image-size="70"/>
 </template>
 
 <script setup>

package/package/components/Input/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs" clearable>
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs" clearable :disabled="disabled">
         <template #prepend v-if="$slots.prepend">
             <!-- 前缀 -->
             <slot name="prepend" />
@@ -31,7 +31,8 @@ const props = defineProps({
     modelValue: {
         type: [String, Number],
         default: ''
-    }
+    },
+    disabled: Boolean
 })
 const emits = defineEmits(['update:modelValue'])
 const inputValue = computed({

package/package/components/Menu/index.vue

@@ -2,7 +2,7 @@
     <div class="menu">
         <el-menu class="el-menu-vertical-demo" router :collapse="isCollapse" :default-active="activeMenu"
             @open="handleOpen" @close="handleClose">
-            <el-menu-item :index="menu.url" v-for="(menu, index) in menus" :key="index">
+            <el-menu-item :index="menu.url" v-for="(menu, index) in menus.filter(item => item)" :key="index">
                 <Icons :type="menu.icon"></Icons>
                 <template #title>
                     <span>{{ menu.menuName }}</span>

package/package/components/SelectRemote/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <el-select
+        v-model="selectValue" 
+        :placeholder="placeholder" 
+        v-bind="$attrs" 
+        :teleported="false" 
+        :loading="loading"
+        clearable
+        filterable
+        remote
+        :remote-method="remoteMethod"
+        :no-data-text="'暂无数据项'"
+        :loading-text="'加载中'"
+        :no-match-text="'暂无匹配数据'"
+    >
+        <el-option v-for="item in list" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]">
+            <div v-if="item.icon" style="display: flex;align-items: center;justify-content: space-between;">
+                <Icons :type="item.icon"/>
+                <span>{{ item.icon }}</span>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElSelect, ElOption } from 'element-plus'
+import '../../style/root.css'
+
+const loading = ref(false)
+
+defineOptions({
+    name: 'SelectRemote'
+})
+const props = defineProps({
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    keyName: {
+        type: String,
+        default: 'label'
+    },
+    valueName: {
+        type: String,
+        default: 'value'
+    },
+    remoteMethod: {
+        type: Function
+    },
+    list: {
+        type: Array,
+        default: () => ([])
+    }
+})
+const selectValue = defineModel('modelValue', { default: '', type: [Number, String, Array] })
+const options = ref([])
+const remoteMethod = (query) => {
+  if (query) {
+    props.remoteMethod(query)
+    selectValue.value = query
+  } else {
+    options.value = []
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+:deep(.el-select__wrapper.is-focused){
+    box-shadow: 0 0 0 1px var(--main-color) inset;
+}
+:deep(.el-select-dropdown__item.is-selected){
+    color: var(--main-color);
+}
+</style>

package/package/components/TabPane/index.vue

@@ -0,0 +1,21 @@
+<template>
+   <el-tab-pane :label="label" :name="name">
+        <slot/>
+   </el-tab-pane>
+</template>
+
+<script setup>
+import { ElTabPane } from 'element-plus'
+
+defineOptions({
+    name: 'TabPane'
+})
+
+defineProps({
+    label: String,
+    name: String
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/Table/index.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <el-table :data="data" style="width: 100%" :height="height" :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" border>
+    <el-table
+      ref="tableRef"
+      border
+      :data="data" 
+      style="width: 100%" 
+      :height="height" 
+      :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" 
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column v-if="checkbox" type="selection" width="55" :selectable="selectable"/>
       <el-table-column 
         v-for="(column, index) in columns" 
         :label="column.label"
@@ -11,27 +20,33 @@
       >
         <template #default="scope">
           <template v-if="column.key!=='operations'">
-            {{ scope.row[column.key] }}
+            <template v-if="column?.click==true">
+              <slot name="click" :data="scope.row" :index="scope.$index"/>
+            </template>
+            <template v-else>
+              {{ (column?.text && column.text(scope.row[column.key])) || scope.row[column.key] }}
+            </template>
           </template>
           <template v-else>
              <slot name="operations" :data="scope.row" :index="scope.$index"/>
           </template>
         </template>
       </el-table-column>
-      <template #empty>
-        <el-empty description="暂无数据" />
-      </template>
     </el-table>
+    <Empty v-if="emptyStatus" description="暂无数据" />
     <slot v-if="data.length" name="pagination" />
   </div>
 </template>
 
 <script setup>
-import { ElTable, ElTableColumn, ElEmpty } from 'element-plus'
+import { ref, watch } from 'vue'
+import { ElTable, ElTableColumn } from 'element-plus'
+
 defineOptions({
   name: 'Table',
 })
-defineProps({
+const emits = defineEmits('getSelection')
+const props = defineProps({
   data: {
     type: Object,
     default: () => ([])
@@ -43,9 +58,41 @@ defineProps({
   columns: {
     type: Array,
     default: () => ([])
+  },
+  checkbox: {
+    type: Boolean,
+    default: false
+  },
+  selectable: {
+    type: Function
+  }
+})
+const tableRef = ref(null)
+const emptyStatus = ref(false)
+const multipleSelection = ref([])
+watch(() => props.data, (nv) => {
+  if (!nv.length) {
+    emptyStatus.value = true
+  } else {
+    emptyStatus.value = false
+  }
+})
+const handleSelectionChange = (list) => {
+  multipleSelection.value = [];
+  if (list.length > 1) {
+    tableRef.value.clearSelection();
+    tableRef.value.toggleRowSelection(list[list.length - 1]);
   }
+  multipleSelection.value  = [list[list.length - 1]];
+}
+defineExpose({
+  selection: multipleSelection,
+  clearSelection: () => { tableRef.value.clearSelection() }
 })
 </script>
 
 <style lang="less" scoped>
+:deep(.el-table__row){
+  height: 57px;
+}
 </style>

package/package/components/Tabs/index.vue

@@ -0,0 +1,18 @@
+<template>
+    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
+        <slot/>
+    </el-tabs>
+</template>
+
+<script setup>
+import { ElTabs } from 'element-plus'
+import '../../style/root.css'
+
+defineOptions({
+    name: 'Tabs'
+})
+const activeName = defineModel('activeName', {type: String})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/Timeline/index.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="normalClass">
+      <el-timeline style="max-width: 600px">
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :timestamp="activity[timeKey]"
+          :color="activity.color"
+        >
+          <div class="content">{{ activity[contentKey] }}</div>
+          <div class="address">{{ activity[addressKey] }}</div>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+</template>
+
+<script setup>
+import { ElTimeline, ElTimelineItem} from 'element-plus'
+
+defineOptions({
+    name: 'Timeline'
+})
+
+defineProps({
+  activities: {
+    type: Array,
+    default: () => ([])
+  },
+  timeKey: {
+    type: String,
+    default: 'timestamp'
+  },
+  contentKey: {
+    type: String,
+    default: 'content'
+  },
+  addressKey: {
+    type: String,
+    default: 'address'
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.normalClass {
+  margin: 0 10px;
+  .content {
+    font-size: 14px;
+    font-weight: bolder;
+  }
+  .address {
+    color: #909399;
+    margin-top: 5px;
+  }
+}
+:deep(.el-timeline-item__timestamp) {
+  font-size: 12px;
+}
+</style>

package/package/index.backup.js

@@ -1,22 +1,23 @@
-import Components from './component'
-import { Message, MessageBox } from './components/Message'
-
-const makeInstaller = (components = [], directives = []) => {
-    const apps = []
-    const install = (app, opts) => {
-        const option = opts
-        if (apps.includes(app)) return
-        apps.push(app)
-        components.forEach((c) => {
-            app.component(c.name, c)
-        })
-        app.config.globalProperties.$ELEMENT = option
-    }
-    return install
-}
-
-const install = makeInstaller(Components)
-
-export { Message, MessageBox, install, install as default }
-
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
+import Components from './component'
+import { Message, MessageBox } from './components/Message'
+
+const makeInstaller = (components = [], directives = []) => {
+    const apps = []
+    const install = (app, opts) => {
+        const option = opts
+        if (apps.includes(app)) return
+        apps.push(app)
+        components.forEach((c) => {
+            app.component(c.name, c)
+        })
+        app.config.globalProperties.$ELEMENT = option
+    }
+    return install
+}
+
+const install = makeInstaller(Components)
+
+export { Message, MessageBox, install, install as default }
+
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
+

package/package/index.js

@@ -1,22 +1,22 @@
-import Components from './component'
-import { Message, MessageBox } from './components/Message'
-
-const makeInstaller = (components = [], directives = []) => {
-    const apps = []
-    const install = (app, opts) => {
-        const option = opts
-        if (apps.includes(app)) return
-        apps.push(app)
-        components.forEach((c) => {
-            app.component(c.name, c)
-        })
-        app.config.globalProperties.$ELEMENT = option
-    }
-    return install
-}
-
-const install = makeInstaller(Components)
-
-export { Message, MessageBox, install, install as default }
-
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')
+import Components from './component'
+import { Message, MessageBox } from './components/Message'
+
+const makeInstaller = (components = [], directives = []) => {
+    const apps = []
+    const install = (app, opts) => {
+        const option = opts
+        if (apps.includes(app)) return
+        apps.push(app)
+        components.forEach((c) => {
+            app.component(c.name, c)
+        })
+        app.config.globalProperties.$ELEMENT = option
+    }
+    return install
+}
+
+const install = makeInstaller(Components)
+
+export { Message, MessageBox, install, install as default }
+
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qtsk-vue3",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "vue3版组件库",
   "main": "./package/index.js",
   "scripts": {