yuyeon 0.2.1 → 0.2.2-rc.1
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/yuyeon.js +1793 -1783
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/alert/YAlert.mjs +2 -2
- package/lib/components/alert/YAlert.mjs.map +1 -1
- package/lib/components/alert/YAlert.scss +75 -75
- package/lib/components/app/YApp.mjs +2 -2
- package/lib/components/app/YApp.mjs.map +1 -1
- package/lib/components/badge/YBadge.mjs.map +1 -1
- package/lib/components/bench/YBench.mjs +2 -2
- package/lib/components/bench/YBench.mjs.map +1 -1
- package/lib/components/button/YButton.mjs +2 -2
- package/lib/components/button/YButton.mjs.map +1 -1
- package/lib/components/button/YButton.scss +128 -128
- package/lib/components/card/YCard.mjs.map +1 -1
- package/lib/components/card/YCard.scss +45 -45
- package/lib/components/card/YCardBody.mjs.map +1 -1
- package/lib/components/card/YCardFooter.mjs.map +1 -1
- package/lib/components/card/YCardHeader.mjs.map +1 -1
- package/lib/components/checkbox/YCheckbox.mjs.map +1 -1
- package/lib/components/checkbox/YInputCheckbox.mjs.map +1 -1
- package/lib/components/checkbox/YInputCheckbox.scss +84 -84
- package/lib/components/checkbox/index.mjs.map +1 -1
- package/lib/components/chip/YChip.mjs.map +1 -1
- package/lib/components/chip/YChip.scss +36 -36
- package/lib/components/date-picker/YDateCalendar.mjs.map +1 -1
- package/lib/components/date-picker/YDateCalendar.scss +84 -84
- package/lib/components/date-picker/YDatePicker.mjs.map +1 -1
- package/lib/components/date-picker/YDatePickerControl.mjs.map +1 -1
- package/lib/components/date-picker/YMonthPicker.mjs.map +1 -1
- package/lib/components/date-picker/YYearPicker.mjs.map +1 -1
- package/lib/components/dialog/YDialog.mjs.map +1 -1
- package/lib/components/dialog/index.mjs.map +1 -1
- package/lib/components/divider/YDivider.mjs.map +1 -1
- package/lib/components/divider/YDivider.scss +2 -2
- package/lib/components/dropdown/YDropdown.mjs.map +1 -1
- package/lib/components/dropdown/YDropdown.scss +27 -27
- package/lib/components/field-input/YFieldInput.mjs.map +1 -1
- package/lib/components/field-input/index.mjs.map +1 -1
- package/lib/components/form/YForm.mjs.map +1 -1
- package/lib/components/hover/YHover.mjs.map +1 -1
- package/lib/components/icon/YIcon.mjs.map +1 -1
- package/lib/components/icon/YIcon.scss +18 -18
- package/lib/components/icons/YIconCheckbox.mjs.map +1 -1
- package/lib/components/icons/YIconClear.mjs.map +1 -1
- package/lib/components/icons/YIconDropdown.mjs.map +1 -1
- package/lib/components/icons/YIconExpand.mjs.map +1 -1
- package/lib/components/icons/YIconPageControl.mjs.map +1 -1
- package/lib/components/icons/YIconSort.mjs.map +1 -1
- package/lib/components/icons/YIconSort.scss +24 -24
- package/lib/components/icons/index.mjs.map +1 -1
- package/lib/components/img/YImg.mjs +4 -4
- package/lib/components/img/YImg.mjs.map +1 -1
- package/lib/components/input/YInput.mjs.map +1 -1
- package/lib/components/input/YInput.scss +258 -258
- package/lib/components/ip-field/YIpv4Field.mjs.map +1 -1
- package/lib/components/layer/YLayer.mjs.map +1 -1
- package/lib/components/layer/active-stack.mjs.map +1 -1
- package/lib/components/layer/base.mjs.map +1 -1
- package/lib/components/layer/content.mjs.map +1 -1
- package/lib/components/layer/scroll-strategies.mjs.map +1 -1
- package/lib/components/list/YList.mjs.map +1 -1
- package/lib/components/list/YListItem.mjs.map +1 -1
- package/lib/components/loading/YSpinnerRing.mjs.map +1 -1
- package/lib/components/menu/YMenu.mjs +2 -2
- package/lib/components/menu/YMenu.mjs.map +1 -1
- package/lib/components/menu/YMenu.scss +25 -25
- package/lib/components/navigation/YNavigation.mjs.map +1 -1
- package/lib/components/pagination/YPagination.mjs.map +1 -1
- package/lib/components/pagination/YPagination.scss +52 -52
- package/lib/components/panel/YDividePanel.mjs.map +1 -1
- package/lib/components/plate/YPlate.mjs +2 -2
- package/lib/components/plate/YPlate.mjs.map +1 -1
- package/lib/components/progress-bar/YProgressBar.mjs.map +1 -1
- package/lib/components/progress-bar/YProgressBar.scss +120 -120
- package/lib/components/select/YSelect.mjs.map +1 -1
- package/lib/components/slider/YSlider.mjs.map +1 -1
- package/lib/components/snackbar/YSnackbar.mjs +5 -5
- package/lib/components/snackbar/YSnackbar.mjs.map +1 -1
- package/lib/components/switch/YSwitch.mjs.map +1 -1
- package/lib/components/switch/YSwitch.scss +204 -204
- package/lib/components/tab/YTab.mjs.map +1 -1
- package/lib/components/tab/YTab.scss +73 -73
- package/lib/components/tab/YTabs.mjs.map +1 -1
- package/lib/components/tab/YTabs.scss +8 -8
- package/lib/components/tab/index.mjs.map +1 -1
- package/lib/components/tab/types.mjs.map +1 -1
- package/lib/components/table/YDataTable.mjs.map +1 -1
- package/lib/components/table/YDataTableBody.mjs.map +1 -1
- package/lib/components/table/YDataTableCell.mjs.map +1 -1
- package/lib/components/table/YDataTableControl.mjs.map +1 -1
- package/lib/components/table/YDataTableHead.mjs.map +1 -1
- package/lib/components/table/YDataTableLayer.mjs.map +1 -1
- package/lib/components/table/YDataTableRow.mjs.map +1 -1
- package/lib/components/table/YDataTableServer.mjs.map +1 -1
- package/lib/components/table/YTable.mjs.map +1 -1
- package/lib/components/table/YTable.scss +157 -157
- package/lib/components/table/composibles/header.mjs.map +1 -1
- package/lib/components/table/composibles/items.mjs.map +1 -1
- package/lib/components/table/composibles/options.mjs.map +1 -1
- package/lib/components/table/composibles/pagination.mjs.map +1 -1
- package/lib/components/table/composibles/selection.mjs.map +1 -1
- package/lib/components/table/composibles/sorted-items.mjs.map +1 -1
- package/lib/components/table/composibles/sorting.mjs.map +1 -1
- package/lib/components/table/types/header.mjs.map +1 -1
- package/lib/components/table/types/index.mjs.map +1 -1
- package/lib/components/table/types/row.mjs.map +1 -1
- package/lib/components/text-ellipsis/YTextEllipsis.mjs.map +1 -1
- package/lib/components/text-ellipsis/YTextEllipsis.scss +43 -43
- package/lib/components/text-highlighter/YTextHighlighter.mjs.map +1 -1
- package/lib/components/text-interpolation/YTi.mjs.map +1 -1
- package/lib/components/textarea/YTextarea.mjs.map +1 -1
- package/lib/components/toggle-button/YToggleButton.mjs.map +1 -1
- package/lib/components/tooltip/YTooltip.mjs +2 -2
- package/lib/components/tooltip/YTooltip.mjs.map +1 -1
- package/lib/components/transitions/expand-transition.mjs +27 -6
- package/lib/components/transitions/expand-transition.mjs.map +1 -1
- package/lib/components/tree-view/YTreeView.mjs.map +1 -1
- package/lib/components/tree-view/YTreeView.scss +81 -81
- package/lib/components/tree-view/YTreeViewNode.mjs.map +1 -1
- package/lib/components/tree-view/types.mjs.map +1 -1
- package/lib/components/tree-view/util.mjs.map +1 -1
- package/lib/composables/choice.mjs.map +1 -1
- package/lib/composables/communication.mjs.map +1 -1
- package/lib/composables/component.mjs.map +1 -1
- package/lib/composables/coordinate/arrangement.mjs.map +1 -1
- package/lib/composables/coordinate/levitation.mjs +2 -2
- package/lib/composables/coordinate/levitation.mjs.map +1 -1
- package/lib/composables/coordinate/utils/point.mjs.map +1 -1
- package/lib/composables/date/factory.mjs.map +1 -1
- package/lib/composables/date/index.mjs.map +1 -1
- package/lib/composables/date/setting.mjs.map +1 -1
- package/lib/composables/date/types.mjs.map +1 -1
- package/lib/composables/defaults/index.mjs.map +1 -1
- package/lib/composables/defaults/share.mjs.map +1 -1
- package/lib/composables/dimension.mjs.map +1 -1
- package/lib/composables/focus.mjs.map +1 -1
- package/lib/composables/form.mjs.map +1 -1
- package/lib/composables/i18n/index.mjs.map +1 -1
- package/lib/composables/icon.mjs.map +1 -1
- package/lib/composables/layer-group.mjs.map +1 -1
- package/lib/composables/layout.mjs.map +1 -1
- package/lib/composables/list-items.mjs.map +1 -1
- package/lib/composables/progress.mjs.map +1 -1
- package/lib/composables/ref.mjs.map +1 -1
- package/lib/composables/resize-observer.mjs.map +1 -1
- package/lib/composables/scope.mjs.map +1 -1
- package/lib/composables/theme/factory.mjs.map +1 -1
- package/lib/composables/theme/index.mjs.map +1 -1
- package/lib/composables/theme/setting.mjs.map +1 -1
- package/lib/composables/timing.mjs.map +1 -1
- package/lib/composables/transition.mjs.map +1 -1
- package/lib/composables/validation.mjs.map +1 -1
- package/lib/composables/vue-router.mjs.map +1 -1
- package/lib/index.mjs.map +1 -1
- package/lib/util/anchor.mjs.map +1 -1
- package/lib/util/component/component.mjs.map +1 -1
- package/lib/util/component/index.mjs.map +1 -1
- package/lib/util/component/inject-self.mjs.map +1 -1
- package/lib/util/component/props.mjs.map +1 -1
- package/lib/util/date/index.mjs.map +1 -1
- package/lib/util/reactivity.mjs +3 -3
- package/lib/util/reactivity.mjs.map +1 -1
- package/lib/util/rect.mjs.map +1 -1
- package/lib/util/validation.mjs.map +1 -1
- package/package.json +1 -1
- package/types/components/transitions/expand-transition.d.ts +3 -0
- package/types/components/transitions/index.d.ts +6 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAlert.mjs","names":["computed","ref","useRender","defineComponent","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","slots","Object","setup","_ref","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 { type PropType, type SlotsType, computed, ref } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent } from '@/util/component';\nimport { toKebabCase } from '@/util/string';\n\nimport { YPlate } from '../plate';\n\nimport './YAlert.scss';\n\nconst NAME = 'YAlert';\nconst KEBAB_NAME = toKebabCase(NAME);\n\nconst YAlertPropOptions = {\n semantic: String as PropType<\n 'info' | 'warning' | 'success' | 'error' | string\n >,\n variation: String as PropType<'outlined' | 'filled' | string>,\n color: String as PropType<string>,\n textColor: String as PropType<string>,\n outlineColor: String as PropType<string>,\n};\n\n/**\n * # Component\n */\nexport const YAlert = defineComponent({\n name: NAME,\n props: {\n ...YAlertPropOptions,\n },\n slots: Object as SlotsType<{\n leading: any;\n trailing: any;\n title: any;\n default: any;\n }>,\n setup(props, { slots }) {\n const el$ = ref<HTMLElement>();\n\n const variations = computed(() => {\n const { variation } = props;\n if (variation) {\n return variation\n .split(',')\n .map((value) => {\n return value.trim();\n })\n .filter((v) => !!v);\n }\n return [];\n });\n\n const cssVariables = computed(() => {\n const ret: Record<string, string | number> = {};\n\n if (props.color) {\n ret['--y-alert-surface-color'] = props.color;\n if (variations.value.includes('filled')) {\n ret['--y-alert-surface-opacity'] = 1;\n } else {\n ret['--y-alert-text-color'] = props.color;\n }\n if (props.textColor) {\n ret['--y-alert-text-color'] = props.textColor;\n }\n if (!props.outlineColor && !props.semantic) {\n ret['--y-alert-outline-color'] = props.color;\n }\n }\n if (props.outlineColor) {\n ret['--y-alert-outline-color'] = props.outlineColor;\n }\n return ret;\n });\n\n useRender(() => (\n <div\n ref={el$}\n class={[\n KEBAB_NAME,\n {\n [`y-alert--${props.semantic}`]: props.semantic,\n 'y-alert--filled': variations.value.includes('filled'),\n 'y-alert--outlined': variations.value.includes('outlined'),\n },\n ]}\n style={cssVariables.value}\n v-theme\n >\n <YPlate></YPlate>\n {slots.leading && (\n <div class={['y-alert__leading']}>{slots.leading()}</div>\n )}\n <div class={['y-alert__content']}>\n {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\n {slots.default?.()}\n </div>\n {slots.trailing && (\n <div class={['y-alert__trailing']}>{slots.trailing()}</div>\n )}\n </div>\n ));\n },\n});\n\nexport type YAlert = InstanceType<typeof YAlert>;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YAlert.mjs","names":["computed","ref","useRender","defineComponent","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","slots","Object","setup","_ref","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 { type PropType, type SlotsType, computed, ref } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\nimport { toKebabCase } from '@/util/string';\r\n\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 slots: Object as SlotsType<{\r\n leading: any;\r\n trailing: any;\r\n title: any;\r\n default: any;\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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"}
|
|
@@ -1,75 +1,75 @@
|
|
|
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,
|
|
29
|
-
&__trailing {
|
|
30
|
-
flex: 0 0 auto;
|
|
31
|
-
position: relative;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&__leading {
|
|
35
|
-
padding-right: 12px;
|
|
36
|
-
margin-top: 0.2rem;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&__trailing {
|
|
40
|
-
padding-left: 12px;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.y-plate {
|
|
44
|
-
&:before {
|
|
45
|
-
content: '';
|
|
46
|
-
position: absolute;
|
|
47
|
-
top: 0;
|
|
48
|
-
left: 0;
|
|
49
|
-
bottom: 0;
|
|
50
|
-
right: 0;
|
|
51
|
-
background: var(--y-alert-surface-color);
|
|
52
|
-
opacity: var(--y-alert-surface-opacity);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
&--outlined {
|
|
57
|
-
.y-plate {
|
|
58
|
-
border: 1px solid var(--y-alert-outline-color);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
$semantics: ('info', 'success', 'warning', 'error');
|
|
63
|
-
|
|
64
|
-
@mixin defineSemantic($name) {
|
|
65
|
-
&--#{$name} {
|
|
66
|
-
--y-alert-text-color: var(--y-theme-#{$name});
|
|
67
|
-
--y-alert-surface-color: var(--y-theme-#{$name});
|
|
68
|
-
--y-alert-outline-color: var(--y-theme-#{$name});
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@each $name in $semantics {
|
|
73
|
-
@include defineSemantic($name);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
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,
|
|
29
|
+
&__trailing {
|
|
30
|
+
flex: 0 0 auto;
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__leading {
|
|
35
|
+
padding-right: 12px;
|
|
36
|
+
margin-top: 0.2rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&__trailing {
|
|
40
|
+
padding-left: 12px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.y-plate {
|
|
44
|
+
&:before {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
left: 0;
|
|
49
|
+
bottom: 0;
|
|
50
|
+
right: 0;
|
|
51
|
+
background: var(--y-alert-surface-color);
|
|
52
|
+
opacity: var(--y-alert-surface-opacity);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&--outlined {
|
|
57
|
+
.y-plate {
|
|
58
|
+
border: 1px solid var(--y-alert-outline-color);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
$semantics: ('info', 'success', 'warning', 'error');
|
|
63
|
+
|
|
64
|
+
@mixin defineSemantic($name) {
|
|
65
|
+
&--#{$name} {
|
|
66
|
+
--y-alert-text-color: var(--y-theme-#{$name});
|
|
67
|
+
--y-alert-surface-color: var(--y-theme-#{$name});
|
|
68
|
+
--y-alert-outline-color: var(--y-theme-#{$name});
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@each $name in $semantics {
|
|
73
|
+
@include defineSemantic($name);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YApp.mjs","names":["h","defineComponent","YApp","name","setup","_props","_ref","slots","class"],"sources":["../../../src/components/app/YApp.ts"],"sourcesContent":["import { h } from 'vue';\n\nimport { defineComponent } from '@/util/component';\n\nimport './YApp.scss';\n\n/**\n * # App Component\n */\nexport const YApp = defineComponent({\n name: 'YApp',\n setup(_props, { slots }) {\n return () =>\n h(\n 'div',\n { class: 'y-app' },\n h('div', { class: 'y-app__container' }, slots),\n );\n },\n});\n\nexport type YApp = InstanceType<typeof YApp>;\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAGD,eAAe,CAAC;EAClCE,IAAI,EAAE,MAAM;EACZC,KAAKA,CAACC,MAAM,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,OAAO,MACLN,CAAC,CACC,KAAK,EACL;MAAEQ,KAAK,EAAE;IAAQ,CAAC,EAClBR,CAAC,CAAC,KAAK,EAAE;MAAEQ,KAAK,EAAE;IAAmB,CAAC,EAAED,KAAK,CAC/C,CAAC;EACL;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YApp.mjs","names":["h","defineComponent","YApp","name","setup","_props","_ref","slots","class"],"sources":["../../../src/components/app/YApp.ts"],"sourcesContent":["import { h } from 'vue';\r\n\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YApp.scss';\r\n\r\n/**\r\n * # App Component\r\n */\r\nexport const YApp = defineComponent({\r\n name: 'YApp',\r\n setup(_props, { slots }) {\r\n return () =>\r\n h(\r\n 'div',\r\n { class: 'y-app' },\r\n h('div', { class: 'y-app__container' }, slots),\r\n );\r\n },\r\n});\r\n\r\nexport type YApp = InstanceType<typeof YApp>;\r\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,KAAK;AAAC,SAEfC,eAAe;AAExB;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAGD,eAAe,CAAC;EAClCE,IAAI,EAAE,MAAM;EACZC,KAAKA,CAACC,MAAM,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,OAAO,MACLN,CAAC,CACC,KAAK,EACL;MAAEQ,KAAK,EAAE;IAAQ,CAAC,EAClBR,CAAC,CAAC,KAAK,EAAE;MAAEQ,KAAK,EAAE;IAAmB,CAAC,EAAED,KAAK,CAC/C,CAAC;EACL;AACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YBadge.mjs","names":["vShow","withDirectives","useRender","useI18n","IconValue","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","color","hide","label","content","Number","max","transition","YBadge","name","props","slots","Object","setup","_ref","t","ElTag","value","isNaN","_createVNode","undefined","badge"],"sources":["../../../src/components/badge/YBadge.tsx"],"sourcesContent":["import { type PropType, type SlotsType, vShow, withDirectives } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useI18n } from '@/composables/i18n';\nimport { IconValue } from '@/composables/icon';\nimport { PolyTransition } from '@/composables/transition';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YIcon } from '../icon/YIcon';\n\nimport './YBadge.scss';\n\nexport const pressYBadgePropsOptions = propsFactory(\n {\n tag: {\n type: String as PropType<string>,\n default: 'div',\n },\n dot: Boolean,\n bordered: Boolean,\n floating: Boolean,\n inline: Boolean,\n icon: IconValue,\n color: String,\n hide: Boolean,\n label: {\n type: String,\n default: '$yuyeon.badge',\n },\n content: [Number, String],\n max: Number,\n transition: {\n type: String,\n default: 'fade',\n },\n },\n 'YBadge',\n);\n\nexport const YBadge = defineComponent({\n name: 'YBadge',\n props: pressYBadgePropsOptions(),\n slots: Object as SlotsType<{\n default: any;\n badge: any;\n }>,\n setup(props, { slots }) {\n const { t } = useI18n();\n\n useRender(() => {\n const ElTag = props.tag as keyof HTMLElementTagNameMap;\n const value = Number(props.content);\n const content =\n !props.max || isNaN(value)\n ? props.content\n : value <= +props.max\n ? value\n : `${props.max}+`;\n return (\n <ElTag\n class={[\n 'y-badge',\n {\n 'y-badge--bordered': props.bordered,\n 'y-badge--dot': props.dot,\n 'y-badge--floating': props.floating,\n 'y-badge--inline': props.inline,\n },\n ]}\n >\n <div class=\"y-badge__base\">\n {slots.default?.()}\n <PolyTransition\n is={props.transition}\n transitionProps={{ name: props.transition }}\n >\n {withDirectives(\n <span\n class={['y-badge__badge']}\n aria-atomic=\"true\"\n aria-label={t(props.label, value)}\n aria-live=\"polite\"\n role=\"status\"\n >\n {props.dot ? undefined : slots.badge ? (\n slots.badge?.()\n ) : props.icon ? (\n <YIcon icon={props.icon} />\n ) : (\n content\n )}\n </span>,\n [[vShow, !props.hide]],\n )}\n </PolyTransition>\n </div>\n </ElTag>\n );\n });\n },\n});\n\nexport type YBadge = InstanceType<typeof YBadge>;\n"],"mappings":";AAAA,SAAwCA,KAAK,EAAEC,cAAc,QAAQ,KAAK;AAAC,SAElEC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,SAAS;AAAA,SACTC,cAAc;AAAA,SACdC,eAAe,EAAEC,YAAY;AAAA,SAE7BC,KAAK;AAEd;AAEA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CACjD;EACEG,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,GAAG,EAAEC,OAAO;EACZC,QAAQ,EAAED,OAAO;EACjBE,QAAQ,EAAEF,OAAO;EACjBG,MAAM,EAAEH,OAAO;EACfI,IAAI,EAAEf,SAAS;EACfgB,KAAK,EAAER,MAAM;EACbS,IAAI,EAAEN,OAAO;EACbO,KAAK,EAAE;IACLX,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDU,OAAO,EAAE,CAACC,MAAM,EAAEZ,MAAM,CAAC;EACzBa,GAAG,EAAED,MAAM;EACXE,UAAU,EAAE;IACVf,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMc,MAAM,GAAGrB,eAAe,CAAC;EACpCsB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEpB,uBAAuB,CAAC,CAAC;EAChCqB,KAAK,EAAEC,MAGL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEH;IAAM,CAAC,GAAAG,IAAA;IACpB,MAAM;MAAEC;IAAE,CAAC,GAAG/B,OAAO,CAAC,CAAC;IAEvBD,SAAS,CAAC,MAAM;MACd,MAAMiC,KAAK,GAAGN,KAAK,CAACnB,GAAkC;MACtD,MAAM0B,KAAK,GAAGZ,MAAM,CAACK,KAAK,CAACN,OAAO,CAAC;MACnC,MAAMA,OAAO,GACX,CAACM,KAAK,CAACJ,GAAG,IAAIY,KAAK,CAACD,KAAK,CAAC,GACtBP,KAAK,CAACN,OAAO,GACba,KAAK,IAAI,CAACP,KAAK,CAACJ,GAAG,GACjBW,KAAK,GACJ,GAAEP,KAAK,CAACJ,GAAI,GAAE;MACvB,OAAAa,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,mBAAmB,EAAEN,KAAK,CAACb,QAAQ;UACnC,cAAc,EAAEa,KAAK,CAACf,GAAG;UACzB,mBAAmB,EAAEe,KAAK,CAACZ,QAAQ;UACnC,iBAAiB,EAAEY,KAAK,CAACX;QAC3B,CAAC;MACF;QAAAL,OAAA,EAAAA,CAAA,MAAAyB,YAAA;UAAA;QAAA,IAGER,KAAK,CAACjB,OAAO,GAAG,CAAC,EAAAyB,YAAA,CAAAjC,cAAA;UAAA,MAEZwB,KAAK,CAACH,UAAU;UAAA,mBACH;YAAEE,IAAI,EAAEC,KAAK,CAACH;UAAW;QAAC;UAAAb,OAAA,EAAAA,CAAA,MAE1CZ,cAAc,CAAAqC,YAAA;YAAA,SAEJ,CAAC,gBAAgB,CAAC;YAAA;YAAA,cAEbJ,CAAC,CAACL,KAAK,CAACP,KAAK,EAAEc,KAAK,CAAC;YAAA;YAAA;UAAA,IAIhCP,KAAK,CAACf,GAAG,GAAGyB,SAAS,GAAGT,KAAK,CAACU,KAAK,GAClCV,KAAK,CAACU,KAAK,GAAG,CAAC,GACbX,KAAK,CAACV,IAAI,GAAAmB,YAAA,CAAA9B,KAAA;YAAA,QACCqB,KAAK,CAACV;UAAI,WAEvBI,OACD,IAEH,CAAC,CAACvB,KAAK,EAAE,CAAC6B,KAAK,CAACR,IAAI,CAAC,CACvB,CAAC;QAAA;MAAA;IAKX,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YBadge.mjs","names":["vShow","withDirectives","useRender","useI18n","IconValue","PolyTransition","defineComponent","propsFactory","YIcon","pressYBadgePropsOptions","tag","type","String","default","dot","Boolean","bordered","floating","inline","icon","color","hide","label","content","Number","max","transition","YBadge","name","props","slots","Object","setup","_ref","t","ElTag","value","isNaN","_createVNode","undefined","badge"],"sources":["../../../src/components/badge/YBadge.tsx"],"sourcesContent":["import { type PropType, type SlotsType, vShow, withDirectives } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { useI18n } from '@/composables/i18n';\r\nimport { IconValue } from '@/composables/icon';\r\nimport { PolyTransition } from '@/composables/transition';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YIcon } from '../icon/YIcon';\r\n\r\nimport './YBadge.scss';\r\n\r\nexport const pressYBadgePropsOptions = propsFactory(\r\n {\r\n tag: {\r\n type: String as PropType<string>,\r\n default: 'div',\r\n },\r\n dot: Boolean,\r\n bordered: Boolean,\r\n floating: Boolean,\r\n inline: Boolean,\r\n icon: IconValue,\r\n color: String,\r\n hide: Boolean,\r\n label: {\r\n type: String,\r\n default: '$yuyeon.badge',\r\n },\r\n content: [Number, String],\r\n max: Number,\r\n transition: {\r\n type: String,\r\n default: 'fade',\r\n },\r\n },\r\n 'YBadge',\r\n);\r\n\r\nexport const YBadge = defineComponent({\r\n name: 'YBadge',\r\n props: pressYBadgePropsOptions(),\r\n slots: Object as SlotsType<{\r\n default: any;\r\n badge: any;\r\n }>,\r\n setup(props, { slots }) {\r\n const { t } = useI18n();\r\n\r\n useRender(() => {\r\n const ElTag = props.tag as keyof HTMLElementTagNameMap;\r\n const value = Number(props.content);\r\n const content =\r\n !props.max || isNaN(value)\r\n ? props.content\r\n : value <= +props.max\r\n ? value\r\n : `${props.max}+`;\r\n return (\r\n <ElTag\r\n class={[\r\n 'y-badge',\r\n {\r\n 'y-badge--bordered': props.bordered,\r\n 'y-badge--dot': props.dot,\r\n 'y-badge--floating': props.floating,\r\n 'y-badge--inline': props.inline,\r\n },\r\n ]}\r\n >\r\n <div class=\"y-badge__base\">\r\n {slots.default?.()}\r\n <PolyTransition\r\n is={props.transition}\r\n transitionProps={{ name: props.transition }}\r\n >\r\n {withDirectives(\r\n <span\r\n class={['y-badge__badge']}\r\n aria-atomic=\"true\"\r\n aria-label={t(props.label, value)}\r\n aria-live=\"polite\"\r\n role=\"status\"\r\n >\r\n {props.dot ? undefined : slots.badge ? (\r\n slots.badge?.()\r\n ) : props.icon ? (\r\n <YIcon icon={props.icon} />\r\n ) : (\r\n content\r\n )}\r\n </span>,\r\n [[vShow, !props.hide]],\r\n )}\r\n </PolyTransition>\r\n </div>\r\n </ElTag>\r\n );\r\n });\r\n },\r\n});\r\n\r\nexport type YBadge = InstanceType<typeof YBadge>;\r\n"],"mappings":";AAAA,SAAwCA,KAAK,EAAEC,cAAc,QAAQ,KAAK;AAAC,SAElEC,SAAS;AAAA,SACTC,OAAO;AAAA,SACPC,SAAS;AAAA,SACTC,cAAc;AAAA,SACdC,eAAe,EAAEC,YAAY;AAAA,SAE7BC,KAAK;AAEd;AAEA,OAAO,MAAMC,uBAAuB,GAAGF,YAAY,CACjD;EACEG,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,GAAG,EAAEC,OAAO;EACZC,QAAQ,EAAED,OAAO;EACjBE,QAAQ,EAAEF,OAAO;EACjBG,MAAM,EAAEH,OAAO;EACfI,IAAI,EAAEf,SAAS;EACfgB,KAAK,EAAER,MAAM;EACbS,IAAI,EAAEN,OAAO;EACbO,KAAK,EAAE;IACLX,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX,CAAC;EACDU,OAAO,EAAE,CAACC,MAAM,EAAEZ,MAAM,CAAC;EACzBa,GAAG,EAAED,MAAM;EACXE,UAAU,EAAE;IACVf,IAAI,EAAEC,MAAM;IACZC,OAAO,EAAE;EACX;AACF,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMc,MAAM,GAAGrB,eAAe,CAAC;EACpCsB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAEpB,uBAAuB,CAAC,CAAC;EAChCqB,KAAK,EAAEC,MAGL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEH;IAAM,CAAC,GAAAG,IAAA;IACpB,MAAM;MAAEC;IAAE,CAAC,GAAG/B,OAAO,CAAC,CAAC;IAEvBD,SAAS,CAAC,MAAM;MACd,MAAMiC,KAAK,GAAGN,KAAK,CAACnB,GAAkC;MACtD,MAAM0B,KAAK,GAAGZ,MAAM,CAACK,KAAK,CAACN,OAAO,CAAC;MACnC,MAAMA,OAAO,GACX,CAACM,KAAK,CAACJ,GAAG,IAAIY,KAAK,CAACD,KAAK,CAAC,GACtBP,KAAK,CAACN,OAAO,GACba,KAAK,IAAI,CAACP,KAAK,CAACJ,GAAG,GACjBW,KAAK,GACJ,GAAEP,KAAK,CAACJ,GAAI,GAAE;MACvB,OAAAa,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,mBAAmB,EAAEN,KAAK,CAACb,QAAQ;UACnC,cAAc,EAAEa,KAAK,CAACf,GAAG;UACzB,mBAAmB,EAAEe,KAAK,CAACZ,QAAQ;UACnC,iBAAiB,EAAEY,KAAK,CAACX;QAC3B,CAAC;MACF;QAAAL,OAAA,EAAAA,CAAA,MAAAyB,YAAA;UAAA;QAAA,IAGER,KAAK,CAACjB,OAAO,GAAG,CAAC,EAAAyB,YAAA,CAAAjC,cAAA;UAAA,MAEZwB,KAAK,CAACH,UAAU;UAAA,mBACH;YAAEE,IAAI,EAAEC,KAAK,CAACH;UAAW;QAAC;UAAAb,OAAA,EAAAA,CAAA,MAE1CZ,cAAc,CAAAqC,YAAA;YAAA,SAEJ,CAAC,gBAAgB,CAAC;YAAA;YAAA,cAEbJ,CAAC,CAACL,KAAK,CAACP,KAAK,EAAEc,KAAK,CAAC;YAAA;YAAA;UAAA,IAIhCP,KAAK,CAACf,GAAG,GAAGyB,SAAS,GAAGT,KAAK,CAACU,KAAK,GAClCV,KAAK,CAACU,KAAK,GAAG,CAAC,GACbX,KAAK,CAACV,IAAI,GAAAmB,YAAA,CAAA9B,KAAA;YAAA,QACCqB,KAAK,CAACV;UAAI,WAEvBI,OACD,IAEH,CAAC,CAACvB,KAAK,EAAE,CAAC6B,KAAK,CAACR,IAAI,CAAC,CACvB,CAAC;QAAA;MAAA;IAKX,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YBench.mjs","names":["ref","useRender","defineComponent","NAME","YBenchPropOptions","tag","type","String","default","position","floating","Boolean","width","Number","YBench","name","setup","looseProps","_ref","slots","props","defineProps","el$","_createVNode"],"sources":["../../../src/components/bench/YBench.tsx"],"sourcesContent":["import { type PropType, ref } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { defineComponent } from '@/util/component';\n\nconst NAME = 'YBench';\n\nconst YBenchPropOptions = {\n tag: {\n type: String as PropType<string>,\n default: 'div',\n },\n position: {\n type: String as PropType<'top' | 'left' | 'right' | 'bottom'>,\n default: 'top',\n },\n floating: {\n type: Boolean as PropType<boolean>,\n default: false,\n },\n width: {\n type: [String, Number] as PropType<string | number>,\n default: 48,\n },\n};\n\n/**\n * # Base Component\n */\nexport const YBench = defineComponent({\n name: NAME,\n setup(looseProps, { slots }) {\n const props = defineProps(YBenchPropOptions);\n const el$ = ref<HTMLElement>();\n\n useRender(() => <props.tag ref={el$}>{slots.default?.()}</props.tag>);\n },\n});\n"],"mappings":";AAAA,SAAwBA,GAAG,QAAQ,KAAK;AAAC,SAEhCC,SAAS;AAAA,SACTC,eAAe;AAExB,MAAMC,IAAI,GAAG,QAAQ;AAErB,MAAMC,iBAAiB,GAAG;EACxBC,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEC,MAAuD;IAC7DC,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRJ,IAAI,EAAEK,OAA4B;IAClCH,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLN,IAAI,EAAE,CAACC,MAAM,EAAEM,MAAM,CAA8B;IACnDL,OAAO,EAAE;EACX;AACF,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMM,MAAM,GAAGZ,eAAe,CAAC;EACpCa,IAAI,EAAEZ,IAAI;EACVa,KAAKA,CAACC,UAAU,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACzB,MAAME,KAAK,GAAGC,WAAW,CAACjB,iBAAiB,CAAC;IAC5C,MAAMkB,GAAG,GAAGtB,GAAG,CAAc,CAAC;IAE9BC,SAAS,CAAC,MAAAsB,YAAA,CAAAH,KAAA,CAAAf,GAAA;MAAA,OAAsBiB;IAAG;MAAAd,OAAA,EAAAA,CAAA,MAAGW,KAAK,CAACX,OAAO,GAAG,CAAC;IAAA,EAAa,CAAC;EACvE;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YBench.mjs","names":["ref","useRender","defineComponent","NAME","YBenchPropOptions","tag","type","String","default","position","floating","Boolean","width","Number","YBench","name","setup","looseProps","_ref","slots","props","defineProps","el$","_createVNode"],"sources":["../../../src/components/bench/YBench.tsx"],"sourcesContent":["import { type PropType, ref } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nconst NAME = 'YBench';\r\n\r\nconst YBenchPropOptions = {\r\n tag: {\r\n type: String as PropType<string>,\r\n default: 'div',\r\n },\r\n position: {\r\n type: String as PropType<'top' | 'left' | 'right' | 'bottom'>,\r\n default: 'top',\r\n },\r\n floating: {\r\n type: Boolean as PropType<boolean>,\r\n default: false,\r\n },\r\n width: {\r\n type: [String, Number] as PropType<string | number>,\r\n default: 48,\r\n },\r\n};\r\n\r\n/**\r\n * # Base Component\r\n */\r\nexport const YBench = defineComponent({\r\n name: NAME,\r\n setup(looseProps, { slots }) {\r\n const props = defineProps(YBenchPropOptions);\r\n const el$ = ref<HTMLElement>();\r\n\r\n useRender(() => <props.tag ref={el$}>{slots.default?.()}</props.tag>);\r\n },\r\n});\r\n"],"mappings":";AAAA,SAAwBA,GAAG,QAAQ,KAAK;AAAC,SAEhCC,SAAS;AAAA,SACTC,eAAe;AAExB,MAAMC,IAAI,GAAG,QAAQ;AAErB,MAAMC,iBAAiB,GAAG;EACxBC,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRH,IAAI,EAAEC,MAAuD;IAC7DC,OAAO,EAAE;EACX,CAAC;EACDE,QAAQ,EAAE;IACRJ,IAAI,EAAEK,OAA4B;IAClCH,OAAO,EAAE;EACX,CAAC;EACDI,KAAK,EAAE;IACLN,IAAI,EAAE,CAACC,MAAM,EAAEM,MAAM,CAA8B;IACnDL,OAAO,EAAE;EACX;AACF,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMM,MAAM,GAAGZ,eAAe,CAAC;EACpCa,IAAI,EAAEZ,IAAI;EACVa,KAAKA,CAACC,UAAU,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACzB,MAAME,KAAK,GAAGC,WAAW,CAACjB,iBAAiB,CAAC;IAC5C,MAAMkB,GAAG,GAAGtB,GAAG,CAAc,CAAC;IAE9BC,SAAS,CAAC,MAAAsB,YAAA,CAAAH,KAAA,CAAAf,GAAA;MAAA,OAAsBiB;IAAG;MAAAd,OAAA,EAAAA,CAAA,MAAGW,KAAK,CAACX,OAAO,GAAG,CAAC;IAAA,EAAa,CAAC;EACvE;AACF,CAAC,CAAC"}
|
|
@@ -9,8 +9,8 @@ import { isColorValue } from "../../util/color/index.mjs";
|
|
|
9
9
|
import { defineComponent, propsFactory } from "../../util/component/index.mjs";
|
|
10
10
|
import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
|
|
11
11
|
import { Y_TOGGLE_BUTTON_KEY } from "../toggle-button/index.mjs";
|
|
12
|
-
/**
|
|
13
|
-
* Style
|
|
12
|
+
/**
|
|
13
|
+
* Style
|
|
14
14
|
*/
|
|
15
15
|
import "./YButton.scss";
|
|
16
16
|
const NAME = 'y-button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YButton.mjs","names":["computed","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","defineComponent","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","click","event","choice","setup","_ref","attrs","slots","emit","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","metaKey","altKey","ctrlKey","shiftKey","button","target","navigate","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, mergeProps } from 'vue';\n\nimport {\n pressChoiceItemPropsOptions,\n useChoiceItem,\n} from '@/composables/choice';\nimport { useChoiceByLink } from '@/composables/choice-link';\nimport { useRender } from '@/composables/component';\nimport { pressVueRouterPropsOptions, useLink } from '@/composables/vue-router';\nimport { PlateWave } from '@/directives/plate-wave';\nimport { isColorValue } from '@/util/color';\nimport { defineComponent, propsFactory } from '@/util/component';\n\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 click: (event: MouseEvent) => true,\n 'choice:selected': (choice: { value: boolean }) => true,\n },\n setup(props, { attrs, slots, emit }) {\n const choice = useChoiceItem(props, props.injectSymbol, false);\n const link = useLink(props, attrs);\n useChoiceByLink(link, choice?.select);\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 const isDisabled = computed(() => {\n return choice?.disabled.value || props.disabled;\n });\n\n /// Events\n function onClick(e: MouseEvent) {\n if (\n isDisabled.value ||\n props.loading ||\n (link.isLink.value &&\n (e.metaKey ||\n e.altKey ||\n e.ctrlKey ||\n e.shiftKey ||\n e.button !== 0 ||\n attrs.target === '_blank'))\n ) {\n return;\n }\n emit('click', e);\n link.navigate?.(e);\n choice?.toggle();\n }\n\n useRender(() => {\n const Tag = link.isLink.value ? 'a' : 'button';\n return (\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class={[\n `${NAME}`,\n choice?.selectedClass.value,\n {\n ...classes.value,\n },\n ]}\n href={props.disabled ? undefined : link.href.value}\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 </Tag>\n );\n });\n\n return {\n link,\n };\n },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YButton.mjs","names":["computed","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useChoiceByLink","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","defineComponent","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","click","event","choice","setup","_ref","attrs","slots","emit","link","select","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","isDisabled","onClick","e","metaKey","altKey","ctrlKey","shiftKey","button","target","navigate","toggle","Tag","_withDirectives","_createVNode","selectedClass","href","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\r\nimport { computed, mergeProps } from 'vue';\r\n\r\nimport {\r\n pressChoiceItemPropsOptions,\r\n useChoiceItem,\r\n} from '@/composables/choice';\r\nimport { useChoiceByLink } from '@/composables/choice-link';\r\nimport { useRender } from '@/composables/component';\r\nimport { pressVueRouterPropsOptions, useLink } from '@/composables/vue-router';\r\nimport { PlateWave } from '@/directives/plate-wave';\r\nimport { isColorValue } from '@/util/color';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\r\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\r\n\r\n/**\r\n * Style\r\n */\r\nimport './YButton.scss';\r\n\r\nconst NAME = 'y-button';\r\n\r\nexport const pressYButtonProps = propsFactory(\r\n {\r\n loading: Boolean,\r\n active: { type: Boolean, default: undefined },\r\n injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\r\n //\r\n variation: {\r\n type: String as PropType<string>,\r\n },\r\n small: Boolean,\r\n icon: Boolean,\r\n outlined: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n rounded: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n filled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n //\r\n color: {\r\n type: String,\r\n },\r\n noWave: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n ...pressVueRouterPropsOptions(),\r\n ...pressChoiceItemPropsOptions(),\r\n },\r\n 'YButton',\r\n);\r\n\r\nexport const YButton = defineComponent({\r\n name: 'YButton',\r\n directives: {\r\n PlateWave,\r\n },\r\n props: pressYButtonProps(),\r\n emits: {\r\n click: (event: MouseEvent) => true,\r\n 'choice:selected': (choice: { value: boolean }) => true,\r\n },\r\n setup(props, { attrs, slots, emit }) {\r\n const choice = useChoiceItem(props, props.injectSymbol, false);\r\n const link = useLink(props, attrs);\r\n useChoiceByLink(link, choice?.select);\r\n\r\n const isActive = computed(() => {\r\n if (props.active !== undefined) {\r\n return props.active;\r\n }\r\n if (link.isLink.value) {\r\n return link.isActive?.value;\r\n }\r\n return choice?.isSelected.value;\r\n });\r\n\r\n const variations = computed(() => {\r\n const { variation } = props;\r\n if (typeof variation === 'string') {\r\n return variation.split(',').map((value) => {\r\n return value.trim();\r\n });\r\n }\r\n return [];\r\n });\r\n\r\n const classes = computed(() => {\r\n const { outlined, rounded, filled, small, icon } = props;\r\n return {\r\n [`${NAME}--outlined`]:\r\n variations.value.includes('outlined') || outlined,\r\n [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\r\n [`${NAME}--filled`]: variations.value.includes('filled') || filled,\r\n [`${NAME}--text`]: variations.value.includes('text'),\r\n [`${NAME}--small`]: variations.value.includes('small') || small,\r\n [`${NAME}--icon`]: variations.value.includes('icon') || icon,\r\n [`${NAME}--color`]: props.color,\r\n [`${NAME}--loading`]: props.loading,\r\n [`${NAME}--disabled`]: props.disabled,\r\n [`${NAME}--active`]: isActive.value,\r\n };\r\n });\r\n\r\n const styles = computed(() => {\r\n let { color } = props;\r\n let textColor: string | undefined;\r\n if (color && !isColorValue(color)) {\r\n color = `var(--y-theme-${color})`;\r\n textColor = `var(--y-theme-on-${props.color})`;\r\n }\r\n return {\r\n [`--y-button__color`]: color,\r\n [`--y-button__text-color`]: textColor,\r\n };\r\n });\r\n\r\n const isDisabled = computed(() => {\r\n return choice?.disabled.value || props.disabled;\r\n });\r\n\r\n /// Events\r\n function onClick(e: MouseEvent) {\r\n if (\r\n isDisabled.value ||\r\n props.loading ||\r\n (link.isLink.value &&\r\n (e.metaKey ||\r\n e.altKey ||\r\n e.ctrlKey ||\r\n e.shiftKey ||\r\n e.button !== 0 ||\r\n attrs.target === '_blank'))\r\n ) {\r\n return;\r\n }\r\n emit('click', e);\r\n link.navigate?.(e);\r\n choice?.toggle();\r\n }\r\n\r\n useRender(() => {\r\n const Tag = link.isLink.value ? 'a' : 'button';\r\n return (\r\n <Tag\r\n type={Tag === 'a' ? undefined : 'button'}\r\n class={[\r\n `${NAME}`,\r\n choice?.selectedClass.value,\r\n {\r\n ...classes.value,\r\n },\r\n ]}\r\n href={props.disabled ? undefined : link.href.value}\r\n style={styles.value}\r\n onClick={onClick}\r\n disabled={props.disabled ? true : undefined}\r\n v-plate-wave={!props.noWave && !props.loading}\r\n >\r\n <span class={['y-button__content']}>\r\n {props.loading && (\r\n <YSpinnerRing\r\n {...mergeProps({ width: '24', height: '24' })}\r\n ></YSpinnerRing>\r\n )}\r\n {slots.default?.()}\r\n </span>\r\n {slots.append?.()}\r\n </Tag>\r\n );\r\n });\r\n\r\n return {\r\n link,\r\n };\r\n },\r\n});\r\n\r\nexport type YButton = InstanceType<typeof YButton>;\r\n"],"mappings":"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"}
|
|
@@ -1,128 +1,128 @@
|
|
|
1
|
-
@use '../../styles/variables';
|
|
2
|
-
|
|
3
|
-
$button-border-radius: variables.$border-radius-root !default;
|
|
4
|
-
$button-before-opacity: 0.06 !default;
|
|
5
|
-
$button-disabled-background: #d3d3d3 !default;
|
|
6
|
-
|
|
7
|
-
.y-button {
|
|
8
|
-
--y-button__color: var(--y-theme-primary);
|
|
9
|
-
--y-button__text-color: var(--y-theme-on-primary);
|
|
10
|
-
--y-button__disabled-background: #{$button-disabled-background};
|
|
11
|
-
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: center;
|
|
16
|
-
position: relative;
|
|
17
|
-
border-radius: $button-border-radius;
|
|
18
|
-
font-weight: 500;
|
|
19
|
-
transition: all 240ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
|
|
20
|
-
text-decoration: none;
|
|
21
|
-
|
|
22
|
-
&:before {
|
|
23
|
-
background-color: currentColor;
|
|
24
|
-
border-radius: inherit;
|
|
25
|
-
bottom: 0;
|
|
26
|
-
color: inherit;
|
|
27
|
-
content: '';
|
|
28
|
-
left: 0;
|
|
29
|
-
opacity: 0;
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
position: absolute;
|
|
32
|
-
right: 0;
|
|
33
|
-
top: 0;
|
|
34
|
-
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&:hover:before {
|
|
38
|
-
opacity: 0.06;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
& {
|
|
42
|
-
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.14);
|
|
43
|
-
|
|
44
|
-
&:active {
|
|
45
|
-
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.24);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&--filled {
|
|
50
|
-
background-color: var(--y-button__color);
|
|
51
|
-
color: var(--y-button__text-color);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&--text {
|
|
55
|
-
box-shadow: none;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&:disabled,
|
|
59
|
-
&--disabled {
|
|
60
|
-
background-color: var(--y-button__disabled-background);
|
|
61
|
-
opacity: 0.4;
|
|
62
|
-
cursor: default;
|
|
63
|
-
box-shadow: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
&--rounded {
|
|
67
|
-
border-radius: 10vh;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&--outlined {
|
|
71
|
-
//color: rgba(var(--y-button__color), 1);
|
|
72
|
-
border-width: 1px;
|
|
73
|
-
border-style: solid;
|
|
74
|
-
border-color: currentColor;
|
|
75
|
-
box-shadow: none;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
&--color:not(&--filled) {
|
|
79
|
-
color: var(--y-button__color);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&--loading {
|
|
83
|
-
cursor: wait;
|
|
84
|
-
box-shadow: none;
|
|
85
|
-
|
|
86
|
-
.y-spinner-ring {
|
|
87
|
-
margin-right: 0.4em;
|
|
88
|
-
width: 1em;
|
|
89
|
-
height: 1em;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
&:active:not(&--loading) {
|
|
94
|
-
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.14);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
&--small {
|
|
98
|
-
height: 24px;
|
|
99
|
-
font-size: 0.4rem;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
&--small & {
|
|
103
|
-
&__content {
|
|
104
|
-
padding: 4px 6px;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
&--icon {
|
|
109
|
-
width: 48px;
|
|
110
|
-
height: 48px;
|
|
111
|
-
border-radius: 50%;
|
|
112
|
-
|
|
113
|
-
@at-root &.y-button--small {
|
|
114
|
-
width: 24px;
|
|
115
|
-
height: 24px;
|
|
116
|
-
|
|
117
|
-
.y-button__content {
|
|
118
|
-
padding: 4px;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
&__content {
|
|
124
|
-
display: flex;
|
|
125
|
-
align-items: center;
|
|
126
|
-
padding: 4px 8px;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
1
|
+
@use '../../styles/variables';
|
|
2
|
+
|
|
3
|
+
$button-border-radius: variables.$border-radius-root !default;
|
|
4
|
+
$button-before-opacity: 0.06 !default;
|
|
5
|
+
$button-disabled-background: #d3d3d3 !default;
|
|
6
|
+
|
|
7
|
+
.y-button {
|
|
8
|
+
--y-button__color: var(--y-theme-primary);
|
|
9
|
+
--y-button__text-color: var(--y-theme-on-primary);
|
|
10
|
+
--y-button__disabled-background: #{$button-disabled-background};
|
|
11
|
+
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
position: relative;
|
|
17
|
+
border-radius: $button-border-radius;
|
|
18
|
+
font-weight: 500;
|
|
19
|
+
transition: all 240ms cubic-bezier(0.42, 0.5, 0.51, 1.02);
|
|
20
|
+
text-decoration: none;
|
|
21
|
+
|
|
22
|
+
&:before {
|
|
23
|
+
background-color: currentColor;
|
|
24
|
+
border-radius: inherit;
|
|
25
|
+
bottom: 0;
|
|
26
|
+
color: inherit;
|
|
27
|
+
content: '';
|
|
28
|
+
left: 0;
|
|
29
|
+
opacity: 0;
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
position: absolute;
|
|
32
|
+
right: 0;
|
|
33
|
+
top: 0;
|
|
34
|
+
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover:before {
|
|
38
|
+
opacity: 0.06;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
& {
|
|
42
|
+
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.14);
|
|
43
|
+
|
|
44
|
+
&:active {
|
|
45
|
+
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.24);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&--filled {
|
|
50
|
+
background-color: var(--y-button__color);
|
|
51
|
+
color: var(--y-button__text-color);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--text {
|
|
55
|
+
box-shadow: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:disabled,
|
|
59
|
+
&--disabled {
|
|
60
|
+
background-color: var(--y-button__disabled-background);
|
|
61
|
+
opacity: 0.4;
|
|
62
|
+
cursor: default;
|
|
63
|
+
box-shadow: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&--rounded {
|
|
67
|
+
border-radius: 10vh;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&--outlined {
|
|
71
|
+
//color: rgba(var(--y-button__color), 1);
|
|
72
|
+
border-width: 1px;
|
|
73
|
+
border-style: solid;
|
|
74
|
+
border-color: currentColor;
|
|
75
|
+
box-shadow: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&--color:not(&--filled) {
|
|
79
|
+
color: var(--y-button__color);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&--loading {
|
|
83
|
+
cursor: wait;
|
|
84
|
+
box-shadow: none;
|
|
85
|
+
|
|
86
|
+
.y-spinner-ring {
|
|
87
|
+
margin-right: 0.4em;
|
|
88
|
+
width: 1em;
|
|
89
|
+
height: 1em;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&:active:not(&--loading) {
|
|
94
|
+
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.14);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&--small {
|
|
98
|
+
height: 24px;
|
|
99
|
+
font-size: 0.4rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&--small & {
|
|
103
|
+
&__content {
|
|
104
|
+
padding: 4px 6px;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&--icon {
|
|
109
|
+
width: 48px;
|
|
110
|
+
height: 48px;
|
|
111
|
+
border-radius: 50%;
|
|
112
|
+
|
|
113
|
+
@at-root &.y-button--small {
|
|
114
|
+
width: 24px;
|
|
115
|
+
height: 24px;
|
|
116
|
+
|
|
117
|
+
.y-button__content {
|
|
118
|
+
padding: 4px;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&__content {
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
padding: 4px 8px;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YCard.mjs","names":["h","useRender","pressThemePropsOptions","useLocalTheme","defineComponent","YCard","name","props","outline","type","Boolean","setup","_ref","slots","themeClasses","class","value","default"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import { type PropType, h } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { pressThemePropsOptions, useLocalTheme } from '@/composables/theme';\nimport { defineComponent } from '@/util/component';\n\nimport './YCard.scss';\n\nexport const YCard = defineComponent({\n name: 'YCard',\n props: {\n outline: {\n type: Boolean as PropType<boolean>,\n },\n ...pressThemePropsOptions(),\n },\n setup(props, { slots }) {\n const { themeClasses } = useLocalTheme(props);\n\n useRender(() =>\n h(\n 'div',\n {\n class: [\n 'y-card',\n { 'y-card--outlined': props.outline },\n themeClasses.value,\n ],\n },\n slots.default?.(),\n ),\n );\n },\n});\n\nexport type YCard = InstanceType<typeof YCard>;\n"],"mappings":"AAAA,SAAwBA,CAAC,QAAQ,KAAK;AAAC,SAE9BC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAAA,SACrCC,eAAe;AAExB;AAEA,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;EACnCE,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR,CAAC;IACD,GAAGR,sBAAsB,CAAC;EAC5B,CAAC;EACDS,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE;IAAa,CAAC,GAAGX,aAAa,CAACI,KAAK,CAAC;IAE7CN,SAAS,CAAC,MACRD,CAAC,CACC,KAAK,EACL;MACEe,KAAK,EAAE,CACL,QAAQ,EACR;QAAE,kBAAkB,EAAER,KAAK,CAACC;MAAQ,CAAC,EACrCM,YAAY,CAACE,KAAK;IAEtB,CAAC,EACDH,KAAK,CAACI,OAAO,GAAG,CAClB,CACF,CAAC;EACH;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"YCard.mjs","names":["h","useRender","pressThemePropsOptions","useLocalTheme","defineComponent","YCard","name","props","outline","type","Boolean","setup","_ref","slots","themeClasses","class","value","default"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import { type PropType, h } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { pressThemePropsOptions, useLocalTheme } from '@/composables/theme';\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YCard.scss';\r\n\r\nexport const YCard = defineComponent({\r\n name: 'YCard',\r\n props: {\r\n outline: {\r\n type: Boolean as PropType<boolean>,\r\n },\r\n ...pressThemePropsOptions(),\r\n },\r\n setup(props, { slots }) {\r\n const { themeClasses } = useLocalTheme(props);\r\n\r\n useRender(() =>\r\n h(\r\n 'div',\r\n {\r\n class: [\r\n 'y-card',\r\n { 'y-card--outlined': props.outline },\r\n themeClasses.value,\r\n ],\r\n },\r\n slots.default?.(),\r\n ),\r\n );\r\n },\r\n});\r\n\r\nexport type YCard = InstanceType<typeof YCard>;\r\n"],"mappings":"AAAA,SAAwBA,CAAC,QAAQ,KAAK;AAAC,SAE9BC,SAAS;AAAA,SACTC,sBAAsB,EAAEC,aAAa;AAAA,SACrCC,eAAe;AAExB;AAEA,OAAO,MAAMC,KAAK,GAAGD,eAAe,CAAC;EACnCE,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR,CAAC;IACD,GAAGR,sBAAsB,CAAC;EAC5B,CAAC;EACDS,KAAKA,CAACJ,KAAK,EAAAK,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE;IAAa,CAAC,GAAGX,aAAa,CAACI,KAAK,CAAC;IAE7CN,SAAS,CAAC,MACRD,CAAC,CACC,KAAK,EACL;MACEe,KAAK,EAAE,CACL,QAAQ,EACR;QAAE,kBAAkB,EAAER,KAAK,CAACC;MAAQ,CAAC,EACrCM,YAAY,CAACE,KAAK;IAEtB,CAAC,EACDH,KAAK,CAACI,OAAO,GAAG,CAClB,CACF,CAAC;EACH;AACF,CAAC,CAAC"}
|