yuyeon 0.0.25 → 0.0.27
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/dist/style.css +1 -1
- package/dist/yuyeon.js +5882 -5489
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/alert/YAlert.mjs +59 -10
- package/lib/components/alert/YAlert.mjs.map +1 -1
- package/lib/components/alert/YAlert.scss +76 -0
- package/lib/components/alert/index.mjs +1 -1
- package/lib/components/alert/index.mjs.map +1 -1
- package/lib/components/button/YButton.mjs +79 -74
- package/lib/components/button/YButton.mjs.map +1 -1
- package/lib/components/button/YButton.scss +1 -1
- package/lib/components/card/YCard.scss +1 -1
- package/lib/components/checkbox/YCheckbox.mjs +6 -6
- package/lib/components/checkbox/YCheckbox.mjs.map +1 -1
- package/lib/components/checkbox/YCheckbox.scss +48 -48
- package/lib/components/checkbox/YInputCheckbox.scss +3 -3
- package/lib/components/dropdown/YDropdown.mjs.map +1 -1
- package/lib/components/field-input/YFieldInput.scss +1 -10
- package/lib/components/index.mjs +2 -0
- package/lib/components/index.mjs.map +1 -1
- package/lib/components/input/YInput.scss +1 -1
- package/lib/components/select/YSelect.mjs.map +1 -1
- package/lib/components/switch/YSwitch.scss +1 -1
- package/lib/components/tab/YTab.mjs +57 -7
- package/lib/components/tab/YTab.mjs.map +1 -1
- package/lib/components/tab/YTab.scss +59 -0
- package/lib/components/tab/YTabs.mjs +50 -8
- package/lib/components/tab/YTabs.mjs.map +1 -1
- package/lib/components/tab/YTabs.scss +10 -0
- package/lib/components/tab/index.mjs +1 -0
- package/lib/components/tab/index.mjs.map +1 -1
- package/lib/components/tab/shared.mjs +2 -0
- package/lib/components/tab/shared.mjs.map +1 -0
- package/lib/components/tab/types.mjs +2 -0
- package/lib/components/tab/types.mjs.map +1 -0
- package/lib/components/table/YTable.scss +3 -2
- package/lib/components/toggle-button/YToggleButton.mjs +2 -0
- package/lib/components/toggle-button/YToggleButton.mjs.map +1 -0
- package/lib/components/toggle-button/index.mjs +2 -0
- package/lib/components/toggle-button/index.mjs.map +1 -0
- package/lib/components/tooltip/YTooltip.mjs +3 -3
- package/lib/components/tooltip/YTooltip.mjs.map +1 -1
- package/lib/components/tree-view/YTreeView.mjs +1 -1
- package/lib/components/tree-view/YTreeView.mjs.map +1 -1
- package/lib/components/tree-view/YTreeViewNode.mjs.map +1 -1
- package/lib/composables/choice.mjs +1 -1
- package/lib/composables/choice.mjs.map +1 -1
- package/lib/composables/communication.mjs +1 -1
- package/lib/composables/communication.mjs.map +1 -1
- package/lib/composables/index.mjs +2 -0
- package/lib/composables/index.mjs.map +1 -0
- package/lib/composables/theme/setting.mjs +16 -2
- package/lib/composables/theme/setting.mjs.map +1 -1
- package/lib/composables/timing.mjs.map +1 -1
- package/lib/composables/vue-router.mjs +32 -0
- package/lib/composables/vue-router.mjs.map +1 -0
- package/lib/styles/_palette.scss +1 -90
- package/lib/styles/_variables.scss +2 -0
- package/lib/styles/base.scss +4 -1
- package/lib/styles/theme/dark.scss +11 -21
- package/lib/styles/theme/light.scss +11 -21
- package/lib/util/index.mjs +16 -0
- package/lib/util/index.mjs.map +1 -0
- package/lib/util/reactivity.mjs +5 -0
- package/lib/util/reactivity.mjs.map +1 -1
- package/lib/util/vue-component.mjs +24 -0
- package/lib/util/vue-component.mjs.map +1 -1
- package/package.json +11 -1
- package/types/components/alert/YAlert.d.ts +18 -0
- package/types/components/alert/index.d.ts +1 -0
- package/types/components/button/YButton.d.ts +96 -42
- package/types/components/checkbox/YInputCheckbox.d.ts +1 -1
- package/types/components/dropdown/YDropdown.d.ts +3 -3
- package/types/components/field-input/YFieldInput.d.ts +26 -44
- package/types/components/index.d.ts +2 -0
- package/types/components/input/YInput.d.ts +16 -16
- package/types/components/layer/YLayer.d.ts +8 -8
- package/types/components/list/YList.d.ts +2 -2
- package/types/components/list/YListItem.d.ts +3 -3
- package/types/components/pagination/YPagination.d.ts +6 -6
- package/types/components/select/YSelect.d.ts +35 -53
- package/types/components/tab/YTab.d.ts +282 -7
- package/types/components/tab/YTabs.d.ts +111 -3
- package/types/components/tab/index.d.ts +1 -0
- package/types/components/tab/shared.d.ts +3 -0
- package/types/components/tab/types.d.ts +4 -0
- package/types/components/table/YDataTable.d.ts +7 -7
- package/types/components/table/YDataTableHead.d.ts +3 -3
- package/types/components/table/YDataTableRow.d.ts +3 -3
- package/types/components/table/YDataTableServer.d.ts +7 -7
- package/types/components/table/composibles/items.d.ts +1 -1
- package/types/components/table/composibles/selection.d.ts +1 -1
- package/types/components/table/composibles/sorting.d.ts +1 -1
- package/types/components/toggle-button/YToggleButton.d.ts +3 -0
- package/types/components/toggle-button/index.d.ts +1 -0
- package/types/components/tree-view/YTreeViewNode.d.ts +6 -6
- package/types/composables/choice.d.ts +107 -0
- package/types/composables/dimension.d.ts +6 -6
- package/types/composables/focus.d.ts +2 -2
- package/types/composables/list-items.d.ts +1 -1
- package/types/composables/theme/index.d.ts +1 -1
- package/types/composables/vue-router.d.ts +43 -0
- package/types/shims.d.ts +7 -1
- package/types/util/collection.d.ts +1 -0
- package/types/util/frame-scheduler.d.ts +7 -0
- package/types/util/index.d.ts +15 -0
- package/types/util/reactivity.d.ts +4 -0
- package/types/util/validation.d.ts +3 -0
- package/types/util/vue-component.d.ts +8 -4
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { createVNode as _createVNode } from "vue";
|
|
2
|
-
import { defineComponent, ref } from 'vue';
|
|
1
|
+
import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
|
|
2
|
+
import { computed, defineComponent, ref } from 'vue';
|
|
3
3
|
import { useRender } from "../../composables/component.mjs";
|
|
4
4
|
import { toKebabCase } from "../../util/string.mjs";
|
|
5
|
+
import { YPlate } from "../plate/index.mjs";
|
|
6
|
+
import "./YAlert.scss";
|
|
5
7
|
const NAME = 'YAlert';
|
|
6
8
|
const KEBAB_NAME = toKebabCase(NAME);
|
|
7
9
|
const YAlertPropOptions = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
semantic: String,
|
|
11
|
+
variation: String,
|
|
12
|
+
color: String,
|
|
13
|
+
textColor: String,
|
|
14
|
+
outlineColor: String
|
|
11
15
|
};
|
|
12
16
|
|
|
13
17
|
/**
|
|
@@ -18,15 +22,60 @@ export const YAlert = defineComponent({
|
|
|
18
22
|
props: {
|
|
19
23
|
...YAlertPropOptions
|
|
20
24
|
},
|
|
21
|
-
setup(
|
|
25
|
+
setup(props, _ref) {
|
|
22
26
|
let {
|
|
23
27
|
slots
|
|
24
28
|
} = _ref;
|
|
25
|
-
const props = defineProps(YAlertPropOptions);
|
|
26
29
|
const el$ = ref();
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
const variations = computed(() => {
|
|
31
|
+
const {
|
|
32
|
+
variation
|
|
33
|
+
} = props;
|
|
34
|
+
if (variation) {
|
|
35
|
+
return variation.split(',').map(value => {
|
|
36
|
+
return value.trim();
|
|
37
|
+
}).filter(v => !!v);
|
|
38
|
+
}
|
|
39
|
+
return [];
|
|
40
|
+
});
|
|
41
|
+
const cssVariables = computed(() => {
|
|
42
|
+
const ret = {};
|
|
43
|
+
if (props.color) {
|
|
44
|
+
ret['--y-alert-surface-color'] = props.color;
|
|
45
|
+
if (variations.value.includes('filled')) {
|
|
46
|
+
ret['--y-alert-surface-opacity'] = 1;
|
|
47
|
+
} else {
|
|
48
|
+
ret['--y-alert-text-color'] = props.color;
|
|
49
|
+
}
|
|
50
|
+
if (props.textColor) {
|
|
51
|
+
ret['--y-alert-text-color'] = props.textColor;
|
|
52
|
+
}
|
|
53
|
+
if (!props.outlineColor && !props.semantic) {
|
|
54
|
+
ret['--y-alert-outline-color'] = props.color;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
if (props.outlineColor) {
|
|
58
|
+
ret['--y-alert-outline-color'] = props.outlineColor;
|
|
59
|
+
}
|
|
60
|
+
return ret;
|
|
61
|
+
});
|
|
62
|
+
useRender(() => _withDirectives(_createVNode("div", {
|
|
63
|
+
"ref": el$,
|
|
64
|
+
"class": [KEBAB_NAME, {
|
|
65
|
+
[`y-alert--${props.semantic}`]: props.semantic,
|
|
66
|
+
'y-alert--filled': variations.value.includes('filled'),
|
|
67
|
+
'y-alert--outlined': variations.value.includes('outlined')
|
|
68
|
+
}],
|
|
69
|
+
"style": cssVariables.value
|
|
70
|
+
}, [_createVNode(YPlate, null, null), slots.leading && _createVNode("div", {
|
|
71
|
+
"class": ['y-alert__leading']
|
|
72
|
+
}, [slots.leading()]), _createVNode("div", {
|
|
73
|
+
"class": ['y-alert__content']
|
|
74
|
+
}, [slots.title && _createVNode("div", {
|
|
75
|
+
"class": ['y-alert__title']
|
|
76
|
+
}, [slots.title()]), slots.default?.()]), slots.trailing && _createVNode("div", {
|
|
77
|
+
"class": ['y-alert__trailing']
|
|
78
|
+
}, [slots.trailing()])]), [[_resolveDirective("theme")]]));
|
|
30
79
|
}
|
|
31
80
|
});
|
|
32
81
|
//# sourceMappingURL=YAlert.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAlert.mjs","names":["defineComponent","ref","useRender","toKebabCase","NAME","KEBAB_NAME","YAlertPropOptions","
|
|
1
|
+
{"version":3,"file":"YAlert.mjs","names":["computed","defineComponent","ref","useRender","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","setup","_ref","slots","el$","variations","split","map","value","trim","filter","v","cssVariables","ret","includes","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { toKebabCase } from '../../util/string';\r\nimport { YPlate } from '../plate';\r\n\r\nimport './YAlert.scss';\r\n\r\nconst NAME = 'YAlert';\r\nconst KEBAB_NAME = toKebabCase(NAME);\r\n\r\nconst YAlertPropOptions = {\r\n semantic: String as PropType<\r\n 'info' | 'warning' | 'success' | 'error' | string\r\n >,\r\n variation: String as PropType<'outlined' | 'filled' | string>,\r\n color: String as PropType<string>,\r\n textColor: String as PropType<string>,\r\n outlineColor: String as PropType<string>,\r\n};\r\n\r\n/**\r\n * # Component\r\n */\r\nexport const YAlert = defineComponent({\r\n name: NAME,\r\n props: {\r\n ...YAlertPropOptions,\r\n },\r\n setup(props, { slots }) {\r\n const el$ = ref<HTMLElement>();\r\n\r\n const variations = computed(() => {\r\n const { variation } = props;\r\n if (variation) {\r\n return variation\r\n .split(',')\r\n .map((value) => {\r\n return value.trim();\r\n })\r\n .filter((v) => !!v);\r\n }\r\n return [];\r\n });\r\n\r\n const cssVariables = computed(() => {\r\n const ret: Record<string, string | number> = {};\r\n\r\n if (props.color) {\r\n ret['--y-alert-surface-color'] = props.color;\r\n if (variations.value.includes('filled')) {\r\n ret['--y-alert-surface-opacity'] = 1;\r\n } else {\r\n ret['--y-alert-text-color'] = props.color;\r\n }\r\n if (props.textColor) {\r\n ret['--y-alert-text-color'] = props.textColor;\r\n }\r\n if (!props.outlineColor && !props.semantic) {\r\n ret['--y-alert-outline-color'] = props.color;\r\n }\r\n }\r\n if (props.outlineColor) {\r\n ret['--y-alert-outline-color'] = props.outlineColor;\r\n }\r\n return ret;\r\n })\r\n\r\n useRender(() => (\r\n <div\r\n ref={el$}\r\n class={[\r\n KEBAB_NAME,\r\n {\r\n [`y-alert--${props.semantic}`]: props.semantic,\r\n 'y-alert--filled': variations.value.includes('filled'),\r\n 'y-alert--outlined': variations.value.includes('outlined'),\r\n },\r\n ]}\r\n style={cssVariables.value}\r\n v-theme\r\n >\r\n <YPlate></YPlate>\r\n {slots.leading && (\r\n <div class={['y-alert__leading']}>{slots.leading()}</div>\r\n )}\r\n <div class={['y-alert__content']}>\r\n {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\r\n {slots.default?.()}\r\n </div>\r\n {slots.trailing && (\r\n <div class={['y-alert__trailing']}>{slots.trailing()}</div>\r\n )}\r\n </div>\r\n ));\r\n },\r\n});\r\n\r\nexport type YAlert = InstanceType<typeof YAlert>;\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
.y-alert {
|
|
2
|
+
--y-alert-text-color: var(--y-theme-base-font);
|
|
3
|
+
--y-alert-surface-color: var(--y-theme-base-font);
|
|
4
|
+
--y-alert-surface-opacity: var(--y-theme-outline-opacity);
|
|
5
|
+
--y-alert-outline-color: var(--y-theme-outline);
|
|
6
|
+
|
|
7
|
+
display: flex;
|
|
8
|
+
position: relative;
|
|
9
|
+
padding: 16px 24px;
|
|
10
|
+
color: var(--y-alert-text-color);
|
|
11
|
+
align-self: flex-start;
|
|
12
|
+
|
|
13
|
+
&__title {
|
|
14
|
+
font-size: 1.1rem;
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
line-height: 1.74;
|
|
17
|
+
padding-bottom: 0.12rem;
|
|
18
|
+
margin-top: -2px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__content {
|
|
22
|
+
flex: 1 1;
|
|
23
|
+
min-width: 0;
|
|
24
|
+
padding-top: 2px;
|
|
25
|
+
position: relative;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__leading, &__trailing {
|
|
29
|
+
flex: 0 0 auto;
|
|
30
|
+
position: relative;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__leading {
|
|
34
|
+
padding-right: 12px;
|
|
35
|
+
margin-top: 0.2rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&__trailing {
|
|
39
|
+
padding-left: 12px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.y-plate {
|
|
43
|
+
&:before {
|
|
44
|
+
content: '';
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 0;
|
|
47
|
+
left: 0;
|
|
48
|
+
bottom: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
background: var(--y-alert-surface-color);
|
|
51
|
+
opacity: var(--y-alert-surface-opacity);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&--outlined {
|
|
56
|
+
.y-plate {
|
|
57
|
+
border: 1px solid var(--y-alert-outline-color);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
$semantics: ('info', 'success', 'warning', 'error');
|
|
62
|
+
|
|
63
|
+
@mixin defineSemantic($name) {
|
|
64
|
+
&--#{$name} {
|
|
65
|
+
--y-alert-text-color: var(--y-theme-#{$name});
|
|
66
|
+
--y-alert-surface-color: var(--y-theme-#{$name});
|
|
67
|
+
--y-alert-outline-color: var(--y-theme-#{$name});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@each $name in $semantics {
|
|
72
|
+
@include defineSemantic($name);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export * from "./YAlert.mjs";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/alert/index.ts"],"sourcesContent":[""],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/alert/index.ts"],"sourcesContent":["export * from './YAlert';\r\n"],"mappings":""}
|
|
@@ -1,17 +1,27 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
|
|
2
|
+
import { computed, defineComponent, mergeProps } from 'vue';
|
|
3
|
+
import { pressChoiceItemPropsOptions, useChoiceItem } from "../../composables/choice.mjs";
|
|
4
|
+
import { useRender } from "../../composables/component.mjs";
|
|
5
|
+
import { pressVueRouterPropsOptions, useLink } from "../../composables/vue-router.mjs";
|
|
2
6
|
import { PlateWave } from "../../directives/plate-wave/index.mjs";
|
|
3
7
|
import { isColorValue } from "../../util/color/index.mjs";
|
|
4
|
-
import {
|
|
8
|
+
import { propsFactory } from "../../util/vue-component.mjs";
|
|
5
9
|
import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
import { Y_TOGGLE_BUTTON_KEY } from "../toggle-button/index.mjs";
|
|
11
|
+
/**
|
|
12
|
+
* Style
|
|
8
13
|
*/
|
|
9
14
|
import "./YButton.scss";
|
|
10
15
|
const NAME = 'y-button';
|
|
11
16
|
export const pressYButtonProps = propsFactory({
|
|
12
17
|
loading: Boolean,
|
|
13
|
-
|
|
14
|
-
type: Boolean
|
|
18
|
+
active: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: undefined
|
|
21
|
+
},
|
|
22
|
+
injectSymbol: {
|
|
23
|
+
type: null,
|
|
24
|
+
default: Y_TOGGLE_BUTTON_KEY
|
|
15
25
|
},
|
|
16
26
|
//
|
|
17
27
|
variation: {
|
|
@@ -31,9 +41,6 @@ export const pressYButtonProps = propsFactory({
|
|
|
31
41
|
type: Boolean,
|
|
32
42
|
default: false
|
|
33
43
|
},
|
|
34
|
-
text: {
|
|
35
|
-
type: Boolean
|
|
36
|
-
},
|
|
37
44
|
//
|
|
38
45
|
color: {
|
|
39
46
|
type: String
|
|
@@ -41,108 +48,106 @@ export const pressYButtonProps = propsFactory({
|
|
|
41
48
|
noWave: {
|
|
42
49
|
type: Boolean,
|
|
43
50
|
default: false
|
|
44
|
-
}
|
|
51
|
+
},
|
|
52
|
+
...pressVueRouterPropsOptions(),
|
|
53
|
+
...pressChoiceItemPropsOptions()
|
|
45
54
|
}, 'YButton');
|
|
46
55
|
export const YButton = defineComponent({
|
|
47
56
|
name: 'YButton',
|
|
48
57
|
directives: {
|
|
49
58
|
PlateWave
|
|
50
59
|
},
|
|
51
|
-
props:
|
|
52
|
-
|
|
60
|
+
props: pressYButtonProps(),
|
|
61
|
+
emits: {
|
|
62
|
+
'choice:selected': choice => true
|
|
53
63
|
},
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
setup(props, _ref) {
|
|
65
|
+
let {
|
|
66
|
+
attrs,
|
|
67
|
+
slots
|
|
68
|
+
} = _ref;
|
|
69
|
+
const choice = useChoiceItem(props, props.injectSymbol, false);
|
|
70
|
+
const link = useLink(props, attrs);
|
|
71
|
+
const isActive = computed(() => {
|
|
72
|
+
if (props.active !== undefined) {
|
|
73
|
+
return props.active;
|
|
74
|
+
}
|
|
75
|
+
if (link.isLink.value) {
|
|
76
|
+
return link.isActive?.value;
|
|
77
|
+
}
|
|
78
|
+
return choice?.isSelected.value;
|
|
79
|
+
});
|
|
80
|
+
const variations = computed(() => {
|
|
56
81
|
const {
|
|
57
82
|
variation
|
|
58
|
-
} =
|
|
59
|
-
if (variation) {
|
|
83
|
+
} = props;
|
|
84
|
+
if (typeof variation === 'string') {
|
|
60
85
|
return variation.split(',').map(value => {
|
|
61
86
|
return value.trim();
|
|
62
87
|
});
|
|
63
88
|
}
|
|
64
89
|
return [];
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
classes() {
|
|
90
|
+
});
|
|
91
|
+
const classes = computed(() => {
|
|
68
92
|
const {
|
|
69
|
-
variations,
|
|
70
93
|
outlined,
|
|
71
94
|
rounded,
|
|
72
95
|
filled,
|
|
73
|
-
text,
|
|
74
96
|
small,
|
|
75
97
|
icon
|
|
76
|
-
} =
|
|
98
|
+
} = props;
|
|
77
99
|
return {
|
|
78
|
-
[`${NAME}--outlined`]: variations.includes('outlined') || outlined,
|
|
79
|
-
[`${NAME}--rounded`]: variations.includes('rounded') || rounded,
|
|
80
|
-
[`${NAME}--filled`]: variations.includes('filled') || filled,
|
|
81
|
-
[`${NAME}--text`]: variations.includes('text')
|
|
82
|
-
[`${NAME}--small`]: variations.includes('small') || small,
|
|
83
|
-
[`${NAME}--icon`]: variations.includes('icon') || icon,
|
|
84
|
-
[`${NAME}--color`]:
|
|
85
|
-
[`${NAME}--loading`]:
|
|
86
|
-
[`${NAME}--disabled`]:
|
|
100
|
+
[`${NAME}--outlined`]: variations.value.includes('outlined') || outlined,
|
|
101
|
+
[`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,
|
|
102
|
+
[`${NAME}--filled`]: variations.value.includes('filled') || filled,
|
|
103
|
+
[`${NAME}--text`]: variations.value.includes('text'),
|
|
104
|
+
[`${NAME}--small`]: variations.value.includes('small') || small,
|
|
105
|
+
[`${NAME}--icon`]: variations.value.includes('icon') || icon,
|
|
106
|
+
[`${NAME}--color`]: props.color,
|
|
107
|
+
[`${NAME}--loading`]: props.loading,
|
|
108
|
+
[`${NAME}--disabled`]: props.disabled,
|
|
109
|
+
[`${NAME}--active`]: isActive.value
|
|
87
110
|
};
|
|
88
|
-
}
|
|
89
|
-
styles() {
|
|
111
|
+
});
|
|
112
|
+
const styles = computed(() => {
|
|
90
113
|
let {
|
|
91
114
|
color
|
|
92
|
-
} =
|
|
115
|
+
} = props;
|
|
93
116
|
let textColor;
|
|
94
117
|
if (color && !isColorValue(color)) {
|
|
95
118
|
color = `var(--y-theme-${color})`;
|
|
96
|
-
textColor = `var(--y-theme-on-${
|
|
119
|
+
textColor = `var(--y-theme-on-${props.color})`;
|
|
97
120
|
}
|
|
98
121
|
return {
|
|
99
122
|
[`--y-button__color`]: color,
|
|
100
123
|
[`--y-button__text-color`]: textColor
|
|
101
124
|
};
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
methods: {
|
|
105
|
-
createContent() {
|
|
106
|
-
const defaultSlot = getSlot(this, 'default');
|
|
107
|
-
const children = [];
|
|
108
|
-
if (this.loading) {
|
|
109
|
-
children.push(h(YSpinnerRing, {
|
|
110
|
-
width: '24',
|
|
111
|
-
height: '24'
|
|
112
|
-
}));
|
|
113
|
-
}
|
|
114
|
-
children.push(defaultSlot);
|
|
115
|
-
return h('span', {
|
|
116
|
-
class: 'y-button__content'
|
|
117
|
-
}, children);
|
|
118
|
-
},
|
|
119
|
-
getClasses() {
|
|
120
|
-
return this.classes;
|
|
121
|
-
},
|
|
125
|
+
});
|
|
126
|
+
|
|
122
127
|
/// Events
|
|
123
|
-
onClick(e) {
|
|
128
|
+
function onClick(e) {
|
|
124
129
|
e.preventDefault();
|
|
125
|
-
if (
|
|
130
|
+
if (props.loading) {
|
|
126
131
|
return;
|
|
127
132
|
}
|
|
133
|
+
link.navigate?.(e);
|
|
134
|
+
choice?.toggle();
|
|
128
135
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
'^disabled': this.disabled ? true : undefined
|
|
145
|
-
}, this.createContent()), [[PlateWave, !noWave && !loading]]);
|
|
136
|
+
useRender(() => {
|
|
137
|
+
return _withDirectives(_createVNode("button", {
|
|
138
|
+
"class": [`${NAME}`, choice?.selectedClass.value, {
|
|
139
|
+
...classes.value
|
|
140
|
+
}],
|
|
141
|
+
"style": styles.value,
|
|
142
|
+
"onClick": onClick,
|
|
143
|
+
"disabled": props.disabled ? true : undefined
|
|
144
|
+
}, [_createVNode("span", {
|
|
145
|
+
"class": ['y-button__content']
|
|
146
|
+
}, [props.loading && _createVNode(YSpinnerRing, mergeProps({
|
|
147
|
+
width: '24',
|
|
148
|
+
height: '24'
|
|
149
|
+
}), null), slots.default?.()]), slots.append?.()]), [[_resolveDirective("plate-wave"), !props.noWave && !props.loading]]);
|
|
150
|
+
});
|
|
146
151
|
}
|
|
147
152
|
});
|
|
148
153
|
//# sourceMappingURL=YButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YButton.mjs","names":["defineComponent","
|
|
1
|
+
{"version":3,"file":"YButton.mjs","names":["computed","defineComponent","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","choice","setup","_ref","attrs","slots","link","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","onClick","e","preventDefault","navigate","toggle","_withDirectives","_createVNode","selectedClass","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, mergeProps } from 'vue';\n\nimport {\n pressChoiceItemPropsOptions,\n useChoiceItem,\n} from '../../composables/choice';\nimport { useRender } from '../../composables/component';\nimport {\n pressVueRouterPropsOptions,\n useLink,\n} from '../../composables/vue-router';\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n {\n loading: Boolean,\n active: { type: Boolean, default: undefined },\n injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\n //\n variation: {\n type: String as PropType<string>,\n },\n small: Boolean,\n icon: Boolean,\n outlined: {\n type: Boolean,\n default: false,\n },\n rounded: {\n type: Boolean,\n default: false,\n },\n filled: {\n type: Boolean,\n default: false,\n },\n //\n color: {\n type: String,\n },\n noWave: {\n type: Boolean,\n default: false,\n },\n ...pressVueRouterPropsOptions(),\n ...pressChoiceItemPropsOptions(),\n },\n 'YButton',\n);\n\nexport const YButton = defineComponent({\n name: 'YButton',\n directives: {\n PlateWave,\n },\n props: pressYButtonProps(),\n emits: {\n 'choice:selected': (choice: { value: boolean }) => true,\n },\n setup(props, { attrs, slots }) {\n const choice = useChoiceItem(props, props.injectSymbol, false);\n const link = useLink(props, attrs);\n\n const isActive = computed(() => {\n if (props.active !== undefined) {\n return props.active;\n }\n if (link.isLink.value) {\n return link.isActive?.value;\n }\n return choice?.isSelected.value;\n });\n\n const variations = computed(() => {\n const { variation } = props;\n if (typeof variation === 'string') {\n return variation.split(',').map((value) => {\n return value.trim();\n });\n }\n return [];\n });\n\n const classes = computed(() => {\n const { outlined, rounded, filled, small, icon } = props;\n return {\n [`${NAME}--outlined`]:\n variations.value.includes('outlined') || outlined,\n [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\n [`${NAME}--filled`]: variations.value.includes('filled') || filled,\n [`${NAME}--text`]: variations.value.includes('text'),\n [`${NAME}--small`]: variations.value.includes('small') || small,\n [`${NAME}--icon`]: variations.value.includes('icon') || icon,\n [`${NAME}--color`]: props.color,\n [`${NAME}--loading`]: props.loading,\n [`${NAME}--disabled`]: props.disabled,\n [`${NAME}--active`]: isActive.value,\n };\n });\n\n const styles = computed(() => {\n let { color } = props;\n let textColor: string | undefined;\n if (color && !isColorValue(color)) {\n color = `var(--y-theme-${color})`;\n textColor = `var(--y-theme-on-${props.color})`;\n }\n return {\n [`--y-button__color`]: color,\n [`--y-button__text-color`]: textColor,\n };\n });\n\n /// Events\n function onClick(e: MouseEvent) {\n e.preventDefault();\n if (props.loading) {\n return;\n }\n link.navigate?.(e);\n choice?.toggle();\n }\n\n useRender(() => {\n return (\n <button\n class={[\n `${NAME}`,\n choice?.selectedClass.value,\n {\n ...classes.value,\n },\n ]}\n style={styles.value}\n onClick={onClick}\n disabled={props.disabled ? true : undefined}\n v-plate-wave={!props.noWave && !props.loading}\n >\n <span class={['y-button__content']}>\n {props.loading && (\n <YSpinnerRing\n {...mergeProps({ width: '24', height: '24' })}\n ></YSpinnerRing>\n )}\n {slots.default?.()}\n </span>\n {slots.append?.()}\n </button>\n );\n });\n },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}
|
|
@@ -94,10 +94,10 @@ export default defineComponent({
|
|
|
94
94
|
});
|
|
95
95
|
useRender(() => {
|
|
96
96
|
return _createVNode("div", {
|
|
97
|
-
"class":
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
},
|
|
97
|
+
"class": [{
|
|
98
|
+
...classes.value
|
|
99
|
+
}]
|
|
100
|
+
}, [slots.leading?.(), _createVNode("div", {
|
|
101
101
|
"class": "y-checkbox__slot"
|
|
102
102
|
}, [_createVNode(YInputCheckbox, {
|
|
103
103
|
"onClick": function (e) {
|
|
@@ -109,7 +109,7 @@ export default defineComponent({
|
|
|
109
109
|
},
|
|
110
110
|
"onFocus": onFocus,
|
|
111
111
|
"onBlur": onBlur,
|
|
112
|
-
"id":
|
|
112
|
+
"id": counterId,
|
|
113
113
|
"value": innerValue.value,
|
|
114
114
|
"icon": computedIcon.value,
|
|
115
115
|
"color": props.color,
|
|
@@ -128,7 +128,7 @@ export default defineComponent({
|
|
|
128
128
|
"onClick": withModifiers(() => {}, ['stop']),
|
|
129
129
|
"class": "y-checkbox__label",
|
|
130
130
|
"for": inputId
|
|
131
|
-
}, [slots.label ? slots.label?.() : props.label])]), slots.
|
|
131
|
+
}, [slots.label ? slots.label?.() : props.label])]), slots.trailing?.()]);
|
|
132
132
|
});
|
|
133
133
|
return {
|
|
134
134
|
innerValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","
|
|
1
|
+
{"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","leading","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","trailing","created","watch","handler","immediate"],"sources":["../../../src/components/checkbox/YCheckbox.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref, withModifiers } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { getUid } from '../../util/vue-component';\r\n\r\nimport './YCheckbox.scss';\r\nimport YInputCheckbox from './YInputCheckbox';\r\n\r\nexport default defineComponent({\r\n name: 'YCheckbox',\r\n components: { YInputCheckbox },\r\n model: {\r\n prop: 'inputValue',\r\n event: 'change',\r\n },\r\n emits: ['focus', 'blur', 'change'],\r\n props: {\r\n inputValue: [Boolean, Array] as PropType<boolean | any[]>,\r\n value: [String, Number, Object] as PropType<any>,\r\n label: String as PropType<string>,\r\n reverse: Boolean as PropType<boolean>,\r\n icon: {\r\n type: [Object, String] as PropType<\r\n { checked?: string; unchecked?: string } | string\r\n >,\r\n },\r\n color: {\r\n type: String as PropType<string>,\r\n default: () => 'primary',\r\n },\r\n disabled: Boolean as PropType<boolean>,\r\n readonly: Boolean as PropType<boolean>,\r\n },\r\n setup(props, { emit, slots }) {\r\n const focused = ref(false);\r\n const innerValue = ref(false);\r\n const counterId = (getUid() ?? '').toString();\r\n const inputId = `input-${counterId}`;\r\n\r\n function onFocus(e: FocusEvent) {\r\n focused.value = true;\r\n emit('focus', e);\r\n }\r\n\r\n function onBlur(e: FocusEvent) {\r\n focused.value = false;\r\n emit('blur', e);\r\n }\r\n\r\n function onClick(e: Event, ...args: any[]) {\r\n if (props.disabled || props.readonly) return;\r\n innerValue.value = !innerValue.value;\r\n emit('change', innerValue.value, e);\r\n }\r\n\r\n function inputByValue() {\r\n if (Array.isArray(props.inputValue)) {\r\n const found = props.inputValue?.find((inp: any) => inp === props.value);\r\n\r\n if (found !== undefined) {\r\n innerValue.value = true;\r\n } else {\r\n innerValue.value = false;\r\n }\r\n } else if (typeof props.inputValue === 'boolean') {\r\n innerValue.value = props.inputValue;\r\n }\r\n }\r\n\r\n const classes = computed<Record<string, boolean>>(() => {\r\n const { reverse, disabled, readonly } = props;\r\n return {\r\n 'y-checkbox': true,\r\n 'y-checkbox--reverse': !!reverse,\r\n 'y-checkbox--focused': focused.value,\r\n 'y-checkbox--disabled': !!disabled,\r\n 'y-checkbox--readonly': !!readonly,\r\n };\r\n });\r\n\r\n const computedIcon = computed<string | undefined>(() => {\r\n if (typeof props.icon === 'string') {\r\n return props.icon;\r\n }\r\n return undefined;\r\n });\r\n\r\n const isMultipleInput = computed<boolean>(() => {\r\n return Array.isArray(props.inputValue);\r\n });\r\n\r\n const multipleInputIndex = computed<number>(() => {\r\n if (!isMultipleInput.value) {\r\n return -1;\r\n }\r\n return (props.inputValue as any[]).findIndex(\r\n (v: any) => v === props.value,\r\n );\r\n });\r\n\r\n useRender(() => {\r\n return (\r\n <div class={[{...classes.value}]}>\r\n {slots.leading?.()}\r\n <div class=\"y-checkbox__slot\">\r\n <YInputCheckbox\r\n onClick={(e: Event, ...args: any[]) => {\r\n e.stopPropagation();\r\n onClick(e, ...args);\r\n }}\r\n onFocus={onFocus}\r\n onBlur={onBlur}\r\n id={counterId}\r\n value={innerValue.value}\r\n icon={computedIcon.value}\r\n color={props.color}\r\n disabled={props.disabled}\r\n readonly={props.readonly}\r\n >\r\n {slots.icon && {\r\n icon: (...args: any[]) => slots.icon?.(...args),\r\n }}\r\n </YInputCheckbox>\r\n <label\r\n onClick={withModifiers(() => {}, ['stop'])}\r\n class=\"y-checkbox__label\"\r\n for={inputId}\r\n >\r\n {slots.label ? slots.label?.() : props.label}\r\n </label>\r\n </div>\r\n {slots.trailing?.()}\r\n </div>\r\n );\r\n });\r\n\r\n return {\r\n innerValue,\r\n inputByValue,\r\n };\r\n },\r\n created() {\r\n if (Array.isArray(this.inputValue)) {\r\n this.inputByValue();\r\n } else {\r\n this.innerValue = !!this.inputValue;\r\n }\r\n },\r\n watch: {\r\n inputValue: {\r\n handler() {\r\n this.inputByValue();\r\n },\r\n immediate: true,\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
|