@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/examples/header/dropdown.vue

@@ -0,0 +1,22 @@
+<template>
+  <PlusHeader :dropdown-list="dropdownList" @clickDropdownItem="handleClickDropdownItem" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+const dropdownList = ref([
+  {
+    label: '设置',
+    value: 'setting'
+  },
+  {
+    label: '个人中心',
+    value: 'userCenter'
+  }
+])
+
+const handleClickDropdownItem = (item: { label: string; value: string }) => {
+  ElMessage.success(item.label)
+}
+</script>

package/docs/examples/header/render.vue

@@ -0,0 +1,44 @@
+<template>
+  <PlusHeader :render-header-left="renderHeaderLeft" :render-header-right="renderHeaderRight" />
+</template>
+<script lang="ts" setup>
+import { h, Fragment, ref } from 'vue'
+import { ElSwitch } from 'element-plus'
+
+const switchValue = ref(true)
+
+const renderHeaderLeft = ({ logo, title }: { logo: string; title: string }) => {
+  return h(Fragment, null, [
+    h(
+      'h5',
+      {
+        style: {
+          marginRight: '10px'
+        }
+      },
+      title.slice(0, 4)
+    ),
+    h('img', {
+      src: logo,
+      style: {
+        height: '30px'
+      }
+    })
+  ])
+}
+const renderHeaderRight = data => {
+  console.log(data)
+  return h(ElSwitch, {
+    modelValue: switchValue.value,
+    inlinePrompt: true,
+    activeText: '白色',
+    inactiveText: '暗黑',
+    style: {
+      marginRight: '10px'
+    },
+    onChange: val => {
+      switchValue.value = val as boolean
+    }
+  })
+}
+</script>

package/docs/examples/header/slots.vue

@@ -0,0 +1,79 @@
+<template>
+  <PlusHeader>
+    <template #header-left="{ title, logo }">
+      <h5 style="margin-right: 10px">{{ title }}</h5>
+
+      <img :src="logo" style="height: 30px" alt="" />
+    </template>
+
+    <template #header-right>
+      <el-dropdown trigger="click" class="set-language-dropdown">
+        <!-- 切换语言 -->
+        <span class="el-dropdown-link">
+          <span class="text">
+            {{ currentLanguage.languageName }}
+          </span>
+
+          <el-icon class="el-icon-caret-bottom language-icon">
+            <ArrowDown />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              v-for="item in languageList"
+              :key="item.key"
+              @click="handleSwitchLanguage(item)"
+            >
+              <div class="item" :class="{ active: item.key === currentLanguage.key }">
+                {{ item.languageName }}
+              </div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </template>
+  </PlusHeader>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const languageList = ref([
+  {
+    languageName: '中文',
+    key: 'zh-CN'
+  },
+  {
+    languageName: 'English',
+    key: 'en'
+  }
+])
+
+const currentLanguage = ref(languageList.value[0])
+
+const handleSwitchLanguage = item => {
+  currentLanguage.value = item
+}
+</script>
+
+<style lang="scss">
+.set-language-dropdown {
+  .active {
+    color: var(--el-color-primary);
+  }
+  .el-dropdown-link {
+    margin-right: 10px;
+    cursor: pointer;
+    user-select: none;
+    color: var(--el-text-color-regular);
+    display: flex;
+    align-items: center;
+    .text {
+      font-size: 14px;
+      margin-right: 2px;
+    }
+  }
+}
+</style>

package/docs/examples/input-tag/basic.vue

@@ -0,0 +1,9 @@
+<template>
+  <PlusInputTag v-model="data" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const data = ref(['tag1', 'tag2'])
+</script>

package/docs/examples/input-tag/disabled.vue

@@ -0,0 +1,14 @@
+<template>
+  <PlusInputTag
+    v-model="data"
+    :input-props="{
+      disabled: true
+    }"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const data = ref([])
+</script>

package/docs/examples/input-tag/limit.vue

@@ -0,0 +1,15 @@
+<template>
+  <PlusInputTag
+    v-model="data"
+    :limit="3"
+    :input-props="{
+      placeholder: '请输入后按空格键或者回车键'
+    }"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const data = ref(['tag1', 'tag2'])
+</script>

package/docs/examples/input-tag/trigger.vue

@@ -0,0 +1,22 @@
+<template>
+  <p>失去焦点触发</p>
+  <PlusInputTag v-model="data" trigger="blur" />
+
+  <p>按空格键触发</p>
+  <PlusInputTag v-model="data1" trigger="space" />
+
+  <p>按回车键触发</p>
+  <PlusInputTag v-model="data2" trigger="enter" />
+
+  <p>失去焦点触发，按回车键触发</p>
+  <PlusInputTag v-model="data3" :trigger="['blur', 'enter']" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const data = ref(['tag1', 'tag2'])
+const data1 = ref(['tag1', 'tag2'])
+const data2 = ref(['tag1', 'tag2'])
+const data3 = ref(['tag1', 'tag2'])
+</script>

package/docs/examples/layout/basic.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="sidebar">
+    <PlusLayout
+      :sidebar-props="{ routes, onToggleCollapse: handleToggleCollapse }"
+      :breadcrumb-props="{ routes: breadcrumbRoutes }"
+      :header-props="{
+        onClickDropdownItem: handleClickDropdownItem
+      }"
+    >
+      <template #layout-extra>
+        <div class="tag">
+          <el-tag closable> breadcrumb </el-tag>
+          <el-tag closable> date-picker </el-tag>
+        </div>
+      </template>
+
+      内容
+    </PlusLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Document as DocumentIcon } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const moduleFiles = import.meta.glob('../**/basic.vue', {
+  eager: true
+})
+
+const getRoutes = (moduleFiles: Record<string, any>) => {
+  const data = Object.keys(moduleFiles)
+    .map(item => item.replace('../', '').replace('/basic.vue', ''))
+    .map(item => ({ path: item, name: item }))
+
+  const getComponent = (path: string) => {
+    const key = Object.keys(moduleFiles).find(i => i.includes(path)) as string
+    return moduleFiles[key]?.default
+  }
+
+  const routes = data.map(item => ({
+    path: item.path,
+    name: item.name,
+    component: getComponent(item.path),
+    meta: {
+      icon: DocumentIcon
+    }
+  }))
+
+  return routes.map(item => ({
+    ...item,
+    path: '/' + item.path,
+    children: item.path === 'breadcrumb' ? routes : []
+  }))
+}
+
+const routes = getRoutes(moduleFiles)
+
+const breadcrumbRoutes = [
+  {
+    path: '/breadcrumb',
+    name: 'breadcrumb',
+    meta: {
+      icon: DocumentIcon
+    }
+  },
+  {
+    path: '/date-picker',
+    name: 'date-picker',
+    meta: {
+      icon: DocumentIcon
+    },
+    children: [
+      {
+        path: '/date-picker-1',
+        name: 'date-picker-1'
+      },
+      {
+        path: '/date-picker-2',
+        name: 'date-picker-2'
+      }
+    ]
+  }
+]
+
+const handleClickDropdownItem = (dropdownItem: { label: string; value: string }) => {
+  ElMessage.success(dropdownItem.label)
+}
+
+const handleToggleCollapse = (collapse: boolean) => {
+  console.log(collapse)
+}
+</script>
+<style lang="scss" scoped>
+.tag {
+  margin-bottom: 20px;
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+}
+</style>

package/docs/examples/locale/basic.vue

@@ -0,0 +1,32 @@
+<template>
+  <el-button style="margin-bottom: 10px" type="primary" @click="toggle">切换语言</el-button>
+  <el-config-provider :locale="locales">
+    <DatePicker />
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import en from 'element-plus/es/locale/lang/en'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
+import plusEn from 'plus-pro-components/es/locale/lang/en'
+import DatePicker from '../date-picker/basic.vue'
+
+const zhCnLocales = {
+  ...zhCn,
+  ...plusZhCn
+}
+const enLocales = {
+  ...en,
+  ...plusEn
+}
+
+const language = ref('zh-cn')
+const locales = computed(() => (language.value === 'zh-cn' ? zhCnLocales : enLocales))
+
+const toggle = () => {
+  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
+  console.log(language.value)
+}
+</script>

package/docs/examples/page/basic.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <PlusPage
+      :columns="tableConfig"
+      :request="getList"
+      :is-card="false"
+      :divider-prop="{ isShow: true, style: { margin: '10px 0' } }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PlusColumn, PageInfo } from 'plus-pro-components'
+/**
+ * @wlydfe/pro-ui-utils 是辅助plus-pro-components的工具包，如果需要使用，需要单独安装
+ * 参考文档 https://plus-pro-components.com/api/utils/
+ */
+import { fileToDataURL } from '@wlydfe/pro-ui-utils'
+import type { UploadFile } from 'element-plus'
+import { ElUpload, ElButton, ElImage } from 'element-plus'
+import { h, Fragment } from 'vue'
+
+const getList = async (
+  query: PageInfo & {
+    status?: string
+    name?: string
+  }
+) => {
+  const { page = 1, pageSize = 20, status, name } = query || {}
+  const total = 30
+  const List = Array.from({ length: total }).map((item, index) => {
+    return {
+      id: index,
+      name: index === 0 ? 'name'.repeat(20) : index + 'name',
+      status: String(index % 3),
+      tag: index === 1 ? 'success' : index === 2 ? 'warning' : index === 3 ? 'info' : 'danger',
+      progress: 10,
+      rate: index > 3 ? 2 : 3.5,
+      switch: index % 2 === 0 ? true : false,
+      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      time: new Date(),
+      code: `
+          const getData = async params => {
+            const data = await getData(params)
+            return { list: data.data, ...data }
+          }`,
+      custom: 'custom' + index
+    }
+  })
+
+  const mockList = List.filter(item => {
+    if (status && status !== item.status) {
+      return false
+    }
+    if (name && name !== item.name) {
+      return false
+    }
+
+    return true
+  })
+
+  const pageList = mockList.filter(
+    (item, index) => index < pageSize * page && index >= pageSize * (page - 1)
+  )
+
+  // 等待2s
+  await new Promise(resolve => {
+    setTimeout(() => {
+      resolve('')
+    }, 2000)
+  })
+
+  return { data: pageList, success: true, total: mockList.length }
+}
+
+const tableConfig: PlusColumn[] = [
+  {
+    label: '名称',
+    tooltip: '名称最多显示6个字符',
+    width: 120,
+    prop: 'name',
+
+    tableColumnProps: {
+      showOverflowTooltip: true
+    }
+  },
+  {
+    label: '状态',
+    width: 120,
+    prop: 'status',
+    valueType: 'select',
+    options: [
+      {
+        label: '未解决',
+        value: '0',
+        color: 'red'
+      },
+      {
+        label: '已解决',
+        value: '1',
+        color: 'blue'
+      },
+      {
+        label: '解决中',
+        value: '2',
+        color: 'yellow'
+      },
+      {
+        label: '失败',
+        value: '3',
+        color: 'red'
+      }
+    ]
+  },
+  {
+    label: '标签',
+    width: 120,
+    prop: 'tag',
+    valueType: 'tag',
+    fieldProps: (value: string) => {
+      return { type: value }
+    }
+  },
+  {
+    label: '执行进度',
+    width: 200,
+    prop: 'progress',
+    valueType: 'progress',
+    fieldProps: (value: number) => {
+      const data =
+        value === 0
+          ? { status: 'exception' }
+          : value > 5
+          ? { status: 'warning' }
+          : value > 3
+          ? { status: 'success' }
+          : { status: 'exception' }
+
+      return data
+    }
+  },
+  {
+    label: '代码块',
+    width: 250,
+    prop: 'code',
+    hideInSearch: true,
+    valueType: 'code'
+  },
+  {
+    label: '评分',
+    width: 200,
+    prop: 'rate',
+    valueType: 'rate',
+    hideInSearch: true,
+    editable: true
+  },
+  {
+    label: '开关',
+    width: 100,
+    prop: 'switch',
+    hideInSearch: true,
+    valueType: 'switch',
+    editable: true
+  },
+  {
+    label: '图片',
+    prop: 'img',
+    width: 100,
+    hideInSearch: true,
+    valueType: 'img',
+    renderField(value, onChange) {
+      // 自定义上传
+      const handleHttpRequest = async ({ file, onError, onSuccess }: any) => {
+        try {
+          onSuccess(file)
+        } catch (error: any) {
+          onError(error)
+        }
+        return file
+      }
+
+      return h(Fragment, [
+        h(ElImage as any, {
+          src: value,
+          previewSrcList: [value],
+          style: value
+            ? {
+                width: '60px',
+                marginRight: '10px'
+              }
+            : {}
+        }),
+        h(
+          ElUpload,
+          {
+            action: '',
+            httpRequest: handleHttpRequest,
+            onChange: async (data: UploadFile) => {
+              const base64 = await fileToDataURL(data.raw as File)
+              // 调用 renderField 的onChange 回调把值传给表单
+              onChange(base64)
+            }
+          },
+          () => h(ElButton, () => '点击上传')
+        )
+      ])
+    }
+  },
+  {
+    label: '时间',
+    prop: 'time',
+    valueType: 'date-picker',
+    hideInForm: true
+  }
+]
+</script>