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.
- package/dist/yuyeon.js +1766 -1742
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/alert/YAlert.mjs +2 -2
- package/lib/components/alert/YAlert.mjs.map +1 -1
- package/lib/components/alert/YAlert.scss +75 -75
- package/lib/components/app/YApp.mjs +2 -2
- package/lib/components/app/YApp.mjs.map +1 -1
- package/lib/components/badge/YBadge.mjs.map +1 -1
- package/lib/components/bench/YBench.mjs +2 -2
- package/lib/components/bench/YBench.mjs.map +1 -1
- package/lib/components/button/YButton.mjs +2 -2
- package/lib/components/button/YButton.mjs.map +1 -1
- package/lib/components/button/YButton.scss +128 -128
- package/lib/components/card/YCard.mjs.map +1 -1
- package/lib/components/card/YCard.scss +45 -45
- package/lib/components/card/YCardBody.mjs.map +1 -1
- package/lib/components/card/YCardFooter.mjs.map +1 -1
- package/lib/components/card/YCardHeader.mjs.map +1 -1
- package/lib/components/checkbox/YCheckbox.mjs.map +1 -1
- package/lib/components/checkbox/YInputCheckbox.mjs.map +1 -1
- package/lib/components/checkbox/YInputCheckbox.scss +84 -84
- package/lib/components/checkbox/index.mjs.map +1 -1
- package/lib/components/chip/YChip.mjs.map +1 -1
- package/lib/components/chip/YChip.scss +36 -36
- package/lib/components/date-picker/YDateCalendar.mjs.map +1 -1
- package/lib/components/date-picker/YDateCalendar.scss +84 -84
- package/lib/components/date-picker/YDatePicker.mjs +8 -2
- package/lib/components/date-picker/YDatePicker.mjs.map +1 -1
- package/lib/components/date-picker/YDatePickerControl.mjs.map +1 -1
- package/lib/components/date-picker/YMonthPicker.mjs +8 -1
- package/lib/components/date-picker/YMonthPicker.mjs.map +1 -1
- package/lib/components/date-picker/YYearPicker.mjs +4 -0
- package/lib/components/date-picker/YYearPicker.mjs.map +1 -1
- package/lib/components/dialog/YDialog.mjs.map +1 -1
- package/lib/components/dialog/index.mjs.map +1 -1
- package/lib/components/divider/YDivider.mjs.map +1 -1
- package/lib/components/divider/YDivider.scss +2 -2
- package/lib/components/dropdown/YDropdown.mjs.map +1 -1
- package/lib/components/dropdown/YDropdown.scss +27 -27
- package/lib/components/field-input/YFieldInput.mjs +1 -10
- package/lib/components/field-input/YFieldInput.mjs.map +1 -1
- package/lib/components/field-input/index.mjs.map +1 -1
- package/lib/components/form/YForm.mjs.map +1 -1
- package/lib/components/hover/YHover.mjs.map +1 -1
- package/lib/components/icon/YIcon.mjs.map +1 -1
- package/lib/components/icon/YIcon.scss +18 -18
- package/lib/components/icons/YIconCheckbox.mjs.map +1 -1
- package/lib/components/icons/YIconClear.mjs.map +1 -1
- package/lib/components/icons/YIconDropdown.mjs.map +1 -1
- package/lib/components/icons/YIconExpand.mjs.map +1 -1
- package/lib/components/icons/YIconPageControl.mjs.map +1 -1
- package/lib/components/icons/YIconSort.mjs.map +1 -1
- package/lib/components/icons/YIconSort.scss +24 -24
- package/lib/components/icons/index.mjs.map +1 -1
- package/lib/components/img/YImg.mjs +4 -4
- package/lib/components/img/YImg.mjs.map +1 -1
- package/lib/components/input/YInput.mjs.map +1 -1
- package/lib/components/input/YInput.scss +258 -258
- package/lib/components/ip-field/YIpv4Field.mjs.map +1 -1
- package/lib/components/layer/YLayer.mjs +2 -1
- package/lib/components/layer/YLayer.mjs.map +1 -1
- package/lib/components/layer/active-stack.mjs.map +1 -1
- package/lib/components/layer/base.mjs.map +1 -1
- package/lib/components/layer/content.mjs.map +1 -1
- package/lib/components/layer/scroll-strategies.mjs.map +1 -1
- package/lib/components/list/YList.mjs.map +1 -1
- package/lib/components/list/YListItem.mjs.map +1 -1
- package/lib/components/loading/YSpinnerRing.mjs.map +1 -1
- package/lib/components/menu/YMenu.mjs +2 -2
- package/lib/components/menu/YMenu.mjs.map +1 -1
- package/lib/components/menu/YMenu.scss +25 -25
- package/lib/components/navigation/YNavigation.mjs.map +1 -1
- package/lib/components/pagination/YPagination.mjs.map +1 -1
- package/lib/components/pagination/YPagination.scss +52 -52
- package/lib/components/panel/YDividePanel.mjs.map +1 -1
- package/lib/components/plate/YPlate.mjs +2 -2
- package/lib/components/plate/YPlate.mjs.map +1 -1
- package/lib/components/progress-bar/YProgressBar.mjs.map +1 -1
- package/lib/components/progress-bar/YProgressBar.scss +120 -120
- package/lib/components/select/YSelect.mjs.map +1 -1
- package/lib/components/slider/YSlider.mjs.map +1 -1
- package/lib/components/snackbar/YSnackbar.mjs +5 -5
- package/lib/components/snackbar/YSnackbar.mjs.map +1 -1
- package/lib/components/switch/YSwitch.mjs.map +1 -1
- package/lib/components/switch/YSwitch.scss +204 -204
- package/lib/components/tab/YTab.mjs.map +1 -1
- package/lib/components/tab/YTab.scss +73 -73
- package/lib/components/tab/YTabs.mjs.map +1 -1
- package/lib/components/tab/YTabs.scss +8 -8
- package/lib/components/tab/index.mjs.map +1 -1
- package/lib/components/tab/types.mjs.map +1 -1
- package/lib/components/table/YDataTable.mjs.map +1 -1
- package/lib/components/table/YDataTableBody.mjs.map +1 -1
- package/lib/components/table/YDataTableCell.mjs.map +1 -1
- package/lib/components/table/YDataTableControl.mjs.map +1 -1
- package/lib/components/table/YDataTableHead.mjs +2 -1
- package/lib/components/table/YDataTableHead.mjs.map +1 -1
- package/lib/components/table/YDataTableLayer.mjs.map +1 -1
- package/lib/components/table/YDataTableRow.mjs +1 -1
- package/lib/components/table/YDataTableRow.mjs.map +1 -1
- package/lib/components/table/YDataTableServer.mjs.map +1 -1
- package/lib/components/table/YTable.mjs.map +1 -1
- package/lib/components/table/YTable.scss +157 -157
- package/lib/components/table/composibles/header.mjs.map +1 -1
- package/lib/components/table/composibles/items.mjs +6 -1
- package/lib/components/table/composibles/items.mjs.map +1 -1
- package/lib/components/table/composibles/options.mjs.map +1 -1
- package/lib/components/table/composibles/pagination.mjs.map +1 -1
- package/lib/components/table/composibles/selection.mjs +1 -1
- package/lib/components/table/composibles/selection.mjs.map +1 -1
- package/lib/components/table/composibles/sorted-items.mjs.map +1 -1
- package/lib/components/table/composibles/sorting.mjs.map +1 -1
- package/lib/components/table/types/header.mjs.map +1 -1
- package/lib/components/table/types/index.mjs.map +1 -1
- package/lib/components/table/types/row.mjs.map +1 -1
- package/lib/components/text-ellipsis/YTextEllipsis.mjs.map +1 -1
- package/lib/components/text-ellipsis/YTextEllipsis.scss +43 -43
- package/lib/components/text-highlighter/YTextHighlighter.mjs.map +1 -1
- package/lib/components/text-interpolation/YTi.mjs.map +1 -1
- package/lib/components/textarea/YTextarea.mjs.map +1 -1
- package/lib/components/toggle-button/YToggleButton.mjs.map +1 -1
- package/lib/components/tooltip/YTooltip.mjs +2 -2
- package/lib/components/tooltip/YTooltip.mjs.map +1 -1
- package/lib/components/transitions/expand-transition.mjs +26 -6
- package/lib/components/transitions/expand-transition.mjs.map +1 -1
- package/lib/components/tree-view/YTreeView.mjs.map +1 -1
- package/lib/components/tree-view/YTreeView.scss +81 -81
- package/lib/components/tree-view/YTreeViewNode.mjs.map +1 -1
- package/lib/components/tree-view/types.mjs.map +1 -1
- package/lib/components/tree-view/util.mjs.map +1 -1
- package/lib/composables/choice.mjs.map +1 -1
- package/lib/composables/communication.mjs.map +1 -1
- package/lib/composables/component.mjs.map +1 -1
- package/lib/composables/coordinate/arrangement.mjs.map +1 -1
- package/lib/composables/coordinate/levitation.mjs +2 -2
- package/lib/composables/coordinate/levitation.mjs.map +1 -1
- package/lib/composables/coordinate/utils/point.mjs.map +1 -1
- package/lib/composables/date/factory.mjs.map +1 -1
- package/lib/composables/date/index.mjs.map +1 -1
- package/lib/composables/date/setting.mjs.map +1 -1
- package/lib/composables/date/types.mjs.map +1 -1
- package/lib/composables/defaults/index.mjs.map +1 -1
- package/lib/composables/defaults/share.mjs.map +1 -1
- package/lib/composables/dimension.mjs.map +1 -1
- package/lib/composables/focus.mjs.map +1 -1
- package/lib/composables/form.mjs.map +1 -1
- package/lib/composables/i18n/index.mjs.map +1 -1
- package/lib/composables/icon.mjs.map +1 -1
- package/lib/composables/layer-group.mjs +2 -2
- package/lib/composables/layer-group.mjs.map +1 -1
- package/lib/composables/layout.mjs.map +1 -1
- package/lib/composables/list-items.mjs.map +1 -1
- package/lib/composables/progress.mjs.map +1 -1
- package/lib/composables/ref.mjs.map +1 -1
- package/lib/composables/resize-observer.mjs.map +1 -1
- package/lib/composables/scope.mjs.map +1 -1
- package/lib/composables/theme/factory.mjs.map +1 -1
- package/lib/composables/theme/index.mjs.map +1 -1
- package/lib/composables/theme/setting.mjs.map +1 -1
- package/lib/composables/timing.mjs.map +1 -1
- package/lib/composables/transition.mjs.map +1 -1
- package/lib/composables/validation.mjs.map +1 -1
- package/lib/composables/vue-router.mjs.map +1 -1
- package/lib/index.mjs.map +1 -1
- package/lib/util/anchor.mjs.map +1 -1
- package/lib/util/component/component.mjs.map +1 -1
- package/lib/util/component/index.mjs.map +1 -1
- package/lib/util/component/inject-self.mjs.map +1 -1
- package/lib/util/component/props.mjs.map +1 -1
- package/lib/util/date/index.mjs.map +1 -1
- package/lib/util/reactivity.mjs +3 -3
- package/lib/util/reactivity.mjs.map +1 -1
- package/lib/util/rect.mjs.map +1 -1
- package/lib/util/validation.mjs.map +1 -1
- package/package.json +1 -1
- package/types/components/date-picker/YMonthPicker.d.ts +1 -1
- package/types/components/date-picker/YYearPicker.d.ts +1 -1
- package/types/components/dialog/YDialog.d.ts +7 -0
- package/types/components/dropdown/YDropdown.d.ts +6 -0
- package/types/components/layer/YLayer.d.ts +6 -0
- package/types/components/menu/YMenu.d.ts +3 -0
- package/types/components/select/YSelect.d.ts +31 -0
- package/types/components/snackbar/YSnackbar.d.ts +6 -0
- package/types/components/table/YDataTable.d.ts +10 -3
- package/types/components/table/YDataTableServer.d.ts +10 -3
- package/types/components/table/composibles/header.d.ts +8 -0
- package/types/components/table/composibles/selection.d.ts +2 -2
- package/types/components/table/types/header.d.ts +1 -0
- package/types/components/tooltip/YTooltip.d.ts +4 -0
- package/types/components/transitions/expand-transition.d.ts +3 -0
- package/types/components/transitions/index.d.ts +6 -0
- 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":"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"}
|
|
@@ -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"}
|