zhui-plus 1.0.0 → 1.0.10

package/packages/components/image/src/zh-image.vue

@@ -0,0 +1,245 @@
+<template>
+  <div v-for="(item, index) in fileList" :key="index" class="image-box">
+    <el-icon v-if="remove" :size="16" color="#ccc" class="removeBtn" @click.stop="removeItem(index)">
+      <CircleCloseFilled />
+    </el-icon>
+    <el-image
+      v-if="isPicture(item)"
+      ref="imageRef"
+      :src="item"
+      class="item"
+      :preview-src-list="[item]"
+      :style="$attrs.style"
+      fit="contain"
+      v-bind="{...$attrs}"
+      @click.stop.prevent="clickImage"
+    >
+      <template v-for="(_, name) in slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData || {}"></slot>
+      </template>
+    </el-image>
+    <template v-else>
+      <el-image
+        v-if="getFileMs(item)"
+        :src="getFileMs(item)?.icon"
+        :style="$attrs.style"
+        class="item"
+        fit="contain"
+        v-bind="{...$attrs}"
+        @click="downFile(item)"
+      />
+      <span v-else>-</span>
+    </template>
+    <div v-if="showName" class="name">{{ getFileMs(item).name }} </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed,
+    defineProps,
+    defineEmits,
+    ref,
+    nextTick,
+    h,
+    render,
+    defineExpose,
+    useAttrs ,
+    useSlots} from "vue";
+  import { Download } from '@element-plus/icons-vue';
+  import pdfIcon from '@/assets/images/pdf.png';
+  import wordIcon from '@/assets/images/word.png';
+  import excelIcon from '@/assets/images/excel.png';
+  import rarIcon from '@/assets/images/rar.png';
+  import picIcon from '@/assets/images/pic.png';
+  import unKnownIcon from '@/assets/images/unknown.png';
+  import pptIcon from "@/assets/images/ppt.png";
+
+  const props = defineProps<{
+    url?: string;
+    src?: string;
+    modelValue?: string;
+    showName?: boolean;
+    remove?: boolean;
+  }>();
+  const emits = defineEmits(['update:modelValue']);
+  const type = ref<string>('');
+  const imageRef = ref(null);
+  // 获取所有未声明的属性
+  const attrs = useAttrs()
+  // 获取所有插槽
+  const slots = useSlots()
+  interface Item {
+    url?: string;
+    name?: string;
+    icon?: string; // 可选属性用问号标记
+  }
+
+  const fileList: any = computed({
+    get: (): any => {
+      if (Array.isArray(props.url || props.src || props.modelValue)) {
+        type.value = 'array';
+        return props.url || props.src || props.modelValue;
+      }
+      if (typeof props.url === "string") {
+        type.value = 'string';
+        return props.url.split(',');
+      }
+      if (typeof props.src === "string") {
+        type.value = 'string';
+        return props.src.split(',');
+      }
+      if (typeof props.modelValue === 'string') {
+        type.value = 'string';
+        return props.modelValue.split(',');
+      }
+    },
+    set: (newVal: any): any => {
+      const data = type.value == 'string' ? newVal.join(',') : newVal;
+      emits('update:modelValue', data);
+    }
+  });
+  const removeItem = (index) => {
+    fileList.value.splice(index, 1);
+    const data = type.value == 'string' ? fileList.value.join(',') : fileList.value;
+    emits('update:modelValue', data);
+  };
+  const downFile = (url) => {
+    if (!url) return;
+    window.open(url);
+  };
+  const isPicture = (url) => {
+    if (!url) return false;
+    return /\.(jpg|jpeg|png|gif|bmp|webp)$/.test(url);
+  };
+  const getFileMs = (url: string | null): any => {
+    if (!url) return false;
+    if (/\.(jpg|jpeg|png|gif|bmp|webp)$/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url
+      };
+    }
+    if (/\.(pdf)$/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url,
+        icon: pdfIcon
+      };
+    }
+    if (/\.(doc|docx|wps)$/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url,
+        icon: wordIcon
+      };
+    }
+    if (/\.(xlsx|xls|et)$/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url,
+        icon: excelIcon
+      };
+    }
+    if (/\.(rar|zip)$/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url,
+        icon: rarIcon
+      };
+    }
+    if (/\.(ppt|pptx)$/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url,
+        icon: pptIcon
+      };
+    }
+    if (/blob:http/.test(url)) {
+      return {
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url: url,
+        icon: url
+      };
+    }
+    return {
+      name: url.substring(url.lastIndexOf('/') + 1),
+      url: url,
+      icon: unKnownIcon
+    };
+  };
+
+  /**
+   * @description: 预览的图片添加下载按钮
+   */
+  function clickImage() {
+    nextTick(() => {
+      setTimeout(() => {
+        let wrapper = document.getElementsByClassName("el-image-viewer__actions__inner");
+        let downImage = document.getElementsByClassName("zh-downLoadImage");
+        if (wrapper.length > 0 && downImage.length === 0) {
+          let downImg = document.createElement("i");
+          downImg.setAttribute("class", "el-icon zh-downLoadImage");
+          render(h(Download, {onClick: cusClickHandler}), downImg);
+          wrapper[0].appendChild(downImg);
+        }
+      });
+    });
+  }
+
+  /**
+   * @description: 预览的图片给下载按钮添加事件
+   */
+  function cusClickHandler() {
+    const imgUrl = (document.getElementsByClassName('el-image-viewer__img')[0] as HTMLImageElement)
+      .src;
+    let image = new Image();
+    // 解决跨域 Canvas 污染问题
+    image.setAttribute("crossOrigin", "anonymous");
+    image.onload = function () {
+      let canvas = document.createElement("canvas");
+      canvas.width = image.width;
+      canvas.height = image.height;
+      let context = canvas.getContext('2d') as any;
+      context.drawImage(image, 0, 0, image.width, image.height);
+      let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+      let a = document.createElement("a"); // 生成一个a元素
+      let event = new MouseEvent("click"); // 创建一个单击事件
+      a.download = imgUrl.substring(imgUrl.lastIndexOf("/") + 1) || "photo"; // 设置图片名称
+      a.href = url; // 将生成的URL设置为a.href属性
+      a.dispatchEvent(event); // 触发a的单击事件
+    };
+    image.src = imgUrl;
+  }
+
+  defineExpose({ clickImage, imageRef });
+</script>
+
+<style scoped lang="scss">
+  .image-box {
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    //width: 100%;
+    height: 100%;
+    padding: 5px;
+    flex-shrink: 0;
+
+    .item {
+      cursor: pointer;
+    }
+  }
+
+  .name {
+    font-size: 12px;
+    color: #909399;
+  }
+
+  .removeBtn {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    z-index: 999;
+    cursor: pointer;
+  }
+</style>

package/packages/components/index.ts

@@ -0,0 +1,112 @@
+import {App} from 'vue'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+export * from '@element-plus/icons-vue'
+// export * as echarts from 'echarts'
+// export * as echartsGl from 'echarts-gl'
+// @ts-ignore
+export * from 'element-plus'
+export * from './button'
+export * from './icon'
+export * from './layout'
+export * from './badge'
+export * from './message'
+export * from './container'
+export * from './message-box'
+export * from './drawer'
+export * from './radio'
+export * from './switch'
+export * from './input'
+export * from './noData'
+export * from './upload'
+export * from './image'
+export * from './hideNumber'
+export * from './operationColumn'
+export * from './charts'
+export * from './chat'
+export * from './AI'
+export * from './map'
+export * from './table'
+export * from './qrcode'
+export * from './signature'
+export * from './fileViewer'
+export * from './form'
+export * from './searchForm'
+export * from './provider'
+export * from './videoPlayer'
+export * from '../utils/hooks'
+
+
+import button from './button'
+import icon from './icon'
+import layout from './layout'
+import badge from './badge'
+import container from './container'
+import drawer from './drawer'
+import radio from './radio'
+import BlSwitch from './switch'
+import input from './input'
+import image from './image'
+import hideNumber from "./hideNumber";
+import upload from "./upload";
+import noData from './noData';
+import operationColumn from './operationColumn';
+import charts from './charts';
+import chat from './chat';
+import AI from './AI';
+import map from './map';
+import table from './table';
+import qrcode from './qrcode';
+import signature from "./signature"
+import fileViewer from "./fileViewer"
+import directives from "./directive"
+import form from "./form"
+import searchForm from "./searchForm"
+import provider from "./provider"
+import videoPlayer from "./videoPlayer"
+
+import 'dayjs/locale/zh-cn'
+import 'element-plus/dist/index.css'
+import '../styles/index.scss'
+
+const components = [
+    button,
+    icon,
+    layout,
+    badge,
+    container,
+    drawer,
+    radio,
+    BlSwitch,
+    input,
+    image,
+    hideNumber,
+    upload,
+    noData,
+    operationColumn,
+    charts,
+    map,
+    table,
+    chat,
+    AI,
+    qrcode,
+    signature,
+    fileViewer,
+    form,
+    searchForm,
+    provider,
+    videoPlayer
+]
+
+const install = (app: App, options?: any) => {
+    /*    for (const [key, component] of Object.entries<any>(ElementPlusIconsVue)) {
+          app.component(key, component)
+        }*/
+    ElementPlus.install(app, options);
+    components.map((item) => {
+        item.install(app)
+    })
+    app.use(directives)
+}
+export default install
+

package/packages/components/input/index.ts

@@ -0,0 +1,10 @@
+import ZhInput from './src/zh-input.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhInput', ZhInput)
+  }
+}
+
+export { ZhInput }

package/packages/components/input/src/input.com.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue'
+
+export const useMouseEnterLeave = () => {
+  const mouse_is = ref(false)
+  return {
+    mouse_is,
+    enter: () => (mouse_is.value = true),
+    leave: () => (mouse_is.value = false)
+  }
+}
+
+export const useClearModel = ($emit: any) => {
+  return () => {
+    $emit('update:modelValue', '')
+    $emit('change', '')
+    $emit('clear')
+    $emit('input', '')
+  }
+}
+
+export const useShowPassword = () => {
+  const passwordVisible = ref(false)
+  const changePasswordShow = () => {
+    passwordVisible.value = !passwordVisible.value
+  }
+  return {
+    passwordVisible,
+    changePasswordShow
+  }
+}

package/packages/components/input/src/input.type.ts

@@ -0,0 +1 @@
+export type emitType = ['update:modelValue']

package/packages/components/input/src/zh-input.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+  import { useNamespace } from '../../../utils/hooks/hooks.util'
+  import BlIcon from '../../icon/src/zh-icon.vue'
+  import { useClearModel, useMouseEnterLeave, useShowPassword } from './input.com'
+
+  defineProps({
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text',
+      validator: (value: string) => {
+        return ['text', 'password', 'textarea'].includes(value)
+      }
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    showPassword: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const ns = useNamespace('input')
+  const $emit = defineEmits(['update:modelValue', 'change', 'input', 'clear'])
+  const { mouse_is, enter, leave } = useMouseEnterLeave()
+  const clearModel = useClearModel($emit)
+  const inputHandler = (e: any) => {
+    let value = e.target.value
+    $emit('update:modelValue', value)
+  }
+  const { passwordVisible, changePasswordShow } = useShowPassword()
+</script>
+
+<template>
+  <div :class="[ns.b()]">
+    <div
+      class="zh-input__wrapper"
+      :class="[ns.is(disabled, 'disabled')]"
+      @mouseenter="enter"
+      @mouseleave="leave"
+    >
+      <span v-if="type === 'text'" class="zh-right__suffix mr-1">
+        <slot name="prefix" />
+      </span>
+      <input
+        class="zh-input__inner"
+        :disabled="disabled"
+        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        @input="inputHandler"
+        @change="$emit('change')"
+      />
+      <span v-if="clearable && mouse_is" class="zh-right__suffix">
+        <zh-icon
+          name="close"
+          class="text-gray-400 hover:text-gray-600 hover:border-gray-600 transition cursor-pointer border rounded-full"
+          @click="clearModel"
+        />
+      </span>
+      <span v-if="showPassword" class="zh-right__suffix">
+        <zh-icon
+          class="text-gray-400 hover:text-gray-600 transition cursor-pointer"
+          name="view"
+          @click="changePasswordShow"
+        />
+      </span>
+      <span v-if="type === 'text'" class="zh-right__suffix">
+        <slot name="suffix" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @use '../style/index';
+  .zh-input {
+    @apply w-full box-border relative inline-flex;
+  }
+</style>

package/packages/components/input/style/index.scss

@@ -0,0 +1,30 @@
+.zh-input__wrapper {
+  box-shadow: 0 0 0 1px #ccc;
+  @apply inline-flex rounded transition box-border flex-grow items-center justify-center px-2;
+  &:not(.is-disabled):focus-within {
+    box-shadow: 0 0 0 1px #43c6f5 !important;
+  }
+  &:not(.is-disabled):hover {
+    box-shadow: 0 0 0 1px #a1a1a1;
+  }
+}
+
+.zh-input__inner {
+  height: 30px;
+  @apply w-full;
+  &:focus {
+    outline: none;
+  }
+}
+
+.is-disabled {
+  background-color: #F5F7FA;
+  @apply cursor-not-allowed;
+  .zh-input__inner {
+    @apply cursor-not-allowed;
+  }
+}
+
+.zh-right__suffix {
+  @apply self-end h-full inline-flex items-center;
+}

package/packages/components/layout/index.ts

@@ -0,0 +1,12 @@
+import ZhRow from './src/zh-row'
+import ZhCol from './src/zh-col'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component(ZhRow.name, ZhRow)
+    app.component(ZhCol.name, ZhCol)
+  }
+}
+
+export { ZhRow, ZhCol }

package/packages/components/layout/src/zh-col.tsx

@@ -0,0 +1,81 @@
+import {Component, computed, CSSProperties, defineComponent, inject} from 'vue'
+import { rowGutter } from '../../../tokens/tokens'
+// import '../style/col.scss'
+const props = {
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  span: {
+    type: Number,
+    default: 24
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  pull: {
+    type: Number,
+    default: 0
+  },
+  push: {
+    type: Number,
+    default: 0
+  }
+}
+
+const ZhCol = defineComponent({
+  name: 'ZhCol',
+  props: props,
+  setup(props, { slots }) {
+    const gutter = inject(
+      rowGutter,
+      computed(() => 0)
+    )
+    const getPercentage = (x: number) => x * 100
+    const style = computed<CSSProperties>(() => {
+      let all: CSSProperties = {}
+      // gutter 边距
+      if (gutter.value) {
+        const padding = {
+          paddingLeft: `${gutter.value / 2}px`,
+          paddingRight: `${gutter.value / 2}px`
+        }
+        all = { ...all, ...padding }
+      }
+      // 自身站位
+      if (props.span) {
+        const marginwidth = {
+          maxWidth: `${getPercentage(props.span / 24)}%`,
+          flexBasis: `${getPercentage(props.span / 24)}%`
+        }
+        all = { ...all, ...marginwidth }
+      }
+      // offset
+      if (props.offset) {
+        const offest: CSSProperties = {
+          marginLeft: `${getPercentage(props.offset / 24)}%`
+        }
+        all = { ...all, ...offest }
+      }
+      // 左右偏移
+      if (props.push || props.pull) {
+        const pushPull: CSSProperties = {
+          position: 'relative'
+        }
+        if (props.push) pushPull.left = `${getPercentage(props.push / 24)}%`
+        if (props.pull) pushPull.right = `${getPercentage(props.pull / 24)}%`
+        all = { ...all, ...pushPull }
+      }
+      return all
+    })
+    return () => (
+      // @ts-ignore
+      <props.tag class="zh-col" style={style.value}>
+        {slots.default?.()}
+      </props.tag>
+    )
+  }
+})
+
+export default ZhCol

package/packages/components/layout/src/zh-row.tsx

@@ -0,0 +1,58 @@
+import { computed, defineComponent, provide } from 'vue'
+import '../style/row.scss'
+import { rowGutter } from '../../../tokens/tokens'
+const props = {
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  gutter: {
+    type: Number,
+    default: 0
+  },
+  justify: {
+    type: String,
+    default: 'start'
+  },
+  align: {
+    type: String,
+    default: 'top'
+  }
+}
+
+const ZhRow = defineComponent({
+  name: 'ZhRow',
+  props: props,
+  setup(props, { slots }) {
+    provide(
+      rowGutter,
+      computed(() => props.gutter)
+    )
+    // 间距
+    const style = computed(() => {
+      const styles = {
+        'margin-left': '',
+        'margin-right': ''
+      }
+      if (props.gutter) {
+        styles['margin-left'] = `${props.gutter / 2}px`
+        styles['margin-right'] = styles['margin-left']
+      }
+      return styles
+    })
+    // justify align
+    const flex = computed(() => {
+      const justifyClass = `justify-${props.justify}`
+      const alignClass = `items-${props.align}`
+      return [justifyClass, alignClass]
+    })
+    return () => (
+      // @ts-ignore
+      <props.tag class={['zh-row', ...flex.value]} style={style.value}>
+        {slots.default?.()}
+      </props.tag>
+    )
+  }
+})
+
+export default ZhRow

package/packages/components/layout/style/row.scss

@@ -0,0 +1,6 @@
+.zh-row {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  box-sizing: border-box;
+}