@varlet/ui 2.17.0-alpha.1695910724155 → 2.17.1

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.
@@ -1 +1 @@
1
- :root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
1
+ :root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
@@ -250,7 +250,7 @@ import './tooltip/style/index.mjs'
250
250
  import './uploader/style/index.mjs'
251
251
  import './watermark/style/index.mjs'
252
252
 
253
- const version = '2.17.0-alpha.1695910724155'
253
+ const version = '2.17.1'
254
254
 
255
255
  function install(app) {
256
256
  ActionSheet.install && app.use(ActionSheet)
package/es/index.mjs CHANGED
@@ -166,7 +166,7 @@ export * from './tooltip/index.mjs'
166
166
  export * from './uploader/index.mjs'
167
167
  export * from './watermark/index.mjs'
168
168
 
169
- const version = '2.17.0-alpha.1695910724155'
169
+ const version = '2.17.1'
170
170
 
171
171
  function install(app) {
172
172
  ActionSheet.install && app.use(ActionSheet)
@@ -7,7 +7,7 @@ import { useSelect } from "./provide.mjs";
7
7
  import { createNamespace } from "../utils/components.mjs";
8
8
  import { props } from "./props.mjs";
9
9
  const { name, n, classes } = createNamespace("option");
10
- import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
10
+ import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
11
11
  function __render__(_ctx, _cache) {
12
12
  const _component_var_checkbox = _resolveComponent("var-checkbox");
13
13
  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -16,7 +16,7 @@ function __render__(_ctx, _cache) {
16
16
  return _withDirectives((_openBlock(), _createElementBlock(
17
17
  "div",
18
18
  {
19
- class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")])),
19
+ class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
20
20
  style: _normalizeStyle({
21
21
  color: _ctx.optionSelected ? _ctx.focusColor : void 0
22
22
  }),
@@ -38,36 +38,33 @@ function __render__(_ctx, _cache) {
38
38
  _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
39
39
  key: 0,
40
40
  ref: "checkbox",
41
- "checked-color": _ctx.focusColor,
42
41
  modelValue: _ctx.optionSelected,
43
42
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
43
+ "checked-color": _ctx.focusColor,
44
+ disabled: _ctx.disabled,
44
45
  onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
45
46
  }, ["stop"])),
46
47
  onChange: _ctx.handleSelect
47
- }, null, 8, ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true),
48
- _createElementVNode(
49
- "div",
50
- {
51
- class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
52
- },
53
- [
54
- _renderSlot(_ctx.$slots, "default", {}, () => [
55
- _createTextVNode(
56
- _toDisplayString(_ctx.label),
57
- 1
58
- /* TEXT */
59
- )
60
- ])
61
- ],
62
- 2
63
- /* CLASS */
64
- ),
65
- _createVNode(_component_var_hover_overlay, { hovering: _ctx.hovering }, null, 8, ["hovering"])
48
+ }, null, 8, ["modelValue", "checked-color", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
49
+ _renderSlot(_ctx.$slots, "default", {}, () => [
50
+ _createElementVNode(
51
+ "div",
52
+ {
53
+ class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
54
+ },
55
+ _toDisplayString(_ctx.label),
56
+ 3
57
+ /* TEXT, CLASS */
58
+ )
59
+ ]),
60
+ _createVNode(_component_var_hover_overlay, {
61
+ hovering: _ctx.hovering && !_ctx.disabled
62
+ }, null, 8, ["hovering"])
66
63
  ],
67
64
  6
68
65
  /* CLASS, STYLE */
69
66
  )), [
70
- [_directive_ripple],
67
+ [_directive_ripple, { disabled: _ctx.disabled }],
71
68
  [_directive_hover, _ctx.handleHovering, "desktop"]
72
69
  ]);
73
70
  }
@@ -96,24 +93,27 @@ const __sfc__ = defineComponent({
96
93
  watch([() => props2.label, () => props2.value], computeLabel);
97
94
  bindSelect(optionProvider);
98
95
  function handleClick() {
96
+ if (props2.disabled) {
97
+ return;
98
+ }
99
+ handleSelect();
100
+ }
101
+ function handleSelect() {
99
102
  if (multiple.value) {
100
103
  optionSelected.value = !optionSelected.value;
101
104
  }
102
105
  onSelect(optionProvider);
103
106
  }
104
- function handleSelect() {
105
- return onSelect(optionProvider);
106
- }
107
107
  function sync(checked) {
108
108
  optionSelected.value = checked;
109
109
  }
110
110
  return {
111
- n,
112
- classes,
113
111
  optionSelected,
114
112
  multiple,
115
113
  focusColor,
116
114
  hovering,
115
+ n,
116
+ classes,
117
117
  handleHovering,
118
118
  handleClick,
119
119
  handleSelect
@@ -1 +1 @@
1
- :root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --options-text-color: #555;}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--options-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center; font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}
1
+ :root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center; font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}
@@ -1,6 +1,7 @@
1
1
  const props = {
2
2
  label: {},
3
- value: {}
3
+ value: {},
4
+ disabled: Boolean
4
5
  };
5
6
  export {
6
7
  props
@@ -1 +1 @@
1
- :root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
1
+ :root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
@@ -1,8 +1,8 @@
1
1
  import '../../styles/common.css'
2
+ import '../SnackbarSfc.css'
2
3
  import '../../styles/elevation.css'
3
4
  import '../../loading/loading.css'
4
5
  import '../../button/button.css'
5
6
  import '../../icon/icon.css'
6
7
  import '../snackbar.css'
7
8
  import '../coreSfc.css'
8
- import '../SnackbarSfc.css'