duoyun-ui 2.2.2 → 2.2.8
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/elements/badge.d.ts +2 -16
- package/elements/badge.d.ts.map +1 -1
- package/elements/badge.js +4 -158
- package/elements/badge.js.map +1 -1
- package/elements/banner.d.ts +2 -17
- package/elements/banner.d.ts.map +1 -1
- package/elements/banner.js +4 -127
- package/elements/banner.js.map +1 -1
- package/elements/base/chart.d.ts +2 -2
- package/elements/base/resize.d.ts +1 -22
- package/elements/base/resize.d.ts.map +1 -1
- package/elements/base/resize.js +1 -95
- package/elements/base/resize.js.map +1 -1
- package/elements/base/scroll.d.ts +1 -8
- package/elements/base/scroll.d.ts.map +1 -1
- package/elements/base/scroll.js +1 -158
- package/elements/base/scroll.js.map +1 -1
- package/elements/base/visible.d.ts +1 -18
- package/elements/base/visible.d.ts.map +1 -1
- package/elements/base/visible.js +1 -112
- package/elements/base/visible.js.map +1 -1
- package/elements/button.d.ts +2 -24
- package/elements/button.d.ts.map +1 -1
- package/elements/button.js +7 -287
- package/elements/button.js.map +1 -1
- package/elements/checkbox.d.ts +3 -21
- package/elements/checkbox.d.ts.map +1 -1
- package/elements/checkbox.js +6 -180
- package/elements/checkbox.js.map +1 -1
- package/elements/code-block.d.ts +2 -7
- package/elements/code-block.d.ts.map +1 -1
- package/elements/code-block.js +4 -432
- package/elements/code-block.js.map +1 -1
- package/elements/collapse.d.ts +3 -29
- package/elements/collapse.d.ts.map +1 -1
- package/elements/collapse.js +6 -197
- package/elements/collapse.js.map +1 -1
- package/elements/compartment.d.ts +2 -5
- package/elements/compartment.d.ts.map +1 -1
- package/elements/compartment.js +4 -23
- package/elements/compartment.js.map +1 -1
- package/elements/contextmenu.d.ts +5 -42
- package/elements/contextmenu.d.ts.map +1 -1
- package/elements/contextmenu.js +8 -285
- package/elements/contextmenu.js.map +1 -1
- package/elements/countdown.d.ts +2 -12
- package/elements/countdown.d.ts.map +1 -1
- package/elements/countdown.js +4 -94
- package/elements/countdown.js.map +1 -1
- package/elements/divider.d.ts +2 -8
- package/elements/divider.d.ts.map +1 -1
- package/elements/divider.js +4 -129
- package/elements/divider.js.map +1 -1
- package/elements/empty.d.ts +2 -8
- package/elements/empty.d.ts.map +1 -1
- package/elements/empty.js +4 -59
- package/elements/empty.js.map +1 -1
- package/elements/grouped-picker.d.ts +29 -0
- package/elements/grouped-picker.d.ts.map +1 -0
- package/elements/grouped-picker.js +199 -0
- package/elements/grouped-picker.js.map +1 -0
- package/elements/input.d.ts +4 -36
- package/elements/input.d.ts.map +1 -1
- package/elements/input.js +6 -489
- package/elements/input.js.map +1 -1
- package/elements/letters.d.ts +4 -0
- package/elements/letters.d.ts.map +1 -0
- package/elements/letters.js +56 -0
- package/elements/letters.js.map +1 -0
- package/elements/link.d.ts +3 -5
- package/elements/link.d.ts.map +1 -1
- package/elements/link.js +6 -38
- package/elements/link.js.map +1 -1
- package/elements/list.d.ts +5 -58
- package/elements/list.d.ts.map +1 -1
- package/elements/list.js +19 -664
- package/elements/list.js.map +1 -1
- package/elements/modal.d.ts +5 -63
- package/elements/modal.d.ts.map +1 -1
- package/elements/modal.js +13 -411
- package/elements/modal.js.map +1 -1
- package/elements/options.d.ts +4 -32
- package/elements/options.d.ts.map +1 -1
- package/elements/options.js +5 -254
- package/elements/options.js.map +1 -1
- package/elements/page-loadbar.js +1 -1
- package/elements/paragraph.d.ts +2 -2
- package/elements/paragraph.d.ts.map +1 -1
- package/elements/paragraph.js +4 -45
- package/elements/paragraph.js.map +1 -1
- package/elements/placeholder.d.ts +2 -14
- package/elements/placeholder.d.ts.map +1 -1
- package/elements/placeholder.js +4 -114
- package/elements/placeholder.js.map +1 -1
- package/elements/radio.d.ts +5 -24
- package/elements/radio.d.ts.map +1 -1
- package/elements/radio.js +7 -165
- package/elements/radio.js.map +1 -1
- package/elements/rate.d.ts +2 -12
- package/elements/rate.d.ts.map +1 -1
- package/elements/rate.js +4 -142
- package/elements/rate.js.map +1 -1
- package/elements/rolling-number.d.ts +4 -0
- package/elements/rolling-number.d.ts.map +1 -0
- package/elements/rolling-number.js +56 -0
- package/elements/rolling-number.js.map +1 -0
- package/elements/scroll-box.d.ts +2 -2
- package/elements/scroll-box.d.ts.map +1 -1
- package/elements/scroll-box.js +4 -5
- package/elements/scroll-box.js.map +1 -1
- package/elements/segmented.d.ts +3 -20
- package/elements/segmented.d.ts.map +1 -1
- package/elements/segmented.js +4 -191
- package/elements/segmented.js.map +1 -1
- package/elements/slider.d.ts +2 -20
- package/elements/slider.d.ts.map +1 -1
- package/elements/slider.js +4 -261
- package/elements/slider.js.map +1 -1
- package/elements/sort-box.d.ts +1 -2
- package/elements/sort-box.d.ts.map +1 -1
- package/elements/sort-box.js +4 -15
- package/elements/sort-box.js.map +1 -1
- package/elements/space.d.ts +2 -4
- package/elements/space.d.ts.map +1 -1
- package/elements/space.js +4 -37
- package/elements/space.js.map +1 -1
- package/elements/switch.d.ts +2 -11
- package/elements/switch.d.ts.map +1 -1
- package/elements/switch.js +5 -134
- package/elements/switch.js.map +1 -1
- package/elements/tag.d.ts +3 -16
- package/elements/tag.d.ts.map +1 -1
- package/elements/tag.js +4 -133
- package/elements/tag.js.map +1 -1
- package/elements/timeline.d.ts.map +1 -1
- package/elements/timeline.js +0 -1
- package/elements/timeline.js.map +1 -1
- package/elements/toast.js +1 -1
- package/elements/wait.js +1 -1
- package/helper/error.js +2 -39
- package/helper/error.js.map +1 -1
- package/helper/webapp.d.ts +4 -5
- package/helper/webapp.d.ts.map +1 -1
- package/helper/webapp.js +5 -11
- package/helper/webapp.js.map +1 -1
- package/lib/animations.d.ts +1 -10
- package/lib/animations.d.ts.map +1 -1
- package/lib/animations.js +1 -29
- package/lib/animations.js.map +1 -1
- package/lib/cache.d.ts +1 -18
- package/lib/cache.d.ts.map +1 -1
- package/lib/cache.js +1 -62
- package/lib/cache.js.map +1 -1
- package/lib/color.d.ts +1 -37
- package/lib/color.d.ts.map +1 -1
- package/lib/color.js +1 -98
- package/lib/color.js.map +1 -1
- package/lib/decorators.d.ts +2 -0
- package/lib/decorators.d.ts.map +1 -0
- package/lib/decorators.js +2 -0
- package/lib/decorators.js.map +1 -0
- package/lib/easing.d.ts +2 -0
- package/lib/easing.d.ts.map +1 -0
- package/lib/easing.js +2 -0
- package/lib/easing.js.map +1 -0
- package/lib/element.d.ts +1 -18
- package/lib/element.d.ts.map +1 -1
- package/lib/element.js +1 -131
- package/lib/element.js.map +1 -1
- package/lib/encode.d.ts +1 -10
- package/lib/encode.d.ts.map +1 -1
- package/lib/encode.js +1 -48
- package/lib/encode.js.map +1 -1
- package/lib/hotkeys.d.ts +1 -43
- package/lib/hotkeys.d.ts.map +1 -1
- package/lib/hotkeys.js +1 -247
- package/lib/hotkeys.js.map +1 -1
- package/lib/icons.d.ts +1 -114
- package/lib/icons.d.ts.map +1 -1
- package/lib/icons.js +1 -90
- package/lib/icons.js.map +1 -1
- package/lib/image.d.ts +1 -39
- package/lib/image.d.ts.map +1 -1
- package/lib/image.js +1 -140
- package/lib/image.js.map +1 -1
- package/lib/locale.d.ts +1 -87
- package/lib/locale.d.ts.map +1 -1
- package/lib/locale.js +1 -8
- package/lib/locale.js.map +1 -1
- package/lib/map.d.ts +1 -8
- package/lib/map.d.ts.map +1 -1
- package/lib/map.js +1 -31
- package/lib/map.js.map +1 -1
- package/lib/number.d.ts +1 -94
- package/lib/number.d.ts.map +1 -1
- package/lib/number.js +1 -169
- package/lib/number.js.map +1 -1
- package/lib/patterns.d.ts +1 -9
- package/lib/patterns.d.ts.map +1 -1
- package/lib/patterns.js +1 -11
- package/lib/patterns.js.map +1 -1
- package/lib/styles.d.ts +1 -4
- package/lib/styles.d.ts.map +1 -1
- package/lib/styles.js +1 -28
- package/lib/styles.js.map +1 -1
- package/lib/theme.d.ts +1 -85
- package/lib/theme.d.ts.map +1 -1
- package/lib/theme.js +6 -70
- package/lib/theme.js.map +1 -1
- package/lib/time.d.ts +1 -81
- package/lib/time.d.ts.map +1 -1
- package/lib/time.js +1 -255
- package/lib/time.js.map +1 -1
- package/lib/timer.d.ts +1 -25
- package/lib/timer.d.ts.map +1 -1
- package/lib/timer.js +1 -106
- package/lib/timer.js.map +1 -1
- package/lib/types.d.ts +1 -13
- package/lib/types.d.ts.map +1 -1
- package/lib/types.js +1 -16
- package/lib/types.js.map +1 -1
- package/lib/utils.d.ts +1 -79
- package/lib/utils.d.ts.map +1 -1
- package/lib/utils.js +1 -240
- package/lib/utils.js.map +1 -1
- package/locales/en.d.ts +1 -37
- package/locales/en.d.ts.map +1 -1
- package/locales/en.js +1 -36
- package/locales/en.js.map +1 -1
- package/locales/zh.d.ts +1 -3
- package/locales/zh.d.ts.map +1 -1
- package/locales/zh.js +1 -37
- package/locales/zh.js.map +1 -1
- package/package.json +4 -6
- package/patterns/console.d.ts +1 -1
- package/patterns/form.d.ts +5 -3
- package/patterns/form.d.ts.map +1 -1
- package/patterns/form.js +18 -5
- package/patterns/form.js.map +1 -1
- package/react/DyBadge.d.ts +1 -9
- package/react/DyBadge.js +1 -1
- package/react/DyBanner.d.ts +1 -6
- package/react/DyBanner.js +1 -1
- package/react/DyButton.d.ts +1 -15
- package/react/DyButton.js +1 -1
- package/react/DyCheckbox.d.ts +1 -7
- package/react/DyCheckbox.js +1 -1
- package/react/DyCheckboxGroup.d.ts +1 -7
- package/react/DyCheckboxGroup.js +1 -1
- package/react/DyCoachMark.d.ts +0 -5
- package/react/DyCoachMark.js +1 -1
- package/react/DyCodeBlock.d.ts +1 -5
- package/react/DyCodeBlock.js +1 -1
- package/react/DyCollapse.d.ts +1 -5
- package/react/DyCollapse.js +1 -1
- package/react/DyCollapsePanel.d.ts +1 -6
- package/react/DyCollapsePanel.js +1 -1
- package/react/DyCompartment.d.ts +1 -3
- package/react/DyCompartment.js +1 -1
- package/react/DyCountdown.d.ts +1 -5
- package/react/DyCountdown.js +1 -1
- package/react/DyDivider.d.ts +1 -6
- package/react/DyDivider.js +1 -1
- package/react/DyDrawer.d.ts +1 -21
- package/react/DyDrawer.js +1 -1
- package/react/DyEmpty.d.ts +1 -5
- package/react/DyEmpty.js +1 -1
- package/react/DyGroupedPicker.d.ts +27 -0
- package/react/DyGroupedPicker.js +22 -0
- package/react/DyInput.d.ts +1 -22
- package/react/DyInput.js +1 -1
- package/react/DyLegend.d.ts +0 -4
- package/react/DyLegend.js +1 -1
- package/react/DyLetters.d.ts +15 -0
- package/react/{DyListOutside.js → DyLetters.js} +4 -4
- package/react/DyList.d.ts +0 -13
- package/react/DyList.js +1 -1
- package/react/DyOptions.d.ts +1 -5
- package/react/DyOptions.js +1 -1
- package/react/DyPatForm.d.ts +1 -0
- package/react/DyPlaceholder.d.ts +1 -10
- package/react/DyPlaceholder.js +1 -1
- package/react/DyRadio.d.ts +1 -6
- package/react/DyRadio.js +1 -1
- package/react/DyRadioGroup.d.ts +1 -7
- package/react/DyRadioGroup.js +1 -1
- package/react/DyRate.d.ts +1 -7
- package/react/DyRate.js +1 -1
- package/react/DyRollingNumber.d.ts +15 -0
- package/react/{DyListItem.js → DyRollingNumber.js} +5 -5
- package/react/DySegmented.d.ts +1 -8
- package/react/DySegmented.js +1 -1
- package/react/DySlider.d.ts +1 -12
- package/react/DySlider.js +1 -1
- package/react/DySortItem.d.ts +1 -3
- package/react/DySortItem.js +1 -1
- package/react/DySpace.d.ts +1 -4
- package/react/DySpace.js +1 -1
- package/react/DySwitch.d.ts +1 -7
- package/react/DySwitch.js +1 -1
- package/react/DyTag.d.ts +1 -9
- package/react/DyTag.js +1 -1
- package/svelte/badge.d.ts +0 -8
- package/svelte/banner.d.ts +0 -5
- package/svelte/button.d.ts +0 -14
- package/svelte/checkbox.d.ts +0 -6
- package/svelte/coach-mark.d.ts +0 -5
- package/svelte/code-block.d.ts +0 -4
- package/svelte/collapse.d.ts +0 -4
- package/svelte/compartment.d.ts +0 -2
- package/svelte/countdown.d.ts +0 -4
- package/svelte/divider.d.ts +0 -5
- package/svelte/drawer.d.ts +0 -20
- package/svelte/empty.d.ts +0 -4
- package/svelte/grouped-picker.d.ts +19 -0
- package/svelte/grouped-picker.js +2 -0
- package/svelte/legend.d.ts +0 -4
- package/svelte/letters.d.ts +9 -0
- package/svelte/letters.js +2 -0
- package/svelte/list.d.ts +4 -11
- package/svelte/options.d.ts +0 -4
- package/svelte/pat-form.d.ts +1 -0
- package/svelte/placeholder.d.ts +0 -9
- package/svelte/radio.d.ts +0 -6
- package/svelte/rate.d.ts +0 -6
- package/svelte/rolling-number.d.ts +9 -0
- package/svelte/rolling-number.js +2 -0
- package/svelte/segmented.d.ts +0 -7
- package/svelte/slider.d.ts +0 -11
- package/svelte/space.d.ts +0 -3
- package/svelte/switch.d.ts +0 -6
- package/svelte/tag.d.ts +0 -8
- package/vue/DyBadge.vue +2 -8
- package/vue/DyBanner.vue +4 -6
- package/vue/DyButton.vue +2 -14
- package/vue/DyCheckbox.vue +4 -7
- package/vue/DyCheckboxGroup.vue +4 -7
- package/vue/DyCoachMark.vue +4 -8
- package/vue/DyCodeBlock.vue +2 -4
- package/vue/DyCollapse.vue +2 -4
- package/vue/DyCollapsePanel.vue +4 -6
- package/vue/DyCompartment.vue +2 -2
- package/vue/DyCountdown.vue +4 -5
- package/vue/DyDivider.vue +2 -5
- package/vue/DyDrawer.vue +4 -21
- package/vue/DyEmpty.vue +2 -4
- package/vue/DyGroupedPicker.vue +53 -0
- package/vue/DyInput.vue +4 -22
- package/vue/DyLegend.vue +2 -6
- package/vue/{DyListOutside.vue → DyLetters.vue} +8 -8
- package/vue/DyList.vue +4 -16
- package/vue/DyOptions.vue +2 -4
- package/vue/DyPatForm.vue +2 -2
- package/vue/DyPlaceholder.vue +2 -9
- package/vue/DyRadio.vue +4 -6
- package/vue/DyRadioGroup.vue +4 -7
- package/vue/DyRate.vue +4 -7
- package/vue/DyRollingNumber.vue +42 -0
- package/vue/DySegmented.vue +4 -8
- package/vue/DySlider.vue +4 -12
- package/vue/DySortItem.vue +2 -2
- package/vue/DySpace.vue +2 -3
- package/vue/DySwitch.vue +4 -7
- package/vue/DyTag.vue +4 -9
- package/elements/flow.d.ts +0 -52
- package/elements/flow.d.ts.map +0 -1
- package/elements/flow.js +0 -703
- package/elements/flow.js.map +0 -1
- package/elements/map.d.ts +0 -48
- package/elements/map.d.ts.map +0 -1
- package/elements/map.js +0 -396
- package/elements/map.js.map +0 -1
- package/react/DyFlow.d.ts +0 -24
- package/react/DyFlow.js +0 -18
- package/react/DyFlowCanvas.d.ts +0 -29
- package/react/DyFlowCanvas.js +0 -18
- package/react/DyListItem.d.ts +0 -24
- package/react/DyListOutside.d.ts +0 -15
- package/react/DyMap.d.ts +0 -32
- package/react/DyMap.js +0 -18
- package/svelte/flow.d.ts +0 -18
- package/svelte/flow.js +0 -2
- package/svelte/map.d.ts +0 -26
- package/svelte/map.js +0 -2
- package/vue/DyFlow.vue +0 -49
- package/vue/DyFlowCanvas.vue +0 -53
- package/vue/DyListItem.vue +0 -48
- package/vue/DyMap.vue +0 -56
package/elements/segmented.js
CHANGED
|
@@ -32,208 +32,21 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
|
|
|
32
32
|
}
|
|
33
33
|
return useValue ? value : void 0;
|
|
34
34
|
};
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import { classMap, partMap, styleMap } from '@mantou/gem/lib/utils';
|
|
38
|
-
import { commonHandle } from '../lib/hotkeys';
|
|
39
|
-
import { theme } from '../lib/theme';
|
|
40
|
-
import './use';
|
|
41
|
-
const getAnchorName = (index) => `--anchor-${index}`;
|
|
42
|
-
const style = css `
|
|
43
|
-
:host(:where(:not([hidden]))) {
|
|
44
|
-
display: flex;
|
|
45
|
-
cursor: default;
|
|
46
|
-
user-select: none;
|
|
47
|
-
font-size: 0.875em;
|
|
48
|
-
line-height: 1.2;
|
|
49
|
-
border-radius: ${theme.normalRound};
|
|
50
|
-
background: ${theme.hoverBackgroundColor};
|
|
51
|
-
--padding: 3px;
|
|
52
|
-
padding: var(--padding);
|
|
53
|
-
gap: var(--padding);
|
|
54
|
-
--inner-radius: max(calc(${theme.normalRound} - var(--padding)), ${theme.smallRound});
|
|
55
|
-
}
|
|
56
|
-
:host([small]) {
|
|
57
|
-
font-size: 0.75em;
|
|
58
|
-
}
|
|
59
|
-
:host([disabled]) {
|
|
60
|
-
cursor: not-allowed;
|
|
61
|
-
}
|
|
62
|
-
:host([disabled]) .segment * {
|
|
63
|
-
opacity: 0.5;
|
|
64
|
-
}
|
|
65
|
-
.segment {
|
|
66
|
-
z-index: 0;
|
|
67
|
-
width: 0;
|
|
68
|
-
flex-grow: 1;
|
|
69
|
-
display: flex;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
gap: 0.3em;
|
|
72
|
-
padding: calc(0.5em - var(--padding) + 1px) 1em;
|
|
73
|
-
border-radius: var(--inner-radius);
|
|
74
|
-
min-width: 5em;
|
|
75
|
-
}
|
|
76
|
-
:host(:where(:not([disabled], :state(animating)))) .segment:hover {
|
|
77
|
-
background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 6%);
|
|
78
|
-
&:active {
|
|
79
|
-
background: color-mix(in srgb, ${theme.hoverBackgroundColor}, currentColor 10%);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
:host .segment.current {
|
|
83
|
-
background: ${theme.backgroundColor};
|
|
84
|
-
}
|
|
85
|
-
:host(:not([disabled])) .segment.current {
|
|
86
|
-
box-shadow: ${theme.controlShadow};
|
|
87
|
-
}
|
|
88
|
-
.icon {
|
|
89
|
-
flex-shrink: 0;
|
|
90
|
-
width: 1.2em;
|
|
91
|
-
}
|
|
92
|
-
.label {
|
|
93
|
-
white-space: nowrap;
|
|
94
|
-
text-overflow: ellipsis;
|
|
95
|
-
overflow: hidden;
|
|
96
|
-
}
|
|
97
|
-
.marker {
|
|
98
|
-
display: none;
|
|
99
|
-
}
|
|
100
|
-
@supports (anchor-name: --foo) {
|
|
101
|
-
:host .segment.current {
|
|
102
|
-
background: none;
|
|
103
|
-
box-shadow: none;
|
|
104
|
-
}
|
|
105
|
-
:host(:not([disabled])) .segment.current {
|
|
106
|
-
box-shadow: none;
|
|
107
|
-
}
|
|
108
|
-
.marker {
|
|
109
|
-
display: block;
|
|
110
|
-
transition: inset 0.3s ${theme.timingFunction};
|
|
111
|
-
border-radius: var(--inner-radius);
|
|
112
|
-
position: absolute;
|
|
113
|
-
inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
|
|
114
|
-
background: ${theme.backgroundColor};
|
|
115
|
-
}
|
|
116
|
-
:host(:not([disabled])) .marker {
|
|
117
|
-
box-shadow: ${theme.controlShadow};
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
`;
|
|
35
|
+
import { customElement } from '@mantou/gem/lib/decorators';
|
|
36
|
+
import { TapSegmentedElement } from '@mantou/tap-ui/elements/segmented';
|
|
121
37
|
let DuoyunSegmentedElement = (() => {
|
|
122
|
-
let _classDecorators = [customElement('dy-segmented')
|
|
38
|
+
let _classDecorators = [customElement('dy-segmented')];
|
|
123
39
|
let _classDescriptor;
|
|
124
40
|
let _classExtraInitializers = [];
|
|
125
41
|
let _classThis;
|
|
126
|
-
let _classSuper =
|
|
127
|
-
let _static_segment_decorators;
|
|
128
|
-
let _static_segment_initializers = [];
|
|
129
|
-
let _static_segment_extraInitializers = [];
|
|
130
|
-
let _static_icon_decorators;
|
|
131
|
-
let _static_icon_initializers = [];
|
|
132
|
-
let _static_icon_extraInitializers = [];
|
|
133
|
-
let _static_marker_decorators;
|
|
134
|
-
let _static_marker_initializers = [];
|
|
135
|
-
let _static_marker_extraInitializers = [];
|
|
136
|
-
let _static_current_decorators;
|
|
137
|
-
let _static_current_initializers = [];
|
|
138
|
-
let _static_current_extraInitializers = [];
|
|
139
|
-
let _disabled_decorators;
|
|
140
|
-
let _disabled_initializers = [];
|
|
141
|
-
let _disabled_extraInitializers = [];
|
|
142
|
-
let _small_decorators;
|
|
143
|
-
let _small_initializers = [];
|
|
144
|
-
let _small_extraInitializers = [];
|
|
145
|
-
let _animating_decorators;
|
|
146
|
-
let _animating_initializers = [];
|
|
147
|
-
let _animating_extraInitializers = [];
|
|
148
|
-
let _options_decorators;
|
|
149
|
-
let _options_initializers = [];
|
|
150
|
-
let _options_extraInitializers = [];
|
|
151
|
-
let _value_decorators;
|
|
152
|
-
let _value_initializers = [];
|
|
153
|
-
let _value_extraInitializers = [];
|
|
154
|
-
let _change_decorators;
|
|
155
|
-
let _change_initializers = [];
|
|
156
|
-
let _change_extraInitializers = [];
|
|
42
|
+
let _classSuper = TapSegmentedElement;
|
|
157
43
|
var DuoyunSegmentedElement = class extends _classSuper {
|
|
158
44
|
static { _classThis = this; }
|
|
159
45
|
static {
|
|
160
46
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
161
|
-
_static_segment_decorators = [part];
|
|
162
|
-
_static_icon_decorators = [part];
|
|
163
|
-
_static_marker_decorators = [part];
|
|
164
|
-
_static_current_decorators = [part];
|
|
165
|
-
_disabled_decorators = [boolattribute];
|
|
166
|
-
_small_decorators = [boolattribute];
|
|
167
|
-
_animating_decorators = [state];
|
|
168
|
-
_options_decorators = [property];
|
|
169
|
-
_value_decorators = [property];
|
|
170
|
-
_change_decorators = [emitter];
|
|
171
|
-
__esDecorate(null, null, _static_segment_decorators, { kind: "field", name: "segment", static: true, private: false, access: { has: obj => "segment" in obj, get: obj => obj.segment, set: (obj, value) => { obj.segment = value; } }, metadata: _metadata }, _static_segment_initializers, _static_segment_extraInitializers);
|
|
172
|
-
__esDecorate(null, null, _static_icon_decorators, { kind: "field", name: "icon", static: true, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _static_icon_initializers, _static_icon_extraInitializers);
|
|
173
|
-
__esDecorate(null, null, _static_marker_decorators, { kind: "field", name: "marker", static: true, private: false, access: { has: obj => "marker" in obj, get: obj => obj.marker, set: (obj, value) => { obj.marker = value; } }, metadata: _metadata }, _static_marker_initializers, _static_marker_extraInitializers);
|
|
174
|
-
__esDecorate(null, null, _static_current_decorators, { kind: "field", name: "current", static: true, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _static_current_initializers, _static_current_extraInitializers);
|
|
175
|
-
__esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
176
|
-
__esDecorate(null, null, _small_decorators, { kind: "field", name: "small", static: false, private: false, access: { has: obj => "small" in obj, get: obj => obj.small, set: (obj, value) => { obj.small = value; } }, metadata: _metadata }, _small_initializers, _small_extraInitializers);
|
|
177
|
-
__esDecorate(null, null, _animating_decorators, { kind: "field", name: "animating", static: false, private: false, access: { has: obj => "animating" in obj, get: obj => obj.animating, set: (obj, value) => { obj.animating = value; } }, metadata: _metadata }, _animating_initializers, _animating_extraInitializers);
|
|
178
|
-
__esDecorate(null, null, _options_decorators, { kind: "field", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
|
|
179
|
-
__esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
180
|
-
__esDecorate(null, null, _change_decorators, { kind: "field", name: "change", static: false, private: false, access: { has: obj => "change" in obj, get: obj => obj.change, set: (obj, value) => { obj.change = value; } }, metadata: _metadata }, _change_initializers, _change_extraInitializers);
|
|
181
47
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
182
48
|
DuoyunSegmentedElement = _classThis = _classDescriptor.value;
|
|
183
49
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
184
|
-
}
|
|
185
|
-
static segment = __runInitializers(_classThis, _static_segment_initializers, void 0);
|
|
186
|
-
static icon = (__runInitializers(_classThis, _static_segment_extraInitializers), __runInitializers(_classThis, _static_icon_initializers, void 0));
|
|
187
|
-
static marker = (__runInitializers(_classThis, _static_icon_extraInitializers), __runInitializers(_classThis, _static_marker_initializers, void 0));
|
|
188
|
-
static current = (__runInitializers(_classThis, _static_marker_extraInitializers), __runInitializers(_classThis, _static_current_initializers, void 0));
|
|
189
|
-
disabled = __runInitializers(this, _disabled_initializers, void 0);
|
|
190
|
-
small = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _small_initializers, void 0));
|
|
191
|
-
animating = (__runInitializers(this, _small_extraInitializers), __runInitializers(this, _animating_initializers, void 0));
|
|
192
|
-
options = (__runInitializers(this, _animating_extraInitializers), __runInitializers(this, _options_initializers, void 0));
|
|
193
|
-
value = (__runInitializers(this, _options_extraInitializers), __runInitializers(this, _value_initializers, void 0));
|
|
194
|
-
change = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _change_initializers, void 0));
|
|
195
|
-
#onClick = (__runInitializers(this, _change_extraInitializers), (v) => {
|
|
196
|
-
if (this.disabled)
|
|
197
|
-
return;
|
|
198
|
-
this.animating = true;
|
|
199
|
-
setTimeout(() => (this.animating = false), 300);
|
|
200
|
-
this.change(v);
|
|
201
|
-
});
|
|
202
|
-
render = () => {
|
|
203
|
-
if (!this.options)
|
|
204
|
-
return html ``;
|
|
205
|
-
const currentIndex = this.options.findIndex(({ value }, index) => (value ?? index) === this.value);
|
|
206
|
-
return html `
|
|
207
|
-
<span
|
|
208
|
-
v-if=${currentIndex !== -1}
|
|
209
|
-
class="marker"
|
|
210
|
-
part=${DuoyunSegmentedElement.marker}
|
|
211
|
-
style=${styleMap({ positionAnchor: getAnchorName(currentIndex) })}
|
|
212
|
-
></span>
|
|
213
|
-
${this.options.map(({ value, label, icon }, index) => {
|
|
214
|
-
return html `
|
|
215
|
-
<div
|
|
216
|
-
role="radio"
|
|
217
|
-
tabindex=${-Number(this.disabled)}
|
|
218
|
-
aria-disabled=${this.disabled}
|
|
219
|
-
style=${styleMap({ anchorName: getAnchorName(index) })}
|
|
220
|
-
class=${classMap({ segment: true, current: index === currentIndex })}
|
|
221
|
-
part=${partMap({
|
|
222
|
-
[DuoyunSegmentedElement.segment]: true,
|
|
223
|
-
[DuoyunSegmentedElement.current]: index === currentIndex,
|
|
224
|
-
})}
|
|
225
|
-
@keydown=${commonHandle}
|
|
226
|
-
@click=${() => this.#onClick(value ?? index)}
|
|
227
|
-
>
|
|
228
|
-
<dy-use v-if=${!!icon} part=${DuoyunSegmentedElement.icon} class="icon" .element=${icon}></dy-use>
|
|
229
|
-
<span class="label">${label}</span>
|
|
230
|
-
</div>
|
|
231
|
-
`;
|
|
232
|
-
})}
|
|
233
|
-
`;
|
|
234
|
-
};
|
|
235
|
-
static {
|
|
236
|
-
__runInitializers(_classThis, _static_current_extraInitializers);
|
|
237
50
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
238
51
|
}
|
|
239
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented.js","sourceRoot":"","sources":["../src/elements/segmented.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"segmented.js","sourceRoot":"","sources":["../src/elements/segmented.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;IAK3D,sBAAsB;4BADlC,aAAa,CAAC,cAAc,CAAC;;;;sBACc,mBAAmB;sCAA3B,SAAQ,WAAmB;;;;YAA/D,6KAAkE;;;YAArD,uDAAsB;;;;;SAAtB,sBAAsB"}
|
package/elements/slider.d.ts
CHANGED
|
@@ -1,22 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import './gesture';
|
|
4
|
-
import './input';
|
|
5
|
-
export declare class DuoyunSliderElement extends GemElement {
|
|
6
|
-
#private;
|
|
7
|
-
label: string;
|
|
8
|
-
orientation: 'horizontal' | 'vertical';
|
|
9
|
-
editable: boolean;
|
|
10
|
-
disabled: boolean;
|
|
11
|
-
value: number;
|
|
12
|
-
min: number;
|
|
13
|
-
max: number;
|
|
14
|
-
step: number;
|
|
15
|
-
change: Emitter<number>;
|
|
16
|
-
/**
|
|
17
|
-
* Slider drop
|
|
18
|
-
*/
|
|
19
|
-
end: Emitter<number>;
|
|
20
|
-
render: () => import("@mantou/gem/lib/lit-html").TemplateResult;
|
|
1
|
+
import { TapSliderElement } from '@mantou/tap-ui/elements/slider';
|
|
2
|
+
export declare class DuoyunSliderElement extends TapSliderElement {
|
|
21
3
|
}
|
|
22
4
|
//# sourceMappingURL=slider.d.ts.map
|
package/elements/slider.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../src/elements/slider.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../src/elements/slider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,qBACa,mBAAoB,SAAQ,gBAAgB;CAAG"}
|
package/elements/slider.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// https://spectrum.adobe.com/page/slider/
|
|
2
1
|
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
|
|
3
2
|
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
|
|
4
3
|
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
|
|
@@ -33,279 +32,23 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
|
|
|
33
32
|
}
|
|
34
33
|
return useValue ? value : void 0;
|
|
35
34
|
};
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import { createRef, createState, css, GemElement, html } from '@mantou/gem/lib/element';
|
|
39
|
-
import { addListener, classMap } from '@mantou/gem/lib/utils';
|
|
40
|
-
import { hotkeys } from '../lib/hotkeys';
|
|
41
|
-
import { clamp } from '../lib/number';
|
|
42
|
-
import { focusStyle } from '../lib/styles';
|
|
43
|
-
import { theme } from '../lib/theme';
|
|
44
|
-
import './gesture';
|
|
45
|
-
import './input';
|
|
46
|
-
const elementTheme = createDecoratorTheme({ position: '', positionPoint: '' });
|
|
47
|
-
const style = css `
|
|
48
|
-
:host(:where(:not([hidden]))) {
|
|
49
|
-
font-size: 0.875em;
|
|
50
|
-
inline-size: 15em;
|
|
51
|
-
--size: 1em;
|
|
52
|
-
--c: calc(var(--size) / 2 + 6px);
|
|
53
|
-
display: inline-flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: 1em;
|
|
56
|
-
block-size: calc(2.2em + 2px);
|
|
57
|
-
border-radius: ${theme.normalRound};
|
|
58
|
-
box-sizing: border-box;
|
|
59
|
-
padding-inline: 2px;
|
|
60
|
-
}
|
|
61
|
-
:host([orientation='vertical']) {
|
|
62
|
-
writing-mode: vertical-lr;
|
|
63
|
-
transform: rotate(180deg);
|
|
64
|
-
}
|
|
65
|
-
.slider {
|
|
66
|
-
flex-grow: 1;
|
|
67
|
-
position: relative;
|
|
68
|
-
block-size: 2px;
|
|
69
|
-
border-radius: 1px;
|
|
70
|
-
background: radial-gradient(
|
|
71
|
-
circle at ${elementTheme.positionPoint},
|
|
72
|
-
transparent,
|
|
73
|
-
transparent var(--c),
|
|
74
|
-
${theme.borderColor} var(--c)
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
.mark {
|
|
78
|
-
position: absolute;
|
|
79
|
-
inset-inline-start: ${elementTheme.position};
|
|
80
|
-
inset-block-start: 50%;
|
|
81
|
-
transform: translate(-50%, -50%);
|
|
82
|
-
border-radius: 10em;
|
|
83
|
-
box-sizing: border-box;
|
|
84
|
-
width: var(--size);
|
|
85
|
-
height: var(--size);
|
|
86
|
-
border: 2px solid ${theme.primaryColor};
|
|
87
|
-
transition: border-width 0.1s;
|
|
88
|
-
opacity: 0.8;
|
|
89
|
-
}
|
|
90
|
-
:host(:not([disabled])) .mark {
|
|
91
|
-
box-shadow: ${theme.controlShadow};
|
|
92
|
-
}
|
|
93
|
-
.mark:hover {
|
|
94
|
-
opacity: 1;
|
|
95
|
-
}
|
|
96
|
-
:host(:focus-visible) .mark,
|
|
97
|
-
.mark.start {
|
|
98
|
-
border-width: 5px;
|
|
99
|
-
}
|
|
100
|
-
:host([disabled]) .mark {
|
|
101
|
-
cursor: not-allowed;
|
|
102
|
-
background: ${theme.disabledColor};
|
|
103
|
-
}
|
|
104
|
-
.label,
|
|
105
|
-
.value {
|
|
106
|
-
position: absolute;
|
|
107
|
-
font-size: 0.875em;
|
|
108
|
-
inset-block-end: calc(50% + var(--size) / 2 + 0.5em);
|
|
109
|
-
color: ${theme.describeColor};
|
|
110
|
-
}
|
|
111
|
-
.value {
|
|
112
|
-
inset-inline-end: 0;
|
|
113
|
-
}
|
|
114
|
-
.input {
|
|
115
|
-
inline-size: 50px;
|
|
116
|
-
}
|
|
117
|
-
`;
|
|
35
|
+
import { customElement } from '@mantou/gem/lib/decorators';
|
|
36
|
+
import { TapSliderElement } from '@mantou/tap-ui/elements/slider';
|
|
118
37
|
let DuoyunSliderElement = (() => {
|
|
119
|
-
let _classDecorators = [customElement('dy-slider')
|
|
38
|
+
let _classDecorators = [customElement('dy-slider')];
|
|
120
39
|
let _classDescriptor;
|
|
121
40
|
let _classExtraInitializers = [];
|
|
122
41
|
let _classThis;
|
|
123
|
-
let _classSuper =
|
|
124
|
-
let _label_decorators;
|
|
125
|
-
let _label_initializers = [];
|
|
126
|
-
let _label_extraInitializers = [];
|
|
127
|
-
let _orientation_decorators;
|
|
128
|
-
let _orientation_initializers = [];
|
|
129
|
-
let _orientation_extraInitializers = [];
|
|
130
|
-
let _editable_decorators;
|
|
131
|
-
let _editable_initializers = [];
|
|
132
|
-
let _editable_extraInitializers = [];
|
|
133
|
-
let _disabled_decorators;
|
|
134
|
-
let _disabled_initializers = [];
|
|
135
|
-
let _disabled_extraInitializers = [];
|
|
136
|
-
let _value_decorators;
|
|
137
|
-
let _value_initializers = [];
|
|
138
|
-
let _value_extraInitializers = [];
|
|
139
|
-
let _min_decorators;
|
|
140
|
-
let _min_initializers = [];
|
|
141
|
-
let _min_extraInitializers = [];
|
|
142
|
-
let _max_decorators;
|
|
143
|
-
let _max_initializers = [];
|
|
144
|
-
let _max_extraInitializers = [];
|
|
145
|
-
let _step_decorators;
|
|
146
|
-
let _step_initializers = [];
|
|
147
|
-
let _step_extraInitializers = [];
|
|
148
|
-
let _change_decorators;
|
|
149
|
-
let _change_initializers = [];
|
|
150
|
-
let _change_extraInitializers = [];
|
|
151
|
-
let _end_decorators;
|
|
152
|
-
let _end_initializers = [];
|
|
153
|
-
let _end_extraInitializers = [];
|
|
154
|
-
let _private_init_decorators;
|
|
155
|
-
let _private_init_initializers = [];
|
|
156
|
-
let _private_init_extraInitializers = [];
|
|
157
|
-
let _private_updateState_decorators;
|
|
158
|
-
let _private_updateState_initializers = [];
|
|
159
|
-
let _private_updateState_extraInitializers = [];
|
|
160
|
-
let _private_theme_decorators;
|
|
161
|
-
let _private_theme_initializers = [];
|
|
162
|
-
let _private_theme_extraInitializers = [];
|
|
42
|
+
let _classSuper = TapSliderElement;
|
|
163
43
|
var DuoyunSliderElement = class extends _classSuper {
|
|
164
44
|
static { _classThis = this; }
|
|
165
45
|
static {
|
|
166
46
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
167
|
-
_label_decorators = [attribute];
|
|
168
|
-
_orientation_decorators = [attribute];
|
|
169
|
-
_editable_decorators = [boolattribute];
|
|
170
|
-
_disabled_decorators = [boolattribute];
|
|
171
|
-
_value_decorators = [numattribute];
|
|
172
|
-
_min_decorators = [numattribute];
|
|
173
|
-
_max_decorators = [numattribute];
|
|
174
|
-
_step_decorators = [numattribute];
|
|
175
|
-
_change_decorators = [globalemitter];
|
|
176
|
-
_end_decorators = [emitter];
|
|
177
|
-
_private_init_decorators = [mounted()];
|
|
178
|
-
_private_updateState_decorators = [effect((i) => [i.value])];
|
|
179
|
-
_private_theme_decorators = [elementTheme()];
|
|
180
|
-
__esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
|
|
181
|
-
__esDecorate(null, null, _orientation_decorators, { kind: "field", name: "orientation", static: false, private: false, access: { has: obj => "orientation" in obj, get: obj => obj.orientation, set: (obj, value) => { obj.orientation = value; } }, metadata: _metadata }, _orientation_initializers, _orientation_extraInitializers);
|
|
182
|
-
__esDecorate(null, null, _editable_decorators, { kind: "field", name: "editable", static: false, private: false, access: { has: obj => "editable" in obj, get: obj => obj.editable, set: (obj, value) => { obj.editable = value; } }, metadata: _metadata }, _editable_initializers, _editable_extraInitializers);
|
|
183
|
-
__esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
184
|
-
__esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
185
|
-
__esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
|
|
186
|
-
__esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
|
|
187
|
-
__esDecorate(null, null, _step_decorators, { kind: "field", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
|
|
188
|
-
__esDecorate(null, null, _change_decorators, { kind: "field", name: "change", static: false, private: false, access: { has: obj => "change" in obj, get: obj => obj.change, set: (obj, value) => { obj.change = value; } }, metadata: _metadata }, _change_initializers, _change_extraInitializers);
|
|
189
|
-
__esDecorate(null, null, _end_decorators, { kind: "field", name: "end", static: false, private: false, access: { has: obj => "end" in obj, get: obj => obj.end, set: (obj, value) => { obj.end = value; } }, metadata: _metadata }, _end_initializers, _end_extraInitializers);
|
|
190
|
-
__esDecorate(null, null, _private_init_decorators, { kind: "field", name: "#init", static: false, private: true, access: { has: obj => #init in obj, get: obj => obj.#init, set: (obj, value) => { obj.#init = value; } }, metadata: _metadata }, _private_init_initializers, _private_init_extraInitializers);
|
|
191
|
-
__esDecorate(null, null, _private_updateState_decorators, { kind: "field", name: "#updateState", static: false, private: true, access: { has: obj => #updateState in obj, get: obj => obj.#updateState, set: (obj, value) => { obj.#updateState = value; } }, metadata: _metadata }, _private_updateState_initializers, _private_updateState_extraInitializers);
|
|
192
|
-
__esDecorate(null, null, _private_theme_decorators, { kind: "field", name: "#theme", static: false, private: true, access: { has: obj => #theme in obj, get: obj => obj.#theme, set: (obj, value) => { obj.#theme = value; } }, metadata: _metadata }, _private_theme_initializers, _private_theme_extraInitializers);
|
|
193
47
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
194
48
|
DuoyunSliderElement = _classThis = _classDescriptor.value;
|
|
195
49
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
196
50
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
197
51
|
}
|
|
198
|
-
label = __runInitializers(this, _label_initializers, void 0);
|
|
199
|
-
orientation = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _orientation_initializers, void 0));
|
|
200
|
-
editable = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _editable_initializers, void 0));
|
|
201
|
-
disabled = (__runInitializers(this, _editable_extraInitializers), __runInitializers(this, _disabled_initializers, void 0));
|
|
202
|
-
value = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _value_initializers, void 0));
|
|
203
|
-
min = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _min_initializers, void 0));
|
|
204
|
-
max = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, void 0));
|
|
205
|
-
step = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, void 0));
|
|
206
|
-
change = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _change_initializers, void 0));
|
|
207
|
-
/**
|
|
208
|
-
* Slider drop
|
|
209
|
-
*/
|
|
210
|
-
end = (__runInitializers(this, _change_extraInitializers), __runInitializers(this, _end_initializers, void 0));
|
|
211
|
-
#sliderRef = (__runInitializers(this, _end_extraInitializers), createRef());
|
|
212
|
-
get #orientation() {
|
|
213
|
-
return this.orientation || 'horizontal';
|
|
214
|
-
}
|
|
215
|
-
get #isVertical() {
|
|
216
|
-
return this.#orientation === 'vertical';
|
|
217
|
-
}
|
|
218
|
-
get #max() {
|
|
219
|
-
return this.attributes.max ? this.max : 100;
|
|
220
|
-
}
|
|
221
|
-
get #step() {
|
|
222
|
-
return this.step || 1;
|
|
223
|
-
}
|
|
224
|
-
get #diff() {
|
|
225
|
-
return this.#max - this.min;
|
|
226
|
-
}
|
|
227
|
-
#state = createState({
|
|
228
|
-
position: 0,
|
|
229
|
-
displayPosition: 0,
|
|
230
|
-
start: false,
|
|
231
|
-
});
|
|
232
|
-
#getValue = (precisionValue) => {
|
|
233
|
-
const remainder = precisionValue % this.#step;
|
|
234
|
-
const rest = Math.round(remainder / this.#step) * this.#step;
|
|
235
|
-
return precisionValue - remainder + rest;
|
|
236
|
-
};
|
|
237
|
-
#onPan = ({ detail, target }) => {
|
|
238
|
-
if (this.disabled)
|
|
239
|
-
return;
|
|
240
|
-
const { width, height } = this.#sliderRef.value.getBoundingClientRect();
|
|
241
|
-
const { left, right, top, bottom, width: w, height: h } = target.getBoundingClientRect();
|
|
242
|
-
const isV = this.#isVertical;
|
|
243
|
-
const totalLength = isV ? height - h : width - w;
|
|
244
|
-
const center = (isV ? top + bottom : left + right) / 2;
|
|
245
|
-
const current = isV ? detail.clientY : detail.clientX;
|
|
246
|
-
const movement = isV ? detail.y : detail.x;
|
|
247
|
-
if (movement < 0 && current > center)
|
|
248
|
-
return;
|
|
249
|
-
if (movement > 0 && current < center)
|
|
250
|
-
return;
|
|
251
|
-
const position = clamp(0, this.#state.position + ((isV ? -1 : 1) * movement) / totalLength, 1);
|
|
252
|
-
const precisionValue = position * this.#diff;
|
|
253
|
-
const value = this.#getValue(precisionValue);
|
|
254
|
-
this.#state({ position });
|
|
255
|
-
this.change(value);
|
|
256
|
-
};
|
|
257
|
-
#onEnd = () => {
|
|
258
|
-
this.#state({ start: false });
|
|
259
|
-
this.end(this.value);
|
|
260
|
-
};
|
|
261
|
-
#setPrecisionValue = (precisionValue) => {
|
|
262
|
-
const value = this.#getValue(clamp(this.min, precisionValue, this.#max));
|
|
263
|
-
const position = value / this.#diff;
|
|
264
|
-
this.#state({ position, displayPosition: position });
|
|
265
|
-
this.change(value);
|
|
266
|
-
};
|
|
267
|
-
#onKeydown = hotkeys({
|
|
268
|
-
up: () => this.#setPrecisionValue(this.value + this.#step),
|
|
269
|
-
down: () => this.#setPrecisionValue(this.value - this.#step),
|
|
270
|
-
});
|
|
271
|
-
#onInputChange = (evt) => {
|
|
272
|
-
evt.stopPropagation();
|
|
273
|
-
this.#setPrecisionValue(evt.detail);
|
|
274
|
-
};
|
|
275
|
-
#init = __runInitializers(this, _private_init_initializers, () => addListener(this, 'keydown', this.#onKeydown));
|
|
276
|
-
#updateState = (__runInitializers(this, _private_init_extraInitializers), __runInitializers(this, _private_updateState_initializers, () => {
|
|
277
|
-
this.internals.ariaValueText = String(this.value);
|
|
278
|
-
const position = this.#getValue(clamp(this.min, this.value, this.#max)) / this.#diff;
|
|
279
|
-
this.#state({ position, displayPosition: position });
|
|
280
|
-
}));
|
|
281
|
-
#theme = (__runInitializers(this, _private_updateState_extraInitializers), __runInitializers(this, _private_theme_initializers, () => {
|
|
282
|
-
const { displayPosition } = this.#state;
|
|
283
|
-
const position = `calc(var(--size) / 2 + calc(100% - var(--size)) * ${displayPosition})`;
|
|
284
|
-
return { position, positionPoint: `${this.#isVertical ? '0 ' : ''}${position}` };
|
|
285
|
-
}));
|
|
286
|
-
render = (__runInitializers(this, _private_theme_extraInitializers), () => {
|
|
287
|
-
return html `
|
|
288
|
-
<div ${this.#sliderRef} class="slider">
|
|
289
|
-
<dy-gesture
|
|
290
|
-
class=${classMap({ mark: true, start: this.#state.start })}
|
|
291
|
-
@pan=${this.#onPan}
|
|
292
|
-
@pointerdown=${() => !this.disabled && this.#state({ start: true })}
|
|
293
|
-
@end=${this.#onEnd}
|
|
294
|
-
></dy-gesture>
|
|
295
|
-
<div v-if=${!!this.label} class="label">${this.label}</div>
|
|
296
|
-
<div v-if=${!!this.label} class="value">${this.value}</div>
|
|
297
|
-
</div>
|
|
298
|
-
<dy-input
|
|
299
|
-
v-if=${this.editable}
|
|
300
|
-
?disabled=${this.disabled}
|
|
301
|
-
class="input"
|
|
302
|
-
type="number"
|
|
303
|
-
step=${this.step}
|
|
304
|
-
value=${String(this.value)}
|
|
305
|
-
@change=${this.#onInputChange}
|
|
306
|
-
></dy-input>
|
|
307
|
-
`;
|
|
308
|
-
});
|
|
309
52
|
};
|
|
310
53
|
return DuoyunSliderElement = _classThis;
|
|
311
54
|
})();
|
package/elements/slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../src/elements/slider.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../src/elements/slider.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;IAGrD,mBAAmB;4BAD/B,aAAa,CAAC,WAAW,CAAC;;;;sBACc,gBAAgB;mCAAxB,SAAQ,WAAgB;;;;YAAzD,6KAA4D;;;YAA/C,uDAAmB;;;;;SAAnB,mBAAmB"}
|
package/elements/sort-box.d.ts
CHANGED
|
@@ -9,8 +9,7 @@ export declare class DuoyunSortBoxElement extends GemElement {
|
|
|
9
9
|
#private;
|
|
10
10
|
sort: Emitter<SortEventDetail>;
|
|
11
11
|
}
|
|
12
|
-
export declare class DuoyunSortItemElement extends
|
|
13
|
-
handle: boolean;
|
|
12
|
+
export declare class DuoyunSortItemElement extends GemElement {
|
|
14
13
|
}
|
|
15
14
|
export declare class DuoyunSortHandleElement extends DuoyunGestureElement {
|
|
16
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-box.d.ts","sourceRoot":"","sources":["../src/elements/sort-box.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"sort-box.d.ts","sourceRoot":"","sources":["../src/elements/sort-box.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,OAAO,EAAoB,MAAM,4BAA4B,CAAC;AACzG,OAAO,EAAO,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAM1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAgBjD,MAAM,MAAM,eAAe,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,qBAGa,oBAAqB,SAAQ,UAAU;;IACzC,IAAI,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CA6CzC;AAED,qBACa,qBAAsB,SAAQ,UAAU;CAAG;AAExD,qBACa,uBAAwB,SAAQ,oBAAoB;CAAG"}
|
package/elements/sort-box.js
CHANGED
|
@@ -32,21 +32,20 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
|
|
|
32
32
|
}
|
|
33
33
|
return useValue ? value : void 0;
|
|
34
34
|
};
|
|
35
|
-
import { adoptedStyle,
|
|
35
|
+
import { adoptedStyle, customElement, emitter, mounted } from '@mantou/gem/lib/decorators';
|
|
36
36
|
import { css, GemElement } from '@mantou/gem/lib/element';
|
|
37
37
|
import { addListener } from '@mantou/gem/lib/utils';
|
|
38
38
|
import { blockContainer } from '../lib/styles';
|
|
39
39
|
import { theme } from '../lib/theme';
|
|
40
40
|
import { DuoyunGestureElement } from './gesture';
|
|
41
41
|
const style = css `
|
|
42
|
-
|
|
42
|
+
dy-sort-handle:state(grabbing) {
|
|
43
43
|
cursor: grabbing;
|
|
44
44
|
|
|
45
45
|
* {
|
|
46
46
|
pointer-events: none;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
dy-sort-item[handle]:state(grabbing),
|
|
50
49
|
dy-sort-item:has(:state(grabbing)) {
|
|
51
50
|
position: relative;
|
|
52
51
|
z-index: ${theme.popupZIndex};
|
|
@@ -85,7 +84,7 @@ let DuoyunSortBoxElement = (() => {
|
|
|
85
84
|
#listen = () => {
|
|
86
85
|
this.#removeListeners();
|
|
87
86
|
const items = [...this.querySelectorAll('dy-sort-item')];
|
|
88
|
-
const handles = items.map((item) => item.
|
|
87
|
+
const handles = items.map((item) => item.querySelector('dy-sort-handle'));
|
|
89
88
|
this.#listeners = handles.map((e, index) => {
|
|
90
89
|
if (!e)
|
|
91
90
|
return;
|
|
@@ -130,26 +129,16 @@ let DuoyunSortItemElement = (() => {
|
|
|
130
129
|
let _classDescriptor;
|
|
131
130
|
let _classExtraInitializers = [];
|
|
132
131
|
let _classThis;
|
|
133
|
-
let _classSuper =
|
|
134
|
-
let _handle_decorators;
|
|
135
|
-
let _handle_initializers = [];
|
|
136
|
-
let _handle_extraInitializers = [];
|
|
132
|
+
let _classSuper = GemElement;
|
|
137
133
|
var DuoyunSortItemElement = class extends _classSuper {
|
|
138
134
|
static { _classThis = this; }
|
|
139
135
|
static {
|
|
140
136
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
141
|
-
_handle_decorators = [boolattribute];
|
|
142
|
-
__esDecorate(null, null, _handle_decorators, { kind: "field", name: "handle", static: false, private: false, access: { has: obj => "handle" in obj, get: obj => obj.handle, set: (obj, value) => { obj.handle = value; } }, metadata: _metadata }, _handle_initializers, _handle_extraInitializers);
|
|
143
137
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
144
138
|
DuoyunSortItemElement = _classThis = _classDescriptor.value;
|
|
145
139
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
146
140
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
147
141
|
}
|
|
148
|
-
handle = __runInitializers(this, _handle_initializers, void 0);
|
|
149
|
-
constructor() {
|
|
150
|
-
super(...arguments);
|
|
151
|
-
__runInitializers(this, _handle_extraInitializers);
|
|
152
|
-
}
|
|
153
142
|
};
|
|
154
143
|
return DuoyunSortItemElement = _classThis;
|
|
155
144
|
})();
|