@bobbykim/manguito-theme 0.17.0 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/README.md +3 -2
- package/dist/core.cjs +2 -0
- package/dist/core.d.ts +676 -0
- package/dist/core.js +2088 -0
- package/dist/mcl-theme.cjs +1 -0
- package/dist/mcl-theme.d.ts +12 -0
- package/dist/mcl-theme.js +608 -0
- package/package.json +28 -7
- package/CHANGELOG.md +0 -137
- package/index.d.ts +0 -13
- package/index.js +0 -18
- package/index.ts +0 -29
- package/lib/collapse/Collapse.vue +0 -126
- package/lib/collapse/Collapse.vue.d.ts +0 -55
- package/lib/composables/index.d.ts +0 -1
- package/lib/composables/index.js +0 -1
- package/lib/composables/index.ts +0 -1
- package/lib/composables/observeVisible.d.ts +0 -1
- package/lib/composables/observeVisible.js +0 -24
- package/lib/composables/observeVisible.ts +0 -24
- package/lib/directives/index.d.ts +0 -6
- package/lib/directives/index.js +0 -186
- package/lib/directives/index.ts +0 -211
- package/lib/directives/index.types.d.ts +0 -14
- package/lib/directives/index.types.js +0 -1
- package/lib/directives/index.types.ts +0 -15
- package/lib/dropdown/DropdownContainer.vue +0 -50
- package/lib/dropdown/DropdownContainer.vue.d.ts +0 -19
- package/lib/dropdown/DropdownContent.vue +0 -69
- package/lib/dropdown/DropdownContent.vue.d.ts +0 -42
- package/lib/dropdown/index.types.d.ts +0 -4
- package/lib/dropdown/index.types.js +0 -1
- package/lib/dropdown/index.types.ts +0 -4
- package/lib/header/HeaderHorizontal.vue +0 -158
- package/lib/header/HeaderHorizontal.vue.d.ts +0 -84
- package/lib/header/HeaderVertical.vue +0 -116
- package/lib/header/HeaderVertical.vue.d.ts +0 -70
- package/lib/header/NavDrawer.vue +0 -121
- package/lib/header/NavDrawer.vue.d.ts +0 -43
- package/lib/header/index.types.d.ts +0 -1
- package/lib/header/index.types.js +0 -1
- package/lib/header/index.types.ts +0 -1
- package/lib/modal/Modal.vue +0 -227
- package/lib/modal/Modal.vue.d.ts +0 -108
- package/lib/sidebar/Sidebar.vue +0 -256
- package/lib/sidebar/Sidebar.vue.d.ts +0 -113
- package/lib/theme/generateClass.d.ts +0 -2
- package/lib/theme/generateClass.js +0 -18
- package/lib/theme/generateClass.ts +0 -25
- package/lib/theme/index.d.ts +0 -95
- package/lib/theme/index.js +0 -642
- package/lib/theme/index.ts +0 -676
- package/lib/theme/theme.d.ts +0 -89
- package/lib/theme/theme.js +0 -851
- package/lib/theme/theme.ts +0 -893
- package/lib/theme/theme.types.d.ts +0 -21
- package/lib/theme/theme.types.js +0 -1
- package/lib/theme/theme.types.ts +0 -68
- package/lib/tooltip/index.d.ts +0 -62
- package/lib/tooltip/index.js +0 -71
- package/lib/tooltip/index.ts +0 -76
- package/themeVariables.cjs +0 -607
- package/tsconfig.json +0 -5
- package/tsconfig.ts.json +0 -9
- package/tsconfig.vue.json +0 -9
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export type ColorPalette = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light-1' | 'light-2' | 'light-3' | 'light-4' | 'dark-1' | 'dark-2' | 'dark-3' | 'dark-4' | 'black' | 'white' | 'transparent';
|
|
2
|
-
export type SpacingLevel = '0' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
3
|
-
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
|
|
4
|
-
export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
-
export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
6
|
-
export type FontWeight = 'light' | 'normal' | 'bold';
|
|
7
|
-
export type Alignment = 'left' | 'center' | 'right';
|
|
8
|
-
export type VerticalAlignment = 'top' | 'center' | 'bottom';
|
|
9
|
-
export type CtaTarget = '_self' | '_blank';
|
|
10
|
-
export type Direction = 'left' | 'right' | 'top' | 'bottom';
|
|
11
|
-
export type DirectionY = 'top' | 'bottom';
|
|
12
|
-
export type DirectionX = 'left' | 'right';
|
|
13
|
-
type _RangeArray<T extends number, R extends unknown[] = []> = R['length'] extends T ? R : _RangeArray<T, [...R, 1]>;
|
|
14
|
-
type IntRange<T extends number[], E extends number, R extends number = never> = T['length'] extends E ? R | E : IntRange<[...T, 1], E, R | T['length']>;
|
|
15
|
-
export type Range<T extends number, R extends number> = IntRange<_RangeArray<T>, R>;
|
|
16
|
-
export type ButtonSize = 'small' | 'medium' | 'large';
|
|
17
|
-
export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
|
|
18
|
-
export type ColumnWidth = 25 | 50 | 75 | 100;
|
|
19
|
-
export type CrossOrigin = 'use-credentials' | 'anonymous';
|
|
20
|
-
export type InputType = 'text' | 'email' | 'password';
|
|
21
|
-
export {};
|
package/lib/theme/theme.types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/lib/theme/theme.types.ts
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
// Colors for bg-color and font-color
|
|
2
|
-
export type ColorPalette =
|
|
3
|
-
| 'primary'
|
|
4
|
-
| 'secondary'
|
|
5
|
-
| 'success'
|
|
6
|
-
| 'info'
|
|
7
|
-
| 'warning'
|
|
8
|
-
| 'danger'
|
|
9
|
-
| 'light-1'
|
|
10
|
-
| 'light-2'
|
|
11
|
-
| 'light-3'
|
|
12
|
-
| 'light-4'
|
|
13
|
-
| 'dark-1'
|
|
14
|
-
| 'dark-2'
|
|
15
|
-
| 'dark-3'
|
|
16
|
-
| 'dark-4'
|
|
17
|
-
| 'black'
|
|
18
|
-
| 'white'
|
|
19
|
-
| 'transparent'
|
|
20
|
-
// Available spacings
|
|
21
|
-
export type SpacingLevel =
|
|
22
|
-
| '0'
|
|
23
|
-
| '3xs'
|
|
24
|
-
| '2xs'
|
|
25
|
-
| 'xs'
|
|
26
|
-
| 'sm'
|
|
27
|
-
| 'md'
|
|
28
|
-
| 'lg'
|
|
29
|
-
| 'xl'
|
|
30
|
-
| '2xl'
|
|
31
|
-
| '3xl'
|
|
32
|
-
// Available heading levels
|
|
33
|
-
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4'
|
|
34
|
-
// Available heading sizes
|
|
35
|
-
export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl'
|
|
36
|
-
// Available body text sizes
|
|
37
|
-
export type BodyText = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
38
|
-
// Font weight
|
|
39
|
-
export type FontWeight = 'light' | 'normal' | 'bold'
|
|
40
|
-
// alignment
|
|
41
|
-
export type Alignment = 'left' | 'center' | 'right'
|
|
42
|
-
export type VerticalAlignment = 'top' | 'center' | 'bottom'
|
|
43
|
-
// link targets
|
|
44
|
-
export type CtaTarget = '_self' | '_blank'
|
|
45
|
-
// Highlight positions
|
|
46
|
-
export type Direction = 'left' | 'right' | 'top' | 'bottom'
|
|
47
|
-
export type DirectionY = 'top' | 'bottom'
|
|
48
|
-
export type DirectionX = 'left' | 'right'
|
|
49
|
-
// available ranges
|
|
50
|
-
type _RangeArray<
|
|
51
|
-
T extends number,
|
|
52
|
-
R extends unknown[] = []
|
|
53
|
-
> = R['length'] extends T ? R : _RangeArray<T, [...R, 1]>
|
|
54
|
-
type IntRange<
|
|
55
|
-
T extends number[],
|
|
56
|
-
E extends number,
|
|
57
|
-
R extends number = never
|
|
58
|
-
> = T['length'] extends E ? R | E : IntRange<[...T, 1], E, R | T['length']>
|
|
59
|
-
export type Range<T extends number, R extends number> = IntRange<
|
|
60
|
-
_RangeArray<T>,
|
|
61
|
-
R
|
|
62
|
-
>
|
|
63
|
-
|
|
64
|
-
export type ButtonSize = 'small' | 'medium' | 'large'
|
|
65
|
-
export type OpacityRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100
|
|
66
|
-
export type ColumnWidth = 25 | 50 | 75 | 100
|
|
67
|
-
export type CrossOrigin = 'use-credentials' | 'anonymous'
|
|
68
|
-
export type InputType = 'text' | 'email' | 'password'
|
package/lib/tooltip/index.d.ts
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import type { PropType } from 'vue';
|
|
2
|
-
import type { Direction, ColorPalette } from '../../index.js';
|
|
3
|
-
declare const _default: import("vue").DefineComponent<{
|
|
4
|
-
direction: {
|
|
5
|
-
type: PropType<Direction>;
|
|
6
|
-
default: string;
|
|
7
|
-
};
|
|
8
|
-
color: {
|
|
9
|
-
type: PropType<ColorPalette>;
|
|
10
|
-
default: string;
|
|
11
|
-
};
|
|
12
|
-
textColor: {
|
|
13
|
-
type: PropType<ColorPalette>;
|
|
14
|
-
default: string;
|
|
15
|
-
};
|
|
16
|
-
width: {
|
|
17
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
18
|
-
default: number;
|
|
19
|
-
};
|
|
20
|
-
customClass: {
|
|
21
|
-
type: StringConstructor;
|
|
22
|
-
default: string;
|
|
23
|
-
};
|
|
24
|
-
title: {
|
|
25
|
-
type: StringConstructor;
|
|
26
|
-
required: true;
|
|
27
|
-
};
|
|
28
|
-
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
29
|
-
[key: string]: any;
|
|
30
|
-
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
31
|
-
direction: {
|
|
32
|
-
type: PropType<Direction>;
|
|
33
|
-
default: string;
|
|
34
|
-
};
|
|
35
|
-
color: {
|
|
36
|
-
type: PropType<ColorPalette>;
|
|
37
|
-
default: string;
|
|
38
|
-
};
|
|
39
|
-
textColor: {
|
|
40
|
-
type: PropType<ColorPalette>;
|
|
41
|
-
default: string;
|
|
42
|
-
};
|
|
43
|
-
width: {
|
|
44
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
45
|
-
default: number;
|
|
46
|
-
};
|
|
47
|
-
customClass: {
|
|
48
|
-
type: StringConstructor;
|
|
49
|
-
default: string;
|
|
50
|
-
};
|
|
51
|
-
title: {
|
|
52
|
-
type: StringConstructor;
|
|
53
|
-
required: true;
|
|
54
|
-
};
|
|
55
|
-
}>>, {
|
|
56
|
-
direction: Direction;
|
|
57
|
-
color: ColorPalette;
|
|
58
|
-
textColor: ColorPalette;
|
|
59
|
-
width: string | number;
|
|
60
|
-
customClass: string;
|
|
61
|
-
}, {}>;
|
|
62
|
-
export default _default;
|
package/lib/tooltip/index.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { defineComponent, h, computed } from 'vue';
|
|
2
|
-
import generateClass from '../../index.js';
|
|
3
|
-
export default defineComponent({
|
|
4
|
-
props: {
|
|
5
|
-
direction: {
|
|
6
|
-
type: String,
|
|
7
|
-
default: 'right',
|
|
8
|
-
},
|
|
9
|
-
color: {
|
|
10
|
-
type: String,
|
|
11
|
-
default: 'dark-3',
|
|
12
|
-
},
|
|
13
|
-
textColor: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: 'white',
|
|
16
|
-
},
|
|
17
|
-
width: {
|
|
18
|
-
type: [Number, String],
|
|
19
|
-
default: 80,
|
|
20
|
-
},
|
|
21
|
-
customClass: {
|
|
22
|
-
type: String,
|
|
23
|
-
default: '',
|
|
24
|
-
},
|
|
25
|
-
title: {
|
|
26
|
-
type: String,
|
|
27
|
-
required: true,
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
setup(props) {
|
|
31
|
-
const defaultClassList = 'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip';
|
|
32
|
-
const colorClass = computed(() => {
|
|
33
|
-
/**
|
|
34
|
-
* @param {ColorPalette} color - props
|
|
35
|
-
* @param {ColorPalette} textolor - props
|
|
36
|
-
*/
|
|
37
|
-
const { color, textColor } = props;
|
|
38
|
-
const classArray = [
|
|
39
|
-
generateClass('BGCOLOR', color),
|
|
40
|
-
generateClass('TEXTCOLOR', textColor),
|
|
41
|
-
];
|
|
42
|
-
return classArray.join(' ');
|
|
43
|
-
});
|
|
44
|
-
const tooltipWidth = computed(() => {
|
|
45
|
-
return { width: `${props.width}px` };
|
|
46
|
-
});
|
|
47
|
-
const tooltipDirection = computed(() => {
|
|
48
|
-
switch (props.direction) {
|
|
49
|
-
case 'left':
|
|
50
|
-
return 'tooltip-left';
|
|
51
|
-
case 'top':
|
|
52
|
-
return 'tooltip-top';
|
|
53
|
-
case 'bottom':
|
|
54
|
-
return 'tooltip-bottom';
|
|
55
|
-
default:
|
|
56
|
-
return 'tooltip-right';
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
return () => h('div', {
|
|
60
|
-
class: [
|
|
61
|
-
defaultClassList,
|
|
62
|
-
props.customClass,
|
|
63
|
-
tooltipDirection.value,
|
|
64
|
-
colorClass.value,
|
|
65
|
-
],
|
|
66
|
-
role: 'tooltip',
|
|
67
|
-
innerHTML: props.title,
|
|
68
|
-
style: [tooltipWidth.value],
|
|
69
|
-
});
|
|
70
|
-
},
|
|
71
|
-
});
|
package/lib/tooltip/index.ts
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { defineComponent, h, computed } from 'vue'
|
|
2
|
-
import type { PropType } from 'vue'
|
|
3
|
-
import type { Direction, ColorPalette } from '../../index.js'
|
|
4
|
-
import generateClass from '../../index.js'
|
|
5
|
-
|
|
6
|
-
export default defineComponent({
|
|
7
|
-
props: {
|
|
8
|
-
direction: {
|
|
9
|
-
type: String as PropType<Direction>,
|
|
10
|
-
default: 'right',
|
|
11
|
-
},
|
|
12
|
-
color: {
|
|
13
|
-
type: String as PropType<ColorPalette>,
|
|
14
|
-
default: 'dark-3',
|
|
15
|
-
},
|
|
16
|
-
textColor: {
|
|
17
|
-
type: String as PropType<ColorPalette>,
|
|
18
|
-
default: 'white',
|
|
19
|
-
},
|
|
20
|
-
width: {
|
|
21
|
-
type: [Number, String],
|
|
22
|
-
default: 80,
|
|
23
|
-
},
|
|
24
|
-
customClass: {
|
|
25
|
-
type: String,
|
|
26
|
-
default: '',
|
|
27
|
-
},
|
|
28
|
-
title: {
|
|
29
|
-
type: String,
|
|
30
|
-
required: true,
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
setup(props) {
|
|
34
|
-
const defaultClassList: string =
|
|
35
|
-
'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip'
|
|
36
|
-
const colorClass = computed<string>(() => {
|
|
37
|
-
/**
|
|
38
|
-
* @param {ColorPalette} color - props
|
|
39
|
-
* @param {ColorPalette} textolor - props
|
|
40
|
-
*/
|
|
41
|
-
const { color, textColor } = props
|
|
42
|
-
const classArray: string[] = [
|
|
43
|
-
generateClass('BGCOLOR', color),
|
|
44
|
-
generateClass('TEXTCOLOR', textColor),
|
|
45
|
-
]
|
|
46
|
-
return classArray.join(' ')
|
|
47
|
-
})
|
|
48
|
-
const tooltipWidth = computed(() => {
|
|
49
|
-
return { width: `${props.width}px` }
|
|
50
|
-
})
|
|
51
|
-
const tooltipDirection = computed<string>(() => {
|
|
52
|
-
switch (props.direction) {
|
|
53
|
-
case 'left':
|
|
54
|
-
return 'tooltip-left'
|
|
55
|
-
case 'top':
|
|
56
|
-
return 'tooltip-top'
|
|
57
|
-
case 'bottom':
|
|
58
|
-
return 'tooltip-bottom'
|
|
59
|
-
default:
|
|
60
|
-
return 'tooltip-right'
|
|
61
|
-
}
|
|
62
|
-
})
|
|
63
|
-
return () =>
|
|
64
|
-
h('div', {
|
|
65
|
-
class: [
|
|
66
|
-
defaultClassList,
|
|
67
|
-
props.customClass,
|
|
68
|
-
tooltipDirection.value,
|
|
69
|
-
colorClass.value,
|
|
70
|
-
],
|
|
71
|
-
role: 'tooltip',
|
|
72
|
-
innerHTML: props.title,
|
|
73
|
-
style: [tooltipWidth.value],
|
|
74
|
-
})
|
|
75
|
-
},
|
|
76
|
-
})
|