@onereach/ui-components 27.0.2-beta.6094.0 → 27.0.2-beta.6096.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/esm/{OrAutocomplete-BMyFCKjB.mjs → OrAutocomplete-BN3Xpwjd.mjs} +7 -7
- package/dist/esm/{OrAutocomplete-BMyFCKjB.mjs.map → OrAutocomplete-BN3Xpwjd.mjs.map} +1 -1
- package/dist/esm/{OrBottomSheet-DQ83BBtJ.mjs → OrBottomSheet-CALU9i4F.mjs} +2 -2
- package/dist/esm/OrBottomSheet-CALU9i4F.mjs.map +1 -0
- package/dist/esm/{OrCardCollection-DuyDtPAS.mjs → OrCardCollection-CjekjM1k.mjs} +4 -4
- package/dist/esm/{OrCardCollection-DuyDtPAS.mjs.map → OrCardCollection-CjekjM1k.mjs.map} +1 -1
- package/dist/esm/{OrCode-CVTfoJyM.mjs → OrCode-ztGltLid.mjs} +3 -3
- package/dist/esm/{OrCode-CVTfoJyM.mjs.map → OrCode-ztGltLid.mjs.map} +1 -1
- package/dist/esm/{OrConfirm-CeUSyKEp.mjs → OrConfirm-BPhIA7mR.mjs} +2 -2
- package/dist/esm/{OrConfirm-CeUSyKEp.mjs.map → OrConfirm-BPhIA7mR.mjs.map} +1 -1
- package/dist/esm/{OrContextMenu-DcT0nnkQ.mjs → OrContextMenu-DPkHnqgT.mjs} +3 -3
- package/dist/esm/{OrContextMenu-DcT0nnkQ.mjs.map → OrContextMenu-DPkHnqgT.mjs.map} +1 -1
- package/dist/esm/{OrDataGrid-BJiaRanm.mjs → OrDataGrid-MtEudAYi.mjs} +13 -13
- package/dist/esm/{OrDataGrid-BJiaRanm.mjs.map → OrDataGrid-MtEudAYi.mjs.map} +1 -1
- package/dist/esm/{OrDateFormat-DAWQiFzM.mjs → OrDateFormat-BjiFSSuj.mjs} +2 -2
- package/dist/esm/{OrDateFormat-DAWQiFzM.mjs.map → OrDateFormat-BjiFSSuj.mjs.map} +1 -1
- package/dist/esm/{OrDatePicker-Ifk1LBLg.mjs → OrDatePicker-1F67cACL.mjs} +4 -4
- package/dist/esm/{OrDatePicker-Ifk1LBLg.mjs.map → OrDatePicker-1F67cACL.mjs.map} +1 -1
- package/dist/esm/{OrDateRangePicker-Bof0o04S.mjs → OrDateRangePicker-DNVZygmL.mjs} +4 -4
- package/dist/esm/{OrDateRangePicker-Bof0o04S.mjs.map → OrDateRangePicker-DNVZygmL.mjs.map} +1 -1
- package/dist/esm/{OrDateTimeFormat-DM_xsd5r.mjs → OrDateTimeFormat-DlpIdVns.mjs} +2 -2
- package/dist/esm/{OrDateTimeFormat-DM_xsd5r.mjs.map → OrDateTimeFormat-DlpIdVns.mjs.map} +1 -1
- package/dist/esm/{OrDateTimePicker-D9QS_dRK.mjs → OrDateTimePicker-C4MLM7_6.mjs} +2 -2
- package/dist/esm/{OrDateTimePicker-D9QS_dRK.mjs.map → OrDateTimePicker-C4MLM7_6.mjs.map} +1 -1
- package/dist/esm/{OrDateTimePicker.vue_vue_type_script_lang-8aFx3wpJ.mjs → OrDateTimePicker.vue_vue_type_script_lang-BPdT_UVf.mjs} +5 -5
- package/dist/esm/{OrDateTimePicker.vue_vue_type_script_lang-8aFx3wpJ.mjs.map → OrDateTimePicker.vue_vue_type_script_lang-BPdT_UVf.mjs.map} +1 -1
- package/dist/esm/{OrEditorTabs-Bh2K-4Ri.mjs → OrEditorTabs-BELjrrI7.mjs} +4 -4
- package/dist/esm/{OrEditorTabs-Bh2K-4Ri.mjs.map → OrEditorTabs-BELjrrI7.mjs.map} +1 -1
- package/dist/esm/{OrFilter-Bcw2JmIE.mjs → OrFilter-OdRbXJoe.mjs} +3 -3
- package/dist/esm/{OrFilter-Bcw2JmIE.mjs.map → OrFilter-OdRbXJoe.mjs.map} +1 -1
- package/dist/esm/{OrFilterPopover-BBEzdSDi.mjs → OrFilterPopover-DpZsF63k.mjs} +3 -3
- package/dist/esm/{OrFilterPopover-BBEzdSDi.mjs.map → OrFilterPopover-DpZsF63k.mjs.map} +1 -1
- package/dist/esm/{OrFilterTrigger-SjWE1kLx.mjs → OrFilterTrigger-CZ-7CIOH.mjs} +2 -2
- package/dist/esm/{OrFilterTrigger-SjWE1kLx.mjs.map → OrFilterTrigger-CZ-7CIOH.mjs.map} +1 -1
- package/dist/esm/{OrIconButton-D1pxfMA_.mjs → OrIconButton-BuRmTHpT.mjs} +2 -2
- package/dist/esm/{OrIconButton-D1pxfMA_.mjs.map → OrIconButton-BuRmTHpT.mjs.map} +1 -1
- package/dist/esm/{OrInlineInput-BPt6D5QF.mjs → OrInlineInput-Bfq5_wSj.mjs} +2 -2
- package/dist/esm/{OrInlineInput-BPt6D5QF.mjs.map → OrInlineInput-Bfq5_wSj.mjs.map} +1 -1
- package/dist/esm/{OrInlineTextarea-CadTst3o.mjs → OrInlineTextarea-sBAI13VJ.mjs} +2 -2
- package/dist/esm/{OrInlineTextarea-CadTst3o.mjs.map → OrInlineTextarea-sBAI13VJ.mjs.map} +1 -1
- package/dist/esm/{OrInput-CzRxZM3i.mjs → OrInput-KTr5t05G.mjs} +2 -2
- package/dist/esm/{OrInput-CzRxZM3i.mjs.map → OrInput-KTr5t05G.mjs.map} +1 -1
- package/dist/esm/{OrList-Dsr37TgO.mjs → OrList-B1m0OvOM.mjs} +2 -2
- package/dist/esm/{OrList-Dsr37TgO.mjs.map → OrList-B1m0OvOM.mjs.map} +1 -1
- package/dist/esm/{OrMenu-Cc6IzYWK.mjs → OrMenu-DdcBdA4v.mjs} +2 -2
- package/dist/esm/{OrMenu-Cc6IzYWK.mjs.map → OrMenu-DdcBdA4v.mjs.map} +1 -1
- package/dist/esm/{OrMenuItem-KgHok8gW.mjs → OrMenuItem-CFz6OW23.mjs} +3 -3
- package/dist/esm/{OrMenuItem-KgHok8gW.mjs.map → OrMenuItem-CFz6OW23.mjs.map} +1 -1
- package/dist/esm/{OrModal-D1gCHnN1.mjs → OrModal-btf3bd3k.mjs} +2 -2
- package/dist/esm/{OrModal-D1gCHnN1.mjs.map → OrModal-btf3bd3k.mjs.map} +1 -1
- package/dist/esm/{OrNotification-DObxgRie.mjs → OrNotification-BfguyG3y.mjs} +2 -2
- package/dist/esm/{OrNotification-DObxgRie.mjs.map → OrNotification-BfguyG3y.mjs.map} +1 -1
- package/dist/esm/{OrPagination-DRBRRL2g.mjs → OrPagination-ePWsnwsu.mjs} +3 -3
- package/dist/esm/{OrPagination-DRBRRL2g.mjs.map → OrPagination-ePWsnwsu.mjs.map} +1 -1
- package/dist/esm/{OrPopover-DDoG-KKY.mjs → OrPopover-DsFw4mp2.mjs} +2 -2
- package/dist/esm/{OrPopover-DDoG-KKY.mjs.map → OrPopover-DsFw4mp2.mjs.map} +1 -1
- package/dist/esm/{OrRangeSlider-PAzeqzie.mjs → OrRangeSlider-CCy-Y7EH.mjs} +3 -3
- package/dist/esm/{OrRangeSlider-PAzeqzie.mjs.map → OrRangeSlider-CCy-Y7EH.mjs.map} +1 -1
- package/dist/esm/{OrResizeablePanel-DxPqTbtV.mjs → OrResizeablePanel-DEV0naD5.mjs} +5 -5
- package/dist/esm/{OrResizeablePanel-DxPqTbtV.mjs.map → OrResizeablePanel-DEV0naD5.mjs.map} +1 -1
- package/dist/esm/{OrRichTextEditor-hSmFPW-b.mjs → OrRichTextEditor-DBHpnkJU.mjs} +7 -7
- package/dist/esm/{OrRichTextEditor-hSmFPW-b.mjs.map → OrRichTextEditor-DBHpnkJU.mjs.map} +1 -1
- package/dist/esm/{OrRichTooltip-CDQEAeML.mjs → OrRichTooltip-tlx0W9ck.mjs} +2 -2
- package/dist/esm/{OrRichTooltip-CDQEAeML.mjs.map → OrRichTooltip-tlx0W9ck.mjs.map} +1 -1
- package/dist/esm/{OrSearch-Csld1hBq.mjs → OrSearch-CrYPoIJM.mjs} +2 -2
- package/dist/esm/{OrSearch-Csld1hBq.mjs.map → OrSearch-CrYPoIJM.mjs.map} +1 -1
- package/dist/esm/{OrSelect-DBhNKmRX.mjs → OrSelect-DB9Suqc1.mjs} +7 -7
- package/dist/esm/{OrSelect-DBhNKmRX.mjs.map → OrSelect-DB9Suqc1.mjs.map} +1 -1
- package/dist/esm/{OrSlider-DHIaTguY.mjs → OrSlider-zUTsz1DB.mjs} +2 -2
- package/dist/esm/{OrSlider-DHIaTguY.mjs.map → OrSlider-zUTsz1DB.mjs.map} +1 -1
- package/dist/esm/{OrSlider.vue_vue_type_script_lang--k0M0Q7N.mjs → OrSlider.vue_vue_type_script_lang-ggTiRZpX.mjs} +2 -2
- package/dist/esm/{OrSlider.vue_vue_type_script_lang--k0M0Q7N.mjs.map → OrSlider.vue_vue_type_script_lang-ggTiRZpX.mjs.map} +1 -1
- package/dist/esm/{OrSorting-ihkkh12O.mjs → OrSorting-BGeIMkZ5.mjs} +3 -3
- package/dist/esm/{OrSorting-ihkkh12O.mjs.map → OrSorting-BGeIMkZ5.mjs.map} +1 -1
- package/dist/esm/{OrSubMenuItem-BBg7SvWQ.mjs → OrSubMenuItem-BIOJeBwe.mjs} +4 -4
- package/dist/esm/{OrSubMenuItem-BBg7SvWQ.mjs.map → OrSubMenuItem-BIOJeBwe.mjs.map} +1 -1
- package/dist/esm/{OrSwitch-BtoXDsZx.mjs → OrSwitch-vI9sIMUp.mjs} +2 -2
- package/dist/esm/{OrSwitch-BtoXDsZx.mjs.map → OrSwitch-vI9sIMUp.mjs.map} +1 -1
- package/dist/esm/{OrTabs-eXFvC3c6.mjs → OrTabs-DUihTKOm.mjs} +3 -3
- package/dist/esm/{OrTabs-eXFvC3c6.mjs.map → OrTabs-DUihTKOm.mjs.map} +1 -1
- package/dist/esm/{OrTag-DWp6cMUp.mjs → OrTag-D-GAZ0Hm.mjs} +2 -2
- package/dist/esm/{OrTag-DWp6cMUp.mjs.map → OrTag-D-GAZ0Hm.mjs.map} +1 -1
- package/dist/esm/{OrTagInput-DIMSvMNK.mjs → OrTagInput-B2cjYeWN.mjs} +4 -4
- package/dist/esm/{OrTagInput-DIMSvMNK.mjs.map → OrTagInput-B2cjYeWN.mjs.map} +1 -1
- package/dist/esm/{OrTags-DKwmNfkN.mjs → OrTags-CMPGvbL2.mjs} +3 -3
- package/dist/esm/{OrTags-DKwmNfkN.mjs.map → OrTags-CMPGvbL2.mjs.map} +1 -1
- package/dist/esm/{OrTimeFormat-Bs_Jfd9U.mjs → OrTimeFormat-DWJ-VXll.mjs} +2 -2
- package/dist/esm/{OrTimeFormat-Bs_Jfd9U.mjs.map → OrTimeFormat-DWJ-VXll.mjs.map} +1 -1
- package/dist/esm/{OrTimePicker-C_pYA5Yn.mjs → OrTimePicker-fI5D3Eo9.mjs} +4 -4
- package/dist/esm/{OrTimePicker-C_pYA5Yn.mjs.map → OrTimePicker-fI5D3Eo9.mjs.map} +1 -1
- package/dist/esm/{OrTimeRangePicker-b2Ec1RQg.mjs → OrTimeRangePicker-Bnhl5CLg.mjs} +4 -4
- package/dist/esm/{OrTimeRangePicker-b2Ec1RQg.mjs.map → OrTimeRangePicker-Bnhl5CLg.mjs.map} +1 -1
- package/dist/esm/{OrTooltip-cverJ1se.mjs → OrTooltip-CAvo-mxv.mjs} +2 -2
- package/dist/esm/{OrTooltip-cverJ1se.mjs.map → OrTooltip-CAvo-mxv.mjs.map} +1 -1
- package/dist/esm/components/index.mjs +49 -49
- package/dist/esm/components/or-autocomplete-v3/index.mjs +1 -1
- package/dist/esm/components/or-bottom-sheet-v3/index.mjs +1 -1
- package/dist/esm/components/or-card-collection-v3/index.mjs +1 -1
- package/dist/esm/components/or-code-v3/index.mjs +1 -1
- package/dist/esm/components/or-confirm-v3/index.mjs +1 -1
- package/dist/esm/components/or-context-menu-v3/index.mjs +1 -1
- package/dist/esm/components/or-data-grid-v3/index.mjs +1 -1
- package/dist/esm/components/or-date-format-v3/index.mjs +1 -1
- package/dist/esm/components/or-date-picker-v3/index.mjs +1 -1
- package/dist/esm/components/or-date-range-picker-v3/index.mjs +1 -1
- package/dist/esm/components/or-date-time-format-v3/index.mjs +1 -1
- package/dist/esm/components/or-date-time-picker-v3/index.mjs +2 -2
- package/dist/esm/components/or-editor-tabs-v3/index.mjs +1 -1
- package/dist/esm/components/or-filter-popover-v3/index.mjs +1 -1
- package/dist/esm/components/or-filter-trigger-v3/index.mjs +1 -1
- package/dist/esm/components/or-filter-v3/index.mjs +1 -1
- package/dist/esm/components/or-icon-button-v3/index.mjs +1 -1
- package/dist/esm/components/or-inline-input-v3/index.mjs +1 -1
- package/dist/esm/components/or-inline-textarea-v3/index.mjs +1 -1
- package/dist/esm/components/or-input-v3/index.mjs +1 -1
- package/dist/esm/components/or-list-v3/index.mjs +1 -1
- package/dist/esm/components/or-menu-item-v3/index.mjs +1 -1
- package/dist/esm/components/or-menu-v3/index.mjs +1 -1
- package/dist/esm/components/or-modal-v3/index.mjs +1 -1
- package/dist/esm/components/or-notification-v3/index.mjs +1 -1
- package/dist/esm/components/or-pagination-v3/index.mjs +1 -1
- package/dist/esm/components/or-popover-v3/index.mjs +1 -1
- package/dist/esm/components/or-range-slider-v3/index.mjs +1 -1
- package/dist/esm/components/or-resizeable-panel-v3/index.mjs +1 -1
- package/dist/esm/components/or-rich-text-editor-v3/index.mjs +1 -1
- package/dist/esm/components/or-rich-tooltip-v3/index.mjs +1 -1
- package/dist/esm/components/or-search-v3/index.mjs +1 -1
- package/dist/esm/components/or-select-v3/index.mjs +1 -1
- package/dist/esm/components/or-sidebar-v3/index.mjs +1 -1
- package/dist/esm/components/or-slider-v3/index.mjs +2 -2
- package/dist/esm/components/or-sorting-v3/index.mjs +1 -1
- package/dist/esm/components/or-sub-menu-item-v3/index.mjs +1 -1
- package/dist/esm/components/or-switch-v3/index.mjs +1 -1
- package/dist/esm/components/or-tabs-v3/index.mjs +1 -1
- package/dist/esm/components/or-tag-input-v3/index.mjs +1 -1
- package/dist/esm/components/or-tag-v3/index.mjs +1 -1
- package/dist/esm/components/or-tags-v3/index.mjs +1 -1
- package/dist/esm/components/or-time-format-v3/index.mjs +1 -1
- package/dist/esm/components/or-time-picker-v3/index.mjs +1 -1
- package/dist/esm/components/or-time-range-picker-v3/index.mjs +1 -1
- package/dist/esm/components/or-toast-v3/index.mjs +1 -1
- package/dist/esm/components/or-tooltip-v3/index.mjs +1 -1
- package/dist/esm/index.mjs +49 -49
- package/dist/esm/{props-BoHyDesf.mjs → props-WUe7q2M-.mjs} +2 -2
- package/dist/esm/{props-BoHyDesf.mjs.map → props-WUe7q2M-.mjs.map} +1 -1
- package/dist/esm/{types-5RPO11-2.mjs → types-DrXNmeDl.mjs} +2 -2
- package/dist/esm/{types-5RPO11-2.mjs.map → types-DrXNmeDl.mjs.map} +1 -1
- package/package.json +3 -3
- package/dist/esm/OrBottomSheet-DQ83BBtJ.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrSlider.vue_vue_type_script_lang--k0M0Q7N.mjs","sources":["../../../components/or-slider-v3/src/types.ts","../../../components/or-slider-v3/src/styles.ts","../../../components/or-slider-v3/src/OrSlider.vue"],"sourcesContent":["import { ModelValue } from '@onereach/ui-components-common/types';\n\nexport type SliderModelValue = ModelValue<number>;\n\nexport enum SliderColor {\n Primary = 'primary',\n Secondary = 'secondary',\n}\n\nexport enum SliderOrientation {\n Horizontal = 'horizontal',\n HorizontalReversed = 'horizontal-reversed',\n Vertical = 'vertical',\n VerticalReversed = 'vertical-reversed',\n}\n","import { SliderColor, SliderOrientation } from './types';\n\nexport const Slider: string[] = [\n // Interactivity\n 'interactivity-default',\n];\n\nexport const SliderOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Layout\n 'layout-column',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Layout\n 'layout-column',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.Vertical]: [\n // Layout\n 'layout-row',\n\n // Box\n 'h-full',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Layout\n 'layout-row',\n\n // Box\n 'h-full',\n ],\n};\n\nexport const SliderRail: string[] = [\n // Position\n 'relative',\n\n // Interactivity\n 'interactivity-click',\n\n // Shape\n 'rounded-full',\n\n // Theme\n 'theme-background-disabled',\n 'dark:theme-background-disabled-dark',\n];\n\nexport const SliderRailOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Layout\n 'layout-row',\n\n // Box\n 'w-full',\n 'h-xs',\n\n // Spacing\n 'mx-0',\n 'my-md+',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Layout\n 'layout-row-reverse',\n\n // Box\n 'w-full',\n 'h-xs',\n\n // Spacing\n 'mx-0',\n 'my-md+',\n ],\n\n [SliderOrientation.Vertical]: [\n // Layout\n 'layout-column-reverse items-center',\n\n // Box\n 'w-xs',\n 'h-full',\n\n // Spacing\n 'mx-md+',\n 'my-0',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Layout\n 'layout-column items-center',\n\n // Box\n 'w-xs',\n 'h-full',\n\n // Spacing\n 'mx-md+',\n 'my-0',\n ],\n};\n\nexport const SliderTrack: string[] = [\n // Shape\n 'rounded-full',\n\n // Box\n 'w-full',\n 'h-full',\n];\n\nexport const SliderTrackColors: Record<SliderColor, string[]> = {\n [SliderColor.Primary]: [\n // Theme\n 'theme-background-primary',\n 'dark:theme-background-primary-dark',\n ],\n\n [SliderColor.Secondary]: [\n // Theme\n 'theme-background-secondary',\n 'dark:theme-background-secondary-dark',\n ],\n};\n\nexport const SliderThumb: string[] = [\n // Layout\n 'shrink-0',\n // Position\n 'z-10',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-[20px]',\n 'h-[20px]',\n\n // Spacing\n '-mx-[10px]',\n '-my-[10px]',\n\n // Theme\n 'theme-background-base',\n 'dark:theme-background-base-dark',\n];\n\nexport const SliderThumbColors: Record<SliderColor, string[]> = {\n [SliderColor.Primary]: [\n // Theme\n 'theme-border-primary border-4',\n 'dark:theme-border-primary-dark',\n\n // Theme (hover)\n 'hover:theme-background-primary',\n 'dark:hover:theme-background-primary-dark',\n\n // Theme (active)\n 'active:theme-background-primary',\n 'dark:active:theme-background-primary-dark',\n\n 'active:theme-outline-primary active:outline-10',\n 'dark:active:theme-outline-primary-dark',\n ],\n\n [SliderColor.Secondary]: [\n // Theme\n 'theme-border-secondary border-4',\n 'dark:theme-border-secondary-dark',\n\n // Theme (hover)\n 'hover:theme-background-secondary',\n 'dark:hover:theme-background-secondary-dark',\n\n // Theme (active)\n 'active:theme-background-secondary',\n 'dark:active:theme-background-secondary-dark',\n\n 'active:theme-outline-secondary active:outline-10',\n 'dark:active:theme-outline-secondary-dark',\n ],\n};\n\nexport const SliderBreakpointMark: string[] = [\n // Position\n 'absolute',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-[2px]',\n 'h-[2px]',\n\n // Spacing\n '-mx-[1px]',\n '-my-[1px]',\n];\n\nexport const SliderBreakpointMarkColors: Record<SliderColor, string[]> = {\n [SliderColor.Primary]: [\n // Theme\n 'theme-background-primary',\n 'dark:theme-background-primary-dark',\n\n // Theme (activated)\n 'activated:theme-background-primary-container',\n 'dark:activated:theme-background-primary-container-dark',\n\n // Theme (disabled)\n 'disabled:!bg-on-disabled',\n 'dark:disabled:!bg-on-disabled-dark',\n ],\n\n [SliderColor.Secondary]: [\n // Theme\n 'theme-background-secondary',\n 'dark:theme-background-secondary-dark',\n\n // Theme (activated)\n 'activated:theme-background-secondary-container',\n 'dark:activated:theme-background-secondary-container-dark',\n\n // Theme (disabled)\n 'disabled:!bg-on-disabled',\n 'dark:disabled:!bg-on-disabled-dark',\n ],\n};\n\nexport const SliderLabel: string[] = [\n // Position\n 'relative',\n];\n\nexport const SliderLabelOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Layout\n 'layout-row',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Layout\n 'layout-row-reverse',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.Vertical]: [\n // Layout\n 'layout-column-reverse items-center',\n\n // Box\n 'h-full',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Layout\n 'layout-column items-center',\n\n // Box\n 'h-full',\n ],\n};\n\nexport const SliderLabelMark: string[] = [\n // Position\n 'absolute',\n\n // Interactivity\n 'interactivity-click',\n\n // Typography\n 'typography-caption-regular whitespace-nowrap',\n\n // Theme\n 'theme-foreground-outline',\n 'dark:theme-foreground-outline-dark',\n\n // Theme (hover)\n 'hover:theme-foreground-default',\n 'dark:hover:theme-foreground-default-dark',\n];\n\nexport const SliderLabelMarkOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Position\n '-translate-x-1/2',\n 'translate-y-1/2',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Position\n 'translate-x-1/2',\n 'translate-y-1/2',\n ],\n\n [SliderOrientation.Vertical]: [\n // Position\n 'translate-x-1/2',\n 'translate-y-1/2',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Position\n 'translate-x-1/2',\n '-translate-y-1/2',\n ],\n};\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n :disabled=\"disabled\"\n >\n <div\n :ref=\"'rail'\"\n :class=\"railStyles\"\n :disabled=\"disabled\"\n >\n <div\n :class=\"trackStyles\"\n :style=\"trackInlineStyles\"\n :disabled=\"disabled\"\n />\n\n <OrTooltip\n :is-open=\"isHovering || isDragging\"\n :placement=\"tooltipPlacement\"\n :offset=\"24\"\n :external-control=\"true\"\n v-bind=\"tooltip\"\n >\n <div\n :ref=\"'thumb'\"\n :class=\"thumbStyles\"\n :disabled=\"disabled\"\n />\n\n <template v-slot:content>\n <slot\n name=\"tooltipContent\"\n :value=\"proxyModelValue\"\n >\n {{ proxyModelValue }}\n </slot>\n </template>\n </OrTooltip>\n\n <template v-if=\"breakpoints.length > 0\">\n <div\n v-for=\"breakpoint of [minValue, ...breakpoints, maxValue]\"\n :key=\"breakpoint\"\n :class=\"breakpointMarkStyles\"\n :style=\"getBreakpointMarkComputedStyles(breakpoint)\"\n :activated=\"breakpoint <= proxyModelValue\"\n :disabled=\"disabled\"\n @mouseenter=\"highlightedBreakpoint = breakpoint\"\n @mouseleave=\"highlightedBreakpoint = undefined\"\n />\n </template>\n </div>\n\n <div :class=\"labelStyles\">\n <div\n v-for=\"breakpoint of [minValue, ...breakpoints, maxValue]\"\n :key=\"breakpoint\"\n :class=\"labelMarkStyles\"\n :style=\"getBreakpointMarkComputedStyles(breakpoint)\"\n :disabled=\"disabled\"\n :force-state=\"highlightedBreakpoint === breakpoint ? 'hover' : undefined\"\n @mouseenter=\"highlightedBreakpoint = breakpoint\"\n @mouseleave=\"highlightedBreakpoint = undefined\"\n @click=\"proxyModelValue = breakpoint\"\n >\n <slot\n :name=\"`${breakpoint}-label`\"\n :value=\"breakpoint\"\n >\n {{ breakpoint }}\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrTooltipV3 as OrTooltip } from '@onereach/ui-components.or-tooltip-v3';\nimport { Position, clamp, useDraggable, useElementBounding, useElementHover } from '@vueuse/core';\nimport { PropType, computed, defineComponent, ref, toRef, watch } from 'vue';\n\nimport * as Styles from './styles';\nimport { SliderColor, SliderModelValue, SliderOrientation } from './types';\n\nexport default defineComponent({\n name: 'OrSlider',\n\n components: {\n OrTooltip,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: undefined as unknown as PropType<SliderModelValue>,\n default: undefined,\n },\n\n minValue: {\n type: Number,\n default: 0,\n },\n\n maxValue: {\n type: Number,\n default: 100,\n },\n\n step: {\n type: Number,\n default: 1,\n },\n\n breakpoints: {\n type: Array as PropType<number[]>,\n default: () => [],\n },\n\n color: {\n type: String as PropType<`${SliderColor}`>,\n default: () => SliderColor.Primary,\n },\n\n orientation: {\n type: String as PropType<`${SliderOrientation}`>,\n default: () => SliderOrientation.Horizontal,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n\n tooltip: {\n type: Object as PropType<Pick<InstanceType<typeof OrTooltip>['$props'], 'placement' | 'offset' | 'debounce'>>,\n default: undefined,\n },\n },\n\n emits: [\n 'update:modelValue',\n ],\n\n expose: [\n 'root',\n ],\n\n setup(props, context) {\n // Refs & Styles\n const root = ref<HTMLElement>();\n\n const rootStyles = computed(() => [\n 'or-slider-v3',\n ...Styles.Slider,\n ...Styles.SliderOrientations[props.orientation],\n ]);\n\n const rail = ref<HTMLElement>();\n\n const railStyles = computed(() => [\n 'or-slider-rail-v3',\n ...Styles.SliderRail,\n ...Styles.SliderRailOrientations[props.orientation],\n ]);\n\n const trackStyles = computed(() => [\n ...Styles.SliderTrack,\n ...Styles.SliderTrackColors[props.color],\n ]);\n\n // eslint-disable-next-line vue/return-in-computed-property\n const trackInlineStyles = computed(() => {\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n case SliderOrientation.HorizontalReversed:\n return { width: `${internalModelValue.value * 100}%` };\n\n case SliderOrientation.Vertical:\n case SliderOrientation.VerticalReversed:\n return { height: `${internalModelValue.value * 100}%` };\n }\n });\n\n const thumb = ref<HTMLElement>();\n\n const thumbStyles = computed(() => [\n 'or-slider-thumb-v3',\n ...Styles.SliderThumb,\n ...Styles.SliderThumbColors[props.color],\n 'touch-none', // Required for proper work on mobile\n ]);\n\n const breakpointMarkStyles = computed(() => [\n ...Styles.SliderBreakpointMark,\n ...Styles.SliderBreakpointMarkColors[props.color],\n ]);\n\n const labelStyles = computed(() => [\n ...Styles.SliderLabel,\n ...Styles.SliderLabelOrientations[props.orientation],\n ]);\n\n const labelMarkStyles = computed(() => [\n ...Styles.SliderLabelMark,\n ...Styles.SliderLabelMarkOrientations[props.orientation],\n ]);\n\n // State\n const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {\n defaultValue: toRef(props, 'minValue'),\n });\n\n const internalModelValue = computed({\n get: () => (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue),\n\n set: (value) => {\n const modelValue = value * (props.maxValue - props.minValue) + props.minValue;\n\n proxyModelValue.value = internalBreakpoints.value.reduce((a, b) => {\n return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;\n });\n },\n });\n\n const internalBreakpoints = computed(() => {\n if (!props.step) {\n return [props.minValue, ...props.breakpoints, props.maxValue];\n }\n\n return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step))\n .fill(undefined)\n .map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000)\n .concat(...props.breakpoints, props.maxValue)\n .sort((a, b) => a - b);\n });\n\n // eslint-disable-next-line vue/return-in-computed-property\n const tooltipPlacement = computed(() => {\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n case SliderOrientation.HorizontalReversed:\n return 'top';\n\n case SliderOrientation.Vertical:\n case SliderOrientation.VerticalReversed:\n return 'right';\n }\n });\n\n const highlightedBreakpoint = ref<number>();\n\n const railBoundingBox = useElementBounding(rail);\n\n // Handlers\n function onDrag(position: Position, event: MouseEvent | PointerEvent): void {\n if (props.disabled) {\n return;\n }\n\n const totalWidth = railBoundingBox.width.value;\n const totalHeight = railBoundingBox.height.value;\n\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n internalModelValue.value = clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth;\n break;\n\n case SliderOrientation.HorizontalReversed:\n internalModelValue.value = clamp(railBoundingBox.right.value - event.clientX, 0, totalWidth) / totalWidth;\n break;\n\n case SliderOrientation.Vertical:\n internalModelValue.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;\n break;\n\n case SliderOrientation.VerticalReversed:\n internalModelValue.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, totalHeight) / totalHeight;\n break;\n }\n }\n\n // Methods\n function getBreakpointMarkComputedStyles(breakpoint: number): Partial<CSSStyleDeclaration> | undefined {\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n return { left: `${getBreakpointOffset(breakpoint) * 100}%` };\n\n case SliderOrientation.HorizontalReversed:\n return { right: `${getBreakpointOffset(breakpoint) * 100}%` };\n\n case SliderOrientation.Vertical:\n return { bottom: `${getBreakpointOffset(breakpoint) * 100}%` };\n\n case SliderOrientation.VerticalReversed:\n return { top: `${getBreakpointOffset(breakpoint) * 100}%` };\n }\n }\n\n // Helpers\n function getBreakpointOffset(breakpoint: number): number {\n return (breakpoint - props.minValue) / (props.maxValue - props.minValue);\n }\n\n // Effects\n const isHovering = useElementHover(rail);\n\n const { isDragging } = useDraggable(rail, {\n onStart: onDrag,\n onMove: onDrag,\n onEnd: onDrag,\n });\n\n // Constraints\n watch(() => props.minValue, (value) => {\n if (value >= props.maxValue) {\n throw new Error('[OrSlider]: `minValue` must be lesser than `maxValue`.');\n }\n }, { immediate: true });\n\n watch(() => props.maxValue, (value) => {\n if (value <= props.minValue) {\n throw new Error('[OrSlider]: `maxValue` must be greater than `minValue`.');\n }\n }, { immediate: true });\n\n return {\n root,\n rootStyles,\n\n rail,\n railStyles,\n\n trackStyles,\n trackInlineStyles,\n\n thumb,\n thumbStyles,\n\n breakpointMarkStyles,\n\n labelStyles,\n labelMarkStyles,\n\n proxyModelValue,\n tooltipPlacement,\n highlightedBreakpoint,\n\n getBreakpointMarkComputedStyles,\n\n isHovering,\n isDragging,\n };\n },\n});\n</script>\n"],"names":["SliderColor","SliderOrientation","Slider","SliderOrientations","SliderRail","SliderRailOrientations","SliderTrack","SliderTrackColors","SliderThumb","SliderThumbColors","SliderBreakpointMark","SliderBreakpointMarkColors","SliderLabel","SliderLabelOrientations","SliderLabelMark","SliderLabelMarkOrientations","_sfc_main","defineComponent","OrTooltip","props","context","root","ref","rootStyles","computed","Styles.Slider","Styles.SliderOrientations","rail","railStyles","Styles.SliderRail","Styles.SliderRailOrientations","trackStyles","Styles.SliderTrack","Styles.SliderTrackColors","trackInlineStyles","internalModelValue","thumb","thumbStyles","Styles.SliderThumb","Styles.SliderThumbColors","breakpointMarkStyles","Styles.SliderBreakpointMark","Styles.SliderBreakpointMarkColors","labelStyles","Styles.SliderLabel","Styles.SliderLabelOrientations","labelMarkStyles","Styles.SliderLabelMark","Styles.SliderLabelMarkOrientations","proxyModelValue","useProxyModelValue","toRef","value","modelValue","internalBreakpoints","a","b","index","tooltipPlacement","highlightedBreakpoint","railBoundingBox","useElementBounding","onDrag","position","event","totalWidth","totalHeight","clamp","getBreakpointMarkComputedStyles","breakpoint","getBreakpointOffset","isHovering","useElementHover","isDragging","useDraggable","watch"],"mappings":";;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,YAAY,aAFFA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,cACbA,EAAA,qBAAqB,uBACrBA,EAAA,WAAW,YACXA,EAAA,mBAAmB,qBAJTA,IAAAA,KAAA,CAAA,CAAA;ACPL,MAAMC,IAAmB;AAAA;AAAA,EAE9B;AACF,GAEaC,IAA0D;AAAA,EACrE,CAACF,EAAkB,UAAU,GAAG;AAAA;AAAA,IAE9B;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,kBAAkB,GAAG;AAAA;AAAA,IAEtC;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,QAAQ,GAAG;AAAA;AAAA,IAE5B;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,gBAAgB,GAAG;AAAA;AAAA,IAEpC;AAAA;AAAA,IAGA;AAAA,EACF;AACF,GAEaG,IAAuB;AAAA;AAAA,EAElC;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA,EACA;AACF,GAEaC,IAA8D;AAAA,EACzE,CAACJ,EAAkB,UAAU,GAAG;AAAA;AAAA,IAE9B;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,kBAAkB,GAAG;AAAA;AAAA,IAEtC;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,QAAQ,GAAG;AAAA;AAAA,IAE5B;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,gBAAgB,GAAG;AAAA;AAAA,IAEpC;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AACF,GAEaK,IAAwB;AAAA;AAAA,EAEnC;AAAA;AAAA,EAGA;AAAA,EACA;AACF,GAEaC,IAAmD;AAAA,EAC9D,CAACP,EAAY,OAAO,GAAG;AAAA;AAAA,IAErB;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAY,SAAS,GAAG;AAAA;AAAA,IAEvB;AAAA,IACA;AAAA,EACF;AACF,GAEaQ,IAAwB;AAAA;AAAA,EAEnC;AAAA;AAAA,EAEA;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AACF,GAEaC,IAAmD;AAAA,EAC9D,CAACT,EAAY,OAAO,GAAG;AAAA;AAAA,IAErB;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAY,SAAS,GAAG;AAAA;AAAA,IAEvB;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AACF,GAEaU,IAAiC;AAAA;AAAA,EAE5C;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AACF,GAEaC,IAA4D;AAAA,EACvE,CAACX,EAAY,OAAO,GAAG;AAAA;AAAA,IAErB;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAY,SAAS,GAAG;AAAA;AAAA,IAEvB;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AACF,GAEaY,IAAwB;AAAA;AAAA,EAEnC;AACF,GAEaC,IAA+D;AAAA,EAC1E,CAACZ,EAAkB,UAAU,GAAG;AAAA;AAAA,IAE9B;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,kBAAkB,GAAG;AAAA;AAAA,IAEtC;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,QAAQ,GAAG;AAAA;AAAA,IAE5B;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,gBAAgB,GAAG;AAAA;AAAA,IAEpC;AAAA;AAAA,IAGA;AAAA,EACF;AACF,GAEaa,IAA4B;AAAA;AAAA,EAEvC;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA,EAGA;AAAA,EACA;AACF,GAEaC,KAAmE;AAAA,EAC9E,CAACd,EAAkB,UAAU,GAAG;AAAA;AAAA,IAE9B;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,kBAAkB,GAAG;AAAA;AAAA,IAEtC;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,QAAQ,GAAG;AAAA;AAAA,IAE5B;AAAA,IACA;AAAA,EACF;AAAA,EAEA,CAACA,EAAkB,gBAAgB,GAAG;AAAA;AAAA,IAEpC;AAAA,IACA;AAAA,EACF;AACF,GCzOAe,KAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,WAAAC;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EAEA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAC;AAAA,IAClB;AAAA,IAEA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAMlB,EAAY;AAAA,IAC7B;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAMC,EAAkB;AAAA,IACnC;AAAA,IAEA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL;AAAA,EACF;AAAA,EAEA,QAAQ;AAAA,IACN;AAAA,EACF;AAAA,EAEA,MAAMkB,GAAOC,GAAS;AAEpB,UAAMC,IAAOC,KAEPC,IAAaC,EAAS,MAAM;AAAA,MAChC;AAAA,MACA,GAAGC;AAAAA,MACH,GAAGC,EAA0BP,EAAM,WAAW;AAAA,IAAA,CAC/C,GAEKQ,IAAOL,KAEPM,IAAaJ,EAAS,MAAM;AAAA,MAChC;AAAA,MACA,GAAGK;AAAAA,MACH,GAAGC,EAA8BX,EAAM,WAAW;AAAA,IAAA,CACnD,GAEKY,IAAcP,EAAS,MAAM;AAAA,MACjC,GAAGQ;AAAAA,MACH,GAAGC,EAAyBd,EAAM,KAAK;AAAA,IAAA,CACxC,GAGKe,IAAoBV,EAAS,MAAM;AACvC,cAAQL,EAAM,aAAa;AAAA,QACzB,KAAKlB,EAAkB;AAAA,QACvB,KAAKA,EAAkB;AACrB,iBAAO,EAAE,OAAO,GAAGkC,EAAmB,QAAQ,GAAG;QAEnD,KAAKlC,EAAkB;AAAA,QACvB,KAAKA,EAAkB;AACrB,iBAAO,EAAE,QAAQ,GAAGkC,EAAmB,QAAQ,GAAG;MACtD;AAAA,IAAA,CACD,GAEKC,IAAQd,KAERe,IAAcb,EAAS,MAAM;AAAA,MACjC;AAAA,MACA,GAAGc;AAAAA,MACH,GAAGC,EAAyBpB,EAAM,KAAK;AAAA,MACvC;AAAA;AAAA,IAAA,CACD,GAEKqB,IAAuBhB,EAAS,MAAM;AAAA,MAC1C,GAAGiB;AAAAA,MACH,GAAGC,EAAkCvB,EAAM,KAAK;AAAA,IAAA,CACjD,GAEKwB,IAAcnB,EAAS,MAAM;AAAA,MACjC,GAAGoB;AAAAA,MACH,GAAGC,EAA+B1B,EAAM,WAAW;AAAA,IAAA,CACpD,GAEK2B,IAAkBtB,EAAS,MAAM;AAAA,MACrC,GAAGuB;AAAAA,MACH,GAAGC,GAAmC7B,EAAM,WAAW;AAAA,IAAA,CACxD,GAGK8B,IAAkBC,EAAmBC,EAAMhC,GAAO,YAAY,GAAGC,EAAQ,MAAM;AAAA,MACnF,cAAc+B,EAAMhC,GAAO,UAAU;AAAA,IAAA,CACtC,GAEKgB,IAAqBX,EAAS;AAAA,MAClC,KAAK,OAAOyB,EAAgB,QAAQ9B,EAAM,aAAaA,EAAM,WAAWA,EAAM;AAAA,MAE9E,KAAK,CAACiC,MAAU;AACd,cAAMC,IAAaD,KAASjC,EAAM,WAAWA,EAAM,YAAYA,EAAM;AAErE,QAAA8B,EAAgB,QAAQK,EAAoB,MAAM,OAAO,CAACC,GAAGC,MACpD,KAAK,IAAID,IAAIF,CAAU,IAAI,KAAK,IAAIG,IAAIH,CAAU,IAAIE,IAAIC,CAClE;AAAA,MACH;AAAA,IAAA,CACD,GAEKF,IAAsB9B,EAAS,MAC9BL,EAAM,OAIJ,MAAM,KAAK,KAAK,KAAK,IAAIA,EAAM,WAAWA,EAAM,QAAQ,IAAIA,EAAM,IAAI,CAAC,EAC3E,KAAK,MAAS,EACd,IAAI,CAACiC,GAAOK,MAAU,KAAK,OAAOtC,EAAM,WAAWA,EAAM,OAAOsC,KAAS,GAAI,IAAI,GAAI,EACrF,OAAO,GAAGtC,EAAM,aAAaA,EAAM,QAAQ,EAC3C,KAAK,CAACoC,GAAGC,MAAMD,IAAIC,CAAC,IAPd,CAACrC,EAAM,UAAU,GAAGA,EAAM,aAAaA,EAAM,QAAQ,CAQ/D,GAGKuC,IAAmBlC,EAAS,MAAM;AACtC,cAAQL,EAAM,aAAa;AAAA,QACzB,KAAKlB,EAAkB;AAAA,QACvB,KAAKA,EAAkB;AACd,iBAAA;AAAA,QAET,KAAKA,EAAkB;AAAA,QACvB,KAAKA,EAAkB;AACd,iBAAA;AAAA,MACX;AAAA,IAAA,CACD,GAEK0D,IAAwBrC,KAExBsC,IAAkBC,EAAmBlC,CAAI;AAGtC,aAAAmC,EAAOC,GAAoBC,GAAwC;AAC1E,UAAI7C,EAAM;AACR;AAGI,YAAA8C,IAAaL,EAAgB,MAAM,OACnCM,IAAcN,EAAgB,OAAO;AAE3C,cAAQzC,EAAM,aAAa;AAAA,QACzB,KAAKlB,EAAkB;AACF,UAAAkC,EAAA,QAAQgC,EAAMH,EAAM,UAAUJ,EAAgB,KAAK,OAAO,GAAGK,CAAU,IAAIA;AAC9F;AAAA,QAEF,KAAKhE,EAAkB;AACF,UAAAkC,EAAA,QAAQgC,EAAMP,EAAgB,MAAM,QAAQI,EAAM,SAAS,GAAGC,CAAU,IAAIA;AAC/F;AAAA,QAEF,KAAKhE,EAAkB;AACF,UAAAkC,EAAA,QAAQgC,EAAMD,KAAeF,EAAM,UAAUJ,EAAgB,IAAI,QAAQ,GAAGM,CAAW,IAAIA;AAC9G;AAAA,QAEF,KAAKjE,EAAkB;AACF,UAAAkC,EAAA,QAAQgC,EAAMD,KAAeN,EAAgB,OAAO,QAAQI,EAAM,UAAU,GAAGE,CAAW,IAAIA;AACjH;AAAA,MACJ;AAAA,IACF;AAGA,aAASE,EAAgCC,GAA8D;AACrG,cAAQlD,EAAM,aAAa;AAAA,QACzB,KAAKlB,EAAkB;AACrB,iBAAO,EAAE,MAAM,GAAGqE,EAAoBD,CAAU,IAAI,GAAG;QAEzD,KAAKpE,EAAkB;AACrB,iBAAO,EAAE,OAAO,GAAGqE,EAAoBD,CAAU,IAAI,GAAG;QAE1D,KAAKpE,EAAkB;AACrB,iBAAO,EAAE,QAAQ,GAAGqE,EAAoBD,CAAU,IAAI,GAAG;QAE3D,KAAKpE,EAAkB;AACrB,iBAAO,EAAE,KAAK,GAAGqE,EAAoBD,CAAU,IAAI,GAAG;MAC1D;AAAA,IACF;AAGA,aAASC,EAAoBD,GAA4B;AACvD,cAAQA,IAAalD,EAAM,aAAaA,EAAM,WAAWA,EAAM;AAAA,IACjE;AAGM,UAAAoD,IAAaC,EAAgB7C,CAAI,GAEjC,EAAE,YAAA8C,EAAA,IAAeC,EAAa/C,GAAM;AAAA,MACxC,SAASmC;AAAA,MACT,QAAQA;AAAA,MACR,OAAOA;AAAA,IAAA,CACR;AAGD,WAAAa,EAAM,MAAMxD,EAAM,UAAU,CAACiC,MAAU;AACjC,UAAAA,KAASjC,EAAM;AACX,cAAA,IAAI,MAAM,wDAAwD;AAAA,IAC1E,GACC,EAAE,WAAW,GAAA,CAAM,GAEtBwD,EAAM,MAAMxD,EAAM,UAAU,CAACiC,MAAU;AACjC,UAAAA,KAASjC,EAAM;AACX,cAAA,IAAI,MAAM,yDAAyD;AAAA,IAC3E,GACC,EAAE,WAAW,GAAA,CAAM,GAEf;AAAA,MACL,MAAAE;AAAA,MACA,YAAAE;AAAA,MAEA,MAAAI;AAAA,MACA,YAAAC;AAAA,MAEA,aAAAG;AAAA,MACA,mBAAAG;AAAA,MAEA,OAAAE;AAAA,MACA,aAAAC;AAAA,MAEA,sBAAAG;AAAA,MAEA,aAAAG;AAAA,MACA,iBAAAG;AAAA,MAEA,iBAAAG;AAAA,MACA,kBAAAS;AAAA,MACA,uBAAAC;AAAA,MAEA,iCAAAS;AAAA,MAEA,YAAAG;AAAA,MACA,YAAAE;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
|
|
1
|
+
{"version":3,"file":"OrSlider.vue_vue_type_script_lang-ggTiRZpX.mjs","sources":["../../../components/or-slider-v3/src/types.ts","../../../components/or-slider-v3/src/styles.ts","../../../components/or-slider-v3/src/OrSlider.vue"],"sourcesContent":["import { ModelValue } from '@onereach/ui-components-common/types';\n\nexport type SliderModelValue = ModelValue<number>;\n\nexport enum SliderColor {\n Primary = 'primary',\n Secondary = 'secondary',\n}\n\nexport enum SliderOrientation {\n Horizontal = 'horizontal',\n HorizontalReversed = 'horizontal-reversed',\n Vertical = 'vertical',\n VerticalReversed = 'vertical-reversed',\n}\n","import { SliderColor, SliderOrientation } from './types';\n\nexport const Slider: string[] = [\n // Interactivity\n 'interactivity-default',\n];\n\nexport const SliderOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Layout\n 'layout-column',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Layout\n 'layout-column',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.Vertical]: [\n // Layout\n 'layout-row',\n\n // Box\n 'h-full',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Layout\n 'layout-row',\n\n // Box\n 'h-full',\n ],\n};\n\nexport const SliderRail: string[] = [\n // Position\n 'relative',\n\n // Interactivity\n 'interactivity-click',\n\n // Shape\n 'rounded-full',\n\n // Theme\n 'theme-background-disabled',\n 'dark:theme-background-disabled-dark',\n];\n\nexport const SliderRailOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Layout\n 'layout-row',\n\n // Box\n 'w-full',\n 'h-xs',\n\n // Spacing\n 'mx-0',\n 'my-md+',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Layout\n 'layout-row-reverse',\n\n // Box\n 'w-full',\n 'h-xs',\n\n // Spacing\n 'mx-0',\n 'my-md+',\n ],\n\n [SliderOrientation.Vertical]: [\n // Layout\n 'layout-column-reverse items-center',\n\n // Box\n 'w-xs',\n 'h-full',\n\n // Spacing\n 'mx-md+',\n 'my-0',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Layout\n 'layout-column items-center',\n\n // Box\n 'w-xs',\n 'h-full',\n\n // Spacing\n 'mx-md+',\n 'my-0',\n ],\n};\n\nexport const SliderTrack: string[] = [\n // Shape\n 'rounded-full',\n\n // Box\n 'w-full',\n 'h-full',\n];\n\nexport const SliderTrackColors: Record<SliderColor, string[]> = {\n [SliderColor.Primary]: [\n // Theme\n 'theme-background-primary',\n 'dark:theme-background-primary-dark',\n ],\n\n [SliderColor.Secondary]: [\n // Theme\n 'theme-background-secondary',\n 'dark:theme-background-secondary-dark',\n ],\n};\n\nexport const SliderThumb: string[] = [\n // Layout\n 'shrink-0',\n // Position\n 'z-10',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-[20px]',\n 'h-[20px]',\n\n // Spacing\n '-mx-[10px]',\n '-my-[10px]',\n\n // Theme\n 'theme-background-base',\n 'dark:theme-background-base-dark',\n];\n\nexport const SliderThumbColors: Record<SliderColor, string[]> = {\n [SliderColor.Primary]: [\n // Theme\n 'theme-border-primary border-4',\n 'dark:theme-border-primary-dark',\n\n // Theme (hover)\n 'hover:theme-background-primary',\n 'dark:hover:theme-background-primary-dark',\n\n // Theme (active)\n 'active:theme-background-primary',\n 'dark:active:theme-background-primary-dark',\n\n 'active:theme-outline-primary active:outline-10',\n 'dark:active:theme-outline-primary-dark',\n ],\n\n [SliderColor.Secondary]: [\n // Theme\n 'theme-border-secondary border-4',\n 'dark:theme-border-secondary-dark',\n\n // Theme (hover)\n 'hover:theme-background-secondary',\n 'dark:hover:theme-background-secondary-dark',\n\n // Theme (active)\n 'active:theme-background-secondary',\n 'dark:active:theme-background-secondary-dark',\n\n 'active:theme-outline-secondary active:outline-10',\n 'dark:active:theme-outline-secondary-dark',\n ],\n};\n\nexport const SliderBreakpointMark: string[] = [\n // Position\n 'absolute',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-[2px]',\n 'h-[2px]',\n\n // Spacing\n '-mx-[1px]',\n '-my-[1px]',\n];\n\nexport const SliderBreakpointMarkColors: Record<SliderColor, string[]> = {\n [SliderColor.Primary]: [\n // Theme\n 'theme-background-primary',\n 'dark:theme-background-primary-dark',\n\n // Theme (activated)\n 'activated:theme-background-primary-container',\n 'dark:activated:theme-background-primary-container-dark',\n\n // Theme (disabled)\n 'disabled:!bg-on-disabled',\n 'dark:disabled:!bg-on-disabled-dark',\n ],\n\n [SliderColor.Secondary]: [\n // Theme\n 'theme-background-secondary',\n 'dark:theme-background-secondary-dark',\n\n // Theme (activated)\n 'activated:theme-background-secondary-container',\n 'dark:activated:theme-background-secondary-container-dark',\n\n // Theme (disabled)\n 'disabled:!bg-on-disabled',\n 'dark:disabled:!bg-on-disabled-dark',\n ],\n};\n\nexport const SliderLabel: string[] = [\n // Position\n 'relative',\n];\n\nexport const SliderLabelOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Layout\n 'layout-row',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Layout\n 'layout-row-reverse',\n\n // Box\n 'w-full',\n ],\n\n [SliderOrientation.Vertical]: [\n // Layout\n 'layout-column-reverse items-center',\n\n // Box\n 'h-full',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Layout\n 'layout-column items-center',\n\n // Box\n 'h-full',\n ],\n};\n\nexport const SliderLabelMark: string[] = [\n // Position\n 'absolute',\n\n // Interactivity\n 'interactivity-click',\n\n // Typography\n 'typography-caption-regular whitespace-nowrap',\n\n // Theme\n 'theme-foreground-outline',\n 'dark:theme-foreground-outline-dark',\n\n // Theme (hover)\n 'hover:theme-foreground-default',\n 'dark:hover:theme-foreground-default-dark',\n];\n\nexport const SliderLabelMarkOrientations: Record<SliderOrientation, string[]> = {\n [SliderOrientation.Horizontal]: [\n // Position\n '-translate-x-1/2',\n 'translate-y-1/2',\n ],\n\n [SliderOrientation.HorizontalReversed]: [\n // Position\n 'translate-x-1/2',\n 'translate-y-1/2',\n ],\n\n [SliderOrientation.Vertical]: [\n // Position\n 'translate-x-1/2',\n 'translate-y-1/2',\n ],\n\n [SliderOrientation.VerticalReversed]: [\n // Position\n 'translate-x-1/2',\n '-translate-y-1/2',\n ],\n};\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n :disabled=\"disabled\"\n >\n <div\n :ref=\"'rail'\"\n :class=\"railStyles\"\n :disabled=\"disabled\"\n >\n <div\n :class=\"trackStyles\"\n :style=\"trackInlineStyles\"\n :disabled=\"disabled\"\n />\n\n <OrTooltip\n :is-open=\"isHovering || isDragging\"\n :placement=\"tooltipPlacement\"\n :offset=\"24\"\n :external-control=\"true\"\n v-bind=\"tooltip\"\n >\n <div\n :ref=\"'thumb'\"\n :class=\"thumbStyles\"\n :disabled=\"disabled\"\n />\n\n <template v-slot:content>\n <slot\n name=\"tooltipContent\"\n :value=\"proxyModelValue\"\n >\n {{ proxyModelValue }}\n </slot>\n </template>\n </OrTooltip>\n\n <template v-if=\"breakpoints.length > 0\">\n <div\n v-for=\"breakpoint of [minValue, ...breakpoints, maxValue]\"\n :key=\"breakpoint\"\n :class=\"breakpointMarkStyles\"\n :style=\"getBreakpointMarkComputedStyles(breakpoint)\"\n :activated=\"breakpoint <= proxyModelValue\"\n :disabled=\"disabled\"\n @mouseenter=\"highlightedBreakpoint = breakpoint\"\n @mouseleave=\"highlightedBreakpoint = undefined\"\n />\n </template>\n </div>\n\n <div :class=\"labelStyles\">\n <div\n v-for=\"breakpoint of [minValue, ...breakpoints, maxValue]\"\n :key=\"breakpoint\"\n :class=\"labelMarkStyles\"\n :style=\"getBreakpointMarkComputedStyles(breakpoint)\"\n :disabled=\"disabled\"\n :force-state=\"highlightedBreakpoint === breakpoint ? 'hover' : undefined\"\n @mouseenter=\"highlightedBreakpoint = breakpoint\"\n @mouseleave=\"highlightedBreakpoint = undefined\"\n @click=\"proxyModelValue = breakpoint\"\n >\n <slot\n :name=\"`${breakpoint}-label`\"\n :value=\"breakpoint\"\n >\n {{ breakpoint }}\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrTooltipV3 as OrTooltip } from '@onereach/ui-components.or-tooltip-v3';\nimport { Position, clamp, useDraggable, useElementBounding, useElementHover } from '@vueuse/core';\nimport { PropType, computed, defineComponent, ref, toRef, watch } from 'vue';\n\nimport * as Styles from './styles';\nimport { SliderColor, SliderModelValue, SliderOrientation } from './types';\n\nexport default defineComponent({\n name: 'OrSlider',\n\n components: {\n OrTooltip,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: undefined as unknown as PropType<SliderModelValue>,\n default: undefined,\n },\n\n minValue: {\n type: Number,\n default: 0,\n },\n\n maxValue: {\n type: Number,\n default: 100,\n },\n\n step: {\n type: Number,\n default: 1,\n },\n\n breakpoints: {\n type: Array as PropType<number[]>,\n default: () => [],\n },\n\n color: {\n type: String as PropType<`${SliderColor}`>,\n default: () => SliderColor.Primary,\n },\n\n orientation: {\n type: String as PropType<`${SliderOrientation}`>,\n default: () => SliderOrientation.Horizontal,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n\n tooltip: {\n type: Object as PropType<Pick<InstanceType<typeof OrTooltip>['$props'], 'placement' | 'offset' | 'debounce'>>,\n default: undefined,\n },\n },\n\n emits: [\n 'update:modelValue',\n ],\n\n expose: [\n 'root',\n ],\n\n setup(props, context) {\n // Refs & Styles\n const root = ref<HTMLElement>();\n\n const rootStyles = computed(() => [\n 'or-slider-v3',\n ...Styles.Slider,\n ...Styles.SliderOrientations[props.orientation],\n ]);\n\n const rail = ref<HTMLElement>();\n\n const railStyles = computed(() => [\n 'or-slider-rail-v3',\n ...Styles.SliderRail,\n ...Styles.SliderRailOrientations[props.orientation],\n ]);\n\n const trackStyles = computed(() => [\n ...Styles.SliderTrack,\n ...Styles.SliderTrackColors[props.color],\n ]);\n\n // eslint-disable-next-line vue/return-in-computed-property\n const trackInlineStyles = computed(() => {\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n case SliderOrientation.HorizontalReversed:\n return { width: `${internalModelValue.value * 100}%` };\n\n case SliderOrientation.Vertical:\n case SliderOrientation.VerticalReversed:\n return { height: `${internalModelValue.value * 100}%` };\n }\n });\n\n const thumb = ref<HTMLElement>();\n\n const thumbStyles = computed(() => [\n 'or-slider-thumb-v3',\n ...Styles.SliderThumb,\n ...Styles.SliderThumbColors[props.color],\n 'touch-none', // Required for proper work on mobile\n ]);\n\n const breakpointMarkStyles = computed(() => [\n ...Styles.SliderBreakpointMark,\n ...Styles.SliderBreakpointMarkColors[props.color],\n ]);\n\n const labelStyles = computed(() => [\n ...Styles.SliderLabel,\n ...Styles.SliderLabelOrientations[props.orientation],\n ]);\n\n const labelMarkStyles = computed(() => [\n ...Styles.SliderLabelMark,\n ...Styles.SliderLabelMarkOrientations[props.orientation],\n ]);\n\n // State\n const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {\n defaultValue: toRef(props, 'minValue'),\n });\n\n const internalModelValue = computed({\n get: () => (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue),\n\n set: (value) => {\n const modelValue = value * (props.maxValue - props.minValue) + props.minValue;\n\n proxyModelValue.value = internalBreakpoints.value.reduce((a, b) => {\n return Math.abs(a - modelValue) < Math.abs(b - modelValue) ? a : b;\n });\n },\n });\n\n const internalBreakpoints = computed(() => {\n if (!props.step) {\n return [props.minValue, ...props.breakpoints, props.maxValue];\n }\n\n return Array(Math.ceil(Math.abs(props.maxValue - props.minValue) / props.step))\n .fill(undefined)\n .map((value, index) => Math.floor((props.minValue + props.step * index) * 1000) / 1000)\n .concat(...props.breakpoints, props.maxValue)\n .sort((a, b) => a - b);\n });\n\n // eslint-disable-next-line vue/return-in-computed-property\n const tooltipPlacement = computed(() => {\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n case SliderOrientation.HorizontalReversed:\n return 'top';\n\n case SliderOrientation.Vertical:\n case SliderOrientation.VerticalReversed:\n return 'right';\n }\n });\n\n const highlightedBreakpoint = ref<number>();\n\n const railBoundingBox = useElementBounding(rail);\n\n // Handlers\n function onDrag(position: Position, event: MouseEvent | PointerEvent): void {\n if (props.disabled) {\n return;\n }\n\n const totalWidth = railBoundingBox.width.value;\n const totalHeight = railBoundingBox.height.value;\n\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n internalModelValue.value = clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth;\n break;\n\n case SliderOrientation.HorizontalReversed:\n internalModelValue.value = clamp(railBoundingBox.right.value - event.clientX, 0, totalWidth) / totalWidth;\n break;\n\n case SliderOrientation.Vertical:\n internalModelValue.value = clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;\n break;\n\n case SliderOrientation.VerticalReversed:\n internalModelValue.value = clamp(totalHeight - (railBoundingBox.bottom.value - event.clientY), 0, totalHeight) / totalHeight;\n break;\n }\n }\n\n // Methods\n function getBreakpointMarkComputedStyles(breakpoint: number): Partial<CSSStyleDeclaration> | undefined {\n switch (props.orientation) {\n case SliderOrientation.Horizontal:\n return { left: `${getBreakpointOffset(breakpoint) * 100}%` };\n\n case SliderOrientation.HorizontalReversed:\n return { right: `${getBreakpointOffset(breakpoint) * 100}%` };\n\n case SliderOrientation.Vertical:\n return { bottom: `${getBreakpointOffset(breakpoint) * 100}%` };\n\n case SliderOrientation.VerticalReversed:\n return { top: `${getBreakpointOffset(breakpoint) * 100}%` };\n }\n }\n\n // Helpers\n function getBreakpointOffset(breakpoint: number): number {\n return (breakpoint - props.minValue) / (props.maxValue - props.minValue);\n }\n\n // Effects\n const isHovering = useElementHover(rail);\n\n const { isDragging } = useDraggable(rail, {\n onStart: onDrag,\n onMove: onDrag,\n onEnd: onDrag,\n });\n\n // Constraints\n watch(() => props.minValue, (value) => {\n if (value >= props.maxValue) {\n throw new Error('[OrSlider]: `minValue` must be lesser than `maxValue`.');\n }\n }, { immediate: true });\n\n watch(() => props.maxValue, (value) => {\n if (value <= props.minValue) {\n throw new Error('[OrSlider]: `maxValue` must be greater than `minValue`.');\n }\n }, { immediate: true });\n\n return {\n root,\n rootStyles,\n\n rail,\n railStyles,\n\n trackStyles,\n trackInlineStyles,\n\n thumb,\n thumbStyles,\n\n breakpointMarkStyles,\n\n labelStyles,\n labelMarkStyles,\n\n proxyModelValue,\n tooltipPlacement,\n highlightedBreakpoint,\n\n getBreakpointMarkComputedStyles,\n\n isHovering,\n isDragging,\n };\n },\n});\n</script>\n"],"names":["SliderColor","SliderOrientation","Slider","SliderOrientations","SliderRail","SliderRailOrientations","SliderTrack","SliderTrackColors","SliderThumb","SliderThumbColors","SliderBreakpointMark","SliderBreakpointMarkColors","SliderLabel","SliderLabelOrientations","SliderLabelMark","SliderLabelMarkOrientations","_sfc_main","defineComponent","OrTooltip","props","context","root","ref","rootStyles","computed","Styles.Slider","Styles.SliderOrientations","rail","railStyles","Styles.SliderRail","Styles.SliderRailOrientations","trackStyles","Styles.SliderTrack","Styles.SliderTrackColors","trackInlineStyles","internalModelValue","thumb","thumbStyles","Styles.SliderThumb","Styles.SliderThumbColors","breakpointMarkStyles","Styles.SliderBreakpointMark","Styles.SliderBreakpointMarkColors","labelStyles","Styles.SliderLabel","Styles.SliderLabelOrientations","labelMarkStyles","Styles.SliderLabelMark","Styles.SliderLabelMarkOrientations","proxyModelValue","useProxyModelValue","toRef","value","modelValue","internalBreakpoints","a","b","index","tooltipPlacement","highlightedBreakpoint","railBoundingBox","useElementBounding","onDrag","position","event","totalWidth","totalHeight","clamp","getBreakpointMarkComputedStyles","breakpoint","getBreakpointOffset","isHovering","useElementHover","isDragging","useDraggable","watch"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useProxyModelValue as V } from "@onereach/ui-components-common/hooks";
|
|
2
2
|
import { O as b } from "./OrButton-ZxDr22t7.mjs";
|
|
3
3
|
import { O as B } from "./OrIcon-k8cyvh-D.mjs";
|
|
4
|
-
import { O as _ } from "./OrMenuItem-
|
|
5
|
-
import { O as C } from "./OrMenu-
|
|
4
|
+
import { O as _ } from "./OrMenuItem-CFz6OW23.mjs";
|
|
5
|
+
import { O as C } from "./OrMenu-DdcBdA4v.mjs";
|
|
6
6
|
import { defineComponent as I, ref as m, computed as i, toRef as L, resolveComponent as n, openBlock as s, createElementBlock as v, normalizeClass as M, createVNode as k, withCtx as p, createElementVNode as $, toDisplayString as y, createBlock as S, createCommentVNode as w, Fragment as N, renderList as A, createTextVNode as h } from "vue";
|
|
7
7
|
import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
8
8
|
const R = [], z = [
|
|
@@ -106,4 +106,4 @@ const K = /* @__PURE__ */ E(D, [["render", F]]);
|
|
|
106
106
|
export {
|
|
107
107
|
K as O
|
|
108
108
|
};
|
|
109
|
-
//# sourceMappingURL=OrSorting-
|
|
109
|
+
//# sourceMappingURL=OrSorting-BGeIMkZ5.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrSorting-
|
|
1
|
+
{"version":3,"file":"OrSorting-BGeIMkZ5.mjs","sources":["../../../components/or-sorting-v3/src/styles.ts","../../../components/or-sorting-v3/src/OrSorting.vue"],"sourcesContent":["export const SortingRoot = [];\nexport const SortingLabel = [\n // Theme\n 'text-on-background dark:text-on-background-dark',\n];\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <OrButton\n :ref=\"'sortButton'\"\n :variant=\"'link'\"\n :color=\"'primary'\"\n @click=\"sortMenu && sortMenu.toggle()\"\n >\n <span :class=\"sortLabelStyles\">\n {{ sortLabel }}\n </span>\n\n <OrIcon\n v-if=\"sortMenu\"\n :icon=\"sortMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'\"\n />\n </OrButton>\n\n <OrMenu\n :ref=\"'sortMenu'\"\n :trigger=\"sortButton && sortButton.root\"\n :placement=\"'bottom-start'\"\n :offset=\"{ mainAxis: 8, crossAxis: -8 }\"\n >\n <OrMenuItem\n v-for=\"item in options\"\n :key=\"item.value\"\n :selected=\"item.value === modelValue\"\n @click=\"handleSort(item.value)\"\n >\n {{ item.label }}\n </OrMenuItem>\n </OrMenu>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrButtonV3 as OrButton } from '@onereach/ui-components.or-button-v3';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrMenuItemV3 as OrMenuItem } from '@onereach/ui-components.or-menu-item-v3';\nimport { OrMenuV3 as OrMenu } from '@onereach/ui-components.or-menu-v3';\nimport { PropType, computed, defineComponent, ref, toRef } from 'vue';\n\nimport { SortingLabel, SortingRoot } from './styles';\nimport { SortOption } from './types';\n\nexport default defineComponent({\n name: 'OrSorting',\n\n components: {\n OrButton,\n OrIcon,\n OrMenu,\n OrMenuItem,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: String,\n default: undefined,\n },\n\n options: {\n type: Array as PropType<SortOption[]>,\n default: () => [],\n },\n },\n\n emits: [\n 'update:modelValue',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n const sortMenu = ref<typeof OrMenu>();\n const sortButton = ref<typeof OrButton>();\n\n // Styles\n const rootStyles = computed(() => [\n 'or-sorting-v3',\n ...SortingRoot,\n ]);\n\n const sortLabelStyles = computed(() => [\n ...SortingLabel,\n ]);\n\n // State\n const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n const sortLabel = computed(() => {\n return props.options.find(item => item.value === proxyModelValue.value)?.label;\n });\n\n // Methods\n function handleSort(sort: string) {\n proxyModelValue.value = sort;\n }\n\n return {\n root,\n rootStyles,\n sortLabelStyles,\n sortMenu,\n sortButton,\n sortLabel,\n handleSort,\n };\n },\n});\n\n</script>\n"],"names":["SortingRoot","SortingLabel","_sfc_main","defineComponent","OrButton","OrIcon","OrMenu","OrMenuItem","props","context","root","ref","sortMenu","sortButton","rootStyles","computed","sortLabelStyles","proxyModelValue","useProxyModelValue","toRef","sortLabel","_a","item","handleSort","sort","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_component_OrButton","_cache","$event","_withCtx","_createElementVNode","_toDisplayString","_createBlock","_component_OrIcon","_component_OrMenu","_Fragment","_renderList","_component_OrMenuItem"],"mappings":";;;;;;;AAAO,MAAMA,IAAc,CAAA,GACdC,IAAe;AAAA;AAAA,EAE1B;AACF,GC8CAC,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EAEA,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,MAAM,CAAC;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL;AAAA,EACF;AAAA,EAEA,MAAMC,GAAOC,GAAS;AAEpB,UAAMC,IAAOC,KACPC,IAAWD,KACXE,IAAaF,KAGbG,IAAaC,EAAS,MAAM;AAAA,MAChC;AAAA,MACA,GAAGf;AAAA,IAAA,CACJ,GAEKgB,IAAkBD,EAAS,MAAM;AAAA,MACrC,GAAGd;AAAA,IAAA,CACJ,GAGKgB,IAAkBC,EAAmBC,EAAMX,GAAO,YAAY,GAAGC,EAAQ,IAAI,GAC7EW,IAAYL,EAAS,MAAM;;AACxB,cAAAM,IAAAb,EAAM,QAAQ,KAAK,CAAAc,MAAQA,EAAK,UAAUL,EAAgB,KAAK,MAA/D,gBAAAI,EAAkE;AAAA,IAAA,CAC1E;AAGD,aAASE,EAAWC,GAAc;AAChC,MAAAP,EAAgB,QAAQO;AAAA,IAC1B;AAEO,WAAA;AAAA,MACL,MAAAd;AAAA,MACA,YAAAI;AAAA,MACA,iBAAAE;AAAA,MACA,UAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,WAAAO;AAAA,MACA,YAAAG;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;;qEArHCE,EAmCM,QAAA;SAjCEC,EAAY,GAAAC,EAAA,OAAA;AAAA,IAAA,KAAA;AAAA,IAElB,OAcWC,EAAAC,EAAA,UAAA;AAAA,EAAA,GAAA;AAAA,MAZCC,GAAM;AAAA,MACf,KAAK;AAAA,MACL,SAAK;AAAA,MAAA,OAAA;AAAA,MAIC,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAH,EAAA,YAAAA,EAAA,SAAA,OAAA;AAAA,IAAA,GAAA;AAAA,MAFK,SAAAI,EAAA,MAAA;AAAA,QACPC,EAAA,QAAA;AAAA,UAIG,OAAQN,EAAAC,EAAA,eAAA;AAAA,QAAA,GAAAM,EADhBN,EAGE,SAAA,GAAA,CAAA;AAAA,QAAAA,EAAA,YAAAH,KADqBU,EAAAC,GAAA;AAAA,UAAA,KAAA;AAAA;;;MAIzB,GAAA;AAAA,IAAA,CAAA;AAAA,MAEYC,GAAc;AAAA,MACvB,KAAA;AAAA,MACA,SAAQT,EAA8B,cAAAA,EAAA,WAAA;AAAA,MAAA,WAAA;AAAA,MAGd,QAAA,EAAA,UAAA,GAAA,WAAA,GAAA;AAAA,IAAA,GAAA;AAAA;SACjBH,EAAA,EAAK,GAAKC,EAAAY,GAAA,MAAAC,EAAAX,EAAA,SAAA,CAAAP,OACfI,EAAe,GAAKU,EAAKK,GAAU;AAAA,UACnC,KAAKnB,EAAA;AAAA,UAAA,UAAAA,EAAA,UAAAO,EAAA;AAAA,UAEU,SAAA,CAAAG,MAAAH,EAAA,WAAAP,EAAA,KAAA;AAAA,QAAA,GAAA;AAAA;;;;;;;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { usePopoverState as L, useResponsive as w } from "@onereach/ui-components-common";
|
|
2
2
|
import { O as y } from "./OrIcon-k8cyvh-D.mjs";
|
|
3
|
-
import { O as E } from "./OrMenuItem-
|
|
4
|
-
import { O as H } from "./OrMenu-
|
|
5
|
-
import { a as P } from "./OrPopover-
|
|
3
|
+
import { O as E } from "./OrMenuItem-CFz6OW23.mjs";
|
|
4
|
+
import { O as H } from "./OrMenu-DdcBdA4v.mjs";
|
|
5
|
+
import { a as P } from "./OrPopover-DsFw4mp2.mjs";
|
|
6
6
|
import { defineComponent as $, toRef as B, ref as p, nextTick as i, resolveComponent as d, openBlock as C, createBlock as R, withCtx as m, createVNode as b, renderSlot as g, createElementBlock as N, createCommentVNode as V } from "vue";
|
|
7
7
|
import "@onereach/ui-components-common/utils";
|
|
8
8
|
import "@floating-ui/dom";
|
|
@@ -157,4 +157,4 @@ const Y = /* @__PURE__ */ _(j, [["render", z]]);
|
|
|
157
157
|
export {
|
|
158
158
|
Y as O
|
|
159
159
|
};
|
|
160
|
-
//# sourceMappingURL=OrSubMenuItem-
|
|
160
|
+
//# sourceMappingURL=OrSubMenuItem-BIOJeBwe.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrSubMenuItem-
|
|
1
|
+
{"version":3,"file":"OrSubMenuItem-BIOJeBwe.mjs","sources":["../../../components/or-sub-menu-item-v3/src/OrSubMenuItem.vue"],"sourcesContent":["<template>\n <OrMenuItem\n ref=\"root\"\n class=\"or-sub-menu-item-v3\"\n :icon=\"icon\"\n :selected=\"selected || state === 'open'\"\n :disabled=\"disabled\"\n :tooltip-text=\"tooltipText\"\n @click=\"handleClickOnTrigger\"\n @mouseenter=\"handleMouseEnterSubMenuItem\"\n @mouseleave=\"handleMouseLeaveSubMenuItem\"\n >\n <slot />\n <template v-slot:append>\n <OrIcon\n icon=\"arrow_right\"\n />\n </template>\n <OrMenu\n ref=\"menu\"\n :is-open=\"state === 'open'\"\n :trigger=\"root && root.root\"\n :placement=\"placement\"\n :offset=\"0\"\n @mouseleave=\"handleMouseLeaveMenu\"\n @click=\"handleClickMenu\"\n >\n <slot name=\"items\" />\n </OrMenu>\n <div\n v-if=\"capturedContent\"\n class=\"hidden\"\n v-html=\"capturedContent\"\n />\n </OrMenuItem>\n</template>\n\n<script lang=\"ts\">\nimport { usePopoverState, useResponsive } from '@onereach/ui-components-common';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrMenuItemV3 as OrMenuItem } from '@onereach/ui-components.or-menu-item-v3';\nimport { OrMenuV3 as OrMenu } from '@onereach/ui-components.or-menu-v3';\nimport { PopoverPlacement } from '@onereach/ui-components.or-popover-v3';\nimport { defineComponent, nextTick, PropType, ref, toRef } from 'vue';\n\n\nexport default defineComponent({\n name: 'OrSubMenuItem',\n\n components: {\n OrMenuItem,\n OrIcon,\n OrMenu,\n },\n props: {\n icon: {\n type: [String, Object] as PropType<string | InstanceType<typeof OrIcon>['$props']>,\n default: undefined,\n },\n\n selected: {\n type: Boolean,\n default: false,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n\n placement: {\n type: String as PropType<`${PopoverPlacement}`>,\n default: () => PopoverPlacement.RightStart,\n },\n\n tooltipText: {\n type: String,\n default: '',\n },\n },\n\n\n emits: [\n 'open',\n 'close',\n 'update:state',\n\n 'click',\n 'focus',\n 'blur',\n ],\n\n expose: [\n 'root',\n ],\n\n setup(props, context) {\n const { state, open, close } = usePopoverState(toRef(props, 'selected'), context.emit);\n const { isMobile } = useResponsive();\n\n const root = ref<InstanceType<typeof OrMenuItem> | null>(null);\n const menu = ref<InstanceType<typeof OrMenu> | null>(null);\n const capturedContent = ref<string | null>(null);\n\n\n function handleMouseLeaveSubMenuItem(event: MouseEvent) {\n nextTick(() => {\n if (!menu.value?.root?.contains(event.relatedTarget as Node)) {\n close();\n }\n });\n }\n\n function handleMouseLeaveMenu(event: MouseEvent) {\n const relatedTarget = event.relatedTarget as Node | null;\n capturePopoverContent();\n nextTick(() => {\n setTimeout(() => {\n nextTick(() => {\n if (relatedTarget instanceof HTMLElement) {\n const relatedTargetHtml = relatedTarget?.outerHTML || '';\n const isInsideCapturedContent = capturedContent.value?.includes(relatedTargetHtml);\n if (!isInsideCapturedContent) {\n close();\n }\n }\n });\n });\n });\n }\n\n function handleMouseEnterSubMenuItem() {\n if (isMobile.value) return;\n open();\n capturePopoverContent();\n }\n\n function handleClickMenu() {\n const event = new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window,\n });\n (event as any).isSimulated = true;\n root.value?.root?.dispatchEvent(event);\n }\n\n function handleClickOnTrigger(event: MouseEvent) {\n if (isMobile.value) {\n event.stopPropagation();\n open();\n } else {\n if ((event as any).isSimulated) {\n return;\n }\n if (event.currentTarget === root.value?.root) {\n event.stopPropagation();\n }\n }\n }\n\n function capturePopoverContent() {\n nextTick(() => setTimeout(() => {\n if (menu.value?.root) {\n capturedContent.value = menu.value.root.innerHTML;\n }\n }));\n }\n\n return {\n root,\n menu,\n open,\n close,\n state,\n handleMouseLeaveMenu,\n handleMouseLeaveSubMenuItem,\n handleMouseEnterSubMenuItem,\n handleClickMenu,\n handleClickOnTrigger,\n capturedContent,\n };\n },\n});\n</script>\n"],"names":["_sfc_main","defineComponent","OrMenuItem","OrIcon","OrMenu","PopoverPlacement","props","context","state","open","close","usePopoverState","toRef","isMobile","useResponsive","root","ref","menu","capturedContent","handleMouseLeaveSubMenuItem","event","nextTick","_b","_a","handleMouseLeaveMenu","relatedTarget","capturePopoverContent","relatedTargetHtml","handleMouseEnterSubMenuItem","handleClickMenu","handleClickOnTrigger","_resolveComponent","_openBlock","_createBlock","_component_OrMenuItem","_ctx","_createVNode","_component_OrIcon","_withCtx","_renderSlot","_component_OrMenu","_createElementBlock"],"mappings":"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"}
|
|
@@ -49,7 +49,7 @@ const M = [
|
|
|
49
49
|
"after:active:w-[20px] after:active:md:w-[18px]",
|
|
50
50
|
"after:active:h-[20px] after:active:md:h-[18px]",
|
|
51
51
|
"after:bg-outline",
|
|
52
|
-
"after:
|
|
52
|
+
"dark:after:bg-outline-dark",
|
|
53
53
|
"after:hover:bg-on-surface-variant",
|
|
54
54
|
"after:hover:dark:bg-on-surface-variant-dark",
|
|
55
55
|
"after:focus-visible:bg-on-surface-variant",
|
|
@@ -252,4 +252,4 @@ const te = /* @__PURE__ */ F(K, [["render", X], ["__scopeId", "data-v-90813802"]
|
|
|
252
252
|
export {
|
|
253
253
|
te as O
|
|
254
254
|
};
|
|
255
|
-
//# sourceMappingURL=OrSwitch-
|
|
255
|
+
//# sourceMappingURL=OrSwitch-vI9sIMUp.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrSwitch-BtoXDsZx.mjs","sources":["../../../components/or-switch-v3/src/styles.ts","../../../components/or-switch-v3/src/OrSwitch.vue"],"sourcesContent":["export const Switch: string[] = [\n // Layout\n 'layout-row',\n\n // Spacing\n 'gap-sm',\n];\n\nexport const SwitchControl: string[] = [\n // Layout\n 'layout-inline-row justify-start checked:justify-end',\n\n // Interactivity\n 'interactivity-click',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-[43px] md:w-[37px]',\n 'h-[24px] md:h-[21px]',\n\n // Spacing\n 'px-[2px]',\n 'active:px-[1px]',\n\n // Spacing (checked)\n 'checked:px-[3px]',\n 'active:checked:px-[2px]',\n\n // Theme\n 'theme-preset-3-primary',\n 'dark:theme-preset-3-primary-dark',\n\n 'theme-background-default',\n 'dark:theme-background-default-dark',\n\n 'theme-border-outline border-1',\n 'dark:theme-border-outline-dark',\n\n // Theme (focus)\n 'focus-visible:theme-outline-primary focus-visible:outline-2',\n 'dark:focus-visible:theme-outline-primary-dark',\n\n // Theme (checked)\n 'checked:theme-preset-1-primary',\n 'dark:checked:theme-preset-1-primary-dark',\n];\n\nexport const SwitchControlHandle: string[] = [\n // Box\n 'after:w-[18px] after:md:w-[16px]',\n 'after:h-[18px] after:md:h-[16px]',\n\n // Shape\n 'after:rounded-full',\n\n // Theme\n 'after:active:w-[20px] after:active:md:w-[18px]',\n 'after:active:h-[20px] after:active:md:h-[18px]',\n\n 'after:bg-outline',\n 'after:dark:bg-outline-dark',\n\n 'after:hover:bg-on-surface-variant',\n 'after:hover:dark:bg-on-surface-variant-dark',\n\n 'after:focus-visible:bg-on-surface-variant',\n 'after:focus-visible:dark:bg-on-surface-variant-dark',\n\n 'after:active:bg-outline',\n 'after:active:dark:bg-outline-dark',\n\n 'after:disabled:bg-on-disabled',\n 'after:disabled:dark:bg-on-disabled-dark',\n\n 'after:checked:bg-on-primary',\n 'after:checked:dark:bg-on-primary-dark',\n\n 'after:checked:shadow',\n\n 'after:checked:hover:bg-primary-container',\n 'after:checked:hover:dark:bg-primary-container-dark',\n\n 'after:checked:focus-visible:bg-primary-container',\n 'after:checked:focus-visible:dark:bg-primary-container-dark',\n\n 'after:checked:active:bg-on-primary',\n 'after:checked:active:dark:bg-on-primary-dark',\n\n 'after:checked:disabled:bg-on-disabled',\n 'after:checked:disabled:dark:bg-on-disabled-dark',\n];\n\nexport const SwitchLoader: string[] = [\n // Layout\n 'layout-row justify-center',\n\n // Box\n 'w-[24px] md:w-[20px]',\n 'h-[24px] md:h-[20px]',\n\n // Shape\n 'rounded-full',\n\n // Theme\n 'theme-border-outline border-1',\n 'dark:theme-border-outline-dark',\n];\n\nexport const SwitchLoaderHandle: string[] = [\n // Layout\n 'after:absolute',\n\n // Box\n 'after:w-[18px] after:md:w-[14px]',\n 'after:h-[18px] after:md:h-[14px]',\n\n // Shape\n 'after:rounded-full',\n\n // Theme\n 'after:bg-outline',\n 'dark:after:bg-outline-dark',\n\n 'after:disabled:bg-on-disabled',\n 'dark:after:disabled:bg-on-disabled-dark',\n];\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <template v-if=\"!loading\">\n <input\n :ref=\"'control'\"\n v-bind=\"attributes\"\n :class=\"controlStyles\"\n :type=\"'checkbox'\"\n :checked=\"checked\"\n :required=\"required\"\n :disabled=\"disabled\"\n @change=\"$emit('change', $event); onChange()\"\n @click=\"$emit('click', $event)\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n >\n </template>\n\n <template v-else>\n <div\n :class=\"loaderStyles\"\n :disabled=\"disabled\"\n >\n <OrLoader\n :variant=\"'circular'\"\n :color=\"'primary'\"\n :size=\"'m'\"\n />\n </div>\n </template>\n\n <template v-if=\"$slots.default || label\">\n <OrLabel\n :control-id=\"attributes.id\"\n :variant=\"labelVariant\"\n :selected=\"checked\"\n :required=\"required\"\n :disabled=\"disabled\"\n >\n <slot>{{ label }}</slot>\n\n <template v-slot:addon>\n <slot name=\"addon\" />\n </template>\n </OrLabel>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useControlAttributes, useIdAttribute, useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { exclude, include, isArray, isUndefined } from '@onereach/ui-components-common/utils';\nimport { LabelVariant, OrLabelV3 as OrLabel } from '@onereach/ui-components.or-label-v3';\nimport { OrLoaderV3 as OrLoader } from '@onereach/ui-components.or-loader-v3';\nimport { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue';\n\nimport { Switch, SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle } from './styles';\nimport { SwitchModelValue, SwitchValue } from './types';\n\nexport default defineComponent({\n name: 'OrSwitch',\n\n components: {\n OrLabel,\n OrLoader,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: undefined as unknown as PropType<SwitchModelValue>,\n default: undefined,\n },\n\n value: {\n type: undefined as unknown as PropType<SwitchValue>,\n default: undefined,\n },\n\n label: {\n type: String,\n default: undefined,\n },\n\n labelVariant: {\n type: String as PropType<`${LabelVariant}`>,\n default: () => LabelVariant.Toggle,\n },\n\n loading: {\n type: Boolean,\n default: false,\n },\n\n required: {\n type: Boolean,\n default: false,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:modelValue',\n\n 'change',\n 'click',\n 'focus',\n 'blur',\n ],\n\n expose: [\n 'root',\n\n 'focus',\n 'blur',\n ],\n\n setup(props, context) {\n const attributes = reactive({\n id: useIdAttribute(),\n ...useControlAttributes(),\n });\n\n // Refs & Styles\n const root = ref<HTMLElement>();\n\n const rootStyles = computed(() => [\n 'or-switch-v3',\n ...Switch,\n ]);\n\n const control = ref<HTMLElement>();\n\n const controlStyles = computed(() => [\n ...SwitchControl,\n ...SwitchControlHandle,\n ]);\n\n const loaderStyles = computed(() => [\n ...SwitchLoader,\n ...SwitchLoaderHandle,\n ]);\n\n // State\n const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n\n const checked = computed(() => {\n if (isArray(model.value)) {\n if (isUndefined(props.value)) {\n throw new Error('[OrSwitch]: `value` must be specified.');\n }\n\n return model.value.includes(props.value);\n }\n\n return Boolean(model.value);\n });\n\n // Handlers\n function onChange(): void {\n if (isArray(model.value)) {\n if (isUndefined(props.value)) {\n throw new Error('[OrSwitch]: `value` must be specified.');\n }\n\n if (!checked.value) {\n model.value = include(props.value, model.value);\n } else {\n model.value = exclude(props.value, model.value);\n }\n } else {\n model.value = !model.value;\n }\n }\n\n // Methods\n function focus(): void {\n control.value?.focus();\n }\n\n function blur(): void {\n control.value?.blur();\n }\n\n return {\n attributes,\n\n root,\n rootStyles,\n\n control,\n controlStyles,\n\n loaderStyles,\n\n checked,\n\n onChange,\n\n focus,\n blur,\n };\n },\n});\n</script>\n\n<style scoped>\ninput {\n line-height: 0;\n appearance: none;\n}\n</style>\n"],"names":["Switch","SwitchControl","SwitchControlHandle","SwitchLoader","SwitchLoaderHandle","_sfc_main","defineComponent","OrLabel","OrLoader","LabelVariant","props","context","attributes","reactive","useIdAttribute","useControlAttributes","root","ref","rootStyles","computed","control","controlStyles","loaderStyles","model","useProxyModelValue","toRef","checked","isArray","isUndefined","onChange","exclude","include","focus","_a","blur","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_component_OrLoader","_hoisted_2","_mergeProps","_cache","$event","_hoisted_1","_createBlock","_component_OrLabel","_renderSlot"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OrSwitch-vI9sIMUp.mjs","sources":["../../../components/or-switch-v3/src/styles.ts","../../../components/or-switch-v3/src/OrSwitch.vue"],"sourcesContent":["export const Switch: string[] = [\n // Layout\n 'layout-row',\n\n // Spacing\n 'gap-sm',\n];\n\nexport const SwitchControl: string[] = [\n // Layout\n 'layout-inline-row justify-start checked:justify-end',\n\n // Interactivity\n 'interactivity-click',\n\n // Shape\n 'rounded-full',\n\n // Box\n 'w-[43px] md:w-[37px]',\n 'h-[24px] md:h-[21px]',\n\n // Spacing\n 'px-[2px]',\n 'active:px-[1px]',\n\n // Spacing (checked)\n 'checked:px-[3px]',\n 'active:checked:px-[2px]',\n\n // Theme\n 'theme-preset-3-primary',\n 'dark:theme-preset-3-primary-dark',\n\n 'theme-background-default',\n 'dark:theme-background-default-dark',\n\n 'theme-border-outline border-1',\n 'dark:theme-border-outline-dark',\n\n // Theme (focus)\n 'focus-visible:theme-outline-primary focus-visible:outline-2',\n 'dark:focus-visible:theme-outline-primary-dark',\n\n // Theme (checked)\n 'checked:theme-preset-1-primary',\n 'dark:checked:theme-preset-1-primary-dark',\n];\n\nexport const SwitchControlHandle: string[] = [\n // Box\n 'after:w-[18px] after:md:w-[16px]',\n 'after:h-[18px] after:md:h-[16px]',\n\n // Shape\n 'after:rounded-full',\n\n // Theme\n 'after:active:w-[20px] after:active:md:w-[18px]',\n 'after:active:h-[20px] after:active:md:h-[18px]',\n\n 'after:bg-outline',\n 'dark:after:bg-outline-dark',\n\n 'after:hover:bg-on-surface-variant',\n 'after:hover:dark:bg-on-surface-variant-dark',\n\n 'after:focus-visible:bg-on-surface-variant',\n 'after:focus-visible:dark:bg-on-surface-variant-dark',\n\n 'after:active:bg-outline',\n 'after:active:dark:bg-outline-dark',\n\n 'after:disabled:bg-on-disabled',\n 'after:disabled:dark:bg-on-disabled-dark',\n\n 'after:checked:bg-on-primary',\n 'after:checked:dark:bg-on-primary-dark',\n\n 'after:checked:shadow',\n\n 'after:checked:hover:bg-primary-container',\n 'after:checked:hover:dark:bg-primary-container-dark',\n\n 'after:checked:focus-visible:bg-primary-container',\n 'after:checked:focus-visible:dark:bg-primary-container-dark',\n\n 'after:checked:active:bg-on-primary',\n 'after:checked:active:dark:bg-on-primary-dark',\n\n 'after:checked:disabled:bg-on-disabled',\n 'after:checked:disabled:dark:bg-on-disabled-dark',\n];\n\nexport const SwitchLoader: string[] = [\n // Layout\n 'layout-row justify-center',\n\n // Box\n 'w-[24px] md:w-[20px]',\n 'h-[24px] md:h-[20px]',\n\n // Shape\n 'rounded-full',\n\n // Theme\n 'theme-border-outline border-1',\n 'dark:theme-border-outline-dark',\n];\n\nexport const SwitchLoaderHandle: string[] = [\n // Layout\n 'after:absolute',\n\n // Box\n 'after:w-[18px] after:md:w-[14px]',\n 'after:h-[18px] after:md:h-[14px]',\n\n // Shape\n 'after:rounded-full',\n\n // Theme\n 'after:bg-outline',\n 'dark:after:bg-outline-dark',\n\n 'after:disabled:bg-on-disabled',\n 'dark:after:disabled:bg-on-disabled-dark',\n];\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <template v-if=\"!loading\">\n <input\n :ref=\"'control'\"\n v-bind=\"attributes\"\n :class=\"controlStyles\"\n :type=\"'checkbox'\"\n :checked=\"checked\"\n :required=\"required\"\n :disabled=\"disabled\"\n @change=\"$emit('change', $event); onChange()\"\n @click=\"$emit('click', $event)\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n >\n </template>\n\n <template v-else>\n <div\n :class=\"loaderStyles\"\n :disabled=\"disabled\"\n >\n <OrLoader\n :variant=\"'circular'\"\n :color=\"'primary'\"\n :size=\"'m'\"\n />\n </div>\n </template>\n\n <template v-if=\"$slots.default || label\">\n <OrLabel\n :control-id=\"attributes.id\"\n :variant=\"labelVariant\"\n :selected=\"checked\"\n :required=\"required\"\n :disabled=\"disabled\"\n >\n <slot>{{ label }}</slot>\n\n <template v-slot:addon>\n <slot name=\"addon\" />\n </template>\n </OrLabel>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useControlAttributes, useIdAttribute, useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { exclude, include, isArray, isUndefined } from '@onereach/ui-components-common/utils';\nimport { LabelVariant, OrLabelV3 as OrLabel } from '@onereach/ui-components.or-label-v3';\nimport { OrLoaderV3 as OrLoader } from '@onereach/ui-components.or-loader-v3';\nimport { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue';\n\nimport { Switch, SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle } from './styles';\nimport { SwitchModelValue, SwitchValue } from './types';\n\nexport default defineComponent({\n name: 'OrSwitch',\n\n components: {\n OrLabel,\n OrLoader,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: undefined as unknown as PropType<SwitchModelValue>,\n default: undefined,\n },\n\n value: {\n type: undefined as unknown as PropType<SwitchValue>,\n default: undefined,\n },\n\n label: {\n type: String,\n default: undefined,\n },\n\n labelVariant: {\n type: String as PropType<`${LabelVariant}`>,\n default: () => LabelVariant.Toggle,\n },\n\n loading: {\n type: Boolean,\n default: false,\n },\n\n required: {\n type: Boolean,\n default: false,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:modelValue',\n\n 'change',\n 'click',\n 'focus',\n 'blur',\n ],\n\n expose: [\n 'root',\n\n 'focus',\n 'blur',\n ],\n\n setup(props, context) {\n const attributes = reactive({\n id: useIdAttribute(),\n ...useControlAttributes(),\n });\n\n // Refs & Styles\n const root = ref<HTMLElement>();\n\n const rootStyles = computed(() => [\n 'or-switch-v3',\n ...Switch,\n ]);\n\n const control = ref<HTMLElement>();\n\n const controlStyles = computed(() => [\n ...SwitchControl,\n ...SwitchControlHandle,\n ]);\n\n const loaderStyles = computed(() => [\n ...SwitchLoader,\n ...SwitchLoaderHandle,\n ]);\n\n // State\n const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n\n const checked = computed(() => {\n if (isArray(model.value)) {\n if (isUndefined(props.value)) {\n throw new Error('[OrSwitch]: `value` must be specified.');\n }\n\n return model.value.includes(props.value);\n }\n\n return Boolean(model.value);\n });\n\n // Handlers\n function onChange(): void {\n if (isArray(model.value)) {\n if (isUndefined(props.value)) {\n throw new Error('[OrSwitch]: `value` must be specified.');\n }\n\n if (!checked.value) {\n model.value = include(props.value, model.value);\n } else {\n model.value = exclude(props.value, model.value);\n }\n } else {\n model.value = !model.value;\n }\n }\n\n // Methods\n function focus(): void {\n control.value?.focus();\n }\n\n function blur(): void {\n control.value?.blur();\n }\n\n return {\n attributes,\n\n root,\n rootStyles,\n\n control,\n controlStyles,\n\n loaderStyles,\n\n checked,\n\n onChange,\n\n focus,\n blur,\n };\n },\n});\n</script>\n\n<style scoped>\ninput {\n line-height: 0;\n appearance: none;\n}\n</style>\n"],"names":["Switch","SwitchControl","SwitchControlHandle","SwitchLoader","SwitchLoaderHandle","_sfc_main","defineComponent","OrLabel","OrLoader","LabelVariant","props","context","attributes","reactive","useIdAttribute","useControlAttributes","root","ref","rootStyles","computed","control","controlStyles","loaderStyles","model","useProxyModelValue","toRef","checked","isArray","isUndefined","onChange","exclude","include","focus","_a","blur","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_component_OrLoader","_hoisted_2","_mergeProps","_cache","$event","_hoisted_1","_createBlock","_component_OrLabel","_renderSlot"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useProxyModelValue as H } from "@onereach/ui-components-common/hooks";
|
|
2
2
|
import { O as P } from "./OrIcon-k8cyvh-D.mjs";
|
|
3
|
-
import { O as J } from "./OrMenuItem-
|
|
4
|
-
import { O as K } from "./OrMenu-
|
|
3
|
+
import { O as J } from "./OrMenuItem-CFz6OW23.mjs";
|
|
4
|
+
import { O as K } from "./OrMenu-DdcBdA4v.mjs";
|
|
5
5
|
import { O as Q } from "./OrTab-BdtxL_PY.mjs";
|
|
6
6
|
import { useResizeObserver as U } from "@vueuse/core";
|
|
7
7
|
import { defineComponent as Y, ref as k, computed as i, reactive as Z, toRef as _, watch as x, nextTick as N, onMounted as ee, resolveComponent as b, openBlock as n, createElementBlock as r, normalizeClass as S, createElementVNode as B, Fragment as d, renderList as C, createBlock as W, withModifiers as V, withCtx as g, renderSlot as z, createTextVNode as A, toDisplayString as G, createVNode as $, createCommentVNode as j, withDirectives as oe, vShow as te } from "vue";
|
|
@@ -248,4 +248,4 @@ export {
|
|
|
248
248
|
D as T,
|
|
249
249
|
c as a
|
|
250
250
|
};
|
|
251
|
-
//# sourceMappingURL=OrTabs-
|
|
251
|
+
//# sourceMappingURL=OrTabs-DUihTKOm.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrTabs-eXFvC3c6.mjs","sources":["../../../components/or-tabs-v3/src/props.ts","../../../components/or-tabs-v3/src/styles.ts","../../../components/or-tabs-v3/src/OrTabs.vue"],"sourcesContent":["export enum TabsVariant {\n Default = 'default',\n Fitted = 'fitted',\n}\n\nexport enum TabsSpacing {\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n","import { TabsVariant, TabsSpacing } from './props';\n\nexport const TabsContainer: string[] = [\n // Layout\n 'layout-column',\n 'grow',\n\n // Box\n 'h-full',\n];\n\nexport const TabsContainerSpacings: Record<TabsSpacing, string[]> = {\n [TabsSpacing.MD]: [\n // Spacing\n 'gap-md',\n ],\n [TabsSpacing.LG]: [\n // Spacing\n 'gap-lg',\n ],\n [TabsSpacing.XL]: [\n // Spacing\n 'gap-xl',\n ],\n};\n\nexport const Tabs: string[] = [\n // Layout\n 'grid grid-flow-col items-center shrink-0',\n\n // Theme\n 'theme-border-outline border-b-1',\n 'dark:theme-border-outline',\n];\n\nexport const TabsVariants: Record<TabsVariant, string[]> = {\n 'default': [\n // Layout\n 'auto-cols-max',\n\n // Spacing\n 'gap-lg',\n ],\n\n 'fitted': [\n // Layout\n 'auto-cols-auto',\n\n // Spacing (children)\n 'children:px-lg',\n ],\n};\n\nexport const TabsContent: string[] = [\n // Layout\n 'layout-column',\n 'grow',\n\n // Box\n 'h-full',\n\n // Overflow\n 'overflow-auto',\n];\n","<template>\n <div :class=\"containerStyles\">\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <OrTab\n v-for=\"tab in tabs.normal\"\n :key=\"tab.value\"\n :selected=\"tab.value === proxyModelValue\"\n :invalid=\"tab.invalid\"\n :disabled=\"tab.disabled\"\n @click.stop=\"selectTab(tab)\"\n >\n <slot\n name=\"tab\"\n :tab=\"tab\"\n :active-tab=\"activeTab\"\n >\n {{ tab.label }}\n </slot>\n </OrTab>\n\n <template v-if=\"tabs.hidden.length > 0\">\n <OrTab\n :ref=\"'overflowTab'\"\n @click.stop=\"overflowMenu && overflowMenu.toggle()\"\n >\n <OrIcon\n :icon=\"'more_horiz'\"\n :variant=\"'filled-bold'\"\n />\n </OrTab>\n\n <OrMenu\n :ref=\"'overflowMenu'\"\n :trigger=\"overflowTabRoot\"\n >\n <OrMenuItem\n v-for=\"tab in tabs.hidden\"\n :key=\"tab.value\"\n :disabled=\"tab.disabled\"\n @click.stop=\"selectTab(tab); overflowMenu && overflowMenu.close()\"\n >\n {{ tab.label }}\n </OrMenuItem>\n </OrMenu>\n </template>\n </div>\n\n <div :class=\"contentStyles\">\n <template v-for=\"tab in items\">\n <div\n v-if=\"isTabRendered(tab.value)\"\n v-show=\"String(proxyModelValue) === String(tab.value)\"\n :key=\"tab.value\"\n class=\"contents\"\n >\n <slot :name=\"String(tab.value)\" />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrMenuItemV3 as OrMenuItem } from '@onereach/ui-components.or-menu-item-v3';\nimport { OrMenuV3 as OrMenu } from '@onereach/ui-components.or-menu-v3';\nimport { OrTabV3 as OrTab } from '@onereach/ui-components.or-tab-v3';\nimport { useResizeObserver } from '@vueuse/core';\nimport { PropType, computed, defineComponent, nextTick, onMounted, reactive, ref, toRef, watch } from 'vue';\n\nimport { TabsVariant, TabsSpacing } from './props';\nimport * as Styles from './styles';\nimport { EditorTabsItem } from './types';\n\nexport default defineComponent({\n name: 'OrTabs',\n\n components: {\n OrIcon,\n OrMenu,\n OrMenuItem,\n OrTab,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: [String, Number],\n default: undefined,\n },\n\n items: {\n type: Array as PropType<EditorTabsItem[]>,\n required: true,\n },\n\n spacing: {\n type: String as PropType<`${TabsSpacing}`>,\n default: TabsSpacing.LG,\n },\n\n variant: {\n type: String as PropType<`${TabsVariant}`>,\n default: () => TabsVariant.Default,\n },\n\n keepAlive: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:modelValue',\n ],\n\n expose: [\n 'root',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n\n const overflowTab = ref<InstanceType<typeof OrTab>>();\n const overflowTabRoot = computed(() => overflowTab.value?.root);\n\n const overflowMenu = ref<InstanceType<typeof OrMenu>>();\n const overflowMenuRoot = computed(() => overflowMenu.value?.root);\n\n // Styles\n const containerStyles = computed(() => [\n ...Styles.TabsContainer,\n ...Styles.TabsContainerSpacings[props.spacing],\n ]);\n\n const rootStyles = computed(() => [\n 'or-tabs-v3',\n ...Styles.Tabs,\n ...Styles.TabsVariants[props.variant],\n ]);\n\n const contentStyles = computed(() => [\n ...Styles.TabsContent,\n ]);\n\n // State\n const tabs = reactive({\n normal: [] as EditorTabsItem[],\n hidden: [] as EditorTabsItem[],\n });\n\n const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n\n const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);\n\n // Methods\n function selectTab(tab: EditorTabsItem): void {\n if (!tab.disabled) {\n proxyModelValue.value = tab.value;\n }\n }\n\n function rearrangeTabs(items: EditorTabsItem[], activeTab: EditorTabsItem, rootElement: Element): typeof tabs {\n const { children } = rootElement;\n\n const nextNormalTabs: EditorTabsItem[] = [...items];\n const nextHiddenTabs: EditorTabsItem[] = [];\n\n let currentWidth = rootElement.scrollWidth;\n\n [...children].reverse().forEach((element) => {\n if (currentWidth > rootElement.clientWidth) {\n nextHiddenTabs.unshift(nextNormalTabs.pop()!);\n currentWidth -= element.clientWidth + (props.variant === TabsVariant.Default ? 16 : 0);\n }\n });\n\n if (nextHiddenTabs.includes(activeTab)) {\n nextHiddenTabs.unshift(nextNormalTabs.pop()!);\n nextNormalTabs.push(...nextHiddenTabs.splice(nextHiddenTabs.indexOf(activeTab), 1));\n }\n\n return {\n normal: nextNormalTabs,\n hidden: nextHiddenTabs,\n };\n }\n\n function isTabRendered(value: string|number): boolean {\n return props.keepAlive || proxyModelValue.value === value;\n }\n\n // Effects\n watch([\n () => props.items,\n activeTab,\n root,\n ], ([\n items,\n activeTab,\n rootElement,\n ]) => {\n tabs.normal = items;\n\n nextTick(() => {\n Object.assign(tabs, rearrangeTabs(items, activeTab, rootElement!));\n });\n });\n\n // #region Resize\n useResizeObserver(root, () => {\n tabs.normal = props.items;\n\n nextTick(() => {\n Object.assign(tabs, rearrangeTabs(props.items, activeTab.value, root.value!));\n });\n });\n // #endregion\n\n onMounted(() => {\n if (!proxyModelValue.value) {\n proxyModelValue.value = props.items[0]?.value;\n }\n });\n\n return {\n root,\n overflowTab,\n overflowTabRoot,\n overflowMenu,\n overflowMenuRoot,\n containerStyles,\n rootStyles,\n contentStyles,\n tabs,\n proxyModelValue,\n activeTab,\n selectTab,\n isTabRendered,\n };\n },\n});\n</script>\n"],"names":["TabsVariant","TabsSpacing","TabsContainer","TabsContainerSpacings","Tabs","TabsVariants","TabsContent","_sfc_main","defineComponent","OrIcon","OrMenu","OrMenuItem","OrTab","props","context","root","ref","overflowTab","overflowTabRoot","computed","_a","overflowMenu","overflowMenuRoot","containerStyles","Styles.TabsContainer","Styles.TabsContainerSpacings","rootStyles","Styles.Tabs","Styles.TabsVariants","contentStyles","Styles.TabsContent","tabs","reactive","proxyModelValue","useProxyModelValue","toRef","activeTab","value","selectTab","tab","rearrangeTabs","items","rootElement","children","nextNormalTabs","nextHiddenTabs","currentWidth","element","isTabRendered","watch","nextTick","useResizeObserver","onMounted","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_component_OrTab","_withModifiers","$event","_withCtx","_renderSlot","_createVNode","_cache","_component_OrIcon","_component_OrMenu","_component_OrMenuItem","_createCommentVNode","_createElementVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OrTabs-DUihTKOm.mjs","sources":["../../../components/or-tabs-v3/src/props.ts","../../../components/or-tabs-v3/src/styles.ts","../../../components/or-tabs-v3/src/OrTabs.vue"],"sourcesContent":["export enum TabsVariant {\n Default = 'default',\n Fitted = 'fitted',\n}\n\nexport enum TabsSpacing {\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n","import { TabsVariant, TabsSpacing } from './props';\n\nexport const TabsContainer: string[] = [\n // Layout\n 'layout-column',\n 'grow',\n\n // Box\n 'h-full',\n];\n\nexport const TabsContainerSpacings: Record<TabsSpacing, string[]> = {\n [TabsSpacing.MD]: [\n // Spacing\n 'gap-md',\n ],\n [TabsSpacing.LG]: [\n // Spacing\n 'gap-lg',\n ],\n [TabsSpacing.XL]: [\n // Spacing\n 'gap-xl',\n ],\n};\n\nexport const Tabs: string[] = [\n // Layout\n 'grid grid-flow-col items-center shrink-0',\n\n // Theme\n 'theme-border-outline border-b-1',\n 'dark:theme-border-outline',\n];\n\nexport const TabsVariants: Record<TabsVariant, string[]> = {\n 'default': [\n // Layout\n 'auto-cols-max',\n\n // Spacing\n 'gap-lg',\n ],\n\n 'fitted': [\n // Layout\n 'auto-cols-auto',\n\n // Spacing (children)\n 'children:px-lg',\n ],\n};\n\nexport const TabsContent: string[] = [\n // Layout\n 'layout-column',\n 'grow',\n\n // Box\n 'h-full',\n\n // Overflow\n 'overflow-auto',\n];\n","<template>\n <div :class=\"containerStyles\">\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n >\n <OrTab\n v-for=\"tab in tabs.normal\"\n :key=\"tab.value\"\n :selected=\"tab.value === proxyModelValue\"\n :invalid=\"tab.invalid\"\n :disabled=\"tab.disabled\"\n @click.stop=\"selectTab(tab)\"\n >\n <slot\n name=\"tab\"\n :tab=\"tab\"\n :active-tab=\"activeTab\"\n >\n {{ tab.label }}\n </slot>\n </OrTab>\n\n <template v-if=\"tabs.hidden.length > 0\">\n <OrTab\n :ref=\"'overflowTab'\"\n @click.stop=\"overflowMenu && overflowMenu.toggle()\"\n >\n <OrIcon\n :icon=\"'more_horiz'\"\n :variant=\"'filled-bold'\"\n />\n </OrTab>\n\n <OrMenu\n :ref=\"'overflowMenu'\"\n :trigger=\"overflowTabRoot\"\n >\n <OrMenuItem\n v-for=\"tab in tabs.hidden\"\n :key=\"tab.value\"\n :disabled=\"tab.disabled\"\n @click.stop=\"selectTab(tab); overflowMenu && overflowMenu.close()\"\n >\n {{ tab.label }}\n </OrMenuItem>\n </OrMenu>\n </template>\n </div>\n\n <div :class=\"contentStyles\">\n <template v-for=\"tab in items\">\n <div\n v-if=\"isTabRendered(tab.value)\"\n v-show=\"String(proxyModelValue) === String(tab.value)\"\n :key=\"tab.value\"\n class=\"contents\"\n >\n <slot :name=\"String(tab.value)\" />\n </div>\n </template>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { useProxyModelValue } from '@onereach/ui-components-common/hooks';\nimport { OrIconV3 as OrIcon } from '@onereach/ui-components.or-icon-v3';\nimport { OrMenuItemV3 as OrMenuItem } from '@onereach/ui-components.or-menu-item-v3';\nimport { OrMenuV3 as OrMenu } from '@onereach/ui-components.or-menu-v3';\nimport { OrTabV3 as OrTab } from '@onereach/ui-components.or-tab-v3';\nimport { useResizeObserver } from '@vueuse/core';\nimport { PropType, computed, defineComponent, nextTick, onMounted, reactive, ref, toRef, watch } from 'vue';\n\nimport { TabsVariant, TabsSpacing } from './props';\nimport * as Styles from './styles';\nimport { EditorTabsItem } from './types';\n\nexport default defineComponent({\n name: 'OrTabs',\n\n components: {\n OrIcon,\n OrMenu,\n OrMenuItem,\n OrTab,\n },\n\n model: {\n prop: 'modelValue',\n event: 'update:modelValue',\n },\n\n props: {\n modelValue: {\n type: [String, Number],\n default: undefined,\n },\n\n items: {\n type: Array as PropType<EditorTabsItem[]>,\n required: true,\n },\n\n spacing: {\n type: String as PropType<`${TabsSpacing}`>,\n default: TabsSpacing.LG,\n },\n\n variant: {\n type: String as PropType<`${TabsVariant}`>,\n default: () => TabsVariant.Default,\n },\n\n keepAlive: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'update:modelValue',\n ],\n\n expose: [\n 'root',\n ],\n\n setup(props, context) {\n // Refs\n const root = ref<HTMLElement>();\n\n const overflowTab = ref<InstanceType<typeof OrTab>>();\n const overflowTabRoot = computed(() => overflowTab.value?.root);\n\n const overflowMenu = ref<InstanceType<typeof OrMenu>>();\n const overflowMenuRoot = computed(() => overflowMenu.value?.root);\n\n // Styles\n const containerStyles = computed(() => [\n ...Styles.TabsContainer,\n ...Styles.TabsContainerSpacings[props.spacing],\n ]);\n\n const rootStyles = computed(() => [\n 'or-tabs-v3',\n ...Styles.Tabs,\n ...Styles.TabsVariants[props.variant],\n ]);\n\n const contentStyles = computed(() => [\n ...Styles.TabsContent,\n ]);\n\n // State\n const tabs = reactive({\n normal: [] as EditorTabsItem[],\n hidden: [] as EditorTabsItem[],\n });\n\n const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);\n\n const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);\n\n // Methods\n function selectTab(tab: EditorTabsItem): void {\n if (!tab.disabled) {\n proxyModelValue.value = tab.value;\n }\n }\n\n function rearrangeTabs(items: EditorTabsItem[], activeTab: EditorTabsItem, rootElement: Element): typeof tabs {\n const { children } = rootElement;\n\n const nextNormalTabs: EditorTabsItem[] = [...items];\n const nextHiddenTabs: EditorTabsItem[] = [];\n\n let currentWidth = rootElement.scrollWidth;\n\n [...children].reverse().forEach((element) => {\n if (currentWidth > rootElement.clientWidth) {\n nextHiddenTabs.unshift(nextNormalTabs.pop()!);\n currentWidth -= element.clientWidth + (props.variant === TabsVariant.Default ? 16 : 0);\n }\n });\n\n if (nextHiddenTabs.includes(activeTab)) {\n nextHiddenTabs.unshift(nextNormalTabs.pop()!);\n nextNormalTabs.push(...nextHiddenTabs.splice(nextHiddenTabs.indexOf(activeTab), 1));\n }\n\n return {\n normal: nextNormalTabs,\n hidden: nextHiddenTabs,\n };\n }\n\n function isTabRendered(value: string|number): boolean {\n return props.keepAlive || proxyModelValue.value === value;\n }\n\n // Effects\n watch([\n () => props.items,\n activeTab,\n root,\n ], ([\n items,\n activeTab,\n rootElement,\n ]) => {\n tabs.normal = items;\n\n nextTick(() => {\n Object.assign(tabs, rearrangeTabs(items, activeTab, rootElement!));\n });\n });\n\n // #region Resize\n useResizeObserver(root, () => {\n tabs.normal = props.items;\n\n nextTick(() => {\n Object.assign(tabs, rearrangeTabs(props.items, activeTab.value, root.value!));\n });\n });\n // #endregion\n\n onMounted(() => {\n if (!proxyModelValue.value) {\n proxyModelValue.value = props.items[0]?.value;\n }\n });\n\n return {\n root,\n overflowTab,\n overflowTabRoot,\n overflowMenu,\n overflowMenuRoot,\n containerStyles,\n rootStyles,\n contentStyles,\n tabs,\n proxyModelValue,\n activeTab,\n selectTab,\n isTabRendered,\n };\n },\n});\n</script>\n"],"names":["TabsVariant","TabsSpacing","TabsContainer","TabsContainerSpacings","Tabs","TabsVariants","TabsContent","_sfc_main","defineComponent","OrIcon","OrMenu","OrMenuItem","OrTab","props","context","root","ref","overflowTab","overflowTabRoot","computed","_a","overflowMenu","overflowMenuRoot","containerStyles","Styles.TabsContainer","Styles.TabsContainerSpacings","rootStyles","Styles.Tabs","Styles.TabsVariants","contentStyles","Styles.TabsContent","tabs","reactive","proxyModelValue","useProxyModelValue","toRef","activeTab","value","selectTab","tab","rearrangeTabs","items","rootElement","children","nextNormalTabs","nextHiddenTabs","currentWidth","element","isTabRendered","watch","nextTick","useResizeObserver","onMounted","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_component_OrTab","_withModifiers","$event","_withCtx","_renderSlot","_createVNode","_cache","_component_OrIcon","_component_OrMenu","_component_OrMenuItem","_createCommentVNode","_createElementVNode"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { O as f } from "./OrIconButton-
|
|
1
|
+
import { O as f } from "./OrIconButton-BuRmTHpT.mjs";
|
|
2
2
|
import { defineComponent as p, ref as g, computed as i, watchPostEffect as v, unref as y, resolveComponent as b, openBlock as d, createElementBlock as u, normalizeClass as m, createElementVNode as k, renderSlot as $, createVNode as B, withModifiers as O, createCommentVNode as h } from "vue";
|
|
3
3
|
import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
4
4
|
var n = /* @__PURE__ */ ((e) => (e.Tag = "tag", e.Button = "button", e.Reset = "reset", e))(n || {}), s = /* @__PURE__ */ ((e) => (e.Default = "default", e.Danger = "danger", e))(s || {});
|
|
@@ -120,4 +120,4 @@ export {
|
|
|
120
120
|
n as T,
|
|
121
121
|
s as a
|
|
122
122
|
};
|
|
123
|
-
//# sourceMappingURL=OrTag-
|
|
123
|
+
//# sourceMappingURL=OrTag-D-GAZ0Hm.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrTag-
|
|
1
|
+
{"version":3,"file":"OrTag-D-GAZ0Hm.mjs","sources":["../../../components/or-tag-v3/src/props.ts","../../../components/or-tag-v3/src/styles.ts","../../../components/or-tag-v3/src/OrTag.vue"],"sourcesContent":["export enum TagVariant {\n Tag = 'tag',\n Button = 'button',\n Reset = 'reset',\n}\n\nexport enum TagColor {\n Default = 'default',\n Danger = 'danger',\n}\n","import { TagColor, TagVariant } from './props';\n\nexport const Tag: string[] = [\n // Layout\n 'layout-inline-row',\n\n // Spacing\n 'px-sm+ md:px-sm',\n 'py-sm md:py-xs',\n\n 'gap-sm+ md:gap-sm',\n\n // Shape\n 'rounded-full',\n\n // Typography\n 'typography-caption-regular whitespace-nowrap',\n];\n\nexport const TagVariants: Record<TagVariant, string[]> = {\n [TagVariant.Tag]: [\n // Interactivity\n 'interactivity-select',\n ],\n\n [TagVariant.Button]: [\n // Interactivity\n 'interactivity-click',\n ],\n\n [TagVariant.Reset]: [\n // Interactivity\n 'interactivity-default',\n ],\n};\n\nexport const TagColors: Record<TagColor, string[]> = {\n [TagColor.Default]: [\n // Theme\n 'theme-preset-2-primary',\n 'dark:theme-preset-2-primary-dark',\n\n 'theme-foreground-default',\n 'dark:theme-foreground-default-dark',\n ],\n\n [TagColor.Danger]: [\n // Theme\n 'theme-preset-2-error',\n 'dark:theme-preset-2-error-dark',\n ],\n};\n","<template>\n <div\n :ref=\"'root'\"\n :class=\"rootStyles\"\n :tabindex=\"!disabled && variant === 'button' ? 0 : null\"\n :disabled=\"disabled\"\n @click=\"$emit('click', $event)\"\n @focus=\"$emit('focus', $event)\"\n @blur=\"$emit('blur', $event)\"\n >\n <div class=\"truncate\">\n <slot />\n </div>\n\n <template v-if=\"variant === 'reset'\">\n <div :class=\"['layout-inline-row', '-m-[4px] md:-m-[2px]']\">\n <OrIconButton\n :icon=\"'close'\"\n :color=\"custom ? 'inherit' : color\"\n :disabled=\"disabled\"\n @click.stop=\"$emit('reset')\"\n />\n </div>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { OrIconButtonV3 as OrIconButton } from '@onereach/ui-components.or-icon-button-v3';\nimport { computed, defineComponent, PropType, ref, unref, watchPostEffect } from 'vue';\n\nimport { TagColor, TagVariant } from './props';\nimport { Tag, TagColors, TagVariants } from './styles';\n\nexport default defineComponent({\n name: 'OrTag',\n\n components: {\n OrIconButton,\n },\n\n props: {\n variant: {\n type: String as PropType<`${TagVariant}`>,\n default: () => TagVariant.Tag,\n },\n\n color: {\n type: String as PropType<`${TagColor}` | string>,\n default: () => TagColor.Default,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n 'click',\n 'focus',\n 'blur',\n\n 'reset',\n ],\n\n expose: [\n 'root',\n ],\n\n setup(props) {\n // Refs\n const root = ref<HTMLElement>();\n\n // Styles\n const rootStyles = computed(() => [\n 'or-tag-v3',\n ...Tag,\n ...TagVariants[props.variant],\n ...!custom.value ? TagColors[props.color as TagColor] : [],\n ]);\n\n // State\n const custom = computed(() => {\n return !(['default', 'danger'] as TagColor[]).includes(props.color as TagColor);\n });\n\n // Effects\n watchPostEffect(() => {\n const rootElement = unref(root);\n\n if (rootElement) {\n Object.assign(rootElement.style, {\n backgroundColor: custom.value ? `${props.color}1f` : '',\n color: custom.value ? props.color : '',\n });\n }\n });\n\n return {\n root,\n rootStyles,\n custom,\n };\n },\n});\n</script>\n"],"names":["TagVariant","TagColor","Tag","TagVariants","TagColors","_sfc_main","defineComponent","OrIconButton","props","root","ref","rootStyles","computed","custom","watchPostEffect","rootElement","unref","_hoisted_3","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_cache","$event","_renderSlot","_createVNode","_component_OrIconButton"],"mappings":"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"}
|
|
@@ -3,14 +3,14 @@ import { useResponsive as le, useIdAttribute as re, useControlAttributes as ne,
|
|
|
3
3
|
import { toArray as ie, include as ue, exclude as pe } from "@onereach/ui-components-common/utils";
|
|
4
4
|
import { O as fe } from "./OrError-B5ihH6-3.mjs";
|
|
5
5
|
import { O as ve } from "./OrHint-NvbZyURY.mjs";
|
|
6
|
-
import { O as me } from "./OrIconButton-
|
|
6
|
+
import { O as me } from "./OrIconButton-BuRmTHpT.mjs";
|
|
7
7
|
import { O as ye } from "./OrInputBox-6ciokFdU.mjs";
|
|
8
8
|
import { a as ge } from "./OrInputBox.vue_vue_type_script_lang-q2L7rmth.mjs";
|
|
9
9
|
import { O as be } from "./OrLabel-K7_HgvcK.mjs";
|
|
10
10
|
import { O as ce } from "./OrLoader-2SaTMxmZ.mjs";
|
|
11
|
-
import { a as K, T as U } from "./OrTag-
|
|
11
|
+
import { a as K, T as U } from "./OrTag-D-GAZ0Hm.mjs";
|
|
12
12
|
import { defineComponent as he, ref as f, toRefs as Oe, computed as s, reactive as Be, watch as we, nextTick as A, resolveComponent as p, openBlock as B, createElementBlock as Ve, normalizeClass as E, createBlock as P, withCtx as l, renderSlot as v, createTextVNode as m, toDisplayString as i, createCommentVNode as D, createVNode as w, createSlots as V, createElementVNode as j, withDirectives as q, mergeProps as Ie, withKeys as ke, vModelDynamic as Se, vShow as G } from "vue";
|
|
13
|
-
import { O as $e, T as J } from "./OrTags-
|
|
13
|
+
import { O as $e, T as J } from "./OrTags-CMPGvbL2.mjs";
|
|
14
14
|
import { onClickOutside as Te } from "@vueuse/core";
|
|
15
15
|
import { _ as Le } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
|
|
16
16
|
const Me = [
|
|
@@ -388,4 +388,4 @@ const Ze = /* @__PURE__ */ Le(Ee, [["render", qe], ["__scopeId", "data-v-2baf79b
|
|
|
388
388
|
export {
|
|
389
389
|
Ze as O
|
|
390
390
|
};
|
|
391
|
-
//# sourceMappingURL=OrTagInput-
|
|
391
|
+
//# sourceMappingURL=OrTagInput-B2cjYeWN.mjs.map
|