@meethive/components 0.0.1

package/lib/Skeleton/style/index.js

@@ -0,0 +1,195 @@
+import { Keyframes } from 'ant-design-vue'
+import genComponentStyle from '../../style/styleRegister'
+
+const JSkeletonSizeLg = '36px'
+const JSkeletonSizeSm = '16px'
+const JSkeletonSize = '24px'
+const JSkeletonBorderRadius = '8px'
+const JSkeletonBg = '#f0f2f5'
+const JSkeletonBg1 = '#e6e8eb'
+const JSkeletonBorder = `4px solid ${JSkeletonBg}`
+
+const JSkeletonFlex = {
+  display: 'flex',
+  gap: '24px',
+  marginBottom: '16px'
+}
+
+// 动画
+const waveKeyframes = new Keyframes('wave', {
+  '0%': {
+    backgroundPosition: '200% 0'
+  },
+  '100%': {
+    backgroundPosition: '-200% 0'
+  }
+})
+
+const genSkeletonStyle = (config) => {
+  const { componentCls } = config
+
+  return {
+    [`${componentCls}-flex`]: JSkeletonFlex,
+
+    [`${componentCls}-flex-between`]: {
+      ...JSkeletonFlex,
+      justifyContent: 'space-between'
+    },
+
+    [`${componentCls}-flex-column`]: {
+      ...JSkeletonFlex,
+      flexDirection: 'column'
+    },
+
+    [componentCls]: {
+      height: '100%',
+
+      [`${componentCls}-item`]: {
+        background: `linear-gradient(90deg, ${JSkeletonBg} 25%, ${JSkeletonBg1} 50%, ${JSkeletonBg} 75%)`,
+        backgroundSize: '400% 100%',
+        borderRadius: JSkeletonBorderRadius,
+        height: JSkeletonSize
+      },
+
+      [`${componentCls}-item-active`]: {
+        animationName: waveKeyframes,
+        animationDuration: '1.8s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'ease-in-out'
+      },
+
+      [`${componentCls}-item-lg`]: {
+        height: JSkeletonSizeLg
+      },
+
+      [`${componentCls}-item-sm`]: {
+        height: JSkeletonSizeSm
+      },
+
+      [`${componentCls}-item-large`]: {
+        height: JSkeletonSizeLg
+      },
+
+      [`${componentCls}-dashboard-card`]: {
+        ...JSkeletonFlex,
+        border: JSkeletonBorder,
+        borderRadius: JSkeletonBorderRadius,
+        height: '100%',
+        padding: '24px',
+        flexDirection: 'column'
+      },
+
+      [`${componentCls}-tabs`]: {
+        display: 'flex',
+        gap: '16px',
+        margin: '60px 0 20px 0',
+        borderBottom: JSkeletonBorder,
+        padding: '16px 0'
+      },
+
+      [`${componentCls}-desc`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '24px',
+
+        [`${componentCls}-desc-content`]: {
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, 1fr)',
+          gap: '36px',
+          margin: '24px 0 0 0'
+        },
+
+        [`${componentCls}-desc-item`]: {
+          display: 'flex',
+          gap: '16px'
+        }
+      },
+
+      [`${componentCls}-box`]: {
+        borderBottom: JSkeletonBorder,
+        padding: '16px 0'
+      },
+
+      [`${componentCls}-table`]: {
+        marginTop: '16px'
+      },
+
+      [`${componentCls}-table-cell`]: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr)) 200px',
+        gap: '24px',
+        padding: '12px 6px',
+        borderRadius: '8px'
+      },
+
+      [`${componentCls}-table-header`]: {
+        backgroundColor: 'lightgrey'
+      },
+
+      [`${componentCls}-table-action`]: {
+        width: '200px',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))',
+        gap: '24px'
+      },
+
+      [`${componentCls}-cards`]: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '16px'
+      },
+
+      [`${componentCls}-card`]: {
+        [`${componentCls}-card-content`]: {
+          display: 'flex',
+          gap: '16px',
+          border: '2px solid #f0f2f5',
+          borderRadius: '8px',
+          padding: '24px',
+          marginBottom: '16px',
+
+          [`${componentCls}-image`]: {
+            width: '100px',
+            height: '100px'
+          },
+
+          [`${componentCls}-right`]: {
+            flex: 1,
+            minWidth: '200px',
+
+            [`${componentCls}-right-content`]: {
+              display: 'flex',
+              gap: '16px',
+              marginTop: '16px',
+
+              [`${componentCls}-right-content-item`]: {
+                flex: 1,
+                minWidth: '100px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '16px'
+              }
+            }
+          }
+        },
+
+        [`${componentCls}-action`]: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: '16px',
+
+          '.btn': {
+            flex: 1,
+            minWidth: '100px'
+          },
+
+          '.delete': {
+            flex: '0 0 100px'
+          }
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genSkeletonStyle])

package/lib/TimeFormat/TimeFormat.js

@@ -0,0 +1,36 @@
+
+import { defineComponent, computed } from 'vue'
+import dayjs from 'dayjs'
+
+export default defineComponent({
+  name: 'JTimeFormat',
+  props: {
+    time: {
+      type: [String, Number, undefined]
+    },
+    format: {
+      type: String
+    }
+  },
+  setup(props) {
+    const handleValue = (time, format) => {
+      const value = Number(time)
+      const _format = format || 'YYYY-MM-DD HH:mm:ss'
+      if (!isNaN(value)) {
+        return dayjs(value).format(_format)
+      }
+      return time
+    }
+
+    const timeFormat = computed(() => {
+      if (props.time) {
+        return handleValue(props.time, props.format)
+      }
+      return props.time
+    })
+
+    return {
+      timeFormat
+    }
+  }
+})

package/lib/TimeFormat/index.js

@@ -0,0 +1,7 @@
+import TimeFormat from './TimeFormat.js'
+
+TimeFormat.install = function (app) {
+  app.component(TimeFormat.name, TimeFormat)
+}
+
+export default TimeFormat

package/lib/Title/Title.js

@@ -0,0 +1,26 @@
+
+import { defineComponent, computed } from 'vue'
+import useTitleStyle from './style'
+
+export default defineComponent({
+  name: 'JTitle',
+  props: {
+    data: {
+      type: String,
+      default: ''
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const prefixCls = computed(() => 'j-title')
+    const [wrapSSR, hashId] = useTitleStyle(prefixCls)
+
+    return {
+      prefixCls,
+      hashId
+    }
+  }
+})

package/lib/Title/index.js

@@ -0,0 +1,7 @@
+import Title from './Title.js'
+
+Title.install = function (app) {
+  app.component(Title.name, Title)
+}
+
+export default Title

package/lib/Title/style/index.js

@@ -0,0 +1,34 @@
+import genComponentStyle from '../../style/styleRegister'
+
+const genTitleStyle = (config) => {
+  const { componentCls, token } = config
+
+  return {
+    [componentCls]: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: '16px',
+
+      [`${componentCls}-content`]: {
+        position: 'relative',
+        paddingLeft: '10px',
+        color: 'rgba(0, 0, 0, 0.8)',
+        fontWeight: 600,
+        lineHeight: 1,
+        '&::before': {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: 4,
+          height: '100%',
+          background: '#1890ff',
+          borderRadius: '0 3px 3px 0',
+          content: '""'
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genTitleStyle])

package/lib/ValueItem/ValueItem.js

@@ -0,0 +1,113 @@
+ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+import { defineComponent, ref, watch, computed } from 'vue'
+import { componentsType } from './util'
+import {
+  Select,
+  DatePicker,
+  TimePicker,
+  Input,
+  InputNumber,
+  InputPassword,
+  Upload,
+} from 'ant-design-vue'
+import { omit } from 'lodash-es'
+
+export default defineComponent({
+  name: 'JValueItem',
+  components: {
+    Select,
+    DatePicker,
+    TimePicker,
+    Input,
+    InputNumber,
+    InputPassword,
+    Upload,
+  },
+  props: {
+    // 组件双向绑定的值
+    modelValue: {
+      type: [Number, String],
+      default: '',
+    },
+    // 组件类型
+    itemType: {
+      type: String,
+      default: 'string',
+    },
+    // 多选框
+    mode: {
+      type: String,
+      default: undefined,
+    },
+    placeholder: String,
+    options: Array,
+    style: Object,
+    class: String,
+    valueFormat: String,
+    action: [String, Promise] ,
+    headers: Object,
+    disabled: Boolean,
+    extraProps: {
+      type: Object,
+      default: () => ({})
+    },
+    handleFileChange: {
+      type: Function,
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    const typeMap = new Map(Object.entries(componentsType))
+    const myValue = ref(undefined)
+    const objectValue = ref('')
+
+    const bindProps = computed(() => {
+      return Object.assign(omit(props, ['extraProps']), props.extraProps)
+    })
+
+    const handleItemModalSubmit = () => {
+      myValue.value = objectValue.value.replace(/[\r\n]\s*/g, '')
+      emit('update:modelValue', objectValue.value)
+      emit('change', objectValue.value)
+    }
+
+    const onChange = (e) => {
+      emit('update:modelValue', myValue.value)
+      emit('change', e && e.target ? e.target.value : e)
+    }
+
+    const monacoCancel = () => {
+      objectValue.value = props.modelValue 
+    }
+
+    const handleFileChangeInternal = async (info) => {
+      if (info.file.status === 'done') {
+        let url = _optionalChain([info, 'optionalAccess', _ => _.file, 'optionalAccess', _2 => _2.response, 'optionalAccess', _3 => _3.result, 'optionalAccess', _4 => _4.accessUrl])
+        if (props.handleFileChange) {
+          url = await props.handleFileChange(info, info.file.response)
+        }
+        myValue.value = url
+        emit('update:modelValue', url)
+        emit('change', url)
+      }
+    }
+
+    watch(() => props.modelValue, () => {
+      myValue.value = props.modelValue
+      if (props.itemType === 'object') {
+        objectValue.value = props.modelValue 
+      }
+    }, { immediate: true })
+
+    return {
+      typeMap,
+      myValue,
+      objectValue,
+      bindProps,
+      handleItemModalSubmit,
+      onChange,
+      monacoCancel,
+      handleFileChangeInternal,
+    }
+  }
+})

package/lib/ValueItem/index.js

@@ -0,0 +1,7 @@
+import ValueItem from './ValueItem.js'
+
+ValueItem.install = function (app) {
+  app.component(ValueItem.name, ValueItem)
+}
+
+export default ValueItem

package/lib/ValueItem/util.js

@@ -0,0 +1,17 @@
+export const componentsType = {
+  int: 'inputNumber',
+  long: 'inputNumber',
+  float: 'inputNumber',
+  double: 'inputNumber',
+  string: 'input',
+  array: 'input',
+  password: 'password',
+  enum: 'select',
+  select: 'select',
+  boolean: 'select',
+  date: 'date',
+  time: 'time',
+  object: 'object',
+  geoPoint: 'geoPoint',
+  file: 'file'
+}