@varlet/ui 3.1.0-alpha.1709717246484 → 3.1.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/es/button/Button.mjs +10 -10
- package/es/button/props.mjs +3 -1
- package/es/date-picker/date-picker.css +1 -1
- package/es/index.bundle.mjs +1 -1
- package/es/index.mjs +1 -1
- package/es/picker/props.mjs +2 -3
- package/es/popup/props.mjs +6 -7
- package/es/select/useSelectController.mjs +2 -4
- package/es/slider/Slider.mjs +124 -41
- package/es/snackbar/style/index.mjs +1 -1
- package/es/style.css +1 -1
- package/es/themes/dark/datePicker.mjs +1 -0
- package/es/themes/dark/timePicker.mjs +2 -1
- package/es/themes/md3-dark/datePicker.mjs +1 -0
- package/es/themes/md3-dark/timePicker.mjs +2 -1
- package/es/themes/md3-light/datePicker.mjs +1 -0
- package/es/themes/md3-light/timePicker.mjs +2 -1
- package/es/time-picker/timePicker.css +1 -1
- package/es/tooltip/props.mjs +5 -6
- package/es/varlet.esm.js +4679 -4620
- package/highlight/web-types.en-US.json +37 -2
- package/lib/style.css +1 -1
- package/lib/varlet.cjs.js +162 -73
- package/package.json +7 -7
- package/types/picker.d.ts +4 -0
- package/types/popup.d.ts +2 -0
- package/types/styleVars.d.ts +4 -0
- package/types/tooltip.d.ts +1 -0
- package/umd/varlet.js +6 -6
|
@@ -20,6 +20,7 @@ var stdin_default = {
|
|
|
20
20
|
"--date-picker-title-date-font-size": "34px",
|
|
21
21
|
"--date-picker-title-date-font-weight": "500",
|
|
22
22
|
"--date-picker-title-date-range-font-size": "20px",
|
|
23
|
+
"--date-picker-title-date-justify-content": "normal",
|
|
23
24
|
"--date-picker-body-height": "280px",
|
|
24
25
|
"--date-picker-body-padding": "0",
|
|
25
26
|
"--date-picker-header-padding": "4px 16px",
|
|
@@ -52,7 +52,8 @@ var stdin_default = {
|
|
|
52
52
|
"--time-picker-inner-top": "36px",
|
|
53
53
|
"--time-picker-inner-bottom": "36px",
|
|
54
54
|
"--time-picker-body-height": "288px",
|
|
55
|
-
"--time-picker-actions-padding": "0 8px 12px 8px"
|
|
55
|
+
"--time-picker-actions-padding": "0 8px 12px 8px",
|
|
56
|
+
"--time-picker-title-time-container-justify-content": "flex-end"
|
|
56
57
|
};
|
|
57
58
|
export {
|
|
58
59
|
stdin_default as default
|
|
@@ -24,6 +24,7 @@ var stdin_default = {
|
|
|
24
24
|
"--date-picker-title-date-font-size": "34px",
|
|
25
25
|
"--date-picker-title-date-font-weight": "500",
|
|
26
26
|
"--date-picker-title-date-range-font-size": "20px",
|
|
27
|
+
"--date-picker-title-date-justify-content": "normal",
|
|
27
28
|
"--month-picker-padding": "0 12px",
|
|
28
29
|
"--month-picker-item-width": "33%",
|
|
29
30
|
"--month-picker-item-height": "56px",
|
|
@@ -52,7 +52,8 @@ var stdin_default = {
|
|
|
52
52
|
"--time-picker-inner-right": "36px",
|
|
53
53
|
"--time-picker-inner-top": "36px",
|
|
54
54
|
"--time-picker-inner-bottom": "36px",
|
|
55
|
-
"--time-picker-body-height": "288px"
|
|
55
|
+
"--time-picker-body-height": "288px",
|
|
56
|
+
"--time-picker-title-time-container-justify-content": "flex-end"
|
|
56
57
|
};
|
|
57
58
|
export {
|
|
58
59
|
stdin_default as default
|
|
@@ -24,6 +24,7 @@ var stdin_default = {
|
|
|
24
24
|
"--date-picker-title-date-font-size": "34px",
|
|
25
25
|
"--date-picker-title-date-font-weight": "500",
|
|
26
26
|
"--date-picker-title-date-range-font-size": "20px",
|
|
27
|
+
"--date-picker-title-date-justify-content": "normal",
|
|
27
28
|
"--month-picker-padding": "0 12px",
|
|
28
29
|
"--month-picker-item-width": "33%",
|
|
29
30
|
"--month-picker-item-height": "56px",
|
|
@@ -52,7 +52,8 @@ var stdin_default = {
|
|
|
52
52
|
"--time-picker-inner-right": "36px",
|
|
53
53
|
"--time-picker-inner-top": "36px",
|
|
54
54
|
"--time-picker-inner-bottom": "36px",
|
|
55
|
-
"--time-picker-body-height": "288px"
|
|
55
|
+
"--time-picker-body-height": "288px",
|
|
56
|
+
"--time-picker-title-time-container-justify-content": "flex-end"
|
|
56
57
|
};
|
|
57
58
|
export {
|
|
58
59
|
stdin_default as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-color: '#fff'; --time-picker-title-hint-font-size: 14px; --time-picker-title-inactive-opacity: 0.6; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-time-border-radius: 0; --time-picker-title-time-padding: 0; --time-picker-title-time-background: transparent; --time-picker-title-time-active-background: transparent; --time-picker-title-ampm-button-active-background: transparent; --time-picker-title-ampm-margin-left: 10px; --time-picker-title-ampm-border-radius: 0; --time-picker-title-ampm-border: none; --time-picker-title-ampm-button-padding: 2px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: var(--color-on-primary); --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-disable-background: #bdbdbd; --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: 288px; --time-picker-actions-padding: 0 8px 12px 8px;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); transition: 0.25s background-color; display: block;}.var-time-picker__title-splitter { display: flex; align-items: center;}.var-time-picker__title-hint { color: var(--time-picker-title-hint-color); font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: center; justify-content:
|
|
1
|
+
:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-color: '#fff'; --time-picker-title-hint-font-size: 14px; --time-picker-title-inactive-opacity: 0.6; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-time-border-radius: 0; --time-picker-title-time-padding: 0; --time-picker-title-time-background: transparent; --time-picker-title-time-active-background: transparent; --time-picker-title-time-container-justify-content: flex-end; --time-picker-title-ampm-button-active-background: transparent; --time-picker-title-ampm-margin-left: 10px; --time-picker-title-ampm-border-radius: 0; --time-picker-title-ampm-border: none; --time-picker-title-ampm-button-padding: 2px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: var(--color-on-primary); --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-disable-background: #bdbdbd; --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: 288px; --time-picker-actions-padding: 0 8px 12px 8px;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); transition: 0.25s background-color; display: block;}.var-time-picker__title-splitter { display: flex; align-items: center;}.var-time-picker__title-hint { color: var(--time-picker-title-hint-color); font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: center; justify-content: var(--time-picker-title-time-container-justify-content);}.var-time-picker__title-btn { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap; background: var(--time-picker-title-time-background); padding: var(--time-picker-title-time-padding); border-radius: var(--time-picker-title-time-border-radius); opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-btn--active { background: var(--time-picker-title-time-active-background); opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { border: var(--time-picker-title-ampm-border); border-radius: var(--time-picker-title-ampm-border-radius); margin-left: var(--time-picker-title-ampm-margin-left); overflow: hidden;}.var-time-picker__title-ampm .var-time-picker__title-btn { padding: var(--time-picker-title-ampm-button-padding); border-radius: 0; opacity: var(--time-picker-title-inactive-opacity);}.var-time-picker__title-ampm .var-time-picker__title-btn--active { background: var(--time-picker-title-ampm-button-active-background); opacity: 1;}.var-time-picker__title-ampm .var-time-picker__title-btn:first-child { border-bottom: var(--time-picker-title-ampm-border);}.var-time-picker__body { display: flex; align-items: center; justify-content: center; height: var(--time-picker-body-height); background-color: var(--time-picker-body-background); transition: 0.25s background-color;}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker__actions { display: flex; justify-content: flex-end; align-items: center; background-color: var(--time-picker-body-background); padding: var(--time-picker-actions-padding);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
|
package/es/tooltip/props.mjs
CHANGED
|
@@ -35,17 +35,16 @@ const props = {
|
|
|
35
35
|
},
|
|
36
36
|
sameWidth: Boolean,
|
|
37
37
|
closeOnClickReference: Boolean,
|
|
38
|
+
closeOnKeyEscape: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: true
|
|
41
|
+
},
|
|
38
42
|
onOpen: defineListenerProp(),
|
|
39
43
|
onOpened: defineListenerProp(),
|
|
40
44
|
onClose: defineListenerProp(),
|
|
41
45
|
onClosed: defineListenerProp(),
|
|
42
46
|
onClickOutside: defineListenerProp(),
|
|
43
|
-
"onUpdate:show": defineListenerProp()
|
|
44
|
-
// internal for esc
|
|
45
|
-
closeOnKeyEscape: {
|
|
46
|
-
type: Boolean,
|
|
47
|
-
default: true
|
|
48
|
-
}
|
|
47
|
+
"onUpdate:show": defineListenerProp()
|
|
49
48
|
};
|
|
50
49
|
export {
|
|
51
50
|
props
|