@meethive/components 0.0.1

package/lib/Search/setting.js

@@ -0,0 +1,245 @@
+ 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 {
+  TreeSelect,
+  Select,
+  Input,
+  InputNumber,
+  DatePicker,
+  TimePicker,
+  InputPassword,
+  RangePicker,
+  TimeRangePicker
+} from 'ant-design-vue'
+import { filterSelectNode, filterTreeSelectNode } from './util'
+
+export const optionsMapKey = Symbol('searchOptionsMap')
+
+export const searchProps = () => {
+  return {
+    columns: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    type: {
+      type: String,
+      default: 'terms',
+      required: true
+    },
+    mode: {
+      type: String,
+      default: 'default'
+    },
+    column: {
+      type: Number,
+      default: 4
+    },
+    labelWidth: {
+      type: Number,
+      default: 40
+    },
+    resetText: {
+      type: String
+    },
+    submitText: {
+      type: String
+    },
+    align: {
+      type: String,
+      default: 'value'
+    }
+  }
+}
+
+export const typeOptions = (locale) => {
+  return [
+    {
+      label: locale.setting.or,
+      value: 'or'
+    },
+    {
+      label: locale.setting.and,
+      value: 'and'
+    }
+  ]
+}
+
+export const TermTypeMap = (locale) => {
+  return {
+    EQ: {
+      label: '=',
+      value: 'eq'
+    },
+    NOT: {
+      label: '!=',
+      value: 'not'
+    },
+    LIKE: {
+      label: _optionalChain([locale, 'access', _ => _.setting, 'optionalAccess', _2 => _2.include]),
+      value: 'like'
+    },
+    NLIKE: {
+      label: _optionalChain([locale, 'access', _3 => _3.setting, 'optionalAccess', _4 => _4.exclude]),
+      value: 'nlike'
+    },
+    GT: {
+      label: '>',
+      value: 'gt'
+    },
+    GTE: {
+      label: '>=',
+      value: 'gte'
+    },
+    LT: {
+      label: '<',
+      value: 'lt'
+    },
+    LTE: {
+      label: '<=',
+      value: 'lte'
+    },
+    IN: {
+      label: _optionalChain([locale, 'access', _5 => _5.setting, 'optionalAccess', _6 => _6.in]),
+      value: 'in'
+    },
+    NIN: {
+      label: _optionalChain([locale, 'access', _7 => _7.setting, 'optionalAccess', _8 => _8.notIn]),
+      value: 'nin'
+    },
+    BTW: {
+      label: _optionalChain([locale, 'access', _9 => _9.setting, 'optionalAccess', _10 => _10.between]),
+      value: 'btw'
+    },
+    NBTW: {
+      label: _optionalChain([locale, 'access', _11 => _11.setting, 'optionalAccess', _12 => _12.notBetween]),
+      value: 'nbtw'
+    }
+  }
+}
+
+export const termType = (locale) => {
+  return Object.values(TermTypeMap(locale))
+}
+
+export const componentType = {
+  input: 'input',
+  inputNumber: 'number',
+  password: 'password',
+  switch: 'switch',
+  radio: 'radio',
+  checkbox: 'checkbox',
+  time: 'time',
+  date: 'date',
+  timeRange: 'timeRange',
+  rangePicker: 'rangePicker',
+  treeSelect: 'treeSelect',
+  upload: 'upload',
+  tree: 'tree',
+  select: 'select',
+  component: 'component'
+}
+
+export const componentProps = (record) => {
+  const type = record.type
+  const _props = record.componentProps || {}
+
+  switch (type) {
+    case 'string':
+    case componentType.input:
+      return {
+        type,
+        name: Input,
+        props: _props
+      }
+    case componentType.inputNumber:
+      return {
+        type,
+        name: InputNumber,
+        props: _props
+      }
+    case componentType.password:
+      return {
+        type,
+        name: InputPassword,
+        props: _props
+      }
+    case componentType.time:
+      return {
+        type,
+        name: TimePicker,
+        props: {
+          valueFormat: 'HH:mm:ss',
+          ..._props
+        }
+      }
+    case componentType.date:
+      return {
+        type,
+        name: DatePicker,
+        props: {
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          showTime: true,
+          ..._props
+        }
+      }
+    case componentType.timeRange:
+      return {
+        type,
+        name: TimeRangePicker,
+        props: {
+          valueFormat: 'HH:mm:ss',
+          ..._props
+        }
+      }
+    case componentType.rangePicker:
+      return {
+        type,
+        name: RangePicker,
+        props: {
+          valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          showTime: true,
+          ..._props
+        }
+      }
+    case componentType.treeSelect:
+      return {
+        type,
+        name: TreeSelect,
+        props: {
+          showSearch: true,
+          height: 350,
+          fieldNames: {
+            label: 'name',
+            value: 'id'
+          },
+          filterTreeNode: (v, option) => {
+            return filterTreeSelectNode(v, option)
+          },
+          ..._props
+        }
+      }
+    case componentType.select:
+      return {
+        type,
+        name: Select,
+        props: {
+          showSearch: true,
+          filterOption: (v, option) => {
+            return filterSelectNode(v, option, 'label')
+          },
+          style: {
+            width: '100%',
+            minWidth: '80px'
+          },
+          ..._props
+        }
+      }
+    case componentType.component:
+      return {
+        type,
+        name: record.components,
+        props: _props
+      }
+    default:
+      return {}
+  }
+}

package/lib/Search/style/index.js

@@ -0,0 +1,5 @@
+import genComponentStyle from '../../style/styleRegister'
+import { genSearchStyle } from './search'
+import { genItemStyle } from './item'
+
+export default genComponentStyle([genSearchStyle, genItemStyle])

package/lib/Search/style/item.js

@@ -0,0 +1,40 @@
+export const genItemStyle = (config) => {
+  const { componentCls } = config
+
+  return {
+    [`${componentCls}-item`]: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+
+      [`${componentCls}-item--type`]: {
+        width: '90px',
+        minWidth: '0',
+        '> span': {
+          lineHeight: '34px',
+          fontWeight: 'bold'
+        }
+      },
+
+      [`${componentCls}-item--column`]: {
+        width: '130px',
+        minWidth: '0'
+      },
+
+      [`${componentCls}-item--termType`]: {
+        width: '110px',
+        minWidth: '0'
+      },
+
+      [`${componentCls}-item--label`]: {
+        minWidth: '40px'
+      },
+
+      [`${componentCls}-item--value`]: {
+        display: 'flex',
+        width: '0',
+        flexGrow: 1
+      }
+    }
+  }
+}

package/lib/Search/style/search.js

@@ -0,0 +1,177 @@
+export const genSearchStyle = (config) => {
+  const { componentCls, token } = config
+
+  return {
+    [`${componentCls}-warp`]: {
+      padding: '24px',
+      backgroundColor: '#fff',
+      marginBottom: '24px',
+
+      '.pack-up': {
+        [`${componentCls}-items`]: {
+          flex: '1 1 auto',
+          '.left': {
+            minWidth: '380px',
+            maxWidth: '580px'
+          }
+        }
+      },
+
+      '&.senior': {
+        [`> ${componentCls}-content`]: {
+          display: 'flex',
+
+          [`${componentCls}-footer`]: {
+            display: 'flex',
+            gap: '64px',
+            position: 'relative',
+
+            '.more-btn': {
+              '.more-text': {
+                paddingRight: '24px'
+              },
+              '.more-icon': {
+                transition: 'transform 0.3s',
+                transform: 'rotateZ(90deg)',
+                fontSize: '14px',
+                '&.more-up': {
+                  transform: 'rotateZ(-90deg)'
+                }
+              }
+            },
+
+            '&.expand': {
+              marginTop: '16px',
+              width: '100%',
+              justifyContent: 'space-between'
+            },
+
+            [`${componentCls}-footer--btns`]: {
+              display: 'flex',
+              gap: '12px'
+            }
+          },
+
+          '.items-expand': {
+            display: 'flex',
+            gap: '16px',
+
+            '.left,& .right': {
+              minWidth: 0,
+              flex: '1 1 0'
+            },
+
+            '.left-items, & .right-items': {
+              display: 'flex',
+              gap: '16px',
+              flexDirection: 'column'
+            },
+
+            '.center': {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center'
+            },
+
+            '&.vertical': {
+              flexDirection: 'column',
+              '.center': {
+                flexDirection: 'row',
+                justifyContent: 'center'
+              }
+            }
+          },
+
+          '&.senior-expand': {
+            flexDirection: 'column'
+          },
+
+          '&.small': {
+            gap: '12px',
+            [`${componentCls}-footre`]: {
+              gap: '4px'
+            }
+          }
+        }
+      },
+
+      [`${componentCls}-content`]: {
+        '&.simple': {
+          [`${componentCls}-footer--btns`]: {
+            display: 'flex'
+          },
+          [`${componentCls}-item`]: {
+            gap: '8px',
+            [`${componentCls}-item--label`]: {
+              textAlign: 'right'
+            }
+          }
+        }
+      },
+
+      '.no-radius': {
+        borderRadius: 0,
+        borderColor: '#f1f1f1'
+      },
+
+      '.search-history-warp': {
+        position: 'relative',
+        '.search-history-button': {
+          paddingRight: '32px'
+        },
+        '.search-history-button-icon': {
+          position: 'absolute',
+          width: '24px',
+          height: '18px',
+          right: '6px',
+          top: '8px',
+          color: '#fff',
+          lineHeight: '18px',
+          textAlign: 'center',
+          fontWeight: 'bold',
+          '> span': {
+            fontSize: '14px'
+          }
+        }
+      }
+    },
+
+    '.search-history-empty': {
+      padding: '12px 12px 6px 12px',
+      backgroundColor: '#fff'
+    },
+
+    '.search-history-items': {
+      width: '120px',
+      maxHeight: '300px',
+      overflowY: 'auto',
+
+      '.search-history-item': {
+        display: 'flex',
+        padding: '4px 0px 4px 4px',
+        alignItems: 'center',
+        gap: '4px',
+
+        '&:hover': {
+          backgroundColor: '#f1f1f1'
+        },
+
+        '.history-item--title': {
+          width: 'calc(100% - 30px)',
+          cursor: 'pointer'
+        },
+
+        '.delete': {
+          padding: '0 6px',
+          flex: '0 0 28px'
+        }
+      }
+    },
+
+    '.search-history-list-pop': {
+      '.ant-popover-inner-content': {
+        padding: 0
+      }
+    }
+  }
+}