yuyeon 0.2.1-rc.9 → 0.2.2-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/dist/yuyeon.js +1766 -1742
  2. package/dist/yuyeon.umd.cjs +3 -3
  3. package/lib/components/alert/YAlert.mjs +2 -2
  4. package/lib/components/alert/YAlert.mjs.map +1 -1
  5. package/lib/components/alert/YAlert.scss +75 -75
  6. package/lib/components/app/YApp.mjs +2 -2
  7. package/lib/components/app/YApp.mjs.map +1 -1
  8. package/lib/components/badge/YBadge.mjs.map +1 -1
  9. package/lib/components/bench/YBench.mjs +2 -2
  10. package/lib/components/bench/YBench.mjs.map +1 -1
  11. package/lib/components/button/YButton.mjs +2 -2
  12. package/lib/components/button/YButton.mjs.map +1 -1
  13. package/lib/components/button/YButton.scss +128 -128
  14. package/lib/components/card/YCard.mjs.map +1 -1
  15. package/lib/components/card/YCard.scss +45 -45
  16. package/lib/components/card/YCardBody.mjs.map +1 -1
  17. package/lib/components/card/YCardFooter.mjs.map +1 -1
  18. package/lib/components/card/YCardHeader.mjs.map +1 -1
  19. package/lib/components/checkbox/YCheckbox.mjs.map +1 -1
  20. package/lib/components/checkbox/YInputCheckbox.mjs.map +1 -1
  21. package/lib/components/checkbox/YInputCheckbox.scss +84 -84
  22. package/lib/components/checkbox/index.mjs.map +1 -1
  23. package/lib/components/chip/YChip.mjs.map +1 -1
  24. package/lib/components/chip/YChip.scss +36 -36
  25. package/lib/components/date-picker/YDateCalendar.mjs.map +1 -1
  26. package/lib/components/date-picker/YDateCalendar.scss +84 -84
  27. package/lib/components/date-picker/YDatePicker.mjs +8 -2
  28. package/lib/components/date-picker/YDatePicker.mjs.map +1 -1
  29. package/lib/components/date-picker/YDatePickerControl.mjs.map +1 -1
  30. package/lib/components/date-picker/YMonthPicker.mjs +8 -1
  31. package/lib/components/date-picker/YMonthPicker.mjs.map +1 -1
  32. package/lib/components/date-picker/YYearPicker.mjs +4 -0
  33. package/lib/components/date-picker/YYearPicker.mjs.map +1 -1
  34. package/lib/components/dialog/YDialog.mjs.map +1 -1
  35. package/lib/components/dialog/index.mjs.map +1 -1
  36. package/lib/components/divider/YDivider.mjs.map +1 -1
  37. package/lib/components/divider/YDivider.scss +2 -2
  38. package/lib/components/dropdown/YDropdown.mjs.map +1 -1
  39. package/lib/components/dropdown/YDropdown.scss +27 -27
  40. package/lib/components/field-input/YFieldInput.mjs +1 -10
  41. package/lib/components/field-input/YFieldInput.mjs.map +1 -1
  42. package/lib/components/field-input/index.mjs.map +1 -1
  43. package/lib/components/form/YForm.mjs.map +1 -1
  44. package/lib/components/hover/YHover.mjs.map +1 -1
  45. package/lib/components/icon/YIcon.mjs.map +1 -1
  46. package/lib/components/icon/YIcon.scss +18 -18
  47. package/lib/components/icons/YIconCheckbox.mjs.map +1 -1
  48. package/lib/components/icons/YIconClear.mjs.map +1 -1
  49. package/lib/components/icons/YIconDropdown.mjs.map +1 -1
  50. package/lib/components/icons/YIconExpand.mjs.map +1 -1
  51. package/lib/components/icons/YIconPageControl.mjs.map +1 -1
  52. package/lib/components/icons/YIconSort.mjs.map +1 -1
  53. package/lib/components/icons/YIconSort.scss +24 -24
  54. package/lib/components/icons/index.mjs.map +1 -1
  55. package/lib/components/img/YImg.mjs +4 -4
  56. package/lib/components/img/YImg.mjs.map +1 -1
  57. package/lib/components/input/YInput.mjs.map +1 -1
  58. package/lib/components/input/YInput.scss +258 -258
  59. package/lib/components/ip-field/YIpv4Field.mjs.map +1 -1
  60. package/lib/components/layer/YLayer.mjs +2 -1
  61. package/lib/components/layer/YLayer.mjs.map +1 -1
  62. package/lib/components/layer/active-stack.mjs.map +1 -1
  63. package/lib/components/layer/base.mjs.map +1 -1
  64. package/lib/components/layer/content.mjs.map +1 -1
  65. package/lib/components/layer/scroll-strategies.mjs.map +1 -1
  66. package/lib/components/list/YList.mjs.map +1 -1
  67. package/lib/components/list/YListItem.mjs.map +1 -1
  68. package/lib/components/loading/YSpinnerRing.mjs.map +1 -1
  69. package/lib/components/menu/YMenu.mjs +2 -2
  70. package/lib/components/menu/YMenu.mjs.map +1 -1
  71. package/lib/components/menu/YMenu.scss +25 -25
  72. package/lib/components/navigation/YNavigation.mjs.map +1 -1
  73. package/lib/components/pagination/YPagination.mjs.map +1 -1
  74. package/lib/components/pagination/YPagination.scss +52 -52
  75. package/lib/components/panel/YDividePanel.mjs.map +1 -1
  76. package/lib/components/plate/YPlate.mjs +2 -2
  77. package/lib/components/plate/YPlate.mjs.map +1 -1
  78. package/lib/components/progress-bar/YProgressBar.mjs.map +1 -1
  79. package/lib/components/progress-bar/YProgressBar.scss +120 -120
  80. package/lib/components/select/YSelect.mjs.map +1 -1
  81. package/lib/components/slider/YSlider.mjs.map +1 -1
  82. package/lib/components/snackbar/YSnackbar.mjs +5 -5
  83. package/lib/components/snackbar/YSnackbar.mjs.map +1 -1
  84. package/lib/components/switch/YSwitch.mjs.map +1 -1
  85. package/lib/components/switch/YSwitch.scss +204 -204
  86. package/lib/components/tab/YTab.mjs.map +1 -1
  87. package/lib/components/tab/YTab.scss +73 -73
  88. package/lib/components/tab/YTabs.mjs.map +1 -1
  89. package/lib/components/tab/YTabs.scss +8 -8
  90. package/lib/components/tab/index.mjs.map +1 -1
  91. package/lib/components/tab/types.mjs.map +1 -1
  92. package/lib/components/table/YDataTable.mjs.map +1 -1
  93. package/lib/components/table/YDataTableBody.mjs.map +1 -1
  94. package/lib/components/table/YDataTableCell.mjs.map +1 -1
  95. package/lib/components/table/YDataTableControl.mjs.map +1 -1
  96. package/lib/components/table/YDataTableHead.mjs +2 -1
  97. package/lib/components/table/YDataTableHead.mjs.map +1 -1
  98. package/lib/components/table/YDataTableLayer.mjs.map +1 -1
  99. package/lib/components/table/YDataTableRow.mjs +1 -1
  100. package/lib/components/table/YDataTableRow.mjs.map +1 -1
  101. package/lib/components/table/YDataTableServer.mjs.map +1 -1
  102. package/lib/components/table/YTable.mjs.map +1 -1
  103. package/lib/components/table/YTable.scss +157 -157
  104. package/lib/components/table/composibles/header.mjs.map +1 -1
  105. package/lib/components/table/composibles/items.mjs +6 -1
  106. package/lib/components/table/composibles/items.mjs.map +1 -1
  107. package/lib/components/table/composibles/options.mjs.map +1 -1
  108. package/lib/components/table/composibles/pagination.mjs.map +1 -1
  109. package/lib/components/table/composibles/selection.mjs +1 -1
  110. package/lib/components/table/composibles/selection.mjs.map +1 -1
  111. package/lib/components/table/composibles/sorted-items.mjs.map +1 -1
  112. package/lib/components/table/composibles/sorting.mjs.map +1 -1
  113. package/lib/components/table/types/header.mjs.map +1 -1
  114. package/lib/components/table/types/index.mjs.map +1 -1
  115. package/lib/components/table/types/row.mjs.map +1 -1
  116. package/lib/components/text-ellipsis/YTextEllipsis.mjs.map +1 -1
  117. package/lib/components/text-ellipsis/YTextEllipsis.scss +43 -43
  118. package/lib/components/text-highlighter/YTextHighlighter.mjs.map +1 -1
  119. package/lib/components/text-interpolation/YTi.mjs.map +1 -1
  120. package/lib/components/textarea/YTextarea.mjs.map +1 -1
  121. package/lib/components/toggle-button/YToggleButton.mjs.map +1 -1
  122. package/lib/components/tooltip/YTooltip.mjs +2 -2
  123. package/lib/components/tooltip/YTooltip.mjs.map +1 -1
  124. package/lib/components/transitions/expand-transition.mjs +26 -6
  125. package/lib/components/transitions/expand-transition.mjs.map +1 -1
  126. package/lib/components/tree-view/YTreeView.mjs.map +1 -1
  127. package/lib/components/tree-view/YTreeView.scss +81 -81
  128. package/lib/components/tree-view/YTreeViewNode.mjs.map +1 -1
  129. package/lib/components/tree-view/types.mjs.map +1 -1
  130. package/lib/components/tree-view/util.mjs.map +1 -1
  131. package/lib/composables/choice.mjs.map +1 -1
  132. package/lib/composables/communication.mjs.map +1 -1
  133. package/lib/composables/component.mjs.map +1 -1
  134. package/lib/composables/coordinate/arrangement.mjs.map +1 -1
  135. package/lib/composables/coordinate/levitation.mjs +2 -2
  136. package/lib/composables/coordinate/levitation.mjs.map +1 -1
  137. package/lib/composables/coordinate/utils/point.mjs.map +1 -1
  138. package/lib/composables/date/factory.mjs.map +1 -1
  139. package/lib/composables/date/index.mjs.map +1 -1
  140. package/lib/composables/date/setting.mjs.map +1 -1
  141. package/lib/composables/date/types.mjs.map +1 -1
  142. package/lib/composables/defaults/index.mjs.map +1 -1
  143. package/lib/composables/defaults/share.mjs.map +1 -1
  144. package/lib/composables/dimension.mjs.map +1 -1
  145. package/lib/composables/focus.mjs.map +1 -1
  146. package/lib/composables/form.mjs.map +1 -1
  147. package/lib/composables/i18n/index.mjs.map +1 -1
  148. package/lib/composables/icon.mjs.map +1 -1
  149. package/lib/composables/layer-group.mjs +2 -2
  150. package/lib/composables/layer-group.mjs.map +1 -1
  151. package/lib/composables/layout.mjs.map +1 -1
  152. package/lib/composables/list-items.mjs.map +1 -1
  153. package/lib/composables/progress.mjs.map +1 -1
  154. package/lib/composables/ref.mjs.map +1 -1
  155. package/lib/composables/resize-observer.mjs.map +1 -1
  156. package/lib/composables/scope.mjs.map +1 -1
  157. package/lib/composables/theme/factory.mjs.map +1 -1
  158. package/lib/composables/theme/index.mjs.map +1 -1
  159. package/lib/composables/theme/setting.mjs.map +1 -1
  160. package/lib/composables/timing.mjs.map +1 -1
  161. package/lib/composables/transition.mjs.map +1 -1
  162. package/lib/composables/validation.mjs.map +1 -1
  163. package/lib/composables/vue-router.mjs.map +1 -1
  164. package/lib/index.mjs.map +1 -1
  165. package/lib/util/anchor.mjs.map +1 -1
  166. package/lib/util/component/component.mjs.map +1 -1
  167. package/lib/util/component/index.mjs.map +1 -1
  168. package/lib/util/component/inject-self.mjs.map +1 -1
  169. package/lib/util/component/props.mjs.map +1 -1
  170. package/lib/util/date/index.mjs.map +1 -1
  171. package/lib/util/reactivity.mjs +3 -3
  172. package/lib/util/reactivity.mjs.map +1 -1
  173. package/lib/util/rect.mjs.map +1 -1
  174. package/lib/util/validation.mjs.map +1 -1
  175. package/package.json +1 -1
  176. package/types/components/date-picker/YMonthPicker.d.ts +1 -1
  177. package/types/components/date-picker/YYearPicker.d.ts +1 -1
  178. package/types/components/dialog/YDialog.d.ts +7 -0
  179. package/types/components/dropdown/YDropdown.d.ts +6 -0
  180. package/types/components/layer/YLayer.d.ts +6 -0
  181. package/types/components/menu/YMenu.d.ts +3 -0
  182. package/types/components/select/YSelect.d.ts +31 -0
  183. package/types/components/snackbar/YSnackbar.d.ts +6 -0
  184. package/types/components/table/YDataTable.d.ts +10 -3
  185. package/types/components/table/YDataTableServer.d.ts +10 -3
  186. package/types/components/table/composibles/header.d.ts +8 -0
  187. package/types/components/table/composibles/selection.d.ts +2 -2
  188. package/types/components/table/types/header.d.ts +1 -0
  189. package/types/components/tooltip/YTooltip.d.ts +4 -0
  190. package/types/components/transitions/expand-transition.d.ts +3 -0
  191. package/types/components/transitions/index.d.ts +6 -0
  192. package/types/composables/layer-group.d.ts +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"YSnackbar.mjs","names":["animate","computed","ref","toRef","watch","withModifiers","useModelDuplex","useRender","useTimer","omit","bindClasses","chooseProps","defineComponent","propsFactory","YLayer","pressYLayerProps","YPlate","defaultSnackbarTransition","name","onBeforeEnter","direction","el","getAttribute","cache","style","getPropertyValue","setAttribute","setProperty","onEnter","done","motion","transform","replace","duration","finished","then","removeAttribute","pressYSnackbarPropsOptions","scrollStrategy","position","modelValue","type","Boolean","contentClasses","Array","String","Object","transition","default","Number","closeClickContent","YSnackbar","components","emits","props","setup","_ref","emit","slots","active","hover","classes","computedContentClasses","boundClasses","computedInset","first","second","split","y","x","ret","dismiss","value","start","stop","reset","setTimer","neo","isNaN","immediate","onClickContent","event","proxyTransition","includes","_createVNode","_mergeProps","v","_Fragment","onMouseenter","onMouseleave"],"sources":["../../../src/components/snackbar/YSnackbar.tsx"],"sourcesContent":["import { animate } from 'motion';\nimport { type PropType, computed, ref, toRef, watch, withModifiers } from 'vue';\n\nimport { useModelDuplex } from '@/composables/communication';\nimport { useRender } from '@/composables/component';\nimport { useTimer } from '@/composables/timing';\nimport { omit } from '@/util/common';\nimport {\n bindClasses,\n chooseProps,\n defineComponent,\n propsFactory,\n} from '@/util/component';\n\nimport { YLayer, pressYLayerProps } from '../layer';\nimport { YPlate } from '../plate';\n\nimport './YSnackbar.scss';\n\nconst defaultSnackbarTransition = {\n name: 'y-snackbar',\n onBeforeEnter: (direction: 'top' | 'bottom') => (el: HTMLElement) => {\n if (!el.getAttribute('data-transform')) {\n const cache = el.style.getPropertyValue('transform');\n el.setAttribute('data-transform', cache);\n el.style.setProperty(\n 'transform',\n `${cache} translateY(${direction === 'top' ? '-' : ''}40px)`,\n );\n }\n },\n onEnter(el: HTMLElement, done: () => void) {\n const cache = el.getAttribute('data-transform');\n const motion = el.getAttribute('data-motion');\n if (motion || !cache) {\n return;\n }\n el.setAttribute('data-motion', 'true');\n animate(\n el,\n {\n transform: `${cache.replace(/translateY(.+)/, 'translateY(0)')}`,\n },\n { duration: 0.1 },\n ).finished.then(() => {\n el.removeAttribute('data-transform');\n el.removeAttribute('data-motion');\n done();\n });\n },\n};\n\nexport const pressYSnackbarPropsOptions = propsFactory(\n {\n ...pressYLayerProps({\n scrollStrategy: 'none' as const,\n position: 'top center',\n }),\n modelValue: {\n type: Boolean as PropType<boolean>,\n },\n contentClasses: {\n type: [Array, String, Object] as PropType<\n string[] | string | Record<string, any>\n >,\n },\n transition: {\n type: [String, Object] as PropType<string | any>,\n default: () => ({ ...defaultSnackbarTransition }),\n },\n /**\n * @property Number\n *\n * The amount of time the snackbar should be displayed.\n * @default 4000\n */\n duration: {\n type: Number as PropType<number>,\n default: 4000,\n },\n closeClickContent: {\n type: Boolean,\n default: true,\n },\n },\n 'YSnackbar',\n);\n\nexport const YSnackbar = defineComponent({\n name: 'YSnackbar',\n components: { YPlate, YLayer },\n emits: ['update:modelValue', 'click'],\n props: {\n ...pressYSnackbarPropsOptions(),\n },\n setup(props, { emit, slots }) {\n const active = useModelDuplex(props);\n const hover = ref(false);\n const duration = toRef(props, 'duration');\n\n const classes = computed(() => {\n return {\n 'y-snackbar': true,\n };\n });\n\n const computedContentClasses = computed<Record<string, boolean>>(() => {\n const boundClasses = bindClasses(props.contentClasses);\n return {\n ...boundClasses,\n 'y-snackbar__display': true,\n };\n });\n\n const computedInset = computed(() => {\n const [first, second] = props.position?.split(' ');\n let y = 'top';\n let x = 'left';\n if (second) {\n x = second;\n y = first;\n } else if (first === 'bottom') {\n y = 'bottom';\n } else {\n x = first;\n }\n const ret = {\n [x === 'center' ? 'left' : x]: x === 'center' ? `50%` : 0,\n [y]: 0,\n } as any;\n if (x === 'center') {\n ret.transform = 'translateX(-50%)';\n }\n return ret;\n });\n\n function dismiss() {\n active.value = false;\n }\n\n const { start, stop, reset } = useTimer(dismiss, duration);\n function setTimer() {\n if (props.duration > 0) {\n start();\n }\n }\n\n watch(hover, (neo: boolean) => {\n if (neo) {\n stop();\n } else {\n setTimer();\n }\n });\n\n watch(\n () => props.duration,\n (neo) => {\n if (!isNaN(neo) && active.value) {\n reset();\n if (!hover.value) {\n setTimer();\n }\n }\n },\n );\n\n watch(\n active,\n (neo: boolean) => {\n if (neo) {\n setTimer();\n } else {\n reset();\n }\n },\n { immediate: true },\n );\n\n function onClickContent(event: Event) {\n emit('click', event);\n if (props.closeClickContent) {\n active.value = false;\n }\n }\n\n const proxyTransition = computed(() => {\n const { transition, position } = props;\n if (transition?.name === 'y-snackbar') {\n transition.onBeforeEnter = defaultSnackbarTransition.onBeforeEnter(\n position.includes('top') ? 'top' : 'bottom',\n );\n return { ...transition };\n }\n return props.transition;\n });\n\n useRender(() => {\n return (\n <YLayer\n ref=\"layer\"\n {...omit(chooseProps(props, YLayer.props), [\n 'scrim',\n 'transition',\n 'content-classes',\n 'classes',\n ])}\n modelValue={active.value}\n onUpdate:modelValue={(v) => (active.value = v)}\n classes={classes.value}\n content-classes={computedContentClasses.value}\n scrim={false}\n content-styles={computedInset.value}\n transition={proxyTransition.value as any}\n >\n {{\n default: () => (\n <>\n <YPlate></YPlate>\n <div\n class=\"y-snackbar__content\"\n onClick={withModifiers(onClickContent, ['exact'])}\n onMouseenter={() => (hover.value = true)}\n onMouseleave={() => (hover.value = false)}\n >\n {slots.default?.()}\n </div>\n </>\n ),\n }}\n </YLayer>\n );\n });\n\n return {\n active,\n hover,\n classes,\n computedContentClasses,\n computedInset,\n proxyTransition,\n onClickContent,\n };\n },\n});\n\nexport type YSnackbar = InstanceType<typeof YSnackbar>;\n"],"mappings":"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"}
1
+ {"version":3,"file":"YSnackbar.mjs","names":["animate","computed","ref","toRef","watch","withModifiers","useModelDuplex","useRender","useTimer","omit","bindClasses","chooseProps","defineComponent","propsFactory","YLayer","pressYLayerProps","YPlate","defaultSnackbarTransition","name","onBeforeEnter","direction","el","getAttribute","cache","style","getPropertyValue","setAttribute","setProperty","onEnter","done","motion","transform","replace","duration","finished","then","removeAttribute","pressYSnackbarPropsOptions","scrollStrategy","position","modelValue","type","Boolean","contentClasses","Array","String","Object","transition","default","Number","closeClickContent","YSnackbar","components","emits","props","setup","_ref","emit","slots","active","hover","classes","computedContentClasses","boundClasses","computedInset","first","second","split","y","x","ret","dismiss","value","start","stop","reset","setTimer","neo","isNaN","immediate","onClickContent","event","proxyTransition","includes","_createVNode","_mergeProps","v","_Fragment","onMouseenter","onMouseleave"],"sources":["../../../src/components/snackbar/YSnackbar.tsx"],"sourcesContent":["import { animate } from 'motion';\r\nimport { type PropType, computed, ref, toRef, watch, withModifiers } from 'vue';\r\n\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { useRender } from '@/composables/component';\r\nimport { useTimer } from '@/composables/timing';\r\nimport { omit } from '@/util/common';\r\nimport {\r\n bindClasses,\r\n chooseProps,\r\n defineComponent,\r\n propsFactory,\r\n} from '@/util/component';\r\n\r\nimport { YLayer, pressYLayerProps } from '../layer';\r\nimport { YPlate } from '../plate';\r\n\r\nimport './YSnackbar.scss';\r\n\r\nconst defaultSnackbarTransition = {\r\n name: 'y-snackbar',\r\n onBeforeEnter: (direction: 'top' | 'bottom') => (el: HTMLElement) => {\r\n if (!el.getAttribute('data-transform')) {\r\n const cache = el.style.getPropertyValue('transform');\r\n el.setAttribute('data-transform', cache);\r\n el.style.setProperty(\r\n 'transform',\r\n `${cache} translateY(${direction === 'top' ? '-' : ''}40px)`,\r\n );\r\n }\r\n },\r\n onEnter(el: HTMLElement, done: () => void) {\r\n const cache = el.getAttribute('data-transform');\r\n const motion = el.getAttribute('data-motion');\r\n if (motion || !cache) {\r\n return;\r\n }\r\n el.setAttribute('data-motion', 'true');\r\n animate(\r\n el,\r\n {\r\n transform: `${cache.replace(/translateY(.+)/, 'translateY(0)')}`,\r\n },\r\n { duration: 0.1 },\r\n ).finished.then(() => {\r\n el.removeAttribute('data-transform');\r\n el.removeAttribute('data-motion');\r\n done();\r\n });\r\n },\r\n};\r\n\r\nexport const pressYSnackbarPropsOptions = propsFactory(\r\n {\r\n ...pressYLayerProps({\r\n scrollStrategy: 'none' as const,\r\n position: 'top center',\r\n }),\r\n modelValue: {\r\n type: Boolean as PropType<boolean>,\r\n },\r\n contentClasses: {\r\n type: [Array, String, Object] as PropType<\r\n string[] | string | Record<string, any>\r\n >,\r\n },\r\n transition: {\r\n type: [String, Object] as PropType<string | any>,\r\n default: () => ({ ...defaultSnackbarTransition }),\r\n },\r\n /**\r\n * @property Number\r\n *\r\n * The amount of time the snackbar should be displayed.\r\n * @default 4000\r\n */\r\n duration: {\r\n type: Number as PropType<number>,\r\n default: 4000,\r\n },\r\n closeClickContent: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n 'YSnackbar',\r\n);\r\n\r\nexport const YSnackbar = defineComponent({\r\n name: 'YSnackbar',\r\n components: { YPlate, YLayer },\r\n emits: ['update:modelValue', 'click'],\r\n props: {\r\n ...pressYSnackbarPropsOptions(),\r\n },\r\n setup(props, { emit, slots }) {\r\n const active = useModelDuplex(props);\r\n const hover = ref(false);\r\n const duration = toRef(props, 'duration');\r\n\r\n const classes = computed(() => {\r\n return {\r\n 'y-snackbar': true,\r\n };\r\n });\r\n\r\n const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n const boundClasses = bindClasses(props.contentClasses);\r\n return {\r\n ...boundClasses,\r\n 'y-snackbar__display': true,\r\n };\r\n });\r\n\r\n const computedInset = computed(() => {\r\n const [first, second] = props.position?.split(' ');\r\n let y = 'top';\r\n let x = 'left';\r\n if (second) {\r\n x = second;\r\n y = first;\r\n } else if (first === 'bottom') {\r\n y = 'bottom';\r\n } else {\r\n x = first;\r\n }\r\n const ret = {\r\n [x === 'center' ? 'left' : x]: x === 'center' ? `50%` : 0,\r\n [y]: 0,\r\n } as any;\r\n if (x === 'center') {\r\n ret.transform = 'translateX(-50%)';\r\n }\r\n return ret;\r\n });\r\n\r\n function dismiss() {\r\n active.value = false;\r\n }\r\n\r\n const { start, stop, reset } = useTimer(dismiss, duration);\r\n function setTimer() {\r\n if (props.duration > 0) {\r\n start();\r\n }\r\n }\r\n\r\n watch(hover, (neo: boolean) => {\r\n if (neo) {\r\n stop();\r\n } else {\r\n setTimer();\r\n }\r\n });\r\n\r\n watch(\r\n () => props.duration,\r\n (neo) => {\r\n if (!isNaN(neo) && active.value) {\r\n reset();\r\n if (!hover.value) {\r\n setTimer();\r\n }\r\n }\r\n },\r\n );\r\n\r\n watch(\r\n active,\r\n (neo: boolean) => {\r\n if (neo) {\r\n setTimer();\r\n } else {\r\n reset();\r\n }\r\n },\r\n { immediate: true },\r\n );\r\n\r\n function onClickContent(event: Event) {\r\n emit('click', event);\r\n if (props.closeClickContent) {\r\n active.value = false;\r\n }\r\n }\r\n\r\n const proxyTransition = computed(() => {\r\n const { transition, position } = props;\r\n if (transition?.name === 'y-snackbar') {\r\n transition.onBeforeEnter = defaultSnackbarTransition.onBeforeEnter(\r\n position.includes('top') ? 'top' : 'bottom',\r\n );\r\n return { ...transition };\r\n }\r\n return props.transition;\r\n });\r\n\r\n useRender(() => {\r\n return (\r\n <YLayer\r\n ref=\"layer\"\r\n {...omit(chooseProps(props, YLayer.props), [\r\n 'scrim',\r\n 'transition',\r\n 'content-classes',\r\n 'classes',\r\n ])}\r\n modelValue={active.value}\r\n onUpdate:modelValue={(v) => (active.value = v)}\r\n classes={classes.value}\r\n content-classes={computedContentClasses.value}\r\n scrim={false}\r\n content-styles={computedInset.value}\r\n transition={proxyTransition.value as any}\r\n >\r\n {{\r\n default: () => (\r\n <>\r\n <YPlate></YPlate>\r\n <div\r\n class=\"y-snackbar__content\"\r\n onClick={withModifiers(onClickContent, ['exact'])}\r\n onMouseenter={() => (hover.value = true)}\r\n onMouseleave={() => (hover.value = false)}\r\n >\r\n {slots.default?.()}\r\n </div>\r\n </>\r\n ),\r\n }}\r\n </YLayer>\r\n );\r\n });\r\n\r\n return {\r\n active,\r\n hover,\r\n classes,\r\n computedContentClasses,\r\n computedInset,\r\n proxyTransition,\r\n onClickContent,\r\n };\r\n },\r\n});\r\n\r\nexport type YSnackbar = InstanceType<typeof YSnackbar>;\r\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"YSwitch.mjs","names":["withModifiers","defineComponent","uidCounter","YSwitch","name","model","prop","event","props","input","type","Boolean","Array","default","value","String","Number","Object","max","loading","disabled","stickOut","stateLabel","color","labelOn","labelOff","data","innerValue","counterId","focused","created","iid","toString","isArray","inputByValue","computed","isMultipleInput","multipleInputIndex","findIndex","inp","inputId","id","trackStyles","backgroundColor","classes","methods","found","find","undefined","changeMultipleInput","checked","multipleInput","slice","length","$emit","nextChange","push","splice","$nextTick","onClick","$event","changeInput","onFocus","onBlur","onKeydown","onChange","$checkbox","target","stopImmediatePropagation","watch","render","$slots","_createVNode","label"],"sources":["../../../src/components/switch/YSwitch.tsx"],"sourcesContent":["import { type PropType, withModifiers } from 'vue';\n\nimport { defineComponent } from '@/util/component';\n\nimport './YSwitch.scss';\n\nlet uidCounter = 0;\n\nexport const YSwitch = defineComponent({\n name: 'YSwitch',\n model: {\n prop: 'input',\n event: 'change',\n },\n props: {\n input: {\n type: [Boolean, Array] as PropType<boolean | any[]>,\n default: false,\n },\n value: {\n type: [String, Number, Object] as PropType<any>,\n },\n max: {\n type: Number,\n },\n loading: {\n type: Boolean,\n },\n disabled: {\n type: Boolean,\n },\n stickOut: {\n type: Boolean,\n },\n stateLabel: {\n type: Boolean,\n },\n color: {\n type: String,\n },\n labelOn: {\n type: String,\n default: 'ON',\n },\n labelOff: {\n type: String,\n default: 'OFF',\n },\n },\n data() {\n return {\n innerValue: false,\n counterId: '',\n focused: false,\n };\n },\n created() {\n const iid = uidCounter.toString();\n uidCounter += 1;\n this.counterId = iid;\n if (Array.isArray(this.input)) {\n this.inputByValue();\n } else {\n this.innerValue = this.input;\n }\n },\n computed: {\n isMultipleInput() {\n return Array.isArray(this.input);\n },\n multipleInputIndex() {\n if (!Array.isArray(this.input)) {\n return -1;\n }\n return this.input.findIndex((inp) => {\n return inp === this.value;\n });\n },\n inputId() {\n const id = this.counterId;\n return `y-switch--${id}`;\n },\n trackStyles() {\n return {\n backgroundColor: this.color,\n };\n },\n classes() {\n return {\n 'y-switch--disabled': this.disabled,\n 'y-switch--loading': this.loading,\n 'y-switch--active': this.innerValue,\n 'y-switch--stick-out': this.stickOut,\n 'y-switch--focused': this.focused,\n };\n },\n },\n methods: {\n inputByValue() {\n if (Array.isArray(this.input)) {\n const found = this.input.find((inp: any) => {\n return inp === this.value;\n });\n\n if (found !== undefined) {\n this.innerValue = true;\n } else {\n this.innerValue = false;\n }\n } else if (typeof this.input === 'boolean') {\n this.innerValue = this.input;\n }\n },\n changeMultipleInput(checked: boolean) {\n if (Array.isArray(this.input)) {\n const multipleInput = this.input.slice();\n if (\n checked &&\n this.max !== undefined &&\n multipleInput.length >= this.max\n ) {\n this.$emit('overmax');\n this.nextChange(false, multipleInput);\n return;\n }\n if (checked && this.multipleInputIndex < 0) {\n multipleInput.push(this.value);\n } else if (this.multipleInputIndex > -1) {\n multipleInput.splice(this.multipleInputIndex, 1);\n }\n this.$emit('change', multipleInput);\n }\n },\n nextChange(checked: boolean, value: any) {\n this.$nextTick(() => {\n this.innerValue = checked;\n });\n },\n onClick($event: Event) {\n if (this.disabled || this.loading) return;\n this.changeInput(!this.innerValue, $event);\n },\n onFocus() {\n this.focused = true;\n },\n onBlur() {\n this.focused = false;\n },\n onKeydown($event: KeyboardEvent) {\n // nothing\n },\n onChange($event: Event) {\n const $checkbox = $event.target as HTMLInputElement;\n const { checked } = $checkbox;\n $event.stopImmediatePropagation();\n this.changeInput(checked, $event);\n },\n changeInput(checked: boolean, event?: Event) {\n this.innerValue = checked;\n if (this.isMultipleInput) {\n this.changeMultipleInput(checked);\n } else {\n this.$emit('change', checked);\n }\n },\n },\n watch: {\n input() {\n this.inputByValue();\n },\n },\n render() {\n const {\n $slots,\n classes,\n onClick,\n onKeydown,\n onFocus,\n onBlur,\n onChange,\n inputId,\n innerValue,\n disabled,\n trackStyles,\n stateLabel,\n labelOn,\n labelOff,\n loading,\n } = this;\n return (\n <div class={{ 'y-switch': true, ...classes }}>\n <div class=\"y-switch__slot\">\n <div\n class=\"y-switch__input\"\n onClick={withModifiers(onClick, ['exact'])}\n onKeydown={onKeydown}\n >\n <input\n id={inputId}\n aria-checked={innerValue}\n type=\"checkbox\"\n role=\"switch\"\n onFocus={onFocus}\n onBlur={onBlur}\n onChange={onChange}\n disabled={disabled}\n checked={innerValue}\n ref=\"checkbox\"\n />\n <div class=\"y-switch__track\" style={trackStyles}>\n {stateLabel && (\n <div class=\"y-switch__state\">\n <span class=\"y-switch__state-label y-switch__state-label--on\">\n {{ labelOn }}\n </span>\n <span class=\"y-switch__state-label y-switch__state-label--off\">\n {{ labelOff }}\n </span>\n </div>\n )}\n </div>\n <div class=\"y-switch__thumb\">\n {loading && <div class=\"y-switch__spinner\"></div>}\n </div>\n </div>\n {$slots.label && (\n <label for={inputId} class=\"y-switch__label\">\n {$slots.label?.()}\n <input hidden />\n </label>\n )}\n </div>\n </div>\n );\n },\n});\n\nexport type YSwitch = InstanceType<typeof YSwitch>;\n"],"mappings":"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"}
1
+ {"version":3,"file":"YSwitch.mjs","names":["withModifiers","defineComponent","uidCounter","YSwitch","name","model","prop","event","props","input","type","Boolean","Array","default","value","String","Number","Object","max","loading","disabled","stickOut","stateLabel","color","labelOn","labelOff","data","innerValue","counterId","focused","created","iid","toString","isArray","inputByValue","computed","isMultipleInput","multipleInputIndex","findIndex","inp","inputId","id","trackStyles","backgroundColor","classes","methods","found","find","undefined","changeMultipleInput","checked","multipleInput","slice","length","$emit","nextChange","push","splice","$nextTick","onClick","$event","changeInput","onFocus","onBlur","onKeydown","onChange","$checkbox","target","stopImmediatePropagation","watch","render","$slots","_createVNode","label"],"sources":["../../../src/components/switch/YSwitch.tsx"],"sourcesContent":["import { type PropType, withModifiers } from 'vue';\r\n\r\nimport { defineComponent } from '@/util/component';\r\n\r\nimport './YSwitch.scss';\r\n\r\nlet uidCounter = 0;\r\n\r\nexport const YSwitch = defineComponent({\r\n name: 'YSwitch',\r\n model: {\r\n prop: 'input',\r\n event: 'change',\r\n },\r\n props: {\r\n input: {\r\n type: [Boolean, Array] as PropType<boolean | any[]>,\r\n default: false,\r\n },\r\n value: {\r\n type: [String, Number, Object] as PropType<any>,\r\n },\r\n max: {\r\n type: Number,\r\n },\r\n loading: {\r\n type: Boolean,\r\n },\r\n disabled: {\r\n type: Boolean,\r\n },\r\n stickOut: {\r\n type: Boolean,\r\n },\r\n stateLabel: {\r\n type: Boolean,\r\n },\r\n color: {\r\n type: String,\r\n },\r\n labelOn: {\r\n type: String,\r\n default: 'ON',\r\n },\r\n labelOff: {\r\n type: String,\r\n default: 'OFF',\r\n },\r\n },\r\n data() {\r\n return {\r\n innerValue: false,\r\n counterId: '',\r\n focused: false,\r\n };\r\n },\r\n created() {\r\n const iid = uidCounter.toString();\r\n uidCounter += 1;\r\n this.counterId = iid;\r\n if (Array.isArray(this.input)) {\r\n this.inputByValue();\r\n } else {\r\n this.innerValue = this.input;\r\n }\r\n },\r\n computed: {\r\n isMultipleInput() {\r\n return Array.isArray(this.input);\r\n },\r\n multipleInputIndex() {\r\n if (!Array.isArray(this.input)) {\r\n return -1;\r\n }\r\n return this.input.findIndex((inp) => {\r\n return inp === this.value;\r\n });\r\n },\r\n inputId() {\r\n const id = this.counterId;\r\n return `y-switch--${id}`;\r\n },\r\n trackStyles() {\r\n return {\r\n backgroundColor: this.color,\r\n };\r\n },\r\n classes() {\r\n return {\r\n 'y-switch--disabled': this.disabled,\r\n 'y-switch--loading': this.loading,\r\n 'y-switch--active': this.innerValue,\r\n 'y-switch--stick-out': this.stickOut,\r\n 'y-switch--focused': this.focused,\r\n };\r\n },\r\n },\r\n methods: {\r\n inputByValue() {\r\n if (Array.isArray(this.input)) {\r\n const found = this.input.find((inp: any) => {\r\n return inp === this.value;\r\n });\r\n\r\n if (found !== undefined) {\r\n this.innerValue = true;\r\n } else {\r\n this.innerValue = false;\r\n }\r\n } else if (typeof this.input === 'boolean') {\r\n this.innerValue = this.input;\r\n }\r\n },\r\n changeMultipleInput(checked: boolean) {\r\n if (Array.isArray(this.input)) {\r\n const multipleInput = this.input.slice();\r\n if (\r\n checked &&\r\n this.max !== undefined &&\r\n multipleInput.length >= this.max\r\n ) {\r\n this.$emit('overmax');\r\n this.nextChange(false, multipleInput);\r\n return;\r\n }\r\n if (checked && this.multipleInputIndex < 0) {\r\n multipleInput.push(this.value);\r\n } else if (this.multipleInputIndex > -1) {\r\n multipleInput.splice(this.multipleInputIndex, 1);\r\n }\r\n this.$emit('change', multipleInput);\r\n }\r\n },\r\n nextChange(checked: boolean, value: any) {\r\n this.$nextTick(() => {\r\n this.innerValue = checked;\r\n });\r\n },\r\n onClick($event: Event) {\r\n if (this.disabled || this.loading) return;\r\n this.changeInput(!this.innerValue, $event);\r\n },\r\n onFocus() {\r\n this.focused = true;\r\n },\r\n onBlur() {\r\n this.focused = false;\r\n },\r\n onKeydown($event: KeyboardEvent) {\r\n // nothing\r\n },\r\n onChange($event: Event) {\r\n const $checkbox = $event.target as HTMLInputElement;\r\n const { checked } = $checkbox;\r\n $event.stopImmediatePropagation();\r\n this.changeInput(checked, $event);\r\n },\r\n changeInput(checked: boolean, event?: Event) {\r\n this.innerValue = checked;\r\n if (this.isMultipleInput) {\r\n this.changeMultipleInput(checked);\r\n } else {\r\n this.$emit('change', checked);\r\n }\r\n },\r\n },\r\n watch: {\r\n input() {\r\n this.inputByValue();\r\n },\r\n },\r\n render() {\r\n const {\r\n $slots,\r\n classes,\r\n onClick,\r\n onKeydown,\r\n onFocus,\r\n onBlur,\r\n onChange,\r\n inputId,\r\n innerValue,\r\n disabled,\r\n trackStyles,\r\n stateLabel,\r\n labelOn,\r\n labelOff,\r\n loading,\r\n } = this;\r\n return (\r\n <div class={{ 'y-switch': true, ...classes }}>\r\n <div class=\"y-switch__slot\">\r\n <div\r\n class=\"y-switch__input\"\r\n onClick={withModifiers(onClick, ['exact'])}\r\n onKeydown={onKeydown}\r\n >\r\n <input\r\n id={inputId}\r\n aria-checked={innerValue}\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n onFocus={onFocus}\r\n onBlur={onBlur}\r\n onChange={onChange}\r\n disabled={disabled}\r\n checked={innerValue}\r\n ref=\"checkbox\"\r\n />\r\n <div class=\"y-switch__track\" style={trackStyles}>\r\n {stateLabel && (\r\n <div class=\"y-switch__state\">\r\n <span class=\"y-switch__state-label y-switch__state-label--on\">\r\n {{ labelOn }}\r\n </span>\r\n <span class=\"y-switch__state-label y-switch__state-label--off\">\r\n {{ labelOff }}\r\n </span>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"y-switch__thumb\">\r\n {loading && <div class=\"y-switch__spinner\"></div>}\r\n </div>\r\n </div>\r\n {$slots.label && (\r\n <label for={inputId} class=\"y-switch__label\">\r\n {$slots.label?.()}\r\n <input hidden />\r\n </label>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n },\r\n});\r\n\r\nexport type YSwitch = InstanceType<typeof YSwitch>;\r\n"],"mappings":";AAAA,SAAwBA,aAAa,QAAQ,KAAK;AAAC,SAE1CC,eAAe;AAExB;AAEA,IAAIC,UAAU,GAAG,CAAC;AAElB,OAAO,MAAMC,OAAO,GAAGF,eAAe,CAAC;EACrCG,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE;IACLC,IAAI,EAAE,OAAO;IACbC,KAAK,EAAE;EACT,CAAC;EACDC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAE,CAACC,OAAO,EAAEC,KAAK,CAA8B;MACnDC,OAAO,EAAE;IACX,CAAC;IACDC,KAAK,EAAE;MACLJ,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,EAAEC,MAAM;IAC/B,CAAC;IACDC,GAAG,EAAE;MACHR,IAAI,EAAEM;IACR,CAAC;IACDG,OAAO,EAAE;MACPT,IAAI,EAAEC;IACR,CAAC;IACDS,QAAQ,EAAE;MACRV,IAAI,EAAEC;IACR,CAAC;IACDU,QAAQ,EAAE;MACRX,IAAI,EAAEC;IACR,CAAC;IACDW,UAAU,EAAE;MACVZ,IAAI,EAAEC;IACR,CAAC;IACDY,KAAK,EAAE;MACLb,IAAI,EAAEK;IACR,CAAC;IACDS,OAAO,EAAE;MACPd,IAAI,EAAEK,MAAM;MACZF,OAAO,EAAE;IACX,CAAC;IACDY,QAAQ,EAAE;MACRf,IAAI,EAAEK,MAAM;MACZF,OAAO,EAAE;IACX;EACF,CAAC;EACDa,IAAIA,CAAA,EAAG;IACL,OAAO;MACLC,UAAU,EAAE,KAAK;MACjBC,SAAS,EAAE,EAAE;MACbC,OAAO,EAAE;IACX,CAAC;EACH,CAAC;EACDC,OAAOA,CAAA,EAAG;IACR,MAAMC,GAAG,GAAG7B,UAAU,CAAC8B,QAAQ,CAAC,CAAC;IACjC9B,UAAU,IAAI,CAAC;IACf,IAAI,CAAC0B,SAAS,GAAGG,GAAG;IACpB,IAAInB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;MAC7B,IAAI,CAACyB,YAAY,CAAC,CAAC;IACrB,CAAC,MAAM;MACL,IAAI,CAACP,UAAU,GAAG,IAAI,CAAClB,KAAK;IAC9B;EACF,CAAC;EACD0B,QAAQ,EAAE;IACRC,eAAeA,CAAA,EAAG;MAChB,OAAOxB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC;IAClC,CAAC;IACD4B,kBAAkBA,CAAA,EAAG;MACnB,IAAI,CAACzB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;QAC9B,OAAO,CAAC,CAAC;MACX;MACA,OAAO,IAAI,CAACA,KAAK,CAAC6B,SAAS,CAAEC,GAAG,IAAK;QACnC,OAAOA,GAAG,KAAK,IAAI,CAACzB,KAAK;MAC3B,CAAC,CAAC;IACJ,CAAC;IACD0B,OAAOA,CAAA,EAAG;MACR,MAAMC,EAAE,GAAG,IAAI,CAACb,SAAS;MACzB,OAAQ,aAAYa,EAAG,EAAC;IAC1B,CAAC;IACDC,WAAWA,CAAA,EAAG;MACZ,OAAO;QACLC,eAAe,EAAE,IAAI,CAACpB;MACxB,CAAC;IACH,CAAC;IACDqB,OAAOA,CAAA,EAAG;MACR,OAAO;QACL,oBAAoB,EAAE,IAAI,CAACxB,QAAQ;QACnC,mBAAmB,EAAE,IAAI,CAACD,OAAO;QACjC,kBAAkB,EAAE,IAAI,CAACQ,UAAU;QACnC,qBAAqB,EAAE,IAAI,CAACN,QAAQ;QACpC,mBAAmB,EAAE,IAAI,CAACQ;MAC5B,CAAC;IACH;EACF,CAAC;EACDgB,OAAO,EAAE;IACPX,YAAYA,CAAA,EAAG;MACb,IAAItB,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;QAC7B,MAAMqC,KAAK,GAAG,IAAI,CAACrC,KAAK,CAACsC,IAAI,CAAER,GAAQ,IAAK;UAC1C,OAAOA,GAAG,KAAK,IAAI,CAACzB,KAAK;QAC3B,CAAC,CAAC;QAEF,IAAIgC,KAAK,KAAKE,SAAS,EAAE;UACvB,IAAI,CAACrB,UAAU,GAAG,IAAI;QACxB,CAAC,MAAM;UACL,IAAI,CAACA,UAAU,GAAG,KAAK;QACzB;MACF,CAAC,MAAM,IAAI,OAAO,IAAI,CAAClB,KAAK,KAAK,SAAS,EAAE;QAC1C,IAAI,CAACkB,UAAU,GAAG,IAAI,CAAClB,KAAK;MAC9B;IACF,CAAC;IACDwC,mBAAmBA,CAACC,OAAgB,EAAE;MACpC,IAAItC,KAAK,CAACqB,OAAO,CAAC,IAAI,CAACxB,KAAK,CAAC,EAAE;QAC7B,MAAM0C,aAAa,GAAG,IAAI,CAAC1C,KAAK,CAAC2C,KAAK,CAAC,CAAC;QACxC,IACEF,OAAO,IACP,IAAI,CAAChC,GAAG,KAAK8B,SAAS,IACtBG,aAAa,CAACE,MAAM,IAAI,IAAI,CAACnC,GAAG,EAChC;UACA,IAAI,CAACoC,KAAK,CAAC,SAAS,CAAC;UACrB,IAAI,CAACC,UAAU,CAAC,KAAK,EAAEJ,aAAa,CAAC;UACrC;QACF;QACA,IAAID,OAAO,IAAI,IAAI,CAACb,kBAAkB,GAAG,CAAC,EAAE;UAC1Cc,aAAa,CAACK,IAAI,CAAC,IAAI,CAAC1C,KAAK,CAAC;QAChC,CAAC,MAAM,IAAI,IAAI,CAACuB,kBAAkB,GAAG,CAAC,CAAC,EAAE;UACvCc,aAAa,CAACM,MAAM,CAAC,IAAI,CAACpB,kBAAkB,EAAE,CAAC,CAAC;QAClD;QACA,IAAI,CAACiB,KAAK,CAAC,QAAQ,EAAEH,aAAa,CAAC;MACrC;IACF,CAAC;IACDI,UAAUA,CAACL,OAAgB,EAAEpC,KAAU,EAAE;MACvC,IAAI,CAAC4C,SAAS,CAAC,MAAM;QACnB,IAAI,CAAC/B,UAAU,GAAGuB,OAAO;MAC3B,CAAC,CAAC;IACJ,CAAC;IACDS,OAAOA,CAACC,MAAa,EAAE;MACrB,IAAI,IAAI,CAACxC,QAAQ,IAAI,IAAI,CAACD,OAAO,EAAE;MACnC,IAAI,CAAC0C,WAAW,CAAC,CAAC,IAAI,CAAClC,UAAU,EAAEiC,MAAM,CAAC;IAC5C,CAAC;IACDE,OAAOA,CAAA,EAAG;MACR,IAAI,CAACjC,OAAO,GAAG,IAAI;IACrB,CAAC;IACDkC,MAAMA,CAAA,EAAG;MACP,IAAI,CAAClC,OAAO,GAAG,KAAK;IACtB,CAAC;IACDmC,SAASA,CAACJ,MAAqB,EAAE;MAC/B;IAAA,CACD;IACDK,QAAQA,CAACL,MAAa,EAAE;MACtB,MAAMM,SAAS,GAAGN,MAAM,CAACO,MAA0B;MACnD,MAAM;QAAEjB;MAAQ,CAAC,GAAGgB,SAAS;MAC7BN,MAAM,CAACQ,wBAAwB,CAAC,CAAC;MACjC,IAAI,CAACP,WAAW,CAACX,OAAO,EAAEU,MAAM,CAAC;IACnC,CAAC;IACDC,WAAWA,CAACX,OAAgB,EAAE3C,KAAa,EAAE;MAC3C,IAAI,CAACoB,UAAU,GAAGuB,OAAO;MACzB,IAAI,IAAI,CAACd,eAAe,EAAE;QACxB,IAAI,CAACa,mBAAmB,CAACC,OAAO,CAAC;MACnC,CAAC,MAAM;QACL,IAAI,CAACI,KAAK,CAAC,QAAQ,EAAEJ,OAAO,CAAC;MAC/B;IACF;EACF,CAAC;EACDmB,KAAK,EAAE;IACL5D,KAAKA,CAAA,EAAG;MACN,IAAI,CAACyB,YAAY,CAAC,CAAC;IACrB;EACF,CAAC;EACDoC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACN3B,OAAO;MACPe,OAAO;MACPK,SAAS;MACTF,OAAO;MACPC,MAAM;MACNE,QAAQ;MACRzB,OAAO;MACPb,UAAU;MACVP,QAAQ;MACRsB,WAAW;MACXpB,UAAU;MACVE,OAAO;MACPC,QAAQ;MACRN;IACF,CAAC,GAAG,IAAI;IACR,OAAAqD,YAAA;MAAA,SACc;QAAE,UAAU,EAAE,IAAI;QAAE,GAAG5B;MAAQ;IAAC,IAAA4B,YAAA;MAAA;IAAA,IAAAA,YAAA;MAAA;MAAA,WAI7BxE,aAAa,CAAC2D,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;MAAA,aAC/BK;IAAS,IAAAQ,YAAA;MAAA,MAGdhC,OAAO;MAAA,gBACGb,UAAU;MAAA;MAAA;MAAA,WAGfmC,OAAO;MAAA,UACRC,MAAM;MAAA,YACJE,QAAQ;MAAA,YACR7C,QAAQ;MAAA,WACTO,UAAU;MAAA;IAAA,UAAA6C,YAAA;MAAA;MAAA,SAGe9B;IAAW,IAC5CpB,UAAU,IAAAkD,YAAA;MAAA;IAAA,IAAAA,YAAA;MAAA;IAAA;MAGFhD;IAAO,IAAAgD,YAAA;MAAA;IAAA;MAGP/C;IAAQ,IAGhB,IAAA+C,YAAA;MAAA;IAAA,IAGArD,OAAO,IAAAqD,YAAA;MAAA;IAAA,QAAyC,MAGpDD,MAAM,CAACE,KAAK,IAAAD,YAAA;MAAA,OACChC,OAAO;MAAA;IAAA,IAChB+B,MAAM,CAACE,KAAK,GAAG,CAAC,EAAAD,YAAA;MAAA;IAAA,UAGpB;EAIT;AACF,CAAC,CAAC"}
@@ -1,204 +1,204 @@
1
- @use '../../styles/variables';
2
-
3
- .y-switch {
4
- --y-switch__color: var(--y-theme-primary);
5
- font-size: 1rem;
6
-
7
- &__slot {
8
- display: flex;
9
- cursor: pointer;
10
- align-items: center;
11
- color: inherit;
12
- min-height: inherit;
13
- position: relative;
14
- }
15
-
16
- &__input {
17
- width: 3em;
18
- height: 1.5em;
19
- position: relative;
20
- display: inline-flex;
21
- user-select: none;
22
- color: inherit;
23
- flex: 0 0 auto;
24
-
25
- input[role='switch'] {
26
- position: absolute;
27
- opacity: 0;
28
- width: 100%;
29
- height: 100%;
30
- cursor: pointer;
31
- user-select: none;
32
- }
33
- }
34
- &:not(&--loading) &__input:active &__thumb {
35
- width: 1em;
36
- }
37
-
38
- &__track {
39
- width: 100%;
40
- height: 100%;
41
- border-radius: 2em;
42
- background-color: #e0e0e0;
43
- position: absolute;
44
- left: 0;
45
- top: 0;
46
- transition: 300ms;
47
- }
48
-
49
- &__thumb {
50
- width: 1.1em;
51
- height: 1.1em;
52
- align-self: center;
53
- left: 0.185em;
54
- border-radius: 50%;
55
- display: flex;
56
- justify-content: center;
57
- align-items: center;
58
- background-color: #fff;
59
- pointer-events: none;
60
- position: relative;
61
- transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
62
- will-change: left, transform;
63
- }
64
-
65
- &__spinner {
66
- position: relative;
67
- width: 100%;
68
- height: 100%;
69
- border-radius: 50%;
70
- animation: rotate 2s linear infinite;
71
- contain: paint;
72
-
73
- @keyframes spinner-blur {
74
- 0% {
75
- filter: blur(4px);
76
- }
77
- 50% {
78
- filter: blur(1px);
79
- }
80
- 100% {
81
- filter: blur(4px);
82
- }
83
- }
84
-
85
- &:before {
86
- content: '';
87
- position: absolute;
88
- top: 2px;
89
- left: 2px;
90
- right: 2px;
91
- bottom: 2px;
92
- border-radius: 50%;
93
- border-width: 2px 2px 0 0;
94
- border-style: solid;
95
- border-color: var(--y-switch__color) transparent;
96
- }
97
-
98
- &:after {
99
- content: '';
100
- position: absolute;
101
- left: 0;
102
- top: 0;
103
- right: 0;
104
- bottom: 0;
105
- background: linear-gradient(
106
- 0deg,
107
- transparent 60%,
108
- rgba(var(--y-switch__color), 0.4)
109
- );
110
- filter: blur(4px);
111
- animation: spinner-blur 3s infinite;
112
- }
113
- }
114
-
115
- &--active {
116
- .y-switch__track {
117
- background-color: var(--y-switch__color);
118
- }
119
-
120
- .y-switch__thumb {
121
- left: calc(100% - 1.1em - 0.24em);
122
- }
123
- }
124
-
125
- &--active:not(&--loading):active &__thumb {
126
- left: 1.8em;
127
- }
128
-
129
- &--focused {
130
- .y-switch__thumb:before {
131
- content: '';
132
- position: absolute;
133
- top: 2px;
134
- bottom: 2px;
135
- left: 2px;
136
- right: 2px;
137
- border-radius: 50%;
138
- background-color: rgba(var(--y-switch__color), 0.4);
139
- }
140
- }
141
-
142
- &--stick-out {
143
- .y-switch__thumb {
144
- box-shadow:
145
- 2px 2px 5px -2px rgba(0, 0, 0, 0.54),
146
- 1px 1px 4px rgba(0, 0, 0, 0.12),
147
- 0 0 0 1px rgba(0, 0, 0, 0.08);
148
- }
149
-
150
- .y-switch__track {
151
- width: 80%;
152
- height: 74%;
153
- top: 50%;
154
- left: 50%;
155
- transform: translate(-50%, -50%);
156
- box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
157
- }
158
- }
159
-
160
- &--disabled {
161
- opacity: 0.8;
162
- filter: brightness(0.88);
163
-
164
- .y-switch__thumb {
165
- opacity: 0.4;
166
- }
167
- }
168
- &--disabled &__slot,
169
- &--disabled &__input input {
170
- cursor: default;
171
- }
172
-
173
- &__state {
174
- position: relative;
175
- width: 100%;
176
- height: 100%;
177
- contain: content;
178
- }
179
-
180
- &__state-label {
181
- font-size: 12px;
182
- color: #ffffff;
183
- position: absolute;
184
- height: 100%;
185
- display: flex;
186
- align-items: center;
187
- transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
188
-
189
- &--on {
190
- left: -40px;
191
- }
192
- &--off {
193
- right: 10px;
194
- }
195
- }
196
-
197
- &--active &__state-label {
198
- transform: translateX(50px);
199
- }
200
-
201
- &--stick-out &__state-label--off {
202
- right: 7px;
203
- }
204
- }
1
+ @use '../../styles/variables';
2
+
3
+ .y-switch {
4
+ --y-switch__color: var(--y-theme-primary);
5
+ font-size: 1rem;
6
+
7
+ &__slot {
8
+ display: flex;
9
+ cursor: pointer;
10
+ align-items: center;
11
+ color: inherit;
12
+ min-height: inherit;
13
+ position: relative;
14
+ }
15
+
16
+ &__input {
17
+ width: 3em;
18
+ height: 1.5em;
19
+ position: relative;
20
+ display: inline-flex;
21
+ user-select: none;
22
+ color: inherit;
23
+ flex: 0 0 auto;
24
+
25
+ input[role='switch'] {
26
+ position: absolute;
27
+ opacity: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ cursor: pointer;
31
+ user-select: none;
32
+ }
33
+ }
34
+ &:not(&--loading) &__input:active &__thumb {
35
+ width: 1em;
36
+ }
37
+
38
+ &__track {
39
+ width: 100%;
40
+ height: 100%;
41
+ border-radius: 2em;
42
+ background-color: #e0e0e0;
43
+ position: absolute;
44
+ left: 0;
45
+ top: 0;
46
+ transition: 300ms;
47
+ }
48
+
49
+ &__thumb {
50
+ width: 1.1em;
51
+ height: 1.1em;
52
+ align-self: center;
53
+ left: 0.185em;
54
+ border-radius: 50%;
55
+ display: flex;
56
+ justify-content: center;
57
+ align-items: center;
58
+ background-color: #fff;
59
+ pointer-events: none;
60
+ position: relative;
61
+ transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
62
+ will-change: left, transform;
63
+ }
64
+
65
+ &__spinner {
66
+ position: relative;
67
+ width: 100%;
68
+ height: 100%;
69
+ border-radius: 50%;
70
+ animation: rotate 2s linear infinite;
71
+ contain: paint;
72
+
73
+ @keyframes spinner-blur {
74
+ 0% {
75
+ filter: blur(4px);
76
+ }
77
+ 50% {
78
+ filter: blur(1px);
79
+ }
80
+ 100% {
81
+ filter: blur(4px);
82
+ }
83
+ }
84
+
85
+ &:before {
86
+ content: '';
87
+ position: absolute;
88
+ top: 2px;
89
+ left: 2px;
90
+ right: 2px;
91
+ bottom: 2px;
92
+ border-radius: 50%;
93
+ border-width: 2px 2px 0 0;
94
+ border-style: solid;
95
+ border-color: var(--y-switch__color) transparent;
96
+ }
97
+
98
+ &:after {
99
+ content: '';
100
+ position: absolute;
101
+ left: 0;
102
+ top: 0;
103
+ right: 0;
104
+ bottom: 0;
105
+ background: linear-gradient(
106
+ 0deg,
107
+ transparent 60%,
108
+ rgba(var(--y-switch__color), 0.4)
109
+ );
110
+ filter: blur(4px);
111
+ animation: spinner-blur 3s infinite;
112
+ }
113
+ }
114
+
115
+ &--active {
116
+ .y-switch__track {
117
+ background-color: var(--y-switch__color);
118
+ }
119
+
120
+ .y-switch__thumb {
121
+ left: calc(100% - 1.1em - 0.24em);
122
+ }
123
+ }
124
+
125
+ &--active:not(&--loading):active &__thumb {
126
+ left: 1.8em;
127
+ }
128
+
129
+ &--focused {
130
+ .y-switch__thumb:before {
131
+ content: '';
132
+ position: absolute;
133
+ top: 2px;
134
+ bottom: 2px;
135
+ left: 2px;
136
+ right: 2px;
137
+ border-radius: 50%;
138
+ background-color: rgba(var(--y-switch__color), 0.4);
139
+ }
140
+ }
141
+
142
+ &--stick-out {
143
+ .y-switch__thumb {
144
+ box-shadow:
145
+ 2px 2px 5px -2px rgba(0, 0, 0, 0.54),
146
+ 1px 1px 4px rgba(0, 0, 0, 0.12),
147
+ 0 0 0 1px rgba(0, 0, 0, 0.08);
148
+ }
149
+
150
+ .y-switch__track {
151
+ width: 80%;
152
+ height: 74%;
153
+ top: 50%;
154
+ left: 50%;
155
+ transform: translate(-50%, -50%);
156
+ box-shadow: inset 0 0 4px -1px rgba(0, 0, 0, 0.34);
157
+ }
158
+ }
159
+
160
+ &--disabled {
161
+ opacity: 0.8;
162
+ filter: brightness(0.88);
163
+
164
+ .y-switch__thumb {
165
+ opacity: 0.4;
166
+ }
167
+ }
168
+ &--disabled &__slot,
169
+ &--disabled &__input input {
170
+ cursor: default;
171
+ }
172
+
173
+ &__state {
174
+ position: relative;
175
+ width: 100%;
176
+ height: 100%;
177
+ contain: content;
178
+ }
179
+
180
+ &__state-label {
181
+ font-size: 12px;
182
+ color: #ffffff;
183
+ position: absolute;
184
+ height: 100%;
185
+ display: flex;
186
+ align-items: center;
187
+ transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
188
+
189
+ &--on {
190
+ left: -40px;
191
+ }
192
+ &--off {
193
+ right: 10px;
194
+ }
195
+ }
196
+
197
+ &--active &__state-label {
198
+ transform: translateX(50px);
199
+ }
200
+
201
+ &--stick-out &__state-label--off {
202
+ right: 7px;
203
+ }
204
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"YTab.mjs","names":["computed","ref","shallowRef","useRender","chooseProps","defineComponent","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","value","tabindex","onChoice","_ref2","yButtonProps","_createVNode","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref, shallowRef } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\n\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 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 return (\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 return {};\n },\n});\n\nexport type YTab = InstanceType<typeof YTab>;\n"],"mappings":";AAAA,SAAwCA,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAEtEC,SAAS;AAAA,SACTC,WAAW,EAAEC,eAAe,EAAEC,YAAY;AAAA,SAE1CC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEH,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACnBQ,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACV,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGb,eAAe,CAAC;EAClCc,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAC9BW,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAGxB,UAAU,CAAC,KAAK,CAAC;IAElC,MAAMyB,UAAU,GAAG1B,GAAG,CAAC,CAAC;IACxB,MAAM2B,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,GAAElB,MAAM,CAACc,QAAQ,CAACK,KAAK,CAAE,EAAC;QAC5CC,QAAQ,EAAEN,QAAQ,CAACK,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASE,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAEH;MAA0B,CAAC,GAAAG,KAAA;MAC7CR,QAAQ,CAACK,KAAK,GAAGA,KAAK;IACxB;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAMgC,YAAY,GAAG/B,WAAW,CAACgB,KAAK,EAAEb,OAAO,CAACa,KAAK,CAAC;MACtD,OAAAgB,YAAA,CAAA7B,OAAA,EAAA8B,WAAA;QAAA,SAEW,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTR,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBK,OAAO,EAAEA,CAAA,KAAMjB,KAAK,CAACiB,OAAO,GAAG,CAAC,IAAIlB,KAAK,CAACT,IAAI;QAC9C4B,MAAM,EAAEA,CAAA,KACN,CAACnB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAIX,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
1
+ {"version":3,"file":"YTab.mjs","names":["computed","ref","shallowRef","useRender","chooseProps","defineComponent","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","value","tabindex","onChoice","_ref2","yButtonProps","_createVNode","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref, shallowRef } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YButton, pressYButtonProps } from '../button';\r\nimport { Y_TABS_KEY } from './shared';\r\n\r\nimport './YTab.scss';\r\n\r\nexport const pressYTabPropsOptions = propsFactory(\r\n {\r\n text: String as PropType<string>,\r\n hideIndicator: Boolean as PropType<boolean>,\r\n indicatorColor: String as PropType<string>,\r\n ...pressYButtonProps({\r\n selectedClass: 'y-tab--selected',\r\n noWave: true,\r\n }),\r\n },\r\n 'YTab',\r\n);\r\n\r\nexport const YTab = defineComponent({\r\n name: 'YTab',\r\n props: pressYTabPropsOptions(),\r\n slots: Object as SlotsType<{\r\n default?: any;\r\n }>,\r\n setup(props, { slots, attrs }) {\r\n const selected = shallowRef(false);\r\n\r\n const indicator$ = ref();\r\n const indicatorStyles = computed(() => {\r\n return {};\r\n });\r\n const attrsProps = computed(() => {\r\n return {\r\n role: 'tab',\r\n 'aria-selected': `${String(selected.value)}`,\r\n tabindex: selected.value ? 0 : -1,\r\n };\r\n });\r\n\r\n function onChoice({ value }: { value: boolean }) {\r\n selected.value = value;\r\n }\r\n\r\n useRender(() => {\r\n const yButtonProps = chooseProps(props, YButton.props);\r\n return (\r\n <YButton\r\n class={['y-tab']}\r\n active={false}\r\n {...attrsProps.value}\r\n {...attrs}\r\n {...yButtonProps}\r\n injectSymbol={Y_TABS_KEY}\r\n onChoice:selected={onChoice}\r\n >\r\n {{\r\n default: () => slots.default?.() ?? props.text,\r\n append: () =>\r\n !props.hideIndicator && (\r\n <div\r\n ref={indicator$}\r\n class={['y-tab__indicator']}\r\n style={indicatorStyles.value}\r\n ></div>\r\n ),\r\n }}\r\n </YButton>\r\n );\r\n });\r\n\r\n return {};\r\n },\r\n});\r\n\r\nexport type YTab = InstanceType<typeof YTab>;\r\n"],"mappings":";AAAA,SAAwCA,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAEtEC,SAAS;AAAA,SACTC,WAAW,EAAEC,eAAe,EAAEC,YAAY;AAAA,SAE1CC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEH,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACnBQ,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACV,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGb,eAAe,CAAC;EAClCc,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAC9BW,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAGxB,UAAU,CAAC,KAAK,CAAC;IAElC,MAAMyB,UAAU,GAAG1B,GAAG,CAAC,CAAC;IACxB,MAAM2B,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,GAAElB,MAAM,CAACc,QAAQ,CAACK,KAAK,CAAE,EAAC;QAC5CC,QAAQ,EAAEN,QAAQ,CAACK,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASE,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAEH;MAA0B,CAAC,GAAAG,KAAA;MAC7CR,QAAQ,CAACK,KAAK,GAAGA,KAAK;IACxB;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAMgC,YAAY,GAAG/B,WAAW,CAACgB,KAAK,EAAEb,OAAO,CAACa,KAAK,CAAC;MACtD,OAAAgB,YAAA,CAAA7B,OAAA,EAAA8B,WAAA;QAAA,SAEW,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTR,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBK,OAAO,EAAEA,CAAA,KAAMjB,KAAK,CAACiB,OAAO,GAAG,CAAC,IAAIlB,KAAK,CAACT,IAAI;QAC9C4B,MAAM,EAAEA,CAAA,KACN,CAACnB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAIX,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}