morya-ui 0.4.0 → 0.4.2
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/CHANGELOG.md +70 -2
- package/dist/Button-BaYLh91a.js +326 -0
- package/dist/{Checkbox-BKt8hdhV.js → Checkbox-LxCFF19I.js} +1 -1
- package/dist/{DatePicker-CSoMFEvh.js → DatePicker-DGPNukEW.js} +3 -3
- package/dist/{Empty-iNcc0G-q.js → Empty-2_f_FgyK.js} +1 -1
- package/dist/{FlyoutSubmenu-C1RfFRzH.js → FlyoutSubmenu-Da6AcoM4.js} +1 -1
- package/dist/{Input-DQHYqvNk.js → Input-NspPDc2R.js} +2 -2
- package/dist/{Loading-BPpR-jGa.js → Loading-BK4dQPCS.js} +10 -10
- package/dist/{Pagination-BkPBWEQq.js → Pagination-tdrlaZ3u.js} +2 -2
- package/dist/{Popover-B_2c9NWs.js → Popover-BumMfUpV.js} +2 -2
- package/dist/{ProgressSpinner-B_OJG_0l.js → ProgressSpinner-BQ1tLioO.js} +1 -1
- package/dist/{Radio-Bxd806ys.js → Radio-BCn2OVCF.js} +1 -1
- package/dist/{Segmented-BRMSmXCl.js → Segmented-ppmDmku5.js} +1 -1
- package/dist/{Select-DzfyO0FE.js → Select-CN1tM76U.js} +8 -6
- package/dist/{Textarea-BBvpgIQL.js → Textarea-Ch1KCXEv.js} +2 -2
- package/dist/{Tooltip-BJp-ZMqQ.js → Tooltip-DKsXxU_B.js} +2 -2
- package/dist/accordion/style.css +39 -20
- package/dist/affix/style.css +39 -20
- package/dist/alert/index.js +2 -2
- package/dist/alert/style.css +39 -20
- package/dist/anchor/style.css +39 -20
- package/dist/auto-complete/index.js +3 -3
- package/dist/auto-complete/style.css +42 -21
- package/dist/avatar/style.css +39 -20
- package/dist/badge/index.js +29 -28
- package/dist/badge/style.css +39 -20
- package/dist/block-ui/index.js +1 -1
- package/dist/block-ui/style.css +39 -20
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/style.css +39 -20
- package/dist/button/index.js +9 -9
- package/dist/button/style.css +503 -795
- package/dist/button/style.js +1 -0
- package/dist/calendar/index.js +3 -3
- package/dist/calendar/style.css +49 -24
- package/dist/card/style.css +40 -21
- package/dist/carousel/index.js +311 -119
- package/dist/carousel/style.css +987 -117
- package/dist/carousel/style.js +1 -1
- package/dist/cascade-select/index.js +4 -4
- package/dist/cascade-select/style.css +54 -22
- package/dist/checkbox/index.js +1 -1
- package/dist/checkbox/style.css +41 -21
- package/dist/chip/index.js +39 -36
- package/dist/chip/style.css +39 -20
- package/dist/command-menu/index.js +3 -3
- package/dist/command-menu/style.css +39 -20
- package/dist/component-registry.d.ts.map +1 -1
- package/dist/components/Badge/Badge.vue.d.ts.map +1 -1
- package/dist/components/Badge/types.d.ts +3 -0
- package/dist/components/Badge/types.d.ts.map +1 -1
- package/dist/components/Button/Button.vue.d.ts +15 -22
- package/dist/components/Button/Button.vue.d.ts.map +1 -1
- package/dist/components/Button/ButtonGroup.vue.d.ts +1 -1
- package/dist/components/Button/ButtonGroup.vue.d.ts.map +1 -1
- package/dist/components/Button/buttonHelpers.d.ts +25 -0
- package/dist/components/Button/buttonHelpers.d.ts.map +1 -0
- package/dist/components/Button/index.d.ts +2 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/styles.css +463 -781
- package/dist/components/Button/types.d.ts +67 -61
- package/dist/components/Button/types.d.ts.map +1 -1
- package/dist/components/Card/styles.css +1 -1
- package/dist/components/Carousel/Carousel.vue.d.ts +41 -11
- package/dist/components/Carousel/Carousel.vue.d.ts.map +1 -1
- package/dist/components/Carousel/CarouselItem.vue.d.ts +16 -0
- package/dist/components/Carousel/CarouselItem.vue.d.ts.map +1 -0
- package/dist/components/Carousel/context.d.ts +10 -0
- package/dist/components/Carousel/context.d.ts.map +1 -0
- package/dist/components/Carousel/index.d.ts +2 -1
- package/dist/components/Carousel/index.d.ts.map +1 -1
- package/dist/components/Carousel/styles.css +250 -49
- package/dist/components/Carousel/types.d.ts +64 -9
- package/dist/components/Carousel/types.d.ts.map +1 -1
- package/dist/components/CascadeSelect/styles.css +12 -1
- package/dist/components/Checkbox/styles.css +2 -1
- package/dist/components/Chip/Chip.vue.d.ts.map +1 -1
- package/dist/components/Chip/types.d.ts +3 -0
- package/dist/components/Chip/types.d.ts.map +1 -1
- package/dist/components/ConfirmDialog/ConfirmDialog.vue.d.ts +2 -2
- package/dist/components/ConfirmDialog/ConfirmDialog.vue.d.ts.map +1 -1
- package/dist/components/ConfirmDialog/types.d.ts +2 -2
- package/dist/components/ConfirmDialog/types.d.ts.map +1 -1
- package/dist/components/ConfirmDialog/useConfirm.d.ts +1 -1
- package/dist/components/ConfirmDialog/useConfirm.d.ts.map +1 -1
- package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts.map +1 -1
- package/dist/components/ConfirmPopup/types.d.ts +3 -3
- package/dist/components/ConfirmPopup/types.d.ts.map +1 -1
- package/dist/components/DatePicker/styles.css +2 -1
- package/dist/components/Dialog/Dialog.vue.d.ts.map +1 -1
- package/dist/components/Dialog/types.d.ts +3 -3
- package/dist/components/Dialog/types.d.ts.map +1 -1
- package/dist/components/Dialog/useModal.d.ts +2 -2
- package/dist/components/Dialog/useModal.d.ts.map +1 -1
- package/dist/components/Divider/Divider.vue.d.ts +1 -1
- package/dist/components/Divider/Divider.vue.d.ts.map +1 -1
- package/dist/components/Divider/types.d.ts +3 -0
- package/dist/components/Divider/types.d.ts.map +1 -1
- package/dist/components/IconField/styles.css +1 -1
- package/dist/components/Input/styles.css +20 -8
- package/dist/components/InputColor/styles.css +10 -0
- package/dist/components/InputNumber/styles.css +2 -1
- package/dist/components/InputOtp/styles.css +8 -0
- package/dist/components/InputPassword/styles.css +1 -1
- package/dist/components/InputTags/styles.css +9 -0
- package/dist/components/Layout/styles.css +1 -1
- package/dist/components/Listbox/styles.css +3 -0
- package/dist/components/Mentions/Mentions.vue.d.ts +1 -1
- package/dist/components/Mentions/styles.css +13 -4
- package/dist/components/Message/styles.css +4 -2
- package/dist/components/Page/PageFilters.vue.d.ts.map +1 -1
- package/dist/components/Pagination/styles.css +3 -2
- package/dist/components/ProgressBar/ProgressBar.vue.d.ts.map +1 -1
- package/dist/components/ProgressBar/types.d.ts +3 -0
- package/dist/components/ProgressBar/types.d.ts.map +1 -1
- package/dist/components/QRCode/QRCode.vue.d.ts.map +1 -1
- package/dist/components/Radio/styles.css +2 -1
- package/dist/components/Result/styles.css +1 -1
- package/dist/components/Select/Select.vue.d.ts +1 -1
- package/dist/components/Select/Select.vue.d.ts.map +1 -1
- package/dist/components/Select/styles.css +8 -3
- package/dist/components/SelectButton/styles.css +2 -0
- package/dist/components/SplitButton/SplitButton.vue.d.ts +0 -1
- package/dist/components/SplitButton/SplitButton.vue.d.ts.map +1 -1
- package/dist/components/SplitButton/types.d.ts +3 -3
- package/dist/components/SplitButton/types.d.ts.map +1 -1
- package/dist/components/Table/Table.vue.d.ts +4 -4
- package/dist/components/Table/Table.vue.d.ts.map +1 -1
- package/dist/components/Table/render/TableThead.vue.d.ts +2 -0
- package/dist/components/Table/render/TableThead.vue.d.ts.map +1 -1
- package/dist/components/Table/state/internal.d.ts +1 -0
- package/dist/components/Table/state/internal.d.ts.map +1 -1
- package/dist/components/Table/styles.css +9 -0
- package/dist/components/Tag/Tag.vue.d.ts +1 -1
- package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
- package/dist/components/Tag/styles.css +10 -8
- package/dist/components/Tag/types.d.ts +3 -0
- package/dist/components/Tag/types.d.ts.map +1 -1
- package/dist/components/Terminal/styles.css +1 -0
- package/dist/components/Textarea/styles.css +18 -7
- package/dist/components/ToggleButton/styles.css +2 -1
- package/dist/components/Tour/Tour.vue.d.ts.map +1 -1
- package/dist/components/Tree/Tree.vue.d.ts +1 -1
- package/dist/components/TreeSelect/styles.css +12 -1
- package/dist/{config-COgrsSV2.js → config-CB_TiIvg.js} +11 -4
- package/dist/config-provider/index.js +141 -120
- package/dist/config-provider/style.css +514 -801
- package/dist/confirm-dialog/index.js +45 -39
- package/dist/confirm-dialog/style.css +496 -795
- package/dist/confirm-popup/index.js +17 -14
- package/dist/confirm-popup/style.css +496 -795
- package/dist/context-menu/index.js +3 -3
- package/dist/context-menu/style.css +39 -20
- package/dist/data-view/index.js +3 -3
- package/dist/data-view/style.css +42 -22
- package/dist/date-picker/index.js +1 -1
- package/dist/date-picker/style.css +41 -21
- package/dist/descriptions/index.js +1 -1
- package/dist/descriptions/style.css +39 -20
- package/dist/dialog/index.js +68 -55
- package/dist/dialog/style.css +496 -795
- package/dist/divider/index.js +25 -22
- package/dist/divider/style.css +39 -20
- package/dist/dock/style.css +39 -20
- package/dist/drawer/index.js +3 -3
- package/dist/drawer/style.css +39 -20
- package/dist/dropdown/index.js +4 -4
- package/dist/dropdown/style.css +39 -20
- package/dist/empty/index.js +1 -1
- package/dist/empty/style.css +39 -20
- package/dist/fieldset/style.css +39 -20
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/style.css +39 -20
- package/dist/flex/index.js +8 -8
- package/dist/flex/style.css +39 -20
- package/dist/float-label/style.css +39 -20
- package/dist/fluid/style.css +39 -20
- package/dist/form/index.js +1 -1
- package/dist/form/style.css +39 -20
- package/dist/gallery/index.js +1 -1
- package/dist/gallery/style.css +39 -20
- package/dist/grid/index.js +5 -5
- package/dist/grid/style.css +39 -20
- package/dist/icon/style.css +39 -20
- package/dist/icon-field/style.css +60 -29
- package/dist/image/index.js +1 -1
- package/dist/image/style.css +39 -20
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6500 -6163
- package/dist/inplace/style.css +39 -20
- package/dist/input/index.js +1 -1
- package/dist/input/style.css +59 -28
- package/dist/input-color/index.js +2 -2
- package/dist/input-color/style.css +49 -20
- package/dist/input-group/style.css +39 -20
- package/dist/input-number/index.js +2 -2
- package/dist/input-number/style.css +41 -21
- package/dist/input-otp/index.js +2 -2
- package/dist/input-otp/style.css +47 -20
- package/dist/input-password/index.js +2 -2
- package/dist/input-password/style.css +40 -21
- package/dist/input-tags/index.js +2 -2
- package/dist/input-tags/style.css +48 -20
- package/dist/knob/style.css +39 -20
- package/dist/label/style.css +39 -20
- package/dist/layout/index.js +1 -1
- package/dist/layout/style.css +40 -21
- package/dist/list/index.js +4 -4
- package/dist/list/style.css +42 -22
- package/dist/listbox/index.js +2 -2
- package/dist/listbox/style.css +42 -20
- package/dist/loading/index.js +1 -1
- package/dist/loading/style.css +39 -20
- package/dist/locale-CR2PIaxt.js +21 -0
- package/dist/mega-menu/index.js +3 -3
- package/dist/mega-menu/style.css +39 -20
- package/dist/mentions/index.js +3 -3
- package/dist/mentions/style.css +52 -24
- package/dist/menu/index.js +4 -4
- package/dist/menu/style.css +39 -20
- package/dist/menubar/index.js +3 -3
- package/dist/menubar/style.css +39 -20
- package/dist/message/index.js +3 -3
- package/dist/message/style.css +43 -22
- package/dist/meter-group/style.css +39 -20
- package/dist/order-list/index.js +1 -1
- package/dist/order-list/style.css +39 -20
- package/dist/page/index.js +4 -7
- package/dist/page/style.css +497 -796
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/style.css +50 -25
- package/dist/panel/index.js +1 -1
- package/dist/panel/style.css +39 -20
- package/dist/pick-list/index.js +1 -1
- package/dist/pick-list/style.css +39 -20
- package/dist/popover/index.js +1 -1
- package/dist/popover/style.css +39 -20
- package/dist/progress-bar/index.js +38 -35
- package/dist/progress-bar/style.css +39 -20
- package/dist/progress-spinner/index.js +1 -1
- package/dist/progress-spinner/style.css +39 -20
- package/dist/qr-code/index.js +3 -3
- package/dist/qr-code/style.css +496 -795
- package/dist/radio/index.js +1 -1
- package/dist/radio/style.css +41 -21
- package/dist/rating/index.js +2 -2
- package/dist/rating/style.css +39 -20
- package/dist/resolver-map.d.ts.map +1 -1
- package/dist/resolver.js +1 -0
- package/dist/result/index.js +1 -1
- package/dist/result/style.css +40 -21
- package/dist/scroll-top/index.js +2 -2
- package/dist/scroll-top/style.css +39 -20
- package/dist/scrollbar/style.css +39 -20
- package/dist/segmented/index.js +1 -1
- package/dist/segmented/style.css +39 -20
- package/dist/select/index.js +1 -1
- package/dist/select/style.css +50 -24
- package/dist/select-button/index.js +1 -1
- package/dist/select-button/style.css +41 -20
- package/dist/shared/componentDefaults.d.ts +6 -0
- package/dist/shared/componentDefaults.d.ts.map +1 -1
- package/dist/shared/styles/select-overlay.css +3 -1
- package/dist/sidebar/index.js +1 -1
- package/dist/sidebar/style.css +39 -20
- package/dist/skeleton/style.css +39 -20
- package/dist/slider/index.js +2 -2
- package/dist/slider/style.css +39 -20
- package/dist/space/index.js +8 -8
- package/dist/space/style.css +39 -20
- package/dist/speed-dial/index.js +3 -3
- package/dist/speed-dial/style.css +39 -20
- package/dist/split-button/index.js +7 -10
- package/dist/split-button/style.css +502 -801
- package/dist/splitter/index.js +1 -1
- package/dist/splitter/style.css +39 -20
- package/dist/statistic/style.css +39 -20
- package/dist/status/index.js +1 -1
- package/dist/status/style.css +39 -20
- package/dist/stepper/style.css +39 -20
- package/dist/styles/base.css +19 -7
- package/dist/styles.css +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/switch/style.css +39 -20
- package/dist/table/index.js +1628 -1622
- package/dist/table/style.css +51 -22
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/style.css +39 -20
- package/dist/tag/index.js +57 -54
- package/dist/tag/style.css +49 -28
- package/dist/terminal/index.js +1 -1
- package/dist/terminal/style.css +40 -20
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/style.css +57 -27
- package/dist/theme/color.d.ts +5 -0
- package/dist/theme/color.d.ts.map +1 -1
- package/dist/theme/derive.d.ts.map +1 -1
- package/dist/theme/seed.d.ts +2 -2
- package/dist/theme/styles.css +20 -13
- package/dist/tiered-menu/index.js +3 -3
- package/dist/tiered-menu/style.css +39 -20
- package/dist/time-picker/index.js +1 -1
- package/dist/time-picker/style.css +41 -21
- package/dist/timeline/style.css +39 -20
- package/dist/toast/index.js +3 -3
- package/dist/toast/style.css +496 -795
- package/dist/toggle-button/index.js +1 -1
- package/dist/toggle-button/style.css +41 -21
- package/dist/toolbar/style.css +39 -20
- package/dist/tooltip/index.js +1 -1
- package/dist/tooltip/style.css +39 -20
- package/dist/tour/index.js +7 -8
- package/dist/tour/style.css +496 -795
- package/dist/tree/index.js +2 -2
- package/dist/tree/style.css +41 -21
- package/dist/tree-select/index.js +4 -4
- package/dist/tree-select/style.css +56 -23
- package/dist/typography/index.js +2 -2
- package/dist/typography/style.css +57 -27
- package/dist/{useMotionTransition-S2rlviyZ.js → useMotionTransition-D8JOR3ih.js} +1 -1
- package/dist/virtual-scroller/style.css +39 -20
- package/dist/watermark/style.css +39 -20
- package/package.json +1 -1
- package/dist/Button-TaJ0LKtP.js +0 -234
- package/dist/locale-Dnk0UIie.js +0 -21
|
@@ -1,88 +1,94 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, Component } from 'vue';
|
|
2
|
-
import {
|
|
1
|
+
import { ButtonHTMLAttributes, Component, CSSProperties } from 'vue';
|
|
2
|
+
import { PassThroughPart } from '../../shared/passThrough';
|
|
3
3
|
import { IconName } from '../Icon/types';
|
|
4
|
-
/**
|
|
5
|
-
export type
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
/** Visual variant
|
|
9
|
-
export type ButtonVariant = '
|
|
10
|
-
/** Corner shape.
|
|
4
|
+
/** Sugar type that maps to a `[color, variant]` pair. */
|
|
5
|
+
export type ButtonType = 'default' | 'primary' | 'dashed' | 'link' | 'text';
|
|
6
|
+
/** Color axis. `link` is an internal tone used by `type="link"`. */
|
|
7
|
+
export type ButtonColor = 'default' | 'primary' | 'danger' | 'success' | 'info' | 'warning' | 'help' | 'contrast' | 'link';
|
|
8
|
+
/** Visual variant axis. */
|
|
9
|
+
export type ButtonVariant = 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';
|
|
10
|
+
/** Corner shape. */
|
|
11
11
|
export type ButtonShape = 'default' | 'circle' | 'round' | 'square';
|
|
12
12
|
export type ButtonSize = 'small' | 'medium' | 'large';
|
|
13
|
-
export type
|
|
14
|
-
export type
|
|
13
|
+
export type ButtonIconPlacement = 'start' | 'end';
|
|
14
|
+
export type ButtonHtmlType = NonNullable<ButtonHTMLAttributes['type']>;
|
|
15
|
+
export type ButtonLoading = boolean | {
|
|
16
|
+
delay?: number;
|
|
17
|
+
icon?: IconName | Component;
|
|
18
|
+
};
|
|
19
|
+
export interface ButtonPassThrough {
|
|
20
|
+
root?: PassThroughPart;
|
|
21
|
+
icon?: PassThroughPart;
|
|
22
|
+
content?: PassThroughPart;
|
|
23
|
+
}
|
|
15
24
|
export interface ButtonProps {
|
|
16
|
-
/**
|
|
25
|
+
/** Sugar for a preset `[color, variant]` pair. Overridden when both `color` and `variant` are set. */
|
|
26
|
+
type?: ButtonType;
|
|
27
|
+
/** Color axis. */
|
|
28
|
+
color?: ButtonColor;
|
|
29
|
+
/** Variant axis. */
|
|
30
|
+
variant?: ButtonVariant;
|
|
31
|
+
/** Force danger color while keeping the resolved variant. */
|
|
32
|
+
danger?: boolean;
|
|
33
|
+
/** Transparent background; ignored for `text` / `link` variants. */
|
|
34
|
+
ghost?: boolean;
|
|
35
|
+
/** Corner shape. */
|
|
36
|
+
shape?: ButtonShape;
|
|
37
|
+
/** Control size. Also accepts legacy `sm` / `md` / `lg`. */
|
|
38
|
+
size?: ButtonSize | 'sm' | 'md' | 'lg';
|
|
39
|
+
/** Stretch to full container width. */
|
|
40
|
+
block?: boolean;
|
|
41
|
+
/** Loading state. Object form supports delay and a custom icon. */
|
|
42
|
+
loading?: ButtonLoading;
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
/** Native button `type` when rendered as `<button>`. */
|
|
45
|
+
htmlType?: ButtonHtmlType;
|
|
46
|
+
/** Render as an anchor when set. */
|
|
47
|
+
href?: string;
|
|
48
|
+
/** Anchor target; only applies with `href`. */
|
|
49
|
+
target?: string;
|
|
50
|
+
/** Button label. Ignored when the default slot has content. */
|
|
17
51
|
label?: string;
|
|
18
52
|
/** Leading/trailing icon from MIcon, or a Vue component. */
|
|
19
53
|
icon?: IconName | Component;
|
|
20
|
-
/** Icon
|
|
21
|
-
|
|
54
|
+
/** Icon placement relative to the label. */
|
|
55
|
+
iconPlacement?: ButtonIconPlacement;
|
|
22
56
|
/** Force square icon-only footprint. */
|
|
23
57
|
iconOnly?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
|
|
26
|
-
/** Custom fill/text color. Overrides `severity` tones when set. */
|
|
27
|
-
color?: string;
|
|
28
|
-
/** Elevated shadow. */
|
|
29
|
-
raised?: boolean;
|
|
30
|
-
/** Fully rounded corners. Prefer `shape="round"`; kept for compatibility. */
|
|
31
|
-
rounded?: boolean;
|
|
32
|
-
/** Corner shape; `rounded` prop implies `round`. */
|
|
33
|
-
shape?: ButtonShape;
|
|
34
|
-
/** Textual button without solid fill. */
|
|
35
|
-
text?: boolean;
|
|
36
|
-
/** Border-only button. */
|
|
37
|
-
outlined?: boolean;
|
|
38
|
-
/** Dashed border (`variant="dashed"` or `dashed`). */
|
|
39
|
-
dashed?: boolean;
|
|
40
|
-
/** Link-styled button. */
|
|
41
|
-
link?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Underline on hover for `link` buttons. Default `true`.
|
|
44
|
-
* Set `false` for a compact link look without underline.
|
|
45
|
-
*/
|
|
46
|
-
underline?: boolean;
|
|
47
|
-
/** Soft fill matching text hover. */
|
|
48
|
-
ghost?: boolean;
|
|
49
|
-
/** Extra-quiet text button. */
|
|
50
|
-
quaternary?: boolean;
|
|
51
|
-
/** Soft fill matching outlined hover. Can also mute `text` / `outlined` / `link`. */
|
|
52
|
-
plain?: boolean;
|
|
53
|
-
/** Shortcut for outlined / dashed / text / link / ghost / quaternary. */
|
|
54
|
-
variant?: ButtonVariant;
|
|
55
|
-
/** Size alternative to the default. Also accepts legacy `sm` / `md` / `lg`. */
|
|
56
|
-
size?: ButtonSize | 'sm' | 'md' | 'lg';
|
|
57
|
-
/** Full-width button (`fluid`). */
|
|
58
|
-
fluid?: boolean;
|
|
59
|
-
loading?: boolean;
|
|
60
|
-
disabled?: boolean;
|
|
61
|
-
/** Optional badge value rendered after the label. */
|
|
62
|
-
badge?: string;
|
|
63
|
-
badgeSeverity?: ButtonBadgeSeverity;
|
|
58
|
+
/** Insert a space between two Chinese characters. */
|
|
59
|
+
autoInsertSpace?: boolean;
|
|
64
60
|
autofocus?: boolean;
|
|
65
|
-
/** Native button `type` attribute. */
|
|
66
|
-
nativeType?: ButtonHTMLAttributes['type'];
|
|
67
61
|
/** Accessible name, recommended for icon-only buttons. */
|
|
68
62
|
ariaLabel?: string;
|
|
69
|
-
/** Click ripple ink.
|
|
63
|
+
/** Click ripple ink. Disabled when theme motion is `none`. */
|
|
70
64
|
ripple?: boolean;
|
|
71
|
-
/** Press scale on click.
|
|
65
|
+
/** Press scale on click. */
|
|
72
66
|
press?: boolean;
|
|
67
|
+
/** Semantic DOM pass-through. */
|
|
68
|
+
pt?: ButtonPassThrough;
|
|
73
69
|
}
|
|
74
70
|
export interface ButtonEmits {
|
|
75
71
|
(event: 'click', value: MouseEvent): void;
|
|
76
72
|
}
|
|
77
73
|
export interface ButtonInstance {
|
|
78
74
|
focus: () => void;
|
|
79
|
-
ref: HTMLButtonElement | null;
|
|
75
|
+
ref: HTMLButtonElement | HTMLAnchorElement | null;
|
|
80
76
|
}
|
|
81
77
|
export interface ButtonGroupProps {
|
|
82
|
-
pt?:
|
|
78
|
+
pt?: {
|
|
79
|
+
root?: PassThroughPart;
|
|
80
|
+
};
|
|
83
81
|
/** Stretch to full container width. */
|
|
84
|
-
|
|
82
|
+
block?: boolean;
|
|
85
83
|
/** Accessible name for the group. */
|
|
86
84
|
ariaLabel?: string;
|
|
87
85
|
}
|
|
86
|
+
export type ButtonColorVariantPair = [color: ButtonColor, variant: ButtonVariant];
|
|
87
|
+
export interface ButtonResolvedAppearance {
|
|
88
|
+
color: ButtonColor;
|
|
89
|
+
variant: ButtonVariant;
|
|
90
|
+
ghost: boolean;
|
|
91
|
+
}
|
|
92
|
+
/** Style bag used when merging content pass-through. */
|
|
93
|
+
export type ButtonContentStyle = CSSProperties;
|
|
88
94
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,23 +1,53 @@
|
|
|
1
|
-
import { CarouselProps } from './types';
|
|
1
|
+
import { CarouselProps, CarouselEffect, CarouselDirection, CarouselTrigger, CarouselDotType, CarouselDotPlacement } from './types';
|
|
2
2
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
3
|
+
declare function to(index: number): void;
|
|
4
|
+
declare function prev(): void;
|
|
5
|
+
declare function next(): void;
|
|
6
|
+
declare function getCurrentIndex(): number;
|
|
3
7
|
declare var __VLS_6: {
|
|
4
|
-
|
|
5
|
-
|
|
8
|
+
prev: () => void;
|
|
9
|
+
next: () => void;
|
|
10
|
+
total: number;
|
|
11
|
+
currentIndex: number;
|
|
12
|
+
}, __VLS_22: {
|
|
13
|
+
total: number;
|
|
14
|
+
currentIndex: number;
|
|
15
|
+
to: (index: number) => void;
|
|
6
16
|
};
|
|
7
17
|
type __VLS_Slots = {} & {
|
|
8
|
-
|
|
18
|
+
arrow?: (props: typeof __VLS_6) => any;
|
|
19
|
+
} & {
|
|
20
|
+
dots?: (props: typeof __VLS_22) => any;
|
|
9
21
|
};
|
|
10
|
-
declare const __VLS_base: DefineComponent<CarouselProps, {
|
|
11
|
-
|
|
22
|
+
declare const __VLS_base: DefineComponent<CarouselProps, {
|
|
23
|
+
prev: typeof prev;
|
|
24
|
+
next: typeof next;
|
|
25
|
+
to: typeof to;
|
|
26
|
+
getCurrentIndex: typeof getCurrentIndex;
|
|
27
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
28
|
+
"update:currentIndex": (currentIndex: number, lastIndex: number) => any;
|
|
12
29
|
}, string, PublicProps, Readonly<CarouselProps> & Readonly<{
|
|
13
|
-
"onUpdate:
|
|
30
|
+
"onUpdate:currentIndex"?: ((currentIndex: number, lastIndex: number) => any) | undefined;
|
|
14
31
|
}>, {
|
|
15
|
-
|
|
16
|
-
|
|
32
|
+
keyboard: boolean;
|
|
33
|
+
effect: CarouselEffect;
|
|
34
|
+
direction: CarouselDirection;
|
|
35
|
+
trigger: CarouselTrigger;
|
|
36
|
+
defaultIndex: number;
|
|
37
|
+
showArrow: boolean;
|
|
38
|
+
showDots: boolean;
|
|
39
|
+
dotType: CarouselDotType;
|
|
40
|
+
dotPlacement: CarouselDotPlacement;
|
|
41
|
+
slidesPerView: number | "auto";
|
|
42
|
+
spaceBetween: number;
|
|
43
|
+
centeredSlides: boolean;
|
|
17
44
|
autoplay: boolean;
|
|
18
45
|
interval: number;
|
|
19
|
-
|
|
20
|
-
|
|
46
|
+
loop: boolean;
|
|
47
|
+
touchable: boolean;
|
|
48
|
+
draggable: boolean;
|
|
49
|
+
mousewheel: boolean;
|
|
50
|
+
transitionDuration: number;
|
|
21
51
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
22
52
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
23
53
|
declare const _default: typeof __VLS_export;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.vue"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Carousel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.vue"],"names":[],"mappings":";AAqjBA,OAAO,KAAK,EAIV,aAAa,EACd,MAAM,SAAS,CAAA;AAuHhB,iBAAS,EAAE,CAAC,KAAK,EAAE,MAAM,QAExB;AAED,iBAAS,IAAI,SAEZ;AAED,iBAAS,IAAI,SAEZ;AAED,iBAAS,eAAe,WAEvB;AAsjBD,QAAA,IAAI,OAAO;;;;;CAAU,EAAE,QAAQ;;;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAS7C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CarouselItemProps } from './types';
|
|
2
|
+
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
3
|
+
declare var __VLS_1: {};
|
|
4
|
+
type __VLS_Slots = {} & {
|
|
5
|
+
default?: (props: typeof __VLS_1) => any;
|
|
6
|
+
};
|
|
7
|
+
declare const __VLS_base: DefineComponent<CarouselItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CarouselItemProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
8
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
9
|
+
declare const _default: typeof __VLS_export;
|
|
10
|
+
export default _default;
|
|
11
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
12
|
+
new (): {
|
|
13
|
+
$slots: S;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=CarouselItem.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselItem.vue"],"names":[],"mappings":";AA4BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAyChD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,8SAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InjectionKey, Ref } from 'vue';
|
|
2
|
+
export interface CarouselContext {
|
|
3
|
+
currentIndex: Ref<number>;
|
|
4
|
+
total: Ref<number>;
|
|
5
|
+
isActive: (index: number) => boolean;
|
|
6
|
+
isPrev: (index: number) => boolean;
|
|
7
|
+
isNext: (index: number) => boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const CAROUSEL_KEY: InjectionKey<CarouselContext>;
|
|
10
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE5C,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;CACnC;AAED,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,eAAe,CAAwB,CAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as MCarousel } from './Carousel.vue';
|
|
2
|
-
export
|
|
2
|
+
export { default as MCarouselItem } from './CarouselItem.vue';
|
|
3
|
+
export type { CarouselArrowSlotProps, CarouselDirection, CarouselDotPlacement, CarouselDotsSlotProps, CarouselDotType, CarouselEffect, CarouselEmits, CarouselInstance, CarouselItemProps, CarouselProps, CarouselSlidesPerView, CarouselTrigger, } from './types';
|
|
3
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAA;AACrD,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAC7D,YAAY,EACV,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,MAAM,SAAS,CAAA"}
|
|
@@ -1,101 +1,302 @@
|
|
|
1
1
|
/* —— Media: Carousel —— */
|
|
2
2
|
.m-carousel {
|
|
3
|
-
--m-carousel-
|
|
4
|
-
--m-carousel-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
--m-carousel-dot-size: 0.5rem;
|
|
4
|
+
--m-carousel-dot-line-width: 1rem;
|
|
5
|
+
--m-carousel-dot-line-width-active: 1.75rem;
|
|
6
|
+
--m-carousel-dot-line-thickness: 0.25rem;
|
|
7
|
+
--m-carousel-duration: 300ms;
|
|
8
|
+
--m-carousel-gap: 0px;
|
|
9
|
+
--m-carousel-arrow-inset: var(--m-space-3);
|
|
10
|
+
--m-carousel-dots-inset: var(--m-space-3);
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
display: block;
|
|
13
|
+
height: 100%;
|
|
14
|
+
max-width: 100%;
|
|
15
|
+
min-width: 0;
|
|
16
|
+
outline: none;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
position: relative;
|
|
19
|
+
touch-action: pan-y;
|
|
8
20
|
width: 100%;
|
|
9
21
|
}
|
|
10
22
|
|
|
23
|
+
.m-carousel--vertical {
|
|
24
|
+
touch-action: pan-x;
|
|
25
|
+
}
|
|
26
|
+
|
|
11
27
|
.m-carousel__viewport {
|
|
12
|
-
|
|
28
|
+
height: 100%;
|
|
13
29
|
overflow: hidden;
|
|
14
|
-
touch-action: pan-y;
|
|
15
30
|
width: 100%;
|
|
16
31
|
}
|
|
17
32
|
|
|
18
|
-
.m-
|
|
19
|
-
--m-carousel-page: 0;
|
|
20
|
-
--m-carousel-count: 1;
|
|
21
|
-
--m-carousel-visible: 1;
|
|
33
|
+
.m-carousel__slides {
|
|
22
34
|
display: flex;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
0
|
|
27
|
-
);
|
|
28
|
-
transition: transform var(--m-motion-normal) var(--m-motion-ease);
|
|
29
|
-
width: calc(100% * var(--m-carousel-count) / var(--m-carousel-visible));
|
|
35
|
+
gap: var(--m-carousel-gap);
|
|
36
|
+
height: 100%;
|
|
37
|
+
transition: transform var(--m-carousel-duration) var(--m-motion-ease);
|
|
30
38
|
will-change: transform;
|
|
31
39
|
}
|
|
32
40
|
|
|
33
|
-
.m-
|
|
41
|
+
.m-carousel__slides--instant {
|
|
34
42
|
transition: none;
|
|
35
43
|
}
|
|
36
44
|
|
|
37
|
-
.m-
|
|
45
|
+
.m-carousel--vertical .m-carousel__slides {
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.m-carousel__slide {
|
|
38
50
|
box-sizing: border-box;
|
|
39
|
-
flex: 0
|
|
51
|
+
flex-shrink: 0;
|
|
52
|
+
height: 100%;
|
|
40
53
|
min-width: 0;
|
|
41
|
-
|
|
54
|
+
outline: none;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
position: relative;
|
|
57
|
+
width: 100%;
|
|
42
58
|
}
|
|
43
59
|
|
|
44
|
-
.m-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
.m-carousel__slide-content {
|
|
61
|
+
height: 100%;
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.m-carousel__slide-content > img {
|
|
66
|
+
display: block;
|
|
67
|
+
height: 100%;
|
|
68
|
+
object-fit: cover;
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* fade */
|
|
73
|
+
.m-carousel--fade .m-carousel__slides {
|
|
74
|
+
display: block;
|
|
75
|
+
height: 100%;
|
|
76
|
+
position: relative;
|
|
77
|
+
transform: none !important;
|
|
78
|
+
width: 100%;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.m-carousel--fade .m-carousel__slide {
|
|
82
|
+
inset: 0;
|
|
83
|
+
opacity: 0;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
position: absolute;
|
|
86
|
+
transition: opacity var(--m-carousel-duration) var(--m-motion-ease);
|
|
87
|
+
width: 100%;
|
|
50
88
|
}
|
|
51
89
|
|
|
52
|
-
.m-
|
|
90
|
+
.m-carousel--fade .m-carousel__slide--current {
|
|
91
|
+
height: 100%;
|
|
92
|
+
opacity: 1;
|
|
93
|
+
pointer-events: auto;
|
|
94
|
+
position: relative;
|
|
95
|
+
width: 100%;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* card */
|
|
99
|
+
.m-carousel--card .m-carousel__slides {
|
|
100
|
+
height: 100%;
|
|
101
|
+
perspective: 1000px;
|
|
102
|
+
position: relative;
|
|
103
|
+
transform: none !important;
|
|
104
|
+
width: 100%;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.m-carousel--card .m-carousel__slide {
|
|
108
|
+
left: 50%;
|
|
109
|
+
opacity: 0;
|
|
110
|
+
position: absolute;
|
|
111
|
+
top: 0;
|
|
112
|
+
transform: translateX(-50%) translateZ(-400px);
|
|
113
|
+
transition:
|
|
114
|
+
opacity var(--m-carousel-duration) var(--m-motion-ease),
|
|
115
|
+
transform var(--m-carousel-duration) var(--m-motion-ease);
|
|
116
|
+
width: 60%;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.m-carousel--card .m-carousel__slide--current {
|
|
120
|
+
opacity: 1;
|
|
121
|
+
transform: translateX(-50%) translateZ(0);
|
|
122
|
+
z-index: 2;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.m-carousel--card .m-carousel__slide--prev {
|
|
126
|
+
opacity: 0.45;
|
|
127
|
+
transform: translateX(-100%) translateZ(-200px);
|
|
128
|
+
z-index: 1;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.m-carousel--card .m-carousel__slide--next {
|
|
132
|
+
opacity: 0.45;
|
|
133
|
+
transform: translateX(0%) translateZ(-200px);
|
|
134
|
+
z-index: 1;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.m-carousel--card.m-carousel--vertical .m-carousel__slide {
|
|
138
|
+
left: 0;
|
|
139
|
+
top: 50%;
|
|
140
|
+
transform: translateY(-50%) translateZ(-400px);
|
|
141
|
+
width: 100%;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.m-carousel--card.m-carousel--vertical .m-carousel__slide--current {
|
|
145
|
+
transform: translateY(-50%) translateZ(0);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.m-carousel--card.m-carousel--vertical .m-carousel__slide--prev {
|
|
149
|
+
transform: translateY(-100%) translateZ(-200px);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.m-carousel--card.m-carousel--vertical .m-carousel__slide--next {
|
|
153
|
+
transform: translateY(0%) translateZ(-200px);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* arrows */
|
|
157
|
+
.m-carousel__arrows {
|
|
158
|
+
display: contents;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.m-carousel__arrow {
|
|
162
|
+
backdrop-filter: blur(6px);
|
|
163
|
+
box-shadow: var(--m-shadow-sm);
|
|
164
|
+
position: absolute;
|
|
165
|
+
z-index: 3;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.m-carousel--horizontal .m-carousel__arrow--prev {
|
|
169
|
+
left: var(--m-carousel-arrow-inset);
|
|
170
|
+
top: 50%;
|
|
171
|
+
transform: translateY(-50%);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.m-carousel--horizontal .m-carousel__arrow--next {
|
|
175
|
+
right: var(--m-carousel-arrow-inset);
|
|
176
|
+
top: 50%;
|
|
177
|
+
transform: translateY(-50%);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.m-carousel--vertical .m-carousel__arrow {
|
|
181
|
+
left: 50%;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.m-carousel--vertical .m-carousel__arrow--prev {
|
|
185
|
+
top: var(--m-carousel-arrow-inset);
|
|
186
|
+
transform: translateX(-50%) rotate(90deg);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.m-carousel--vertical .m-carousel__arrow--next {
|
|
190
|
+
bottom: var(--m-carousel-arrow-inset);
|
|
191
|
+
top: auto;
|
|
192
|
+
transform: translateX(-50%) rotate(90deg);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* dots */
|
|
196
|
+
.m-carousel__dots {
|
|
53
197
|
display: flex;
|
|
198
|
+
flex-wrap: nowrap;
|
|
54
199
|
gap: var(--m-space-1);
|
|
55
|
-
|
|
200
|
+
position: absolute;
|
|
201
|
+
z-index: 3;
|
|
56
202
|
}
|
|
57
203
|
|
|
58
|
-
.m-
|
|
59
|
-
|
|
204
|
+
.m-carousel--dots-bottom .m-carousel__dots {
|
|
205
|
+
bottom: var(--m-carousel-dots-inset);
|
|
206
|
+
left: 50%;
|
|
207
|
+
transform: translateX(-50%);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.m-carousel--dots-top .m-carousel__dots {
|
|
211
|
+
left: 50%;
|
|
212
|
+
top: var(--m-carousel-dots-inset);
|
|
213
|
+
transform: translateX(-50%);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.m-carousel--dots-left .m-carousel__dots {
|
|
217
|
+
flex-direction: column;
|
|
218
|
+
left: var(--m-carousel-dots-inset);
|
|
219
|
+
top: 50%;
|
|
220
|
+
transform: translateY(-50%);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.m-carousel--dots-right .m-carousel__dots {
|
|
224
|
+
flex-direction: column;
|
|
225
|
+
right: var(--m-carousel-dots-inset);
|
|
226
|
+
top: 50%;
|
|
227
|
+
transform: translateY(-50%);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.m-carousel__dot {
|
|
231
|
+
background: color-mix(in srgb, var(--m-color-text-muted) 45%, transparent);
|
|
60
232
|
border: 0;
|
|
61
|
-
border-radius: var(--m-radius-full);
|
|
62
233
|
cursor: pointer;
|
|
63
|
-
height: var(--m-carousel-indicator-size);
|
|
64
234
|
padding: 0;
|
|
65
235
|
position: relative;
|
|
66
|
-
|
|
236
|
+
transition:
|
|
237
|
+
background-color var(--m-motion-fast) var(--m-motion-ease),
|
|
238
|
+
width var(--m-motion-fast) var(--m-motion-ease),
|
|
239
|
+
height var(--m-motion-fast) var(--m-motion-ease),
|
|
240
|
+
box-shadow var(--m-motion-fast) var(--m-motion-ease);
|
|
67
241
|
}
|
|
68
242
|
|
|
69
|
-
.m-
|
|
243
|
+
.m-carousel__dot::after {
|
|
70
244
|
content: '';
|
|
71
|
-
inset: -0.
|
|
245
|
+
inset: -0.4rem;
|
|
72
246
|
position: absolute;
|
|
73
247
|
}
|
|
74
248
|
|
|
75
|
-
.m-
|
|
76
|
-
|
|
249
|
+
.m-carousel__dots--dot .m-carousel__dot {
|
|
250
|
+
border-radius: var(--m-radius-full);
|
|
251
|
+
height: var(--m-carousel-dot-size);
|
|
252
|
+
width: var(--m-carousel-dot-size);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.m-carousel__dots--line .m-carousel__dot {
|
|
256
|
+
background: color-mix(in srgb, var(--m-color-text-muted) 40%, transparent);
|
|
257
|
+
border-radius: var(--m-radius-full);
|
|
258
|
+
height: var(--m-carousel-dot-line-thickness);
|
|
259
|
+
width: var(--m-carousel-dot-line-width);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.m-carousel--dots-left .m-carousel__dots--line .m-carousel__dot,
|
|
263
|
+
.m-carousel--dots-right .m-carousel__dots--line .m-carousel__dot {
|
|
264
|
+
height: var(--m-carousel-dot-line-width);
|
|
265
|
+
width: var(--m-carousel-dot-line-thickness);
|
|
77
266
|
}
|
|
78
267
|
|
|
79
|
-
.m-
|
|
268
|
+
.m-carousel__dot:hover {
|
|
269
|
+
background: color-mix(in srgb, var(--m-color-text-muted) 75%, transparent);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.m-carousel__dot:focus-visible {
|
|
80
273
|
box-shadow: var(--m-focus-shadow);
|
|
81
274
|
outline: none;
|
|
82
275
|
}
|
|
83
276
|
|
|
84
|
-
.m-
|
|
85
|
-
.m-
|
|
277
|
+
.m-carousel__dot--active,
|
|
278
|
+
.m-carousel__dot--active:hover {
|
|
86
279
|
background: var(--m-color-primary);
|
|
87
280
|
}
|
|
88
281
|
|
|
89
|
-
.m-
|
|
90
|
-
|
|
282
|
+
.m-carousel__dots--line .m-carousel__dot--active {
|
|
283
|
+
width: var(--m-carousel-dot-line-width-active);
|
|
91
284
|
}
|
|
92
285
|
|
|
93
|
-
.m-
|
|
94
|
-
|
|
95
|
-
|
|
286
|
+
.m-carousel--dots-left .m-carousel__dots--line .m-carousel__dot--active,
|
|
287
|
+
.m-carousel--dots-right .m-carousel__dots--line .m-carousel__dot--active {
|
|
288
|
+
height: var(--m-carousel-dot-line-width-active);
|
|
289
|
+
width: var(--m-carousel-dot-line-thickness);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.m-carousel--dragging {
|
|
293
|
+
cursor: grabbing;
|
|
294
|
+
user-select: none;
|
|
96
295
|
}
|
|
97
296
|
|
|
98
|
-
[data-m-motion=
|
|
99
|
-
[data-m-motion=
|
|
297
|
+
[data-m-motion='reduced'] .m-carousel__slides,
|
|
298
|
+
[data-m-motion='none'] .m-carousel__slides,
|
|
299
|
+
[data-m-motion='reduced'] .m-carousel__slide,
|
|
300
|
+
[data-m-motion='none'] .m-carousel__slide {
|
|
100
301
|
transition: none;
|
|
101
302
|
}
|