qtsk-vue3 0.0.5 → 0.0.8

package/package/component.js

@@ -95,5 +95,36 @@ export default [
 ]
  */
 
-import QTButton from './components/button/index.vue'
-export default [QTButton]
+import QTButton from './components/QTButton/index.vue'
+import QTContainer from './components/QTContainer/index.vue'
+import QTMenu from './components/QTMenu/index.vue'
+import QTIcons from './components/QTIcons/index.vue'
+import QTInput from './components/QTInput/index.vue'
+import QTSelect from './components/QTSelect/index.vue'
+import QTTable from './components/QTTable/index.vue'
+import QTSwitch from './components/QTSwitch/index.vue'
+import QTPagination from './components/QTPagination/index.vue'
+import QTDatePicker from './components/QTDatePicker/index.vue'
+import QTTree from './components/QTTree/index.vue'
+import QTDialog from './components/QTDialog/index.vue'
+import QTForm from './components/QTForm/index.vue'
+import QTFormItem from './components/QTFormItem/index.vue'
+
+const components = 
+    [
+        QTButton, 
+        QTContainer,
+        QTMenu, 
+        QTIcons, 
+        QTInput, 
+        QTSelect, 
+        QTTable, 
+        QTSwitch, 
+        QTPagination, 
+        QTDatePicker, 
+        QTTree, 
+        QTDialog,
+        QTForm,
+        QTFormItem
+    ]
+export default components

package/package/components/QTButton/index.vue

@@ -0,0 +1,45 @@
+<template>
+    <div :class="[type === 'default' ? 'defaultClass' : 'normalClass']">
+      <el-button :type="type" :color="color" :link="link">
+        <slot>按钮</slot>
+      </el-button>
+    </div>
+</template>
+
+<script setup>
+import { ElButton} from 'element-plus'
+import '../../style/root.css'
+
+defineOptions({
+  name: 'QTButton',
+})
+const props = defineProps({
+  type:{
+    type: String,
+    default: 'default', //可选数值有， primary/default
+  },
+  color: {
+    type: String,
+    default: '#4d4398'
+  },
+  link: {
+    type: Boolean,
+    default: false
+  }
+})
+//根据不同的类型，自定义按钮颜色
+const color = props.type === 'primary' ? props.color : ''
+</script>
+
+<style lang="less" scoped>
+.normalClass{
+  margin: 0 10px;
+}
+.defaultClass{
+  margin: 0 10px;
+  :deep(.el-button){
+    color: var(--qt-main-color)!important;
+    border-color: var(--qt-main-color)!important;
+  }
+}
+</style>

package/package/components/QTContainer/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="common-layout">
+        <el-container>
+            <el-header>
+                <slot name="header">
+                    this is the header
+                </slot>
+            </el-header>
+            <el-container>
+                <el-aside>
+                    <slot name="menu">
+                        this is the menu
+                    </slot>
+                </el-aside>
+                <el-main>
+                    <slot name="main">
+                        this is the main
+                    </slot>
+                </el-main>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+
+<script setup>
+import { ElContainer, ElHeader, ElAside, ElMain } from 'element-plus'
+defineOptions({
+    name: 'QTContainer'
+})
+</script>
+
+<style scoped lang="less">
+.common-layout{
+    width: 100vw;
+    height: 100vh;
+    .el-container{
+        width: 100%;
+        .el-header{
+            display: flex;
+            align-items: center;
+            height: 60px;
+        }
+        .el-aside, .el-main{
+            height: calc(100vh - 60px);
+        }
+        .el-aside {
+            width: auto;
+            background-color: #ccc;
+        }
+        .el-main{
+            background-color: #eee;
+        }
+    }
+}
+</style>

package/package/components/QTDatePicker/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <el-date-picker v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ElDatePicker, ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+defineOptions({
+  name: 'QTDatePicker',
+})
+
+const props = defineProps({
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD'
+  },
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+})
+
+const modelValue = defineModel('modelValue', { type: Boolean })
+</script>
+
+<style lang="less" scoped></style>

package/package/components/QTDialog/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-dialog v-model="modelValue" :title="title" :width="width" align-center>
+    <slot>内容</slot>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel"> 
+          {{ cancelName }} 
+        </el-button>
+        <el-button type="primary" @click="handleConfirm">
+          {{ confirmName }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElDialog, ElButton } from 'element-plus'
+
+defineOptions({
+  name: 'QTDialog',
+})
+
+defineProps({
+  title: String,
+  width: {
+    type: Number,
+    default: 500
+  },
+  cancelName: {
+    type: String,
+    default: '取消'
+  },
+  confirmName: {
+    type: String,
+    default: '确认'
+  }
+})
+
+let modelValue = defineModel('modelValue', {type: Boolean})
+
+// 点击取消
+const handleCancel = () => {
+  modelValue.value = false
+}
+// 点击确认
+const handleConfirm = () => {
+  modelValue.value = false
+}
+</script>
+
+<style lang="less" scoped></style>

package/package/components/QTForm/index.vue

@@ -0,0 +1,37 @@
+<template>
+   <el-form
+    ref="ruleFormRef"
+    :model="formData"
+    :rules="rules"
+    label-width="auto"
+    :size="'default'"
+    :inline="inline"
+    status-icon
+  >
+    <slot/>
+  </el-form>
+</template>
+
+<script setup>
+import { ElForm } from 'element-plus'
+
+defineOptions({
+  name: 'QTForm',
+})
+
+defineProps({
+  rules: {
+    type: Array,
+    default: () => ([])
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  }
+})
+
+let formData = defineModel('formData', {type: Object})
+
+</script>
+
+<style lang="less" scoped></style>

package/package/components/QTFormItem/index.vue

@@ -0,0 +1,20 @@
+<template>
+    <el-form-item :label="label" :prop="propName">
+      <slot/>
+    </el-form-item>
+</template>
+
+<script setup>
+import { ElFormItem } from 'element-plus'
+
+defineOptions({
+  name: 'QTFormItem',
+})
+
+defineProps({
+  label: String,
+  propName: String
+})
+</script>
+
+<style lang="less" scoped></style>

package/package/components/QTIcons/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <el-icon :size="size">
+        <component :is='iconComponent'></component>
+    </el-icon>
+</template>
+
+<script setup>
+import { ElIcon } from 'element-plus'
+import { computed } from 'vue'
+import * as Icons from '@element-plus/icons-vue';
+
+defineOptions({
+    name: 'QTIcons'
+})
+const props = defineProps({
+    type: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: Number,
+        default: 18
+    }
+})
+//根据传入的类型使用图标
+const iconComponent = computed(() => Icons[props.type])
+</script>

package/package/components/QTInput/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs"/>
+</template>
+
+<script setup>
+import {ElInput} from 'element-plus'
+import '../../style/root.css'
+
+defineOptions({
+    name: 'QTInput'
+})
+defineProps({
+    type: {
+        type: String,
+        default: 'text'
+    },
+    placeholder: {
+        type: String,
+        default: '请输入'
+    }
+})
+const inputValue = defineModel('modelValue', {default: '',type: [String, Number]})
+</script>
+
+<style lang="less" scoped>
+:deep(.el-textarea__inner:focus), :deep(.el-input__wrapper.is-focus){
+    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+}
+</style>

package/package/components/QTMenu/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <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.path" v-for="(menu, index) in menus" :key="index">
+                <QTIcons :type="menu.icon"></QTIcons>
+                <template #title>
+                    <span>{{ menu.name }}</span>
+                </template>
+            </el-menu-item>
+        </el-menu>
+        <div class="menu_btn">
+            <QTIcons v-if="isCollapse"  @click="isCollapse = false" :type="'DArrowRight'"></QTIcons>
+            <QTIcons v-else  @click="isCollapse = true" :type="'DArrowLeft'"></QTIcons>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElMenu, ElMenuItem } from 'element-plus'
+import QTIcons from '../QTIcons/index.vue'
+
+defineOptions({
+    name: 'QTMenu'
+})
+defineProps({
+    menus: {
+        type: Array,
+        default: () => ([])
+    },
+    activeMenu: String
+})
+const isCollapse = ref(false)
+const handleOpen = (key, keyPath) => {
+    console.log(key, keyPath)
+}
+const handleClose = (key, keyPath) => {
+    console.log(key, keyPath)
+}
+
+</script>
+
+<style scoped lang="less">
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 180px;
+    min-height: 400px;
+}
+
+.menu {
+    position: relative;
+    height: 100%;
+
+    .el-menu {
+        height: 100%;
+
+        .el-menu-item {
+            display: flex;
+        }
+
+        .is-active {
+            color: var(--qt-main-color);
+            background-color: var(--qt-background-color);
+        }
+    }
+
+    &_btn {
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        cursor: pointer;
+    }
+}
+</style>

package/package/components/QTMessage/index.js

@@ -0,0 +1,27 @@
+/** 
+* QTMessage 消息提示包含四种类型： error(错误)， success(成功)， warning(警告)， info(信息)
+*/
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+export const QTMessage = {
+    error: (message) => {
+        ElMessage.error(message)
+    },
+    success: (message) => {
+        ElMessage({
+            message,
+            type: 'success',
+        })
+    },
+    warning: (message) => {
+        ElMessage({
+            message,
+            type: 'warning',
+          })
+    },
+    info:  (message) => {
+        ElMessage(message)
+    }
+}
+
+export const QTMessageBox = ElMessageBox

package/package/components/QTPagination/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="pagination">
+    <el-config-provider :locale="zhCn">
+      <el-pagination :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next" :total="total"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange">
+      </el-pagination>
+    </el-config-provider>
+  </div>
+</template>
+
+<script setup>
+import { ElPagination, ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+defineOptions({
+  name: 'QTPagination',
+})
+defineProps({
+  total: {
+    type: Number,
+    default: 0
+  }
+})
+// 条目个数改变
+const handleSizeChange = (val) => {
+  console.log(`${val} items per page`)
+}
+// 当前页码改变
+const handleCurrentChange = (val) => {
+  console.log(`current page: ${val}`)
+}
+</script>
+
+<style lang="less" scoped>
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+</style>

package/package/components/QTSelect/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <el-select v-model="selectValue" :placeholder="placeholder" v-bind="$attrs" :teleported="false">
+        <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]" />
+    </el-select>
+</template>
+
+<script setup>
+import { ElSelect, ElOption } from 'element-plus'
+import '../../style/root.css'
+
+defineOptions({
+    name: 'QTSelect'
+})
+defineProps({
+    placeholder: {
+        type: String,
+        default: '请选择'
+    },
+    options: {
+        type: Array,
+        default: () => ([])
+    },
+    keyName: {
+        type: String,
+        default: 'label'
+    },
+    valueName: {
+        type: String,
+        default: 'value'
+    }
+})
+const selectValue = defineModel('modelValue', { default: '', type: [Number, String] })
+</script>
+
+<style lang="less" scoped>
+:deep(.el-select__wrapper.is-focused){
+    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+}
+:deep(.el-select-dropdown__item.is-selected){
+    color: var(--qt-main-color);
+}
+</style>

package/package/components/QTSwitch/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <el-switch v-model="modelValue" :disabled="disabled" @change="handleChange"/>
+</template>
+
+<script setup>
+import { ElSwitch } from 'element-plus'
+
+defineOptions({
+  name: 'QTSwitch',
+})
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  index: Number,
+})
+
+const modelValue = defineModel('modelValue', {type: Boolean})
+const emits = defineEmits(['changeStatus'])
+const handleChange = () => {
+  emits('changeStatus', props.index)
+}
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/QTTable/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <el-table :data="data" style="width: 100%" :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" border>
+      <el-table-column 
+        v-for="(column, index) in columns" 
+        :label="column.label"
+        :width="column.width"
+        :fixed="column.fixed"
+        :key="index"
+      >
+        <template #default="scope">
+          <div v-if="column.key!=='operations'">
+            {{ scope.row[column.key] }}
+          </div>
+          <div v-else>
+             <slot name="operations" :data="scope.row" :index="scope.$index"/>
+          </div>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-empty description="暂无数据" />
+      </template>
+    </el-table>
+    <slot v-if="data.length" name="pagination" />
+  </div>
+</template>
+
+<script setup>
+import { ElTable, ElTableColumn, ElEmpty } from 'element-plus'
+defineOptions({
+  name: 'QTTable',
+})
+defineProps({
+  data: {
+    type: Object,
+    default: () => ([])
+  },
+  columns: {
+    type: Array,
+    default: () => ([])
+  }
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/QTTree/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-tree 
+    ref="treeRef"
+    style="max-width: 600px" 
+    :data="data" 
+    :props="defaultProps" 
+    :show-checkbox="showCheckBox" 
+    default-expand-all
+    :node-key="nodeKey"
+    :expand-on-click-node="false"
+    @node-click="handleNodeClick" 
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElTree } from 'element-plus'
+
+const treeRef = ref(null)
+defineOptions({
+  name: 'QTTree',
+})
+
+defineProps({
+  data: {
+    type: Array,
+    default: () => ([])
+  },
+  showCheckBox: {
+    type: Boolean,
+    default: false
+  },
+  nodeKey: {
+    type: String,
+    default: 'id'
+  }
+})
+
+// 点击节点
+const handleNodeClick = (data) => {
+  console.log('tree-data', data)
+}
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
+// 获取选中的节点
+const getCheckedKeys = () => {
+  console.log(treeRef.value.getCheckedKeys(false))
+}
+defineExpose({
+  getCheckedKeys
+})
+</script>
+
+<style lang="less" scoped></style>

package/package/index.backup.js

@@ -0,0 +1,20 @@
+import Components from './component'
+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 { install, install as default }
+
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')

package/package/index.js

@@ -1,4 +1,6 @@
 import Components from './component'
+import { QTMessage, QTMessageBox } from './components/QTMessage'
+
 const makeInstaller = (components = [], directives = []) => {
     const apps = []
     const install = (app, opts) => {
@@ -15,4 +17,6 @@ const makeInstaller = (components = [], directives = []) => {
 
 const install = makeInstaller(Components)
 
-export { install, install as default }
+export { QTMessage, QTMessageBox, install, install as default }
+
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')

package/package/style/root.css

@@ -1,108 +1,5 @@
-/* Mopai 标准化样式定义 */
+/* 标准化样式定义 */
 :root{
-    /* color */
-    --mc-main-color: #00B9EF;
-    --mc-title-color: #142D4C;
-    --mc-subtitle-color: #828B97;
-    --mc-placeholder-color: #A3AEBC;
-    --mc-primary-text-color: #00ADDF;
-    --mc-warning-color: #FD6B6D;
-    --mc-red-tag-text-color: #B84545;
-    --mc-special-number-color: #DF8400;
-    --mc-background-color: #F5F8FC;
-    --mc-split-color: #DCE4ED;
-    --mc-tab-color: #DCE4ED;
-    --mc-normal-font-color: #0A1830;
-    --mc-border-color: #F5F8FC;
-    --mc-checkbox-disabled-background: var(--mc-split-color);
-    --mc-disabled-input-background: #EAEEF3;
-    --mc-error-color: #FF4D4F;
-    --mc-collapse-header-bg-color: #6898A6;
-
-    /* gradient color */
-    --mc-gradient-blue-light: #83C3FB;
-    --mc-gradient-blue-deep: #446DEA;
-    --mc-gradient-blue-2-light: #B1DBFF;
-    --mc-gradient-blue-2-deep: #7294FF;
-    --mc-gradient-blue-3-light: #88C8FF;
-    --mc-gradient-blue-3-deep: #1444D8;
-
-    --mc-gradient-red-light: #ED866A;
-    --mc-gradient-red-deep: #E8361A;
-
-    --mc-gradient-purple-light: #9F97FE;
-    --mc-gradient-purple-deep: #7138EC;
-
-    --mc-gradient-origin-light: #F1BC61;
-    --mc-gradient-origin-deep: #E8701A;
-
-    --mc-gradient-green-light: #7AD48C;
-    --mc-gradient-green-deep: #27B111;
-
-    /* font */
-    --mc-title-size: 18px;
-    --mc-subtitle-size: 16px;
-    --mc-normal-size: 14px;
-    --mc-small-size: 12px;
-
-    --mc-title-line-height: 26px;
-    --mc-subtitle-line-height: 24px;
-    --mc-content-line-height: 22px;
-    --mc-explain-line-height: 20px;
-
-    /* button */
-    --mc-button-normal-bg: linear-gradient(60.7deg, var(--mc-gradient-blue-light), var(--mc-gradient-blue-deep));
-    --mc-button-hover-bg: linear-gradient(60.7deg, var(--mc-gradient-blue-2-light), var(--mc-gradient-blue-2-deep));
-    --mc-button-active-bg: linear-gradient(60.7deg, var(--mc-gradient-blue-3-light), var(--mc-gradient-blue-3-deep));
-
-    --mc-button-disabled-text: #A3AEBC;
-    --mc-button-disabled-bg: #EAEEF3;
-
-    --mc-button-warning-normal-text: #FF4D4F;
-    --mc-button-warning-normal-border: #FF4D4F;
-    --mc-button-warning-hover-text: #FF6668;
-    --mc-button-warning-hover-border: #FE7779;
-    --mc-button-warning-active-text: var(--mc-button-normal-warning-text);
-    --mc-button-warning-active-border: var(--mc-button-normal-warning-text);
-
-    --mc-button-cancel-normal-text: var(--mc-gradient-blue-deep);
-    --mc-button-cancel-normal-border: var(--mc-gradient-blue-deep);
-    --mc-button-cancel-hover-text: var(--mc-gradient-blue-2-deep);
-    --mc-button-cancel-hover-border: var(--mc-gradient-blue-2-deep);
-    --mc-button-cancel-active-text: var(--mc-gradient-blue-deep);
-    --mc-button-cancel-active-border: var(--mc-gradient-blue-deep);
-
-    --mc-button-inverse-normal-text: var(--mc-gradient-blue-deep);
-    --mc-button-inverse-normal-border: var(--mc-gradient-blue-deep);
-    --mc-button-inverse-hover-text: var(--mc-gradient-blue-2-deep);
-    --mc-button-inverse-hover-border: var(--mc-gradient-blue-2-deep);
-    --mc-button-inverse-active-text: var(--mc-gradient-blue-deep);
-    --mc-button-inverse-active-border: var(--mc-gradient-blue-deep);
-
-    --mc-link-normal-color: #00ADDF;
-    --mc-link-hover-color: var(--mc-main-color);
-    --mc-link-active-color: var(--mc-link-normal-color);
-    --mc-link-disabled-color: #A3AEBC;
-
-    /* float layer */
-    --mc-float-layer-box-shadow: 0px 1px 8px 2px rgba(104, 152, 166, .24);
-    --mc-float-layer-border-radius: 8px;
-
-    /* label */
-    --mc-label-default-text-color: #A3AEBC;
-    --mc-label-default-bg-color: #F5F8FC;
-
-    --mc-label-red-text-color: #B84545;
-    --mc-label-red-bg-color: #FAEAEA;
-
-    --mc-label-blue-text-color: #00ADDF;
-    --mc-label-blue-bg-color: #E7FAFF;
-
-    --mc-label-yellow-text-color: #D47802;
-    --mc-label-yellow-bg-color: #FBF0DB;
-
-    --mc-label-green-text-color: #3DB194;
-    --mc-label-green-bg-color: #EAFAF6;
-
-    --mc-tooltip-bg-color: rgba(0, 0, 0, 0.6);
+    --qt-main-color: #4d4398;
+    --qt-background-color: #e0edff;
 }

package/package.json

@@ -1,21 +1,25 @@
 {
-    "name": "qtsk-vue3",
-    "version": "0.0.5",
-    "description": "vue3版组件库",
-    "main": "./package/index.js",
-    "scripts": {
-        "patch": "node publish/build.js patch",
-        "minor": "node publish/build.js minor",
-        "major": "node publish/build.js major"
-    },
-    "keywords": [
-        "qingtingzhiyun",
-        "qtzy"
-    ],
-    "files": [
-        "package"
-    ],
-    "author": "qingting_tech",
-    "license": "MIT",
-    "dependencies": {}
-}
+  "name": "qtsk-vue3",
+  "version": "0.0.8",
+  "description": "vue3版组件库",
+  "main": "./package/index.js",
+  "scripts": {
+    "patch": "node publish/build.js patch",
+    "minor": "node publish/build.js minor",
+    "major": "node publish/build.js major"
+  },
+  "keywords": [
+    "qingtingzhiyun",
+    "qtzy"
+  ],
+  "files": [
+    "package"
+  ],
+  "author": "qingting_tech",
+  "license": "MIT",
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vue/shared": "^3.5.6",
+    "element-plus": "^2.8.3"
+  }
+}

package/package/components/button/index.vue

@@ -1,11 +0,0 @@
-<template>
-    <div>
-        <button>我是一个按钮</button>
-    </div>
-</template>
-
-<script setup>
-defineOptions({
-  name: 'QTButton',
-})
-</script>