@varlet/ui 2.2.0-alpha.1667668287880 → 2.2.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/checkbox/checkbox.css +1 -1
- package/es/counter/Counter.js +3 -3
- package/es/counter/counter.css +1 -1
- package/es/radio/radio.css +1 -1
- package/es/rate/rate.css +1 -1
- package/es/slider/slider.css +1 -1
- package/es/style.css +1 -1
- package/es/styles/common.css +1 -1
- package/es/styles/elevation.css +1 -1
- package/es/switch/Switch.js +2 -2
- package/es/switch/switch.css +1 -1
- package/es/varlet.esm.js +5 -5
- package/highlight/attributes.json +4 -0
- package/highlight/tags.json +1 -0
- package/highlight/web-types.json +9 -0
- package/lib/checkbox/checkbox.css +1 -1
- package/lib/counter/Counter.js +3 -3
- package/lib/counter/counter.css +1 -1
- package/lib/radio/radio.css +1 -1
- package/lib/rate/rate.css +1 -1
- package/lib/slider/slider.css +1 -1
- package/lib/style.css +1 -1
- package/lib/styles/common.css +1 -1
- package/lib/styles/elevation.css +1 -1
- package/lib/switch/Switch.js +2 -2
- package/lib/switch/switch.css +1 -1
- package/package.json +5 -5
- package/umd/varlet.js +3 -3
package/es/checkbox/checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-
|
|
1
|
+
:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-icon-size: 24px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
|
package/es/counter/Counter.js
CHANGED
|
@@ -36,7 +36,7 @@ export function render(_ctx, _cache) {
|
|
|
36
36
|
}, _ctx.$attrs), [_withDirectives(_createVNode(_component_var_icon, {
|
|
37
37
|
"var-counter-cover": "",
|
|
38
38
|
name: "minus",
|
|
39
|
-
class: _normalizeClass(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--
|
|
39
|
+
class: _normalizeClass(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--not-allowed')])),
|
|
40
40
|
style: _normalizeStyle({
|
|
41
41
|
width: _ctx.toSizeUnit(_ctx.buttonSize),
|
|
42
42
|
height: _ctx.toSizeUnit(_ctx.buttonSize)
|
|
@@ -50,7 +50,7 @@ export function render(_ctx, _cache) {
|
|
|
50
50
|
, ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
|
|
51
51
|
disabled: !_ctx.ripple || _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
|
|
52
52
|
}]]), _withDirectives(_createElementVNode("input", {
|
|
53
|
-
class: _normalizeClass(_ctx.classes(_ctx.n('input'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--
|
|
53
|
+
class: _normalizeClass(_ctx.classes(_ctx.n('input'), [_ctx.disabled || _ctx.formDisabled, _ctx.n('--not-allowed')])),
|
|
54
54
|
style: _normalizeStyle({
|
|
55
55
|
width: _ctx.toSizeUnit(_ctx.inputWidth),
|
|
56
56
|
fontSize: _ctx.toSizeUnit(_ctx.inputTextSize)
|
|
@@ -67,7 +67,7 @@ export function render(_ctx, _cache) {
|
|
|
67
67
|
, _hoisted_1), [[_vModelText, _ctx.inputValue]]), _withDirectives(_createVNode(_component_var_icon, {
|
|
68
68
|
"var-counter-cover": "",
|
|
69
69
|
name: "plus",
|
|
70
|
-
class: _normalizeClass(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--
|
|
70
|
+
class: _normalizeClass(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')], [_ctx.disabled || _ctx.formDisabled, _ctx.n('--not-allowed')])),
|
|
71
71
|
style: _normalizeStyle({
|
|
72
72
|
width: _ctx.toSizeUnit(_ctx.buttonSize),
|
|
73
73
|
height: _ctx.toSizeUnit(_ctx.buttonSize)
|
package/es/counter/counter.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-
|
|
1
|
+
:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-opacity: var(--opacity-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s, opacity 0.25s;}.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; user-select: none;}.var-counter--disabled { opacity: var(--counter-disabled-opacity); cursor: not-allowed;}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}
|
package/es/radio/radio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-
|
|
1
|
+
:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
|
package/es/rate/rate.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
|
|
1
|
+
:root { --rate-color: var(--color-text); --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__wrap { width: 100%;}.var-rate__content { padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
|
package/es/slider/slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(
|
|
1
|
+
:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm); --slider-disabled-opacity: var(--opacity-disabled);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}
|