@varlet/ui 3.5.1 → 3.5.2

package/es/auto-complete/AutoComplete.mjs

@@ -0,0 +1,360 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import VarInput from "../input/index.mjs";
+import VarMenuSelect from "../menu-select/index.mjs";
+import VarMenuOption from "../menu-option/index.mjs";
+import VarFormDetails from "../form-details/index.mjs";
+import { computed, defineComponent, nextTick, ref, watch } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, useValidation } from "../utils/components.mjs";
+import { useClickOutside, useEventListener, useVModel } from "@varlet/use";
+import { call, isEmpty, preventDefault, raf, toNumber } from "@varlet/shared";
+import { useForm } from "../form/provide.mjs";
+const { name, n } = createNamespace("auto-complete");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["tabindex"];
+function __render__(_ctx, _cache) {
+  const _component_var_input = _resolveComponent("var-input");
+  const _component_var_menu_option = _resolveComponent("var-menu-option");
+  const _component_var_menu_select = _resolveComponent("var-menu-select");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock("div", {
+    ref: "root",
+    class: _normalizeClass(_ctx.n()),
+    tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+    onFocusin: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args)),
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    _createVNode(_component_var_menu_select, {
+      "same-width": "",
+      "auto-complete-cover": "",
+      scrollable: "",
+      trigger: "manual",
+      placement: "bottom",
+      disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
+      class: _normalizeClass(_ctx.n("menu-select")),
+      "popover-class": _ctx.variant === "standard" ? _ctx.n("--standard-menu-margin") : void 0,
+      show: _ctx.isShowMenuSelect,
+      "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.isShowMenuSelect = $event),
+      "onUpdate:modelValue": _ctx.handleAutoComplete,
+      onKeyEscape: _ctx.handleKeyEscape
+    }, {
+      options: _withCtx(() => [
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("options"))
+          },
+          [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.viewOptions, (option) => {
+                return _openBlock(), _createBlock(_component_var_menu_option, {
+                  key: option[_ctx.valueKey],
+                  label: option[_ctx.labelKey],
+                  value: option[_ctx.valueKey],
+                  option,
+                  disabled: option.disabled
+                }, null, 8, ["label", "value", "option", "disabled"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        )
+      ]),
+      default: _withCtx(() => [
+        _createVNode(_component_var_input, _mergeProps({ ref: "input" }, {
+          maxlength: _ctx.maxlength,
+          enterkeyhint: _ctx.enterkeyhint,
+          placeholder: _ctx.placeholder,
+          size: _ctx.size,
+          variant: _ctx.variant,
+          line: _ctx.line,
+          hint: _ctx.hint,
+          textColor: _ctx.textColor,
+          focusColor: _ctx.focusColor,
+          blurColor: _ctx.blurColor,
+          readonly: _ctx.readonly,
+          disabled: _ctx.disabled,
+          clearable: _ctx.clearable
+        }, {
+          autocomplete: "off",
+          "is-force-focusing-effect": _ctx.isFocusing,
+          "is-force-error-effect": !!_ctx.errorMessage,
+          "is-show-form-details": false,
+          onInput: _ctx.handleInput,
+          onBlur: _ctx.handleBlur,
+          onClear: _ctx.handleClear,
+          onChange: _ctx.handleChange,
+          modelValue: _ctx.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event)
+        }), _createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          _ctx.$slots["prepend-icon"] ? {
+            name: "prepend-icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "prepend-icon")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots["append-icon"] ? {
+            name: "append-icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "append-icon")
+            ]),
+            key: "1"
+          } : void 0,
+          _ctx.$slots["clear-icon"] ? {
+            name: "clear-icon",
+            fn: _withCtx(({ clear }) => [
+              _renderSlot(_ctx.$slots, "clear-icon", { clear })
+            ]),
+            key: "2"
+          } : void 0,
+          _ctx.$slots["extra-message"] ? {
+            name: "extra-message",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "extra-message")
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1040, ["is-force-focusing-effect", "is-force-error-effect", "onInput", "onBlur", "onClear", "onChange", "modelValue"])
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["disabled", "class", "popover-class", "show", "onUpdate:modelValue", "onKeyEscape"]),
+    _createVNode(_component_var_form_details, {
+      "error-message": _ctx.errorMessage,
+      "extra-message": _ctx.maxlengthText
+    }, null, 8, ["error-message", "extra-message"])
+  ], 42, _hoisted_1);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarInput,
+    VarMenuSelect,
+    VarMenuOption,
+    VarFormDetails
+  },
+  props,
+  setup(props2) {
+    const root = ref();
+    const input = ref();
+    const isFocusing = ref(false);
+    const value = useVModel(props2, "modelValue");
+    const viewOptions = ref([]);
+    const isShowMenuSelect = ref(false);
+    const maxlengthText = computed(() => {
+      const { maxlength } = props2;
+      if (!maxlength) {
+        return "";
+      }
+      if (isEmpty(value.value)) {
+        return `0 / ${maxlength}`;
+      }
+      return `${String(value.value).length}/${maxlength}`;
+    });
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const { bindForm, form } = useForm();
+    let clearing = false;
+    const autoCompleteProvider = {
+      reset,
+      resetValidation,
+      validate
+    };
+    useClickOutside(
+      () => root.value,
+      "click",
+      () => {
+        if (clearing) {
+          clearing = false;
+          return;
+        }
+        blur();
+      }
+    );
+    watch(() => [props2.options, isFocusing.value], changeMenuState);
+    call(bindForm, autoCompleteProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    function reset() {
+      call(props2["onUpdate:modelValue"], "");
+      resetValidation();
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    function focus() {
+      if (isFocusing.value || props2.disabled || (form == null ? void 0 : form.disabled.value)) {
+        return;
+      }
+      isFocusing.value = true;
+      input.value.focus();
+      call(props2.onFocus);
+      validateWithTrigger("onFocus");
+    }
+    function blur() {
+      if (!isFocusing.value) {
+        return;
+      }
+      isFocusing.value = false;
+      isShowMenuSelect.value = false;
+      input.value.blur();
+      call(props2.onBlur);
+      validateWithTrigger("onBlur");
+    }
+    function handleBlur() {
+      if (isShowMenuSelect.value) {
+        return;
+      }
+      blur();
+    }
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function handleKeydown(event) {
+      return __async(this, null, function* () {
+        var _a;
+        if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || props2.disabled || props2.readonly || !isFocusing.value || !isShowMenuSelect.value) {
+          return;
+        }
+        const { key } = event;
+        if (key === "Tab") {
+          preventDefault(event);
+          root.value.focus();
+          isShowMenuSelect.value = false;
+          return;
+        }
+        if (!["ArrowUp", "ArrowDown", "Enter"].includes(key)) {
+          input.value.focus();
+          return;
+        }
+        if (key === "Enter") {
+          yield raf();
+          (_a = input.value) == null ? void 0 : _a.focus();
+        }
+      });
+    }
+    function changeMenuState() {
+      return __async(this, null, function* () {
+        if (isFocusing.value) {
+          isShowMenuSelect.value = getShowMenuSelect(value.value);
+        }
+        if (isShowMenuSelect.value) {
+          viewOptions.value = props2.options;
+        }
+      });
+    }
+    function handleInput(newValue, event) {
+      return __async(this, null, function* () {
+        changeMenuState();
+        call(props2.onInput, newValue, event);
+        validateWithTrigger("onInput");
+      });
+    }
+    function handleClear() {
+      clearing = true;
+      changeMenuState();
+      call(props2.onClear, value.value);
+      validateWithTrigger("onClear");
+    }
+    function handleClick(event) {
+      if (props2.disabled || (form == null ? void 0 : form.disabled.value)) {
+        return;
+      }
+      call(props2.onClick, event);
+      validateWithTrigger("onClick");
+    }
+    function handleChange(newValue) {
+      call(props2.onChange, newValue);
+      validateWithTrigger("onChange");
+    }
+    function handleAutoComplete(newValue) {
+      return __async(this, null, function* () {
+        var _a;
+        if (props2.maxlength != null) {
+          newValue = newValue.slice(0, toNumber(props2.maxlength));
+        }
+        if (newValue !== value.value) {
+          value.value = newValue;
+          call(props2.onChange, newValue);
+          validateWithTrigger("onChange");
+        }
+        yield raf();
+        (_a = input.value) == null ? void 0 : _a.focus();
+      });
+    }
+    function handleKeyEscape() {
+      input.value.focus();
+    }
+    function getShowMenuSelect(newValue) {
+      if (props2.disabled || props2.readonly || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
+        return false;
+      }
+      return props2.options.length > 0 && (props2.getShow != null ? props2.getShow(newValue) : newValue.length > 0);
+    }
+    return {
+      root,
+      input,
+      value,
+      isShowMenuSelect,
+      viewOptions,
+      isFocusing,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      errorMessage,
+      maxlengthText,
+      n,
+      handleInput,
+      handleClear,
+      handleClick,
+      handleChange,
+      handleBlur,
+      handleKeyEscape,
+      handleAutoComplete,
+      reset,
+      validate,
+      resetValidation,
+      blur,
+      focus
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/auto-complete/autoComplete.css

@@ -0,0 +1 @@
+:root { --auto-complete-options-padding: 6px 0;}.var-auto-complete { outline: none;}.var-auto-complete__menu-select[auto-complete-cover] { display: block;}.var-auto-complete__options { padding: var(--auto-complete-options-padding);}.var-auto-complete--standard-menu-margin { margin-top: var(--field-decorator-line-focus-size) !important;}

package/es/auto-complete/index.mjs

@@ -0,0 +1,11 @@
+import AutoComplete from "./AutoComplete.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as autoCompleteProps } from "./props.mjs";
+withInstall(AutoComplete);
+withPropsDefaultsSetter(AutoComplete, autoCompleteProps);
+const _AutoCompleteComponent = AutoComplete;
+var stdin_default = AutoComplete;
+export {
+  _AutoCompleteComponent,
+  stdin_default as default
+};

package/es/auto-complete/props.mjs

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { inputProps } from "../input/index.mjs";
+const props = __spreadValues({
+  modelValue: String,
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  maxlength: [String, Number],
+  readonly: Boolean,
+  disabled: Boolean,
+  validateTrigger: {
+    type: Array,
+    default: () => ["onInput", "onClear", "onChange"]
+  },
+  getShow: Function,
+  rules: [Array, Function, Object],
+  onFocus: defineListenerProp(),
+  onBlur: defineListenerProp(),
+  onInput: defineListenerProp(),
+  onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
+  onClick: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(inputProps, [
+  "size",
+  "variant",
+  "placeholder",
+  "enterkeyhint",
+  "line",
+  "hint",
+  "textColor",
+  "focusColor",
+  "blurColor",
+  "clearable"
+]));
+export {
+  props
+};

package/es/auto-complete/style/index.mjs

@@ -0,0 +1,11 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../icon/icon.css'
+import '../../field-decorator/fieldDecorator.css'
+import '../../form-details/formDetails.css'
+import '../../input/input.css'
+import '../../menu/menu.css'
+import '../../menu-option/menuOption.css'
+import '../../menu-select/menuSelect.css'
+import '../autoComplete.css'
+import '../AutoCompleteSfc.css'

package/es/avatar/Avatar.mjs

@@ -0,0 +1,143 @@
+import Lazy from "../lazy/index.mjs";
+import { defineComponent, ref, onUpdated } from "vue";
+import { props } from "./props.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+import { onSmartMounted } from "@varlet/use";
+const isInternalSize = (size) => ["mini", "small", "normal", "large"].includes(size);
+const { name, n, classes } = createNamespace("avatar");
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, renderSlot as _renderSlot } from "vue";
+const _hoisted_1 = ["src", "alt", "lazy-loading", "lazy-error"];
+const _hoisted_2 = ["src", "alt"];
+function __render__(_ctx, _cache) {
+  const _directive_lazy = _resolveDirective("lazy");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "avatarElement",
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          _ctx.n("$--box"),
+          [_ctx.isInternalSize(_ctx.size), _ctx.n(`--${_ctx.size}`)],
+          [_ctx.round, _ctx.n("--round")],
+          [_ctx.bordered, _ctx.n("--bordered")],
+          [_ctx.hoverable, _ctx.n("--hoverable")]
+        )
+      ),
+      style: _normalizeStyle({
+        width: !_ctx.isInternalSize(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : void 0,
+        height: !_ctx.isInternalSize(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : void 0,
+        borderColor: _ctx.borderColor,
+        backgroundColor: _ctx.color
+      }),
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _ctx.src ? (_openBlock(), _createElementBlock(
+        _Fragment,
+        { key: 0 },
+        [
+          _ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
+            key: 0,
+            role: "img",
+            class: _normalizeClass(_ctx.n("image")),
+            src: _ctx.src,
+            alt: _ctx.alt,
+            style: _normalizeStyle({ objectFit: _ctx.fit }),
+            "lazy-loading": _ctx.loading,
+            "lazy-error": _ctx.error,
+            onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args))
+          }, null, 46, _hoisted_1)), [
+            [_directive_lazy, _ctx.src]
+          ]) : (_openBlock(), _createElementBlock("img", {
+            key: 1,
+            role: "img",
+            class: _normalizeClass(_ctx.n("image")),
+            src: _ctx.src,
+            alt: _ctx.alt,
+            style: _normalizeStyle({ objectFit: _ctx.fit }),
+            onLoad: _cache[1] || (_cache[1] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
+            onError: _cache[2] || (_cache[2] = (...args) => _ctx.handleError && _ctx.handleError(...args))
+          }, null, 46, _hoisted_2))
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 1,
+          ref: "textElement",
+          class: _normalizeClass(_ctx.n("text")),
+          style: _normalizeStyle({ transform: `scale(${_ctx.scale})` })
+        },
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        6
+        /* CLASS, STYLE */
+      ))
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Lazy },
+  props,
+  setup(props2) {
+    const avatarElement = ref(null);
+    const textElement = ref(null);
+    const scale = ref(1);
+    onSmartMounted(getScale);
+    onUpdated(getScale);
+    function getScale() {
+      if (!avatarElement.value || !textElement.value) {
+        scale.value = 1;
+        return;
+      }
+      const avatarElementWidth = avatarElement.value.offsetWidth;
+      const textElementWidth = textElement.value.offsetWidth;
+      if (avatarElementWidth > textElementWidth) {
+        scale.value = 1;
+      } else {
+        scale.value = avatarElementWidth / textElementWidth;
+      }
+    }
+    function handleLoad(e) {
+      const el = e.currentTarget;
+      const { lazy, onLoad, onError } = props2;
+      if (lazy) {
+        el._lazy.state === "success" && call(onLoad, e);
+        el._lazy.state === "error" && call(onError, e);
+      } else {
+        call(onLoad, e);
+      }
+    }
+    function handleError(e) {
+      call(props2.onError, e);
+    }
+    function handleClick(e) {
+      call(props2.onClick, e);
+    }
+    return {
+      avatarElement,
+      textElement,
+      scale,
+      n,
+      classes,
+      isInternalSize,
+      toSizeUnit,
+      handleLoad,
+      handleError,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/avatar/avatar.css

@@ -0,0 +1 @@
+:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s; -webkit-tap-highlight-color: transparent;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}

package/es/avatar/index.mjs

@@ -0,0 +1,12 @@
+import Avatar from "./Avatar.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as avatarProps } from "./props.mjs";
+withInstall(Avatar);
+withPropsDefaultsSetter(Avatar, avatarProps);
+const _AvatarComponent = Avatar;
+var stdin_default = Avatar;
+export {
+  _AvatarComponent,
+  avatarProps,
+  stdin_default as default
+};

package/es/avatar/props.mjs

@@ -0,0 +1,30 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  round: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: [String, Number],
+    default: "normal"
+  },
+  alt: String,
+  color: String,
+  src: String,
+  fit: {
+    type: String,
+    default: "cover"
+  },
+  bordered: Boolean,
+  borderColor: String,
+  loading: String,
+  error: String,
+  lazy: Boolean,
+  hoverable: Boolean,
+  onClick: defineListenerProp(),
+  onLoad: defineListenerProp(),
+  onError: defineListenerProp()
+};
+export {
+  props
+};

package/es/avatar/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../avatar.css'
+import '../AvatarSfc.css'