, default: TabHeadPosition.top}, // 页签位置
20 | }
21 |
22 | export type TabData = { item: PlTabComponent, index: number, active: boolean }
23 |
--------------------------------------------------------------------------------
/src/packages/PlIcon/icons/el-icon-place.json:
--------------------------------------------------------------------------------
1 | [""]
--------------------------------------------------------------------------------
/src/utils/constant.tsx:
--------------------------------------------------------------------------------
1 | export enum CheckboxStatus {
2 | uncheck = 'uncheck',
3 | check = 'check',
4 | minus = 'minus',
5 | }
6 |
7 | export const STATUS = {
8 | white: {icon: 'el-icon-info', status: 'white'},
9 | black: {icon: 'el-icon-info', status: 'black'},
10 | lite: {icon: 'el-icon-info', status: 'white'},
11 | dark: {icon: 'el-icon-info', status: 'black'},
12 | primary: {icon: 'el-icon-info', status: 'primary'},
13 | success: {icon: 'el-icon-success', status: 'success'},
14 | warn: {icon: 'el-icon-warning', status: 'warn'},
15 | error: {icon: 'el-icon-error', status: 'error'},
16 | info: {icon: 'el-icon-info', status: 'info'},
17 | } as { [k: string]: { icon: string, status: string } }
18 |
19 | export const noop = () => void 0
20 |
--------------------------------------------------------------------------------
/story/story.utils.ts:
--------------------------------------------------------------------------------
1 | export const StoryStatus = [
2 | {label: '基础', status: 'primary' as 'primary'},
3 | {label: '成功', status: 'success' as 'success'},
4 | {label: '警告', status: 'warn' as 'warn'},
5 | {label: '失败', status: 'error' as 'error'},
6 | {label: '帮助', status: 'info' as 'info'},
7 | ]
8 |
9 | export const StoryShapes = [
10 | {label: '圆角', shape: 'fillet' as 'fillet'},
11 | {label: '圆形', shape: 'round' as 'round'},
12 | {label: '方角', shape: 'square' as 'square'},
13 | ]
14 | export const StorySizes = [
15 | {label: '大', size: 'large' as 'large'},
16 | {label: '中', size: 'normal' as 'normal'},
17 | {label: '小', size: 'mini' as 'mini'},
18 | ]
19 |
20 | export const Modes = [
21 | 'fill',
22 | 'stroke',
23 | 'text',
24 | ]
--------------------------------------------------------------------------------
/src/packages/PlIcon/icons/el-icon-first-aid-kit.json:
--------------------------------------------------------------------------------
1 | [""]
--------------------------------------------------------------------------------
/src/packages/PlIcon/icons/el-icon-refresh.json:
--------------------------------------------------------------------------------
1 | [""]
--------------------------------------------------------------------------------
/src/use/useFunctionWrapper.ts:
--------------------------------------------------------------------------------
1 | import {getCurrentInstance} from 'vue'
2 |
3 | export function useFunctionWrapper any>(
5 | key: string,
6 | func: T,
7 | ): (...args: P) => ReturnType {
8 | return (...args) => {
9 | const ctx = getCurrentInstance() as any
10 | if (!ctx._use) ctx._use = {}
11 |
12 | if (!!ctx._use[key]) {
13 | throw new Error(`use ${key} can only be executed once!`)
14 | }
15 |
16 | return (ctx._use[key] = func(ctx, ...args))
17 | }
18 | }
19 |
20 | /*const func = useFunctionWrapper('', (ctx, name: string, age: number) => {
21 | return {
22 | sayHello: () => {},
23 | }
24 | })
25 |
26 | const data = func('111', 111)
27 | data.sayHello()*/
28 |
29 |
--------------------------------------------------------------------------------
/src/packages/PlIcon/icons/el-icon-thumb.json:
--------------------------------------------------------------------------------
1 | [""]
--------------------------------------------------------------------------------
/src/packages/PlColorPicker/color-picker.scss:
--------------------------------------------------------------------------------
1 | @include theme {
2 |
3 | .pl-color-button {
4 | border-radius: 2px;
5 | height: 24px;
6 | width: 24px;
7 | border: solid 1px $ibc;
8 | padding: 2px;
9 | box-sizing: border-box;
10 | display: inline-block;
11 | cursor: pointer;
12 |
13 | .pl-color-button-background {
14 | background-size: 7px 7px;
15 | border-radius: 2px;
16 | box-sizing: border-box;
17 | height: 100%;
18 | width: 100%;
19 |
20 | .pl-color-button-color {
21 | height: 100%;
22 | width: 100%;
23 | }
24 | }
25 | }
26 |
27 | .pl-color-picker {
28 | @include sizeMixin(input) {
29 | .pl-color-button {
30 | height: $value/2;
31 | width: $value/2;
32 | }
33 | }
34 | }
35 | }
--------------------------------------------------------------------------------
/src/packages/PlTable/plc/format/process/copyPlcList.ts:
--------------------------------------------------------------------------------
1 | import {tPlcType} from "../../utils/plc.type";
2 | import {deepcopy} from "plain-utils/object/deepcopy";
3 | import {PlcPublicAttrs} from "../../utils/plc.utils";
4 |
5 | /**
6 | * 浅复制一份plc数据，复制plc最外层对象以及plc.props数据，props数据是需要动态计算修改的。
7 | * state不能复制，因为需要其响应式属性。
8 | * @author 韦胜健
9 | * @date 2020/12/18 10:06
10 | */
11 | export function copyPlcList(plcList: tPlcType[]) {
12 | return plcList.map(plc => {
13 | const refer = plc.refer()
14 | const newPlc: tPlcType = {
15 | ...refer,
16 | ...deepcopy(PlcPublicAttrs),
17 | }
18 | newPlc.props = {...newPlc.props}
19 | if (newPlc.group) {
20 | newPlc.children = copyPlcList(newPlc.children)
21 | }
22 | return newPlc
23 | })
24 | }
--------------------------------------------------------------------------------
/src/packages/PlRate/rate.scss:
--------------------------------------------------------------------------------
1 | @include theme {
2 | .pl-rate {
3 | position: relative;
4 | display: inline-block;
5 | cursor: pointer;
6 | overflow: hidden;
7 | vertical-align: text-bottom;
8 |
9 | .pl-rate-active {
10 | white-space: nowrap;
11 | overflow: hidden;
12 | position: absolute;
13 | left: 0;
14 | top: 0;
15 | bottom: 0;
16 | }
17 |
18 | @include statusMixin(rate) {
19 | color: $value;
20 | }
21 |
22 | &.pl-rate-disabled {
23 | color: $disabledText !important;
24 | cursor: not-allowed;
25 | }
26 |
27 | &.pl-rate-size-min {
28 | font-size: 14px;
29 | }
30 |
31 | &.pl-rate-size-normal {
32 | font-size: 16px;
33 | }
34 |
35 | &.pl-rate-size-large {
36 | font-size: 18px;
37 | }
38 | }
39 | }
--------------------------------------------------------------------------------
/story/pages/normal/DemoIcon.tsx:
--------------------------------------------------------------------------------
1 | import {designComponent} from "plain-ui-composition";
2 | import {DemoRow} from "../../components/DemoRow";
3 | import {PlIcon} from "../../../src/packages/PlIcon";
4 |
5 | export default designComponent({
6 | setup() {
7 | return () => (
8 |
9 |
10 | 普通的文本：NORMAL normal
11 |
12 |
13 |
14 |
15 |
16 | {['primary', 'success', 'warn', 'error', 'info'].map(status => )}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
26 | {state.Page}
27 |
28 | )
29 | },
30 | })
31 |
--------------------------------------------------------------------------------
/src/packages/PlRadioInner/index.tsx:
--------------------------------------------------------------------------------
1 | import {designComponent, useClasses, useRefs} from "plain-ui-composition"
2 | import './radio-inner.scss'
3 |
4 | export const PlRadioInner = designComponent({
5 | name: 'pl-radio-inner',
6 | props: {
7 | checkStatus: {type: String}, // check,uncheck
8 | },
9 | inheritPropsType: SVGElement,
10 | setup({props}) {
11 |
12 | const {refs, onRef} = useRefs({el: SVGElement})
13 |
14 | const classes = useClasses(() => [
15 | 'pl-radio-inner',
16 | `pl-radio-inner-${props.checkStatus}`,
17 | ])
18 |
19 | return {
20 | refer: {refs},
21 | render: () => (
22 |
25 | )
26 | }
27 | },
28 | })
29 |
30 | export default PlRadioInner
31 |
--------------------------------------------------------------------------------
/src/packages/createUseTableOption/use/filter/distinct.filter.scss:
--------------------------------------------------------------------------------
1 | @include theme {
2 | .pl-table-pro-distinct-filter-item {
3 | display: flex;
4 | align-items: stretch;
5 | line-height: 28px;
6 |
7 | padding: 8px 0;
8 |
9 | background-color: white;
10 | transition: background-color 300ms linear;
11 |
12 | &:not(:last-child) {
13 | border-bottom: solid 1px $ibl;
14 | }
15 |
16 | &:hover {
17 | background-color: #f6f6f6;
18 | }
19 |
20 | .pl-table-pro-distinct-filter-item-title {
21 | color: $colorPrimary;
22 | margin: 0 8px;
23 | }
24 |
25 | .pl-table-pro-distinct-filter-item-tags {
26 |
27 | cursor: pointer;
28 |
29 | & > div {
30 | display: inline-block;
31 | font-size: 12px;
32 | background-color: $colorPrimaryLight;
33 | padding: 0 12px;
34 | margin: 1px 2px;
35 | border-radius: 4px;
36 | }
37 | }
38 |
39 | .pl-table-pro-distinct-filter-item-button {
40 |
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/packages/PlTable/plc/edit/plc-rate.tsx:
--------------------------------------------------------------------------------
1 |
2 | import {PlRate} from "../../../PlRate";
3 | import {designComponent} from "plain-ui-composition";
4 | import {createPlcPropOptions, PlcEmitsOptions} from "../utils/plc.utils";
5 | import {PlcScopeSlotsOptions} from "../utils/plc.scope-slots";
6 | import {useExternalPlc} from "../core/useExternalPlc";
7 |
8 | export default designComponent({
9 | name: 'plc-rate',
10 | props: {
11 | ...createPlcPropOptions({
12 | addEditPadding: true,
13 | }),
14 | },
15 | scopeSlots: PlcScopeSlotsOptions,
16 | emits: PlcEmitsOptions,
17 | setup({props, slots, scopeSlots, event}) {
18 | return useExternalPlc({
19 | props, scopeSlots, slots, event, defaultScopeSlots: {
20 | normal: ({row, plc}) => !plc.props.field ? null : ,
21 | edit: ({row, plc}) => !plc.props.field ? null : ,
22 | }
23 | })
24 | },
25 | })
26 |
--------------------------------------------------------------------------------
/src/packages/PlEmpty/index.tsx:
--------------------------------------------------------------------------------
1 | import {designComponent, useStyles} from "plain-ui-composition";
2 |
3 | // @ts-ignore
4 | import NO_DATA_IMG from './assets/no_data.svg'
5 | import './empty.scss'
6 |
7 | export const PlEmpty = designComponent({
8 | name: 'pl-empty',
9 | props: {
10 | height: {type: String, default: '200px'},
11 | fontSize: {type: String, default: '14px'},
12 | label: {type: String, default: '暂无数据...'},
13 | },
14 | slots: ['labelContent'],
15 | setup({props}) {
16 |
17 | const styles = useStyles(styles => {
18 | styles.fontSize = props.fontSize
19 | })
20 | const imgStyles = useStyles((styles) => {
21 | styles.height = props.height
22 | })
23 |
24 | return () => (
25 |
26 |
27 |
{props.label}
28 |
3 |
测试全局注册的组件
4 |
5 |
6 | (with context) message
7 |
8 |
9 | (without context) message
10 |
11 |
12 |
13 |
14 | (with context) notice
15 |
16 |
17 | (without context) notice
18 |
19 |
20 |
25 | {slots.head.isExist() || props.title && (
26 |
27 | {slots.head(props.title)}
28 |
29 | )}
30 |
31 | {slots.default()}
32 |
33 |