@meethive/components 0.0.1

package/es/ProLayout/TopHeader/style.js

@@ -0,0 +1,154 @@
+export const genTopHeaderStyle = (config) => {
+  const { token } = config
+  const topNavHeaderCls = `${token.antCls}-pro-top-nav-header`
+  const proLayoutGlobalHeaderCls = `${token.antCls}-pro-global-header`
+  const proLayoutHeaderBg = token.colorBgContainer
+  const proLayoutHeaderBoxShadow = '0 1px 4px rgba(0, 21, 41, 0.08)'
+
+  return {
+    [proLayoutGlobalHeaderCls]: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      padding: '0 16px',
+      backgroundColor: proLayoutHeaderBg,
+      boxShadow: proLayoutHeaderBoxShadow,
+      '> *': {
+        height: '100%'
+      },
+      [`${proLayoutGlobalHeaderCls}-coppassed-button`]: {
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: '16px',
+        fontSize: '20px'
+      },
+      [`${proLayoutGlobalHeaderCls}-layout`]: {
+        [`${proLayoutGlobalHeaderCls}-layout-mix`]: {
+          backgroundColor: '#001529',
+          [`${proLayoutGlobalHeaderCls}-logo`]: {
+            'h1': {
+              color: '#fff'
+            }
+          },
+          '.anticon': {
+            color: '#fff'
+          }
+        }
+      },
+      [`${proLayoutGlobalHeaderCls}-logo`]: {
+        position: 'relative',
+        overflow: 'hidden',
+        a: {
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          img: {
+            height: '28px'
+          },
+          h1: {
+            height: '32px',
+            margin: '0 0 0 12px',
+            color: token.colorPrimary,
+            fontWeight: 600,
+            fontSize: '18px',
+            lineHeight: '32px'
+          }
+        }
+      },
+      [`${proLayoutGlobalHeaderCls}-menu`]: {
+        '.anticon': {
+          marginRight: '8px'
+        },
+        [`${token.antCls}-dropdown-menu-item`]: {
+          minWidth: '160px'
+        }
+      },
+      '.dark': {
+        height: '48px',
+        '.action': {
+          color: 'rgba(255, 255, 255, 0.85)',
+          '> i': {
+            color: 'rgba(255, 255, 255, 0.85)'
+          },
+          '&:hover,&.opend': {
+            background: token.colorPrimary
+          },
+          [`${token.antCls}-badge`]: {
+            color: 'rgba(255, 255, 255, 0.85)'
+          }
+        }
+      }
+    },
+    [topNavHeaderCls]: {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      boxShadow: '0 1px 4px 0 rgba(0, 21, 41, 0.12)',
+      transition: 'background 0.3s, width 0.2s',
+      [`${token.antCls}-menu`]: {
+        backgroundColor: 'transparent'
+      },
+      '&.light': {
+        backgroundColor: token.colorBgContainer,
+        [`${topNavHeaderCls}-logo`]: {
+          h1: {
+            color: token.colorTextHeading
+          }
+        },
+        '.anticon': {
+          color: 'inherit'
+        }
+      },
+      [`${topNavHeaderCls}-main`]: {
+        display: 'flex',
+        height: '100%',
+        paddingLeft: '16px',
+        [`${topNavHeaderCls}-main-left`]: {
+          display: 'flex',
+          minWidth: '192px'
+        }
+      },
+      '.anticon': {
+        color: '#fff'
+      },
+      [`${topNavHeaderCls}-logo`]: {
+        position: 'relative',
+        minWidth: '165px',
+        height: '100%',
+        overflow: 'hidden',
+        img: {
+          display: 'inline-block',
+          height: '32px',
+          verticalAlign: 'middle'
+        },
+        h1: {
+          display: 'inline-block',
+          margin: '0 0 0 12px',
+          color: token.colorPrimary,
+          fontWeight: 600,
+          fontSize: '16px',
+          verticalAlign: 'top'
+        }
+      },
+      [`${topNavHeaderCls}-menu`]: {
+        minWidth: 0,
+        [`${token.antCls}-menu${token.antCls}-meu-horizontal`]: {
+          height: '100%',
+          border: 'none',
+          [`${token.antCls}-menu-item`]: {
+            height: '100%',
+            [`${token.antCls}-badge`]: {
+              color: 'unset'
+            }
+          }
+        }
+      }
+    },
+    [`${token.antCls}-pro-menu-popup`]: {
+      [`${token.antCls}-badge`]: {
+        color: 'unset'
+      }
+    }
+  }
+}

package/es/ProLayout/defaultSettings.js

@@ -0,0 +1,113 @@
+import 'vue'
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+export const defaultSettings = {
+  theme: 'light',
+  layout: 'mix',
+  contentWidth: 'Fluid',
+  fixedHeader: true,
+  fixSiderbar: true,
+  menu: {
+    locale: true
+  },
+  headerHeight: 48,
+  title: 'Jetlink UI Components',
+  iconfontUrl: '',
+  primaryColor: '#315EFB'
+}
+
+export const LayoutType = {
+  CARD: 'card',
+  PAD: 'pad',
+  LIST: 'list'
+}
+
+export const defaultSettingProps = {
+  theme: {
+    type: String,
+    default: defaultSettings.theme
+  },
+  layout: {
+    type: String,
+    default: defaultSettings.layout
+  },
+  contentWidth: {
+    type: String,
+    default: defaultSettings.contentWidth
+  },
+  fixedHeader: {
+    type: Boolean,
+    default: defaultSettings.fixedHeader
+  },
+  fixSiderbar: {
+    type: Boolean,
+    default: defaultSettings.fixSiderbar
+  },
+  menu: {
+    type: Object,
+    default: function _default() {
+      return {
+        locale: true
+      }
+    }
+  },
+  headerHeight: {
+    type: Number,
+    default: defaultSettings.headerHeight
+  },
+  title: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.title
+    }
+  },
+  iconfontUrl: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.iconfontUrl
+    }
+  },
+  primaryColor: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.primaryColor
+    }
+  },
+  layoutType: {
+    type: String,
+    default: LayoutType.LIST
+  },
+  cardSiderWidth: {
+    type: Number,
+    default: 60
+  },
+  historyRoutes: {
+    type: Array,
+    default: function _default() {
+      return []
+    }
+  },
+  historyActive: {
+    type: String,
+    default: undefined
+  },
+  pageFooterStyle: {
+    type: Object,
+    default: function _default() {
+      return undefined
+    }
+  },
+  pageHeaderStyle: {
+    type: Object,
+    default: function _default() {
+      return undefined
+    }
+  },
+  apps: {
+    type: Array,
+    default: function _default() {
+      return []
+    }
+  },
+  onAppMenuClick: PropTypes.func
+}

package/es/ProLayout/index.js

@@ -0,0 +1,10 @@
+import ProLayout from './Basic/BasicLayout.js'
+import PageContainer from './PageContainer/index.js'
+import { LayoutType } from './defaultSettings'
+
+ProLayout.install = function (app) {
+  app.component(ProLayout.name, ProLayout)
+}
+
+export { PageContainer, LayoutType }
+export default ProLayout

package/es/ProLayout/style/index.js

@@ -0,0 +1,14 @@
+import genCompoentStyle from '../../style/styleRegister'
+import { genBasicLayoutStyle } from '../Basic/BasicLayoutStyle'
+import { genHeaderStyle } from '../Basic/HeaderStyle'
+import { genPageContainerStyle } from '../PageContainer/style'
+import { genSiderMenuStyle } from '../SiderMenu/style'
+import { genTopHeaderStyle } from '../TopHeader/style'
+
+export default genCompoentStyle([
+  genBasicLayoutStyle,
+  genHeaderStyle,
+  genPageContainerStyle,
+  genSiderMenuStyle,
+  genTopHeaderStyle
+])

package/es/ProLayout/util.js

@@ -0,0 +1,58 @@
+ 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; }export function clearMenuItem(menusData) {
+  return menusData.map((item) => {
+    const finalItem = { ...item }
+    if (_optionalChain([finalItem, 'access', _ => _.meta, 'optionalAccess', _2 => _2.hideInMenu])) {
+      return null
+    }
+    if (finalItem && _optionalChain([finalItem, 'optionalAccess', _3 => _3.children])) {
+      if (!_optionalChain([finalItem, 'access', _4 => _4.meta, 'optionalAccess', _5 => _5.hideChildInMenu]) && finalItem.children.some((child) => {
+        return child && child.name && !_optionalChain([child, 'access', _6 => _6.meta, 'optionalAccess', _7 => _7.hideInMenu])
+      })) {
+        return {
+          ...item,
+          children: clearMenuItem(finalItem.children)
+        }
+      }
+      delete finalItem.children
+    }
+    return finalItem
+  }).filter((item) => {
+    return item
+  })
+}
+
+export function flatMap(menusData) {
+  return menusData.map((item) => {
+    const finalItem = { ...item }
+    if (!finalItem.name || _optionalChain([finalItem, 'access', _8 => _8.meta, 'optionalAccess', _9 => _9.hideInMenu])) {
+      return null
+    }
+    if (finalItem.children) {
+      delete finalItem.children
+    }
+    return finalItem
+  }).filter((item) => {
+    return item
+  })
+}
+
+export function getMenuFirstChildren(menus, key) {
+  return key === undefined ? [] : (menus[menus.findIndex((menu) => {
+    return menu.path === key
+  })] || {}).children || []
+}
+
+export function getSlot(slots, props, prop = 'default') {
+  if (props[prop] === false) {
+    // force not render
+    return false
+  }
+  return props[prop] || slots[prop]
+}
+
+export function getSlotVNode(slots, props, prop = 'default') {
+  if (props[prop] === false) {
+    return false
+  }
+  return props[prop] || _optionalChain([slots, 'access', _10 => _10[prop], 'optionalCall', _11 => _11()])
+}

package/es/ProTable/Alert.js

@@ -0,0 +1,40 @@
+ 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, computed } from 'vue'
+import { Alert, Button } from 'ant-design-vue'
+import { _alertProps } from './setting'
+import { useLocaleReceiver } from '../LocaleReciver'
+import useProTableStyle from './style'
+
+export default defineComponent({
+  name: 'Alert',
+  components: {
+    Alert,
+    Button
+  },
+  props: { ..._alertProps } ,
+  emits: ['close'],
+  setup(props, { emit }) {
+    const [contextLocale] = useLocaleReceiver('ProTable')
+    const prefixCls = computed(() => 'pro-table')
+    const [wrapSSR, hashId] = useProTableStyle(prefixCls)
+
+    const _message = computed(() => {
+      let locale = _optionalChain([contextLocale, 'access', _ => _.value, 'optionalAccess', _2 => _2.alert, 'optionalAccess', _3 => _3.selectItem]) || ''
+      ;[_optionalChain([props, 'access', _4 => _4.rowSelection, 'optionalAccess', _5 => _5.selectedRowKeys, 'optionalAccess', _6 => _6.length]) || 0].forEach((item, index) => {
+        locale = locale.replace(`{${index}}`, item)
+      })
+      return locale
+    })
+
+    const onClose = () => {
+      emit('close')
+    }
+
+    return {
+      hashId,
+      contextLocale,
+      _message,
+      onClose
+    }
+  }
+})

package/es/ProTable/Content.js

@@ -0,0 +1,97 @@
+ 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, computed, useSlots } from 'vue'
+import { Table, Checkbox as ACheckbox } from 'ant-design-vue'
+import { get, omit } from 'lodash-es'
+import Empty from '../Empty'
+import { useTableInject } from './hooks'
+import useProTableStyle from './style'
+import { useLocaleReceiver } from '../LocaleReciver'
+import JVirtualTable from '../VirtualTable'
+import { _contentProps } from './setting'
+
+export default defineComponent({
+  name: 'Content',
+  components: {
+    Table,
+    ACheckbox,
+    Empty,
+    JVirtualTable
+  },
+  props: {
+    ..._contentProps,
+    column: {
+      type: Number,
+      default: 4
+    }
+  } ,
+  setup(props) {
+    const slots = useSlots()
+    const [contextLocale] = useLocaleReceiver('ProTable')
+    const prefixCls = computed(() => 'pro-table')
+    const [wrapSSR, hashId] = useProTableStyle(prefixCls)
+
+    const _rowSelection = useTableInject()
+
+    const _columns = computed(() => props.columns.filter((i) => !_optionalChain([i, 'optionalAccess', _ => _.hideInTable])))
+
+    const _slots = computed(() => {
+      return omit(slots, ['emptyText', 'bodyCell'])
+    })
+
+    const _scroll = computed(() => {
+      if (props.scroll === false) {
+        return {
+          x: undefined,
+          y: undefined
+        }
+      }
+      return {
+        x: props.scroll.x === false ? undefined : props.scroll.x || '100%',
+        y: props.scroll.y === false ? undefined : props.scroll.y || '100%'
+      }
+    })
+
+    const gridTemplateColumns = computed(() => {
+      return `repeat(${props.column}, 1fr)`
+    })
+
+    const __rowSelection = computed(() => {
+      return props.rowSelection || _optionalChain([_rowSelection, 'optionalAccess', _2 => _2.value])
+    })
+
+    const indeterminate = computed(() => {
+      return _optionalChain([__rowSelection, 'access', _3 => _3.value, 'optionalAccess', _4 => _4.selectedRowKeys, 'optionalAccess', _5 => _5.length]) > 0 && _optionalChain([__rowSelection, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.selectedRowKeys, 'optionalAccess', _8 => _8.length]) < props.dataSource.length
+    })
+
+    const checkedAll = computed(() => {
+      return _optionalChain([__rowSelection, 'access', _9 => _9.value, 'optionalAccess', _10 => _10.selectedRowKeys, 'optionalAccess', _11 => _11.length]) > 0 && _optionalChain([__rowSelection, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.selectedRowKeys, 'optionalAccess', _14 => _14.length]) === props.dataSource.length
+    })
+
+    const onClick = (item) => {
+      if (_rowSelection && _rowSelection.value) {
+        const _selected = _optionalChain([_rowSelection, 'access', _15 => _15.value, 'access', _16 => _16.selectedRowKeys, 'optionalAccess', _17 => _17.includes, 'call', _18 => _18(item[props.rowKey])])
+        _optionalChain([_rowSelection, 'access', _19 => _19.value, 'access', _20 => _20.onSelect, 'optionalCall', _21 => _21(item, !_selected)])
+      }
+    }
+
+    const handleCheckedAllChange = (e) => {
+      const flag = e.target.checked
+      _optionalChain([__rowSelection, 'access', _22 => _22.value, 'optionalAccess', _23 => _23.onSelectAll, 'optionalCall', _24 => _24(flag, props.dataSource, props.dataSource)])
+    }
+
+    return {
+      hashId,
+      contextLocale,
+      _columns,
+      _slots,
+      _scroll,
+      gridTemplateColumns,
+      __rowSelection,
+      indeterminate,
+      checkedAll,
+      onClick,
+      handleCheckedAllChange,
+      get
+    }
+  }
+})

package/es/ProTable/Header.js

@@ -0,0 +1,33 @@
+
+import { defineComponent, computed } from 'vue'
+import { RadioGroup, RadioButton } from 'ant-design-vue'
+import AIcon from '../Icon'
+import { _headerProps } from './setting'
+import useProTableStyle from './style'
+
+export default defineComponent({
+  name: 'Header',
+  components: {
+    RadioGroup,
+    RadioButton,
+    AIcon
+  },
+  props: {
+    ..._headerProps,
+    initMode: {
+      type: [String, undefined] ,
+      default: undefined
+    }
+  } ,
+  emits: ['change'],
+  setup(props, { emit }) {
+    const emits = emit
+    const prefixCls = computed(() => 'pro-table')
+    const [wrapSSR, hashId] = useProTableStyle(prefixCls)
+
+    return {
+      hashId,
+      emits
+    }
+  }
+})

package/es/ProTable/Pagination.js

@@ -0,0 +1,55 @@
+ 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, computed, h } from 'vue'
+import { Pagination, Spin } from 'ant-design-vue'
+import { _paginationProps } from './setting'
+import { useLocaleReceiver } from '../LocaleReciver'
+import useProTableStyle from './style'
+
+export default defineComponent({
+  name: 'JPagination',
+  components: {
+    Pagination
+  },
+  props: { ..._paginationProps } ,
+  emits: ['change'],
+  setup(props, { emit }) {
+    const [contextLocale] = useLocaleReceiver('ProTable')
+    const prefixCls = computed(() => 'pro-table')
+    const [wrapSSR, hashId] = useProTableStyle(prefixCls)
+
+    const className = computed(() => {
+      return {
+        'hide-content': !props.isShowContent
+      }
+    })
+
+    const _showTotal = (num) => {
+      const minSize = props.pageIndex * props.pageSize + 1
+      const MaxSize = (props.pageIndex + 1) * props.pageSize
+      let localePage = _optionalChain([contextLocale, 'access', _ => _.value, 'access', _2 => _2.pagination, 'optionalAccess', _3 => _3.page]) || ''
+      let localeTotal = _optionalChain([contextLocale, 'access', _4 => _4.value, 'access', _5 => _5.pagination, 'optionalAccess', _6 => _6.total]) || ''
+      const _maxSize = props.totalLoading ? MaxSize : (MaxSize > num ? num : MaxSize)
+      ;[minSize, _maxSize].forEach((item, index) => {
+        localePage = localePage.replace(`{${index}}`, item)
+      })
+      return h('span', {}, [
+        localePage,
+        props.totalLoading
+          ? h(Spin, { size: 'small', style: { margin: '0 4px' } })
+          : h('span', { style: { margin: '0 4px' } }, num),
+        localeTotal
+      ])
+    }
+
+    const onChange = (page, size) => {
+      emit('change', page, size)
+    }
+
+    return {
+      hashId,
+      className,
+      _showTotal,
+      onChange
+    }
+  }
+})