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,48 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&--reverse .y-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&--reverse .y-input--checkbox {
|
|
31
|
-
margin-left: 8px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&--readonly,
|
|
35
|
-
&--disabled {
|
|
36
|
-
.y-checkbox__label,
|
|
37
|
-
.y-input--checkbox {
|
|
38
|
-
cursor: default;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&--disabled {
|
|
43
|
-
.y-checkbox__slot {
|
|
44
|
-
filter: grayscale(1);
|
|
45
|
-
opacity: 0.4;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
1
|
+
.y-checkbox {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
|
|
5
|
+
&__slot {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: row;
|
|
8
|
+
align-items: center;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.y-checkbox__label {
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
color: var(--y-theme-on-surface-variant);
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&--reverse .y-checkbox__slot {
|
|
19
|
+
flex-direction: row-reverse;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:not(&--reverse) .y-input--checkbox {
|
|
23
|
+
margin-right: 8px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.y-input--checkbox {
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&--reverse .y-input--checkbox {
|
|
31
|
+
margin-left: 8px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--readonly,
|
|
35
|
+
&--disabled {
|
|
36
|
+
.y-checkbox__label,
|
|
37
|
+
.y-input--checkbox {
|
|
38
|
+
cursor: default;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--disabled {
|
|
43
|
+
.y-checkbox__slot {
|
|
44
|
+
filter: grayscale(1);
|
|
45
|
+
opacity: 0.4;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@use '../../styles/palette';
|
|
2
1
|
|
|
3
|
-
|
|
2
|
+
|
|
3
|
+
$checkbox__color: var(--y-theme-primary);
|
|
4
4
|
$checkbox__border-color: #a4a4a4;
|
|
5
5
|
|
|
6
6
|
.y-input--checkbox {
|
|
@@ -67,7 +67,7 @@ $checkbox__border-color: #a4a4a4;
|
|
|
67
67
|
|
|
68
68
|
&.y-input--active:hover {
|
|
69
69
|
.y-icon-checkbox__border-path {
|
|
70
|
-
|
|
70
|
+
filter: brightness(1.1);
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YDropdown.mjs","names":["defineComponent","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","getObjectValueByPath","omit","chooseProps","propsFactory","YButton","YCard","YIconDropdown","YList","YListItem","YMenu","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","YDropdown","name","inheritAttrs","components","props","emits","setup","_ref","slots","attrs","emit","opened","onClickItem","item","value","menuProps","_createVNode","_Fragment","_mergeProps","$event","base","_len","arguments","length","args","Array","_key","default","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, defineComponent, mergeProps } from 'vue';\n\nimport { pressItemsPropsOptions } from '../../abstract/items';\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { getObjectValueByPath, omit } from '../../util/common';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YCard } from '../card';\nimport { YIconDropdown } from '../icons/YIconDropdown';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YDropdown.scss';\n\nexport const pressYDropdownPropsOptions = propsFactory(\n {\n modelValue: Boolean as PropType<boolean>,\n variation: String as PropType<string>,\n color: String as PropType<string>,\n ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n 'coordinateStrategy',\n ]),\n ...pressItemsPropsOptions(),\n },\n 'YDropdown',\n);\n\nexport const YDropdown = defineComponent({\n name: 'YDropdown',\n inheritAttrs: false,\n components: {\n YMenu,\n },\n props: {\n ...pressYDropdownPropsOptions(),\n },\n emits: ['update:modelValue', 'click'],\n setup(props, { slots, attrs, emit }) {\n const opened = useModelDuplex(props);\n\n function onClickItem(item: any) {\n opened.value = false;\n emit('click', item);\n }\n\n useRender(() => {\n const menuProps = chooseProps(props, YMenu.props);\n return (\n <>\n <YMenu\n {...menuProps}\n v-model={opened.value}\n content-classes={['y-dropdown__content']}\n >\n {{\n base: (...args: any[]) =>\n slots.base ? (\n slots.base?.(...args)\n ) : (\n <YButton\n variation={props.variation}\n color={props.color}\n class={[\n 'y-dropdown',\n { 'y-dropdown--opened': opened.value },\n ]}\n {...attrs}\n >\n {\n <span class=\"y-dropdown__default\">\n {slots.default?.()}\n </span>\n }\n {slots['expand-icon'] ? (\n slots['expand-icon']()\n ) : (\n <i class=\"y-dropdown__icon\">\n <YIconDropdown></YIconDropdown>\n </i>\n )}\n </YButton>\n ),\n default: () =>\n slots.menu ? (\n slots.menu()\n ) : (\n <YCard>\n {Array.isArray(props.items) && props.items.length > 0 ? (\n <YList>\n {props.items.map((item) => {\n const text = getObjectValueByPath(\n item,\n props.itemText,\n );\n return (\n <YListItem onClick={(e) => onClickItem(item)}>\n {text}\n </YListItem>\n );\n })}\n </YList>\n ) : (\n <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\n )}\n </YCard>\n ),\n }}\n </YMenu>\n </>\n );\n });\n },\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YDropdown.mjs","names":["defineComponent","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","getObjectValueByPath","omit","chooseProps","propsFactory","YButton","YCard","YIconDropdown","YList","YListItem","YMenu","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","YDropdown","name","inheritAttrs","components","props","emits","setup","_ref","slots","attrs","emit","opened","onClickItem","item","value","menuProps","_createVNode","_Fragment","_mergeProps","$event","base","_len","arguments","length","args","Array","_key","default","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, defineComponent, mergeProps } from 'vue';\r\n\r\nimport { pressItemsPropsOptions } from '../../abstract/items';\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport { getObjectValueByPath, omit } from '../../util/common';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YButton } from '../button';\r\nimport { YCard } from '../card';\r\nimport { YIconDropdown } from '../icons/YIconDropdown';\r\nimport { YList, YListItem } from '../list';\r\nimport { YMenu } from '../menu';\r\n\r\nimport './YDropdown.scss';\r\n\r\nexport const pressYDropdownPropsOptions = propsFactory(\r\n {\r\n modelValue: Boolean as PropType<boolean>,\r\n variation: String as PropType<string>,\r\n color: String as PropType<string>,\r\n ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\r\n 'coordinateStrategy',\r\n ]),\r\n ...pressItemsPropsOptions(),\r\n },\r\n 'YDropdown',\r\n);\r\n\r\nexport const YDropdown = defineComponent({\r\n name: 'YDropdown',\r\n inheritAttrs: false,\r\n components: {\r\n YMenu,\r\n },\r\n props: {\r\n ...pressYDropdownPropsOptions(),\r\n },\r\n emits: ['update:modelValue', 'click'],\r\n setup(props, { slots, attrs, emit }) {\r\n const opened = useModelDuplex(props);\r\n\r\n function onClickItem(item: any) {\r\n opened.value = false;\r\n emit('click', item);\r\n }\r\n\r\n useRender(() => {\r\n const menuProps = chooseProps(props, YMenu.props);\r\n return (\r\n <>\r\n <YMenu\r\n {...menuProps}\r\n v-model={opened.value}\r\n content-classes={['y-dropdown__content']}\r\n >\r\n {{\r\n base: (...args: any[]) =>\r\n slots.base ? (\r\n slots.base?.(...args)\r\n ) : (\r\n <YButton\r\n variation={props.variation}\r\n color={props.color}\r\n class={[\r\n 'y-dropdown',\r\n { 'y-dropdown--opened': opened.value },\r\n ]}\r\n {...attrs}\r\n >\r\n {\r\n <span class=\"y-dropdown__default\">\r\n {slots.default?.()}\r\n </span>\r\n }\r\n {slots['expand-icon'] ? (\r\n slots['expand-icon']()\r\n ) : (\r\n <i class=\"y-dropdown__icon\">\r\n <YIconDropdown></YIconDropdown>\r\n </i>\r\n )}\r\n </YButton>\r\n ),\r\n default: () =>\r\n slots.menu ? (\r\n slots.menu()\r\n ) : (\r\n <YCard>\r\n {Array.isArray(props.items) && props.items.length > 0 ? (\r\n <YList>\r\n {props.items.map((item) => {\r\n const text = getObjectValueByPath(\r\n item,\r\n props.itemText,\r\n );\r\n return (\r\n <YListItem onClick={(e) => onClickItem(item)}>\r\n {text}\r\n </YListItem>\r\n );\r\n })}\r\n </YList>\r\n ) : (\r\n <div class=\"y-dropdown__no-options\">항목이 없습니다.</div>\r\n )}\r\n </YCard>\r\n ),\r\n }}\r\n </YMenu>\r\n </>\r\n );\r\n });\r\n },\r\n});\r\n"],"mappings":"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"}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@use '../../styles/util/theme';
|
|
2
|
-
@use '../../styles/util/helper';
|
|
3
1
|
@use '../../styles/variables';
|
|
4
2
|
|
|
5
3
|
.y-field-input {
|
|
@@ -61,13 +59,6 @@
|
|
|
61
59
|
height: 16px;
|
|
62
60
|
padding: 0;
|
|
63
61
|
cursor: pointer;
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
@include theme.basicTheme('y-field-input') using ($themeMap, $class) {
|
|
68
|
-
.y-field-input {
|
|
69
|
-
&__clear {
|
|
70
|
-
color: helper.deepGet($themeMap, 'fieldInput', 'clear');
|
|
71
|
-
}
|
|
62
|
+
color: var(--y-theme-on-surface);
|
|
72
63
|
}
|
|
73
64
|
}
|
package/lib/components/index.mjs
CHANGED
|
@@ -23,4 +23,6 @@ export * from "./pagination/index.mjs";
|
|
|
23
23
|
export * from "./loading/index.mjs";
|
|
24
24
|
export * from "./dropdown/index.mjs";
|
|
25
25
|
export * from "./select/index.mjs";
|
|
26
|
+
export * from "./tab/index.mjs";
|
|
27
|
+
export * from "./alert/index.mjs";
|
|
26
28
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './tab';\r\nexport * from './alert';\r\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YSelect.mjs","names":["shallowRef","computed","defineComponent","mergeProps","ref","useModelDuplex","useRender","pressCoordinateProps","pressListItemsPropsOptions","useItems","wrapInArray","deepEqual","getObjectValueByPath","omit","chooseProps","propsFactory","YCard","YFieldInput","pressYFieldInputPropsOptions","YIconDropdown","YList","YListItem","YMenu","returnItemEquals","optionsItem","valueItem","valueKey","arguments","length","undefined","valueItemType","itemValue","pressSelectPropsOptions","opened","Boolean","multiple","weakEquals","valueEquals","type","Function","default","pressYSelectPropsOptions","maxHeight","Number","String","position","YSelect","name","props","emits","value","setup","_ref","slots","fieldInputRef","menuRef","listRef","focused","items","toRefineItems","toEmitItems","model","v","emitValue","selections","map","find","item","selected","selection","onMousedownDisplay","event","disabled","onBlur","$el","contains","relatedTarget","onClickItem","select","onAfterLeave","focus","displayText","text","join","fieldInputProps","_createVNode","$event","offset","origin","base","_len","args","Array","_key","_mergeProps","leading","_len2","_key2","trailing","menu","e","_createTextVNode"],"sources":["../../../src/components/select/YSelect.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\nimport type { PropType } from 'vue';\nimport { computed, defineComponent, mergeProps, ref } from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport {\n ListItem,\n pressListItemsPropsOptions,\n useItems,\n} from '../../composables/list-items';\nimport { wrapInArray } from '../../util/array';\nimport { deepEqual, getObjectValueByPath, omit } from '../../util/common';\nimport { chooseProps, propsFactory } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YFieldInput, pressYFieldInputPropsOptions } from '../field-input';\nimport { YIconDropdown } from '../icons/YIconDropdown';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YSelect.scss';\n\nexport type SelectEquals = (\n optionsItem: any,\n valueItem: any,\n valueKey?: string,\n) => boolean;\n\nexport function returnItemEquals(\n optionsItem: any,\n valueItem: any,\n valueKey = 'value',\n) {\n const valueItemType = typeof valueItem;\n const itemValue =\n valueItemType === 'string' || valueItemType === 'number'\n ? getObjectValueByPath(optionsItem, valueKey)\n : optionsItem;\n return deepEqual(itemValue, valueItem);\n}\n\nexport const pressSelectPropsOptions = propsFactory(\n {\n opened: Boolean as PropType<boolean>,\n multiple: Boolean,\n weakEquals: Boolean,\n valueEquals: {\n type: Function as PropType<SelectEquals>,\n default: deepEqual,\n },\n ...pressListItemsPropsOptions(),\n },\n 'Select',\n);\n\nexport const pressYSelectPropsOptions = propsFactory(\n {\n maxHeight: {\n type: [Number, String],\n default: 310,\n },\n ...pressSelectPropsOptions(),\n ...pressYFieldInputPropsOptions(),\n ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n 'coordinateStrategy',\n ]),\n },\n 'YSelect',\n);\n\nexport const YSelect = defineComponent({\n name: 'YSelect',\n props: {\n ...pressYSelectPropsOptions(),\n },\n emits: {\n 'update:modelValue': (value: any) => true,\n 'update:opened': (opened: boolean) => true,\n },\n setup(props, { slots }) {\n const fieldInputRef = ref();\n const menuRef = ref();\n const listRef = ref<InstanceType<typeof YList>>();\n\n const opened = useModelDuplex(props, 'opened');\n const focused = shallowRef(false);\n\n const { items, toRefineItems, toEmitItems } = useItems(props);\n const model = useModelDuplex(\n props,\n 'modelValue',\n [],\n (v) => toRefineItems(v === null ? [null] : wrapInArray(v)),\n (v) => {\n const emitValue = toEmitItems(wrapInArray(v));\n return props.multiple ? emitValue : emitValue[0] ?? null;\n },\n );\n\n const selections = computed<ListItem[]>(() => {\n return model.value.map((v: any) => {\n return items.value.find((item) => {\n return props.valueEquals(item.value, v.value);\n });\n });\n });\n\n const selected = computed(() => {\n return selections.value.map((selection) => selection.props.value);\n });\n\n // Field\n function onMousedownDisplay(event: MouseEvent) {\n if (props.disabled) {\n return;\n }\n opened.value = !opened.value;\n }\n\n function onBlur(event: FocusEvent) {\n if (listRef.value?.$el.contains(event.relatedTarget)) {\n opened.value = false;\n }\n }\n\n // Menu Contents\n function onClickItem(item: ListItem) {\n select(item);\n if (!props.multiple) {\n opened.value = false;\n }\n }\n\n function onAfterLeave() {\n if (focused.value) {\n fieldInputRef.value?.focus();\n }\n }\n\n function select(item: ListItem) {\n if (props.multiple) {\n //\n } else {\n model.value = [item];\n }\n }\n\n const displayText = computed(() => {\n if (props.multiple) {\n return selections.value.map((item) => item.text).join(', ');\n }\n return selections.value?.[0]?.text ?? '';\n });\n\n useRender(() => {\n const fieldInputProps = chooseProps(props, YFieldInput.props);\n return (\n <YMenu\n v-model={opened.value}\n ref={menuRef}\n offset={props.offset}\n position={props.position}\n origin={props.origin}\n content-classes={['y-select__content']}\n maxHeight={props.maxHeight}\n open-on-click-base={false}\n onAfterLeave={onAfterLeave}\n >\n {{\n base: (...args: any[]) =>\n slots.base ? (\n slots.base?.(...args)\n ) : (\n <YFieldInput\n {...{\n ...fieldInputProps,\n ...mergeProps({ ...args[0].props }, { ref: fieldInputRef }),\n }}\n onMousedown:display={onMousedownDisplay}\n onBlur={onBlur}\n readonly\n class={['y-select', { 'y-select--opened': opened.value }]}\n v-model:focused={focused.value}\n >\n {{\n default: () => {\n return (\n <div class={['y-select__selection']}>\n {slots.selection\n ? slots.selection?.()\n : displayText.value}\n </div>\n );\n },\n leading: slots.leading\n ? (...args: any[]) => slots.leading?.(...args)\n : undefined,\n trailing: (...args: any[]) => {\n return slots['expand-icon'] ? (\n slots['expand-icon']()\n ) : (\n <i class=\"y-select__icon\">\n <YIconDropdown></YIconDropdown>\n </i>\n );\n },\n 'helper-text': slots['helper-text']\n ? slots['helper-text']?.()\n : undefined,\n }}\n </YFieldInput>\n ),\n default: () =>\n slots.menu ? (\n slots.menu()\n ) : (\n <YCard>\n {items.value.length > 0 ? (\n <YList ref={listRef}>\n {items.value.map((item) => {\n return (\n <YListItem onClick={(e) => onClickItem(item)}>\n {item.text}\n </YListItem>\n );\n })}\n </YList>\n ) : (\n <div class=\"y-select__no-options\">항목이 없습니다.</div>\n )}\n </YCard>\n ),\n }}\n </YMenu>\n );\n });\n\n return {\n fieldInputRef,\n model,\n selections,\n };\n },\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YSelect.mjs","names":["shallowRef","computed","defineComponent","mergeProps","ref","useModelDuplex","useRender","pressCoordinateProps","pressListItemsPropsOptions","useItems","wrapInArray","deepEqual","getObjectValueByPath","omit","chooseProps","propsFactory","YCard","YFieldInput","pressYFieldInputPropsOptions","YIconDropdown","YList","YListItem","YMenu","returnItemEquals","optionsItem","valueItem","valueKey","arguments","length","undefined","valueItemType","itemValue","pressSelectPropsOptions","opened","Boolean","multiple","weakEquals","valueEquals","type","Function","default","pressYSelectPropsOptions","maxHeight","Number","String","position","YSelect","name","props","emits","value","setup","_ref","slots","fieldInputRef","menuRef","listRef","focused","items","toRefineItems","toEmitItems","model","v","emitValue","selections","map","find","item","selected","selection","onMousedownDisplay","event","disabled","onBlur","$el","contains","relatedTarget","onClickItem","select","onAfterLeave","focus","displayText","text","join","fieldInputProps","_createVNode","$event","offset","origin","base","_len","args","Array","_key","_mergeProps","leading","_len2","_key2","trailing","menu","e","_createTextVNode"],"sources":["../../../src/components/select/YSelect.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\r\nimport type { PropType } from 'vue';\r\nimport { computed, defineComponent, mergeProps, ref } from 'vue';\r\n\r\nimport { useModelDuplex } from '../../composables/communication';\r\nimport { useRender } from '../../composables/component';\r\nimport { pressCoordinateProps } from '../../composables/coordinate';\r\nimport {\r\n ListItem,\r\n pressListItemsPropsOptions,\r\n useItems,\r\n} from '../../composables/list-items';\r\nimport { wrapInArray } from '../../util/array';\r\nimport { deepEqual, getObjectValueByPath, omit } from '../../util/common';\r\nimport { chooseProps, propsFactory } from '../../util/vue-component';\r\nimport { YCard } from '../card';\r\nimport { YFieldInput, pressYFieldInputPropsOptions } from '../field-input';\r\nimport { YIconDropdown } from '../icons/YIconDropdown';\r\nimport { YList, YListItem } from '../list';\r\nimport { YMenu } from '../menu';\r\n\r\nimport './YSelect.scss';\r\n\r\nexport type SelectEquals = (\r\n optionsItem: any,\r\n valueItem: any,\r\n valueKey?: string,\r\n) => boolean;\r\n\r\nexport function returnItemEquals(\r\n optionsItem: any,\r\n valueItem: any,\r\n valueKey = 'value',\r\n) {\r\n const valueItemType = typeof valueItem;\r\n const itemValue =\r\n valueItemType === 'string' || valueItemType === 'number'\r\n ? getObjectValueByPath(optionsItem, valueKey)\r\n : optionsItem;\r\n return deepEqual(itemValue, valueItem);\r\n}\r\n\r\nexport const pressSelectPropsOptions = propsFactory(\r\n {\r\n opened: Boolean as PropType<boolean>,\r\n multiple: Boolean,\r\n weakEquals: Boolean,\r\n valueEquals: {\r\n type: Function as PropType<SelectEquals>,\r\n default: deepEqual,\r\n },\r\n ...pressListItemsPropsOptions(),\r\n },\r\n 'Select',\r\n);\r\n\r\nexport const pressYSelectPropsOptions = propsFactory(\r\n {\r\n maxHeight: {\r\n type: [Number, String],\r\n default: 310,\r\n },\r\n ...pressSelectPropsOptions(),\r\n ...pressYFieldInputPropsOptions(),\r\n ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\r\n 'coordinateStrategy',\r\n ]),\r\n },\r\n 'YSelect',\r\n);\r\n\r\nexport const YSelect = defineComponent({\r\n name: 'YSelect',\r\n props: {\r\n ...pressYSelectPropsOptions(),\r\n },\r\n emits: {\r\n 'update:modelValue': (value: any) => true,\r\n 'update:opened': (opened: boolean) => true,\r\n },\r\n setup(props, { slots }) {\r\n const fieldInputRef = ref();\r\n const menuRef = ref();\r\n const listRef = ref<InstanceType<typeof YList>>();\r\n\r\n const opened = useModelDuplex(props, 'opened');\r\n const focused = shallowRef(false);\r\n\r\n const { items, toRefineItems, toEmitItems } = useItems(props);\r\n const model = useModelDuplex(\r\n props,\r\n 'modelValue',\r\n [],\r\n (v) => toRefineItems(v === null ? [null] : wrapInArray(v)),\r\n (v) => {\r\n const emitValue = toEmitItems(wrapInArray(v));\r\n return props.multiple ? emitValue : emitValue[0] ?? null;\r\n },\r\n );\r\n\r\n const selections = computed<ListItem[]>(() => {\r\n return model.value.map((v: any) => {\r\n return items.value.find((item) => {\r\n return props.valueEquals(item.value, v.value);\r\n });\r\n });\r\n });\r\n\r\n const selected = computed(() => {\r\n return selections.value.map((selection) => selection.props.value);\r\n });\r\n\r\n // Field\r\n function onMousedownDisplay(event: MouseEvent) {\r\n if (props.disabled) {\r\n return;\r\n }\r\n opened.value = !opened.value;\r\n }\r\n\r\n function onBlur(event: FocusEvent) {\r\n if (listRef.value?.$el.contains(event.relatedTarget)) {\r\n opened.value = false;\r\n }\r\n }\r\n\r\n // Menu Contents\r\n function onClickItem(item: ListItem) {\r\n select(item);\r\n if (!props.multiple) {\r\n opened.value = false;\r\n }\r\n }\r\n\r\n function onAfterLeave() {\r\n if (focused.value) {\r\n fieldInputRef.value?.focus();\r\n }\r\n }\r\n\r\n function select(item: ListItem) {\r\n if (props.multiple) {\r\n //\r\n } else {\r\n model.value = [item];\r\n }\r\n }\r\n\r\n const displayText = computed(() => {\r\n if (props.multiple) {\r\n return selections.value.map((item) => item.text).join(', ');\r\n }\r\n return selections.value?.[0]?.text ?? '';\r\n });\r\n\r\n useRender(() => {\r\n const fieldInputProps = chooseProps(props, YFieldInput.props);\r\n return (\r\n <YMenu\r\n v-model={opened.value}\r\n ref={menuRef}\r\n offset={props.offset}\r\n position={props.position}\r\n origin={props.origin}\r\n content-classes={['y-select__content']}\r\n maxHeight={props.maxHeight}\r\n open-on-click-base={false}\r\n onAfterLeave={onAfterLeave}\r\n >\r\n {{\r\n base: (...args: any[]) =>\r\n slots.base ? (\r\n slots.base?.(...args)\r\n ) : (\r\n <YFieldInput\r\n {...{\r\n ...fieldInputProps,\r\n ...mergeProps({ ...args[0].props }, { ref: fieldInputRef }),\r\n }}\r\n onMousedown:display={onMousedownDisplay}\r\n onBlur={onBlur}\r\n readonly\r\n class={['y-select', { 'y-select--opened': opened.value }]}\r\n v-model:focused={focused.value}\r\n >\r\n {{\r\n default: () => {\r\n return (\r\n <div class={['y-select__selection']}>\r\n {slots.selection\r\n ? slots.selection?.()\r\n : displayText.value}\r\n </div>\r\n );\r\n },\r\n leading: slots.leading\r\n ? (...args: any[]) => slots.leading?.(...args)\r\n : undefined,\r\n trailing: (...args: any[]) => {\r\n return slots['expand-icon'] ? (\r\n slots['expand-icon']()\r\n ) : (\r\n <i class=\"y-select__icon\">\r\n <YIconDropdown></YIconDropdown>\r\n </i>\r\n );\r\n },\r\n 'helper-text': slots['helper-text']\r\n ? slots['helper-text']?.()\r\n : undefined,\r\n }}\r\n </YFieldInput>\r\n ),\r\n default: () =>\r\n slots.menu ? (\r\n slots.menu()\r\n ) : (\r\n <YCard>\r\n {items.value.length > 0 ? (\r\n <YList ref={listRef}>\r\n {items.value.map((item) => {\r\n return (\r\n <YListItem onClick={(e) => onClickItem(item)}>\r\n {item.text}\r\n </YListItem>\r\n );\r\n })}\r\n </YList>\r\n ) : (\r\n <div class=\"y-select__no-options\">항목이 없습니다.</div>\r\n )}\r\n </YCard>\r\n ),\r\n }}\r\n </YMenu>\r\n );\r\n });\r\n\r\n return {\r\n fieldInputRef,\r\n model,\r\n selections,\r\n };\r\n },\r\n});\r\n"],"mappings":"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"}
|
|
@@ -1,14 +1,64 @@
|
|
|
1
|
-
import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
|
|
2
|
-
import {
|
|
1
|
+
import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
|
|
2
|
+
import { shallowRef } from '@vue/runtime-core';
|
|
3
|
+
import { computed, defineComponent, ref } from 'vue';
|
|
3
4
|
import { useRender } from "../../composables/component.mjs";
|
|
4
|
-
import {
|
|
5
|
+
import { chooseProps, propsFactory } from "../../util/index.mjs";
|
|
6
|
+
import { YButton, pressYButtonProps } from "../button/index.mjs";
|
|
7
|
+
import { Y_TABS_KEY } from "./shared.mjs";
|
|
8
|
+
import "./YTab.scss";
|
|
9
|
+
export const pressYTabPropsOptions = propsFactory({
|
|
10
|
+
text: String,
|
|
11
|
+
value: String,
|
|
12
|
+
hideIndicator: Boolean,
|
|
13
|
+
indicatorColor: String,
|
|
14
|
+
...pressYButtonProps({
|
|
15
|
+
selectedClass: 'y-tab--selected',
|
|
16
|
+
noWave: true
|
|
17
|
+
})
|
|
18
|
+
}, 'YTab');
|
|
5
19
|
export const YTab = defineComponent({
|
|
6
20
|
name: 'YTab',
|
|
7
|
-
props:
|
|
8
|
-
|
|
21
|
+
props: pressYTabPropsOptions(),
|
|
22
|
+
slots: Object,
|
|
23
|
+
setup(props, _ref) {
|
|
24
|
+
let {
|
|
25
|
+
slots,
|
|
26
|
+
attrs
|
|
27
|
+
} = _ref;
|
|
28
|
+
const selected = shallowRef(false);
|
|
29
|
+
const indicator$ = ref();
|
|
30
|
+
const indicatorStyles = computed(() => {
|
|
31
|
+
return {};
|
|
32
|
+
});
|
|
33
|
+
const attrsProps = computed(() => {
|
|
34
|
+
return {
|
|
35
|
+
role: 'tab',
|
|
36
|
+
'aria-selected': `${String(selected.value)}`,
|
|
37
|
+
tabindex: selected.value ? 0 : -1
|
|
38
|
+
};
|
|
39
|
+
});
|
|
40
|
+
function onChoice(_ref2) {
|
|
41
|
+
let {
|
|
42
|
+
value
|
|
43
|
+
} = _ref2;
|
|
44
|
+
selected.value = value;
|
|
45
|
+
}
|
|
9
46
|
useRender(() => {
|
|
10
|
-
|
|
11
|
-
|
|
47
|
+
const yButtonProps = chooseProps(props, YButton.props);
|
|
48
|
+
console.log(props, yButtonProps);
|
|
49
|
+
return _createVNode(_Fragment, null, [_createVNode(YButton, _mergeProps({
|
|
50
|
+
"class": ['y-tab'],
|
|
51
|
+
"active": false
|
|
52
|
+
}, attrsProps.value, attrs, yButtonProps, {
|
|
53
|
+
"injectSymbol": Y_TABS_KEY,
|
|
54
|
+
"onChoice:selected": onChoice
|
|
55
|
+
}), {
|
|
56
|
+
default: () => slots.default?.() ?? props.text,
|
|
57
|
+
append: () => !props.hideIndicator && _createVNode("div", {
|
|
58
|
+
"ref": indicator$,
|
|
59
|
+
"class": ['y-tab__indicator'],
|
|
60
|
+
"style": indicatorStyles.value
|
|
61
|
+
}, null)
|
|
12
62
|
})]);
|
|
13
63
|
});
|
|
14
64
|
return {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YTab.mjs","names":["defineComponent","useRender","YButton","YTab","name","props","setup","_createVNode","_Fragment","default"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"YTab.mjs","names":["shallowRef","computed","defineComponent","ref","useRender","chooseProps","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","value","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","tabindex","onChoice","_ref2","yButtonProps","console","log","_createVNode","_Fragment","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { shallowRef } from '@vue/runtime-core';\nimport {\n PropType,\n SlotsType,\n computed,\n defineComponent,\n mergeProps,\n ref,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { chooseProps, omit, propsFactory } from '../../util';\nimport { YButton, pressYButtonProps } from '../button';\nimport { Y_TABS_KEY } from './shared';\n\nimport './YTab.scss';\n\nexport const pressYTabPropsOptions = propsFactory(\n {\n text: String as PropType<string>,\n value: String as PropType<string>,\n hideIndicator: Boolean as PropType<boolean>,\n indicatorColor: String as PropType<string>,\n ...pressYButtonProps({\n selectedClass: 'y-tab--selected',\n noWave: true,\n }),\n },\n 'YTab',\n);\n\nexport const YTab = defineComponent({\n name: 'YTab',\n props: pressYTabPropsOptions(),\n slots: Object as SlotsType<{\n default?: any;\n }>,\n setup(props, { slots, attrs }) {\n const selected = shallowRef(false);\n\n const indicator$ = ref();\n const indicatorStyles = computed(() => {\n return {};\n });\n const attrsProps = computed(() => {\n return {\n role: 'tab',\n 'aria-selected': `${String(selected.value)}`,\n tabindex: selected.value ? 0 : -1,\n };\n });\n\n function onChoice({ value }: { value: boolean }) {\n selected.value = value;\n }\n\n useRender(() => {\n const yButtonProps = chooseProps(props, YButton.props);\n console.log(props, yButtonProps);\n return (\n <>\n <YButton\n class={['y-tab']}\n active={false}\n {...attrsProps.value}\n {...attrs}\n {...yButtonProps}\n injectSymbol={Y_TABS_KEY}\n onChoice:selected={onChoice}\n >\n {{\n default: () => slots.default?.() ?? props.text,\n append: () =>\n !props.hideIndicator && (\n <div\n ref={indicator$}\n class={['y-tab__indicator']}\n style={indicatorStyles.value}\n ></div>\n ),\n }}\n </YButton>\n </>\n );\n });\n\n return {};\n },\n});\n"],"mappings":";AAAA,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,SAGEC,QAAQ,EACRC,eAAe,EAEfC,GAAG,QACE,KAAK;AAAC,SAEJC,SAAS;AAAA,SACTC,WAAW,EAAQC,YAAY;AAAA,SAC/BC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,KAAK,EAAED,MAA0B;EACjCE,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEJ,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACjBS,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACZ,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGjB,eAAe,CAAC;EAClCkB,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEX,qBAAqB,CAAC,CAAC;EAC9BY,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAG3B,UAAU,CAAC,KAAK,CAAC;IAElC,MAAM4B,UAAU,GAAGzB,GAAG,CAAC,CAAC;IACxB,MAAM0B,eAAe,GAAG5B,QAAQ,CAAC,MAAM;MACrC,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,MAAM6B,UAAU,GAAG7B,QAAQ,CAAC,MAAM;MAChC,OAAO;QACL8B,IAAI,EAAE,KAAK;QACX,eAAe,EAAG,GAAEnB,MAAM,CAACe,QAAQ,CAACd,KAAK,CAAE,EAAC;QAC5CmB,QAAQ,EAAEL,QAAQ,CAACd,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASoB,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAErB;MAA0B,CAAC,GAAAqB,KAAA;MAC7CP,QAAQ,CAACd,KAAK,GAAGA,KAAK;IACxB;IAEAT,SAAS,CAAC,MAAM;MACd,MAAM+B,YAAY,GAAG9B,WAAW,CAACgB,KAAK,EAAEd,OAAO,CAACc,KAAK,CAAC;MACtDe,OAAO,CAACC,GAAG,CAAChB,KAAK,EAAEc,YAAY,CAAC;MAChC,OAAAG,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAA/B,OAAA,EAAAiC,WAAA;QAAA,SAGa,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTV,UAAU,CAACjB,KAAK,EAChBa,KAAK,EACLS,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBQ,OAAO,EAAEA,CAAA,KAAMnB,KAAK,CAACmB,OAAO,GAAG,CAAC,IAAIpB,KAAK,CAACV,IAAI;QAC9C+B,MAAM,EAAEA,CAAA,KACN,CAACrB,KAAK,CAACP,aAAa,IAAAwB,YAAA;UAAA,OAEXV,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAAChB;QAAK;MAE/B;IAKb,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
@use '../../styles/variables';
|
|
2
|
+
|
|
3
|
+
.y-tab {
|
|
4
|
+
--y-tab-color: var(--y-theme-on-surface);
|
|
5
|
+
--y-tab-active-color: var(--y-theme-primary);
|
|
6
|
+
|
|
7
|
+
--y-tab-indicator-width: 2.7px;
|
|
8
|
+
--y-tab-indicator-color: inherit;
|
|
9
|
+
--y-tab-active-indicator-color: var(--y-theme-primary);
|
|
10
|
+
--y-tab-hover-indicator-color: var(--y-theme-outline);
|
|
11
|
+
|
|
12
|
+
box-shadow: none;
|
|
13
|
+
border-radius: 0;
|
|
14
|
+
font-size: 1rem;
|
|
15
|
+
padding: 4px 8px 12px;
|
|
16
|
+
color: var(--y-tab-color);
|
|
17
|
+
|
|
18
|
+
&:before {
|
|
19
|
+
background: radial-gradient(currentColor 50%, transparent);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__indicator {
|
|
23
|
+
height: var(--y-tab-indicator-width);
|
|
24
|
+
position: absolute;
|
|
25
|
+
left: 4px;
|
|
26
|
+
right: 4px;
|
|
27
|
+
bottom: 0;
|
|
28
|
+
background-color: currentColor;
|
|
29
|
+
border-top-left-radius: 4444px;
|
|
30
|
+
border-top-right-radius: 4444px;
|
|
31
|
+
transform: scaleY(0);
|
|
32
|
+
transform-origin: bottom center;
|
|
33
|
+
transition-timing-function: variables.$basic-transition-timing-function;
|
|
34
|
+
transition-duration: 200ms;
|
|
35
|
+
transition-property: all;
|
|
36
|
+
will-change: transform;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.y-button {
|
|
40
|
+
&__content {
|
|
41
|
+
padding: 0;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&--active {
|
|
46
|
+
font-weight: 700;
|
|
47
|
+
color: var(--y-tab-active-color);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:hover:not(&--active) &__indicator {
|
|
51
|
+
transform: scaleY(1);
|
|
52
|
+
color: var(--y-tab-hover-indicator-color);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&--active &__indicator {
|
|
56
|
+
color: var(--y-tab-active-indicator-color);
|
|
57
|
+
transform: scaleY(1);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -1,16 +1,32 @@
|
|
|
1
|
-
import { createVNode as _createVNode } from "vue";
|
|
2
|
-
import { defineComponent } from 'vue';
|
|
1
|
+
import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
|
2
|
+
import { computed, defineComponent } from 'vue';
|
|
3
|
+
import { pressChoicePropsOptions, useChoice } from "../../composables/choice.mjs";
|
|
3
4
|
import { useRender } from "../../composables/component.mjs";
|
|
4
5
|
import { useResizeObserver } from "../../composables/resize-observer.mjs";
|
|
5
6
|
import { propsFactory } from "../../util/vue-component.mjs";
|
|
6
|
-
|
|
7
|
+
import { YTab } from "./YTab.mjs";
|
|
8
|
+
import { Y_TABS_KEY } from "./shared.mjs";
|
|
9
|
+
import "./YTabs.scss";
|
|
10
|
+
export const pressYTabsPropOptions = propsFactory({
|
|
11
|
+
items: {
|
|
12
|
+
type: Array
|
|
13
|
+
},
|
|
14
|
+
...pressChoicePropsOptions({
|
|
15
|
+
selectedClass: 'y-tab--active',
|
|
16
|
+
mandatory: 'force'
|
|
17
|
+
})
|
|
18
|
+
}, 'YTabs');
|
|
7
19
|
export const YTabs = defineComponent({
|
|
8
20
|
name: 'YTabs',
|
|
9
21
|
props: {
|
|
10
22
|
tag: {
|
|
11
23
|
type: String,
|
|
12
24
|
default: 'div'
|
|
13
|
-
}
|
|
25
|
+
},
|
|
26
|
+
...pressYTabsPropOptions()
|
|
27
|
+
},
|
|
28
|
+
emits: {
|
|
29
|
+
'update:modelValue': value => true
|
|
14
30
|
},
|
|
15
31
|
setup(props, _ref) {
|
|
16
32
|
let {
|
|
@@ -24,9 +40,30 @@ export const YTabs = defineComponent({
|
|
|
24
40
|
resizeObservedRef: content$,
|
|
25
41
|
contentRect
|
|
26
42
|
} = useResizeObserver();
|
|
43
|
+
const choiceState = useChoice(props, Y_TABS_KEY);
|
|
44
|
+
const slotProps = computed(() => {
|
|
45
|
+
return {
|
|
46
|
+
next: choiceState.next,
|
|
47
|
+
prev: choiceState.prev,
|
|
48
|
+
select: choiceState.select,
|
|
49
|
+
isSelected: choiceState.isSelected
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
const tabItems = computed(() => {
|
|
53
|
+
return props.items?.map(item => {
|
|
54
|
+
if (typeof item !== 'object') {
|
|
55
|
+
return {
|
|
56
|
+
text: item,
|
|
57
|
+
value: item
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
return item;
|
|
61
|
+
}) ?? [];
|
|
62
|
+
});
|
|
27
63
|
useRender(() => {
|
|
28
64
|
return _createVNode(props.tag, {
|
|
29
|
-
"class": ['y-tabs']
|
|
65
|
+
"class": ['y-tabs'],
|
|
66
|
+
"role": "tablist"
|
|
30
67
|
}, {
|
|
31
68
|
default: () => [_createVNode("div", {
|
|
32
69
|
"key": "container",
|
|
@@ -34,11 +71,16 @@ export const YTabs = defineComponent({
|
|
|
34
71
|
"class": ['y-tabs__container']
|
|
35
72
|
}, [_createVNode("div", {
|
|
36
73
|
"key": "content",
|
|
37
|
-
"ref": content
|
|
38
|
-
|
|
74
|
+
"ref": content$,
|
|
75
|
+
"class": ['y-tabs__content']
|
|
76
|
+
}, [slots.default ? slots.default(slotProps.value) : tabItems.value.map(tabItem => _createVNode(YTab, _mergeProps(tabItem, {
|
|
77
|
+
"key": tabItem.text
|
|
78
|
+
}), null))])])]
|
|
39
79
|
});
|
|
40
80
|
});
|
|
41
|
-
return {
|
|
81
|
+
return {
|
|
82
|
+
selected: choiceState.selected
|
|
83
|
+
};
|
|
42
84
|
}
|
|
43
85
|
});
|
|
44
86
|
//# sourceMappingURL=YTabs.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YTabs.mjs","names":["defineComponent","useRender","useResizeObserver","propsFactory","pressYTabsPropOptions","YTabs","name","props","tag","
|
|
1
|
+
{"version":3,"file":"YTabs.mjs","names":["computed","defineComponent","pressChoicePropsOptions","useChoice","useRender","useResizeObserver","propsFactory","YTab","Y_TABS_KEY","pressYTabsPropOptions","items","type","Array","selectedClass","mandatory","YTabs","name","props","tag","String","default","emits","value","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","choiceState","slotProps","next","prev","select","isSelected","tabItems","map","item","text","_createVNode","tabItem","_mergeProps","selected"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { PropType, computed, defineComponent } from 'vue';\n\nimport { pressChoicePropsOptions, useChoice } from '../../composables/choice';\nimport { useRender } from '../../composables/component';\nimport { useResizeObserver } from '../../composables/resize-observer';\nimport { propsFactory } from '../../util/vue-component';\nimport { YTab } from './YTab';\nimport { Y_TABS_KEY } from './shared';\nimport { YTabPropItem } from './types';\n\nimport './YTabs.scss';\n\nexport const pressYTabsPropOptions = propsFactory(\n {\n items: {\n type: Array as PropType<YTabPropItem[]>,\n },\n ...pressChoicePropsOptions({\n selectedClass: 'y-tab--active',\n mandatory: 'force' as const,\n }),\n },\n 'YTabs',\n);\n\nexport const YTabs = defineComponent({\n name: 'YTabs',\n props: {\n tag: {\n type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\n default: 'div',\n },\n ...pressYTabsPropOptions(),\n },\n emits: {\n 'update:modelValue': (value: any) => true,\n },\n setup(props, { slots }) {\n const { resizeObservedRef: container$, contentRect: containerRect } =\n useResizeObserver();\n const { resizeObservedRef: content$, contentRect } = useResizeObserver();\n\n const choiceState = useChoice(props, Y_TABS_KEY);\n\n const slotProps = computed(() => {\n return {\n next: choiceState.next,\n prev: choiceState.prev,\n select: choiceState.select,\n isSelected: choiceState.isSelected,\n };\n });\n\n const tabItems = computed(() => {\n return (\n props.items?.map((item) => {\n if (typeof item !== 'object') {\n return {\n text: item,\n value: item,\n };\n }\n return item;\n }) ?? []\n );\n });\n\n useRender(() => {\n return (\n <props.tag class={['y-tabs']} role=\"tablist\">\n <div key=\"container\" ref={container$} class={['y-tabs__container']}>\n <div key=\"content\" ref={content$} class={['y-tabs__content']}>\n {slots.default\n ? slots.default(slotProps.value)\n : tabItems.value.map((tabItem) => (\n <YTab {...tabItem} key={tabItem.text}></YTab>\n ))}\n </div>\n </div>\n </props.tag>\n );\n });\n\n return {\n selected: choiceState.selected,\n };\n },\n});\n\nexport type YTabs = InstanceType<typeof YTabs>;\n"],"mappings":";AAAA,SAAmBA,QAAQ,EAAEC,eAAe,QAAQ,KAAK;AAAC,SAEjDC,uBAAuB,EAAEC,SAAS;AAAA,SAClCC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,YAAY;AAAA,SACZC,IAAI;AAAA,SACJC,UAAU;AAGnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,YAAY,CAC/C;EACEI,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACD,GAAGV,uBAAuB,CAAC;IACzBW,aAAa,EAAE,eAAe;IAC9BC,SAAS,EAAE;EACb,CAAC;AACH,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGd,eAAe,CAAC;EACnCe,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHP,IAAI,EAAEQ,MAA+C;MACrDC,OAAO,EAAE;IACX,CAAC;IACD,GAAGX,qBAAqB,CAAC;EAC3B,CAAC;EACDY,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EACDC,KAAKA,CAACN,KAAK,EAAAO,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjExB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEqB,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGvB,iBAAiB,CAAC,CAAC;IAExE,MAAM0B,WAAW,GAAG5B,SAAS,CAACc,KAAK,EAAET,UAAU,CAAC;IAEhD,MAAMwB,SAAS,GAAGhC,QAAQ,CAAC,MAAM;MAC/B,OAAO;QACLiC,IAAI,EAAEF,WAAW,CAACE,IAAI;QACtBC,IAAI,EAAEH,WAAW,CAACG,IAAI;QACtBC,MAAM,EAAEJ,WAAW,CAACI,MAAM;QAC1BC,UAAU,EAAEL,WAAW,CAACK;MAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGrC,QAAQ,CAAC,MAAM;MAC9B,OACEiB,KAAK,CAACP,KAAK,EAAE4B,GAAG,CAAEC,IAAI,IAAK;QACzB,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;UAC5B,OAAO;YACLC,IAAI,EAAED,IAAI;YACVjB,KAAK,EAAEiB;UACT,CAAC;QACH;QACA,OAAOA,IAAI;MACb,CAAC,CAAC,IAAI,EAAE;IAEZ,CAAC,CAAC;IAEFnC,SAAS,CAAC,MAAM;MACd,OAAAqC,YAAA,CAAAxB,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ,CAAC;QAAA,QAAO;MAAS;QAAAE,OAAA,EAAAA,CAAA,MAAAqB,YAAA;UAAA,OACjC,WAAW;UAAA,OAAMd,UAAU;UAAA,SAAS,CAAC,mBAAmB;QAAC,IAAAc,YAAA;UAAA,OACvD,SAAS;UAAA,OAAMX,QAAQ;UAAA,SAAS,CAAC,iBAAiB;QAAC,IACzDL,KAAK,CAACL,OAAO,GACVK,KAAK,CAACL,OAAO,CAACY,SAAS,CAACV,KAAK,CAAC,GAC9Be,QAAQ,CAACf,KAAK,CAACgB,GAAG,CAAEI,OAAO,IAAAD,YAAA,CAAAlC,IAAA,EAAAoC,WAAA,CACfD,OAAO;UAAA,OAAOA,OAAO,CAACF;QAAI,SACrC,CAAC;MAAA;IAKhB,CAAC,CAAC;IAEF,OAAO;MACLI,QAAQ,EAAEb,WAAW,CAACa;IACxB,CAAC;EACH;AACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\r\nexport * from './YTab';\r\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["Y_TABS_KEY"],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\r\nexport * from './YTab';\r\nexport {Y_TABS_KEY} from \"./shared\";\r\n"],"mappings":";;SAEQA,UAAU"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.mjs","names":["Y_TABS_KEY","Symbol","for"],"sources":["../../../src/components/tab/shared.ts"],"sourcesContent":["import { InjectionKey } from 'vue';\n\nimport { ChoiceProvide } from '../../composables/choice';\n\nexport const Y_TABS_KEY: InjectionKey<ChoiceProvide> =\n Symbol.for('yuyeon.y-tabs');\n"],"mappings":"AAIA,OAAO,MAAMA,UAAuC,GAClDC,MAAM,CAACC,GAAG,CAAC,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/components/tab/types.ts"],"sourcesContent":["export interface YTabPropItem {\r\n text: string;\r\n value: string;\r\n}\r\n"],"mappings":""}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
$table-cell-padding: 0 16px !default;
|
|
2
|
+
$table-head-background: var(--y-theme-surface-variant, #dfe3eb) !default;
|
|
2
3
|
|
|
3
4
|
.y-table {
|
|
4
5
|
display: flex;
|
|
@@ -29,10 +30,10 @@ $table-cell-padding: 0 16px !default;
|
|
|
29
30
|
|
|
30
31
|
&--fixed-head.y-table > &__container > table > thead > tr > th {
|
|
31
32
|
z-index: 1;
|
|
32
|
-
background:
|
|
33
|
+
background: $table-head-background;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
.y-table__container {
|
|
36
37
|
> table {
|
|
37
38
|
font-size: 0.875rem;
|
|
38
39
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YToggleButton.mjs","names":["Y_TOGGLE_BUTTON_KEY","Symbol","for"],"sources":["../../../src/components/toggle-button/YToggleButton.tsx"],"sourcesContent":["import { InjectionKey } from 'vue';\n\nimport { ChoiceProvide } from '../../composables/choice';\n\nexport const Y_TOGGLE_BUTTON_KEY: InjectionKey<ChoiceProvide> = Symbol.for(\n 'yuyeon.y-toggle-button',\n);\n"],"mappings":"AAIA,OAAO,MAAMA,mBAAgD,GAAGC,MAAM,CAACC,GAAG,CACxE,wBACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/toggle-button/index.ts"],"sourcesContent":["export * from './YToggleButton';\r\n"],"mappings":""}
|