mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
141 lines • 3.91 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { genComponentStyleHook } from 'ant-design-vue/es/theme/internal';
var useStyles = function useStyles(token) {
var componentCls = token.componentCls;
return _defineProperty({}, componentCls, {
backgroundColor: token.colorBgContainer,
'&.j-data-table-fullscreen': {
padding: '24px'
},
'.j-data-table-tool': {
display: 'flex',
marginBottom: '24px',
justifyContent: 'space-between',
'.j-data-table-tool-left': {
display: 'flex',
gap: '24px',
alignItems: 'center',
'.j-data-table-full': {
fontSize: '18px'
},
'.j-data-table-search-result': {
'> span': {
color: '#ff7875',
padding: '0 4px'
}
}
}
},
'.j-data-table-header': {
position: 'relative',
'&.required': {
paddingRight: '12px',
'&::after': {
content: '"*"',
position: 'absolute',
color: token.colorError,
top: 0,
right: 0
}
}
},
'.j-data-table-body': {
'.ant-table-tbody': {
'tr': {
height: '100%'
},
'.ant-table-cell, & td': {
padding: '0',
position: 'relative',
'.j-row-update': {
'&::after': {
position: 'absolute',
content: '" "',
top: '-5px',
right: '-1px',
padding: '0',
width: '0',
height: '0',
borderTop: '8px solid transparent',
borderBottom: '8px solid transparent',
borderLeft: "8px solid ".concat(token.colorError),
transform: 'rotate(-45deg)',
zIndex: '4',
transition: 'all 0.3s'
},
'&.update::after': {
borderTop: '8px solid transparent',
borderBottom: '8px solid transparent',
borderLeft: "8px solid ".concat(token.colorError)
}
},
'& .draggable-item': {
height: '100%',
padding: '6px 14px',
border: '1px solid transparent',
display: 'flex',
alignItems: 'center',
position: 'relative',
zIndex: 2
},
'.j-data-table-empty': {
justifyContent: 'center',
paddingTop: '30px'
},
'.j-row-selected': {
position: 'absolute',
zIndex: 1,
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'transparent',
transition: 'background-color 0.3s',
'&.j-row-selected-active': {
backgroundColor: "rgba(".concat(token.colorPrimary, ", 0.1)")
}
},
'.j-data-table--edit': {
padding: 0
},
'.ant-form-item': {
marginBottom: 0,
width: '100%',
flexDirection: 'row',
'&.ant-form-item-has-error': {
paddingBottom: 0
}
}
}
}
},
'.j-data-table-footer': {
'.j-data-table-footer--add': {
width: '100%',
marginTop: '12px'
}
},
'.data-table--text': {
padding: '6px 4px'
},
'.j-data-table-row--config': {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%',
gap: '8px',
'.j-data-table-config--text': {
flex: 1,
height: '100%'
},
'.j-data-table-config--icon': {
fontSize: '16px',
paddingRight: '4px',
borderRadius: '4px'
}
}
});
};
export default genComponentStyleHook('DataTable', function (token) {
return [useStyles(token)];
});