@varlet/ui 2.9.6 → 2.10.0-alpha.1681657406626

package/es/fab/Fab.mjs

@@ -2,8 +2,8 @@ import { mergeProps as _mergeProps, isVNode as _isVNode, withDirectives as _with
 import Button from '../button/index.mjs';
 import Icon from '../icon/index.mjs';
 import { defineComponent, ref, Teleport, Transition, watch } from 'vue';
-import { useClickOutside, useVModel } from '@varlet/use';
-import { call, createNamespace, flatFragment, useTeleport } from '../utils/components.mjs';
+import { useClickOutside } from '@varlet/use';
+import { call, createNamespace, flatFragment, useTeleport, useVModel } from '../utils/components.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { toNumber } from '@varlet/shared';
 import { props } from './props.mjs';
@@ -33,9 +33,7 @@ export default defineComponent({
       slots,
       attrs
     } = _ref;
-    var isActive = useVModel(props, 'active', {
-      emit: (event, value) => call(props['onUpdate:active'], value)
-    });
+    var isActive = useVModel(props, 'active');
     var host = ref(null);
     var {
       disabled

package/es/field-decorator/FieldDecorator.mjs

@@ -0,0 +1,196 @@
+import VarIcon from '../icon/index.mjs';
+import { defineComponent, ref, watchEffect, computed } from 'vue';
+import { props } from './props.mjs';
+import { isEmpty } from '@varlet/shared';
+import { createNamespace, call } from '../utils/components.mjs';
+var {
+  n,
+  classes
+} = createNamespace('field-decorator');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+
+var _hoisted_1 = ["for"];
+
+function __render__(_ctx, _cache) {
+  var _component_var_icon = _resolveComponent("var-icon");
+
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.variant), [_ctx.size === 'small', _ctx.n('--small')], [_ctx.disabled, _ctx.n('--disabled')])),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
+    style: _normalizeStyle({
+      color: _ctx.color,
+      cursor: _ctx.cursor
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')])),
+    ref: "prependIconEl"
+  }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
+  /* CLASS */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--wrap-non-hint')]))
+  }, [_renderSlot(_ctx.$slots, "default"), _ctx.hint || _ctx.alwaysCustomPlaceholder ? (_openBlock(), _createElementBlock("label", {
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('placeholder'), _ctx.n('$--ellipsis'), [_ctx.textarea, _ctx.n('placeholder-textarea')], [_ctx.isFocus, _ctx.n('--focus')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')], [!_ctx.hint, _ctx.n('--placeholder-non-hint')], _ctx.computePlaceholderState())),
+    style: _normalizeStyle({
+      color: _ctx.color,
+      transform: _ctx.placeholderTransform
+    }),
+    for: _ctx.id
+  }, _toDisplayString(_ctx.placeholder), 15
+  /* TEXT, CLASS, STYLE, PROPS */
+  , _hoisted_1)) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
+  }, [_renderSlot(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable && !_ctx.isEmpty(_ctx.value) ? (_openBlock(), _createBlock(_component_var_icon, {
+    key: 0,
+    class: _normalizeClass(_ctx.n('clear-icon')),
+    "var-field-decorator-cover": "",
+    name: "close-circle",
+    onClick: _ctx.handleClear
+  }, null, 8
+  /* PROPS */
+  , ["class", "onClick"])) : _createCommentVNode("v-if", true)])], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  ), _ctx.line ? (_openBlock(), _createElementBlock(_Fragment, {
+    key: 0
+  }, [_ctx.variant === 'outlined' ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.isFocus, _ctx.n('--line-focus')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')]))
+  }, [!(_ctx.formDisabled || _ctx.disabled) ? (_openBlock(), _createElementBlock(_Fragment, {
+    key: 0
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('line-start'), [_ctx.errorMessage, _ctx.n('--line-error')])),
+    style: _normalizeStyle({
+      borderColor: _ctx.color
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('line-notch'), [_ctx.hint && (!_ctx.isEmpty(_ctx.value) || _ctx.isFocus), _ctx.n('line-notch--hint')], [_ctx.errorMessage, _ctx.n('--line-error')])),
+    style: _normalizeStyle({
+      borderColor: _ctx.color
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('line-placeholder'), _ctx.n('$--ellipsis')))
+  }, _toDisplayString(_ctx.placeholder), 3
+  /* TEXT, CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('line-end'), [_ctx.errorMessage, _ctx.n('--line-error')])),
+    style: _normalizeStyle({
+      borderColor: _ctx.color
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 64
+  /* STABLE_FRAGMENT */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  )) : (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
+    style: _normalizeStyle({
+      background: !_ctx.errorMessage ? _ctx.blurColor : undefined
+    })
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('dot'), [_ctx.isFocus, _ctx.n('--line-focus')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
+    style: _normalizeStyle({
+      background: !_ctx.errorMessage ? _ctx.focusColor : undefined
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 6
+  /* CLASS, STYLE */
+  ))], 2112
+  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
+  );
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarFieldDecorator',
+  components: {
+    VarIcon
+  },
+  props,
+
+  setup(props) {
+    var prependIconEl = ref(null);
+    var placeholderTransform = ref('');
+    var color = computed(() => !props.errorMessage ? props.isFocus ? props.focusColor : props.blurColor : undefined);
+
+    var computePlaceholderState = () => {
+      var {
+        hint,
+        value,
+        isFocus,
+        composing
+      } = props;
+
+      if (!hint && (!isEmpty(value) || composing)) {
+        return n('--placeholder-hidden');
+      }
+
+      if (hint && (!isEmpty(value) || isFocus)) {
+        return n('--placeholder-hint');
+      }
+    };
+
+    var handleClear = e => {
+      call(props.onClear, e);
+    };
+
+    var handleClick = e => {
+      call(props.onClick, e);
+    };
+
+    watchEffect(() => {
+      var {
+        hint,
+        value,
+        isFocus,
+        variant
+      } = props;
+
+      if (!prependIconEl.value) {
+        return;
+      }
+
+      if (hint && (!isEmpty(value) || isFocus)) {
+        var _window$getComputedSt;
+
+        var prependIconWidth = ((_window$getComputedSt = window.getComputedStyle(prependIconEl.value)) == null ? void 0 : _window$getComputedSt.width) || 0;
+        placeholderTransform.value = "translate(-" + prependIconWidth + ", " + (variant === 'outlined' ? '-50%' : 0) + ")";
+        return;
+      }
+
+      placeholderTransform.value = '';
+    });
+    return {
+      prependIconEl,
+      placeholderTransform,
+      color,
+      computePlaceholderState,
+      n,
+      classes,
+      isEmpty,
+      handleClear,
+      handleClick
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

package/es/field-decorator/fieldDecorator.css

@@ -0,0 +1 @@
+:root { --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 20px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 20px 0 4px; --field-decorator-standard-small-padding-top: 16px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 16px 0 4px; --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px;}.var-field-decorator { width: 100%; color: var(--field-decorator-text-color); position: relative;}.var-field-decorator__controller { width: 100%; display: flex; position: relative;}.var-field-decorator__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { max-width: 100%; position: absolute; font-size: var(--field-decorator-placeholder-size); line-height: 1em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform: translate(0, 0); vertical-align: middle;}.var-field-decorator__clear-icon[var-field-decorator-cover] { display: flex; font-size: 15px; margin-left: 4px; cursor: pointer;}.var-field-decorator--non-hint { padding-top: 0;}.var-field-decorator--placeholder-hint { font-size: 0.75em; top: 0 !important;}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__wrap { padding: var(--field-decorator-standard-normal-padding-top) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator--wrap-non-hint { padding: 4px 0;}.var-field-decorator--standard .var-field-decorator__placeholder { left: 0; transform-origin: left; transition: top 0.3s, transform 0.3s, font-size 0.3s, color 0.25s; top: calc(var(--field-decorator-standard-normal-padding-top) + (100% - var(--field-decorator-standard-normal-padding-top) - var(--field-decorator-standard-normal-padding-bottom) - var(--field-decorator-placeholder-size)) / 2);}.var-field-decorator--standard .var-field-decorator__placeholder-textarea { top: var(--field-decorator-standard-normal-padding-top);}.var-field-decorator--standard .var-field-decorator--placeholder-hint { transform: translate(0, 0);}.var-field-decorator--standard .var-field-decorator--placeholder-non-hint { top: 50%; transform: translate(0, -50%);}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__wrap { padding: var(--field-decorator-outlined-normal-padding-top) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { transform-origin: left; transition: top 0.3s, transform 0.3s, font-size 0.3s, margin 0.3s, color 0.25s; top: calc(var(--field-decorator-outlined-normal-padding-top) + (100% - var(--field-decorator-outlined-normal-padding-top) - var(--field-decorator-outlined-normal-padding-bottom) - var(--field-decorator-placeholder-size)) / 2);}.var-field-decorator--outlined .var-field-decorator__placeholder-textarea { top: var(--field-decorator-outlined-normal-padding-top);}.var-field-decorator--outlined .var-field-decorator--placeholder-hint { transform: translateY(-50%);}.var-field-decorator--outlined .var-field-decorator__line { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; pointer-events: none;}.var-field-decorator--outlined .var-field-decorator__line-start { flex: 0 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space)); height: 100%; border-radius: 4px 0 0 4px; border: 0 solid var(--field-decorator-blur-color); border-top-width: var(--field-decorator-line-size); border-bottom-width: var(--field-decorator-line-size); border-inline-start-width: var(--field-decorator-line-size); transition: border 0.1s;}.var-field-decorator--outlined .var-field-decorator__line-notch { max-width: calc(100% - (var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space)) - (var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space))); height: 100%; font: inherit; border: 0 solid var(--field-decorator-blur-color); border-top-width: var(--field-decorator-line-size); border-bottom-width: var(--field-decorator-line-size); transition: border 0.1s;}.var-field-decorator--outlined .var-field-decorator__line-notch--hint { border-top-width: 0 !important;}.var-field-decorator--outlined .var-field-decorator__line-placeholder { max-width: 100%; visibility: hidden; font-size: 0.75em; margin: 0 var(--field-decorator-outlined-normal-placeholder-space);}.var-field-decorator--outlined .var-field-decorator__line-end { flex: 1; height: 100%; border-radius: 0 4px 4px 0; border: 0 solid var(--field-decorator-blur-color); border-top-width: var(--field-decorator-line-size); border-bottom-width: var(--field-decorator-line-size); border-inline-end-width: var(--field-decorator-line-size); transition: border 0.1s;}.var-field-decorator--outlined .var-field-decorator--line-focus .var-field-decorator__line-start { border: 0 solid var(--field-decorator-focus-color); border-top-width: var(--field-decorator-line-focus-size); border-bottom-width: var(--field-decorator-line-focus-size); border-inline-start-width: var(--field-decorator-line-focus-size);}.var-field-decorator--outlined .var-field-decorator--line-focus .var-field-decorator__line-notch { border: 0 solid var(--field-decorator-focus-color); border-top-width: var(--field-decorator-line-focus-size); border-bottom-width: var(--field-decorator-line-focus-size);}.var-field-decorator--outlined .var-field-decorator--line-focus .var-field-decorator__line-end { border: 0 solid var(--field-decorator-focus-color); border-top-width: var(--field-decorator-line-focus-size); border-bottom-width: var(--field-decorator-line-focus-size); border-inline-end-width: var(--field-decorator-line-focus-size);}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__wrap { padding: var(--field-decorator-standard-small-padding-top) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { top: calc(var(--field-decorator-standard-small-padding-top) + (100% - var(--field-decorator-standard-small-padding-top) - var(--field-decorator-standard-small-padding-bottom) - var(--field-decorator-placeholder-size)) / 2);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder-textarea { top: var(--field-decorator-standard-small-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__wrap { padding: var(--field-decorator-outlined-small-padding-top) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { top: calc(var(--field-decorator-outlined-small-padding-top) + (100% - var(--field-decorator-outlined-small-padding-top) - var(--field-decorator-outlined-small-padding-bottom) - var(--field-decorator-placeholder-size)) / 2);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder-textarea { top: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line-start { flex: 0 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line-notch { max-width: calc(100% - (var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space)) - (var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space)));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line-placeholder { margin: 0 var(--field-decorator-outlined-small-placeholder-space);}

package/es/field-decorator/props.mjs

@@ -0,0 +1,81 @@
+import { defineListenerProp } from '../utils/components.mjs';
+export function sizeValidator(size) {
+  return ['small', 'normal'].includes(size);
+}
+export function variantValidator(variant) {
+  return ['outlined', 'standard'].includes(variant);
+}
+export var props = {
+  value: {
+    type: null,
+    required: true
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  isFocus: {
+    type: Boolean
+  },
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator
+  },
+  variant: {
+    type: String,
+    default: 'standard',
+    validator: variantValidator
+  },
+  placeholder: {
+    type: String
+  },
+  line: {
+    type: Boolean,
+    default: true
+  },
+  hint: {
+    type: Boolean,
+    default: true
+  },
+  textColor: {
+    type: String
+  },
+  focusColor: {
+    type: String
+  },
+  blurColor: {
+    type: String
+  },
+  errorMessage: {
+    type: String
+  },
+  formDisabled: {
+    type: Boolean
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  textarea: {
+    type: Boolean,
+    default: false
+  },
+  cursor: {
+    type: String
+  },
+  composing: {
+    type: Boolean,
+    default: false
+  },
+  alwaysCustomPlaceholder: {
+    type: Boolean,
+    default: true
+  },
+  onClick: defineListenerProp(),
+  onClear: defineListenerProp()
+};

package/es/field-decorator/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../fieldDecorator.css'
+import '../FieldDecoratorSfc.css'

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.9.6'
+const version = '2.10.0-alpha.1681657406626'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.9.6'
+const version = '2.10.0-alpha.1681657406626'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)