@varlet/ui 3.5.1 → 3.5.2

package/es/radio-group/RadioGroup.mjs

@@ -0,0 +1,163 @@
+import VarFormDetails from "../form-details/index.mjs";
+import VarRadio from "../radio/index.mjs";
+import { computed, defineComponent, nextTick, watch } from "vue";
+import { props } from "./props.mjs";
+import { useValidation, createNamespace, MaybeVNode } from "../utils/components.mjs";
+import { useRadios } from "./provide.mjs";
+import { useForm } from "../form/provide.mjs";
+import { call, preventDefault, isFunction } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
+const { name, n, classes } = createNamespace("radio-group");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_radio = _resolveComponent("var-radio");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n(`--${_ctx.direction}`)))
+        },
+        [
+          _ctx.options.length ? (_openBlock(true), _createElementBlock(
+            _Fragment,
+            { key: 0 },
+            _renderList(_ctx.options, (option) => {
+              return _openBlock(), _createBlock(_component_var_radio, {
+                key: option[_ctx.valueKey],
+                "checked-value": option[_ctx.valueKey],
+                disabled: option.disabled
+              }, {
+                default: _withCtx(({ checked }) => [
+                  _createVNode(_component_maybe_v_node, {
+                    is: _ctx.isFunction(option[_ctx.labelKey]) ? option[_ctx.labelKey](option, checked) : option[_ctx.labelKey]
+                  }, null, 8, ["is"])
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["checked-value", "disabled"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )) : _createCommentVNode("v-if", true),
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarFormDetails, VarRadio, MaybeVNode },
+  props,
+  setup(props2) {
+    const { length, radios, bindRadios } = useRadios();
+    const { bindForm } = useForm();
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const radioGroupErrorMessage = computed(() => errorMessage.value);
+    const radioGroupProvider = {
+      onToggle,
+      validate,
+      reset,
+      resetValidation,
+      errorMessage: radioGroupErrorMessage
+    };
+    watch(() => props2.modelValue, syncRadios);
+    watch(() => length.value, syncRadios);
+    call(bindForm, radioGroupProvider);
+    bindRadios(radioGroupProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    function handleKeydown(event) {
+      const focusingRadioIndex = radios.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingRadioIndex === -1) {
+        return;
+      }
+      const hasMoveableRadio = radios.some(({ moveable }, index) => index === focusingRadioIndex ? false : moveable());
+      if (!hasMoveableRadio) {
+        return;
+      }
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+        preventDefault(event);
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        moveRadio(focusingRadioIndex, "prev");
+        return;
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        moveRadio(focusingRadioIndex, "next");
+      }
+    }
+    function moveRadio(fromIndex, method) {
+      while (true) {
+        if (method === "prev") {
+          fromIndex--;
+        } else {
+          fromIndex++;
+        }
+        if (fromIndex < 0) {
+          fromIndex = radios.length - 1;
+        }
+        if (fromIndex > radios.length - 1) {
+          fromIndex = 0;
+        }
+        const radio = radios[fromIndex];
+        if (radio.moveable()) {
+          radio.move();
+          break;
+        }
+      }
+    }
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function syncRadios() {
+      return radios.forEach(({ sync }) => sync(props2.modelValue));
+    }
+    function onToggle(changedValue) {
+      call(props2["onUpdate:modelValue"], changedValue);
+      call(props2.onChange, changedValue);
+      validateWithTrigger("onChange");
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], void 0);
+      resetValidation();
+    }
+    return {
+      errorMessage,
+      n,
+      classes,
+      reset,
+      validate,
+      resetValidation,
+      isFunction
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/radio-group/index.mjs

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

package/es/radio-group/props.mjs

@@ -0,0 +1,33 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange"]
+  },
+  rules: [Array, Function, Object],
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/radio-group/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const RADIO_GROUP_BIND_RADIO_KEY = Symbol("RADIO_GROUP_BIND_RADIO_KEY");
+function useRadios() {
+  const { bindChildren, childProviders, length } = useChildren(
+    RADIO_GROUP_BIND_RADIO_KEY
+  );
+  return {
+    length,
+    radios: childProviders,
+    bindRadios: bindChildren
+  };
+}
+export {
+  RADIO_GROUP_BIND_RADIO_KEY,
+  useRadios
+};

package/es/radio-group/radioGroup.css

@@ -0,0 +1 @@
+.var-radio-group { display: flex; flex-wrap: wrap;}.var-radio-group--horizontal { flex-direction: row;}.var-radio-group--vertical { flex-direction: column;}

package/es/radio-group/style/index.mjs

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../form-details/formDetails.css'
+import '../../ripple/ripple.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../icon/icon.css'
+import '../../radio/radio.css'
+import '../radioGroup.css'
+import '../RadioGroupSfc.css'

package/es/rate/Rate.mjs

@@ -0,0 +1,203 @@
+import VarIcon from "../icon/index.mjs";
+import VarFormDetails from "../form-details/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import Hover from "../hover/index.mjs";
+import { defineComponent, nextTick, ref } from "vue";
+import { useForm } from "../form/provide.mjs";
+import { useValidation, createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { toNumber, call } from "@varlet/shared";
+import { props } from "./props.mjs";
+const { name, n } = createNamespace("rate");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["onClick"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n())
+        },
+        [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.toNumber(_ctx.count), (value) => {
+              return _withDirectives((_openBlock(), _createElementBlock("div", {
+                key: value,
+                style: _normalizeStyle(_ctx.getStyle(value)),
+                class: _normalizeClass(_ctx.getClass(value)),
+                onClick: ($event) => _ctx.handleClick(value, $event)
+              }, [
+                _createVNode(_component_var_icon, {
+                  class: _normalizeClass(_ctx.n("content-icon")),
+                  "var-rate-cover": "",
+                  transition: 0,
+                  namespace: _ctx.getCurrentState(value).namespace,
+                  name: _ctx.getCurrentState(value).name,
+                  style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.size) })
+                }, null, 8, ["class", "namespace", "name", "style"]),
+                _createVNode(_component_var_hover_overlay, {
+                  hovering: _ctx.hovering && value === _ctx.currentHoveringValue && !_ctx.disabled && !_ctx.formDisabled
+                }, null, 8, ["hovering"])
+              ], 14, _hoisted_1)), [
+                [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
+                [_directive_hover, _ctx.createHoverHandler(value), "desktop"]
+              ]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarIcon,
+    VarFormDetails,
+    VarHoverOverlay
+  },
+  directives: { Ripple, Hover },
+  props,
+  setup(props2) {
+    const currentHoveringValue = ref(-1);
+    const { form, bindForm } = useForm();
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
+    const { hovering } = useHoverOverlay();
+    let lastScore = toNumber(props2.modelValue);
+    const rateProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    call(bindForm, rateProvider);
+    function getStyle(val) {
+      const { count, gap } = props2;
+      return {
+        color: getCurrentState(val).color,
+        marginRight: val !== toNumber(count) ? toSizeUnit(gap) : 0
+      };
+    }
+    function getClass(val) {
+      const { name: name2, color } = getCurrentState(val);
+      return {
+        [n("content")]: true,
+        [n("--disabled")]: (form == null ? void 0 : form.disabled.value) || props2.disabled,
+        [n("--error")]: errorMessage.value,
+        [n("--primary")]: name2 !== props2.emptyIcon && !color
+      };
+    }
+    function getCurrentState(index) {
+      const {
+        modelValue,
+        disabled,
+        disabledColor,
+        color,
+        half,
+        emptyColor,
+        icon,
+        halfIcon,
+        emptyIcon,
+        namespace,
+        halfIconNamespace,
+        emptyIconNamespace
+      } = props2;
+      let iconColor = color;
+      if (disabled || (form == null ? void 0 : form.disabled.value)) {
+        iconColor = disabledColor;
+      }
+      if (index <= modelValue) {
+        return { color: iconColor, name: icon, namespace };
+      }
+      if (half && index <= modelValue + 0.5) {
+        return { color: iconColor, name: halfIcon, namespace: halfIconNamespace };
+      }
+      return {
+        color: disabled || (form == null ? void 0 : form.disabled.value) ? disabledColor : emptyColor,
+        name: emptyIcon,
+        namespace: emptyIconNamespace
+      };
+    }
+    function changeValue(score, event) {
+      const { half, clearable } = props2;
+      const { offsetWidth } = event.target;
+      if (half && event.offsetX <= Math.floor(offsetWidth / 2)) {
+        score -= 0.5;
+      }
+      if (lastScore === score && clearable) {
+        score = 0;
+      }
+      if (lastScore !== score) {
+        call(props2["onUpdate:modelValue"], score);
+        call(props2.onChange, score);
+      }
+      lastScore = score;
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    function validateWithTrigger() {
+      return nextTick(() => vt(["onChange"], "onChange", props2.rules, props2.modelValue));
+    }
+    function handleClick(score, event) {
+      const { readonly, disabled } = props2;
+      if (readonly || disabled || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
+        return;
+      }
+      changeValue(score, event);
+      validateWithTrigger();
+    }
+    function createHoverHandler(value) {
+      return (isHover) => {
+        currentHoveringValue.value = value;
+        hovering.value = isHover;
+      };
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], 0);
+      resetValidation();
+    }
+    return {
+      errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      hovering,
+      currentHoveringValue,
+      getStyle,
+      getClass,
+      getCurrentState,
+      handleClick,
+      createHoverHandler,
+      reset,
+      validate,
+      resetValidation,
+      toSizeUnit,
+      toNumber,
+      n
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/rate/index.mjs

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

package/es/rate/props.mjs

@@ -0,0 +1,46 @@
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { iconProps } from "../icon/index.mjs";
+const props = {
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  count: {
+    type: [String, Number],
+    default: 5
+  },
+  color: String,
+  icon: {
+    type: String,
+    default: "star"
+  },
+  emptyIcon: {
+    type: String,
+    default: "star-outline"
+  },
+  halfIcon: {
+    type: String,
+    default: "star-half-full"
+  },
+  namespace: pickProps(iconProps, "namespace"),
+  emptyIconNamespace: pickProps(iconProps, "namespace"),
+  halfIconNamespace: pickProps(iconProps, "namespace"),
+  emptyColor: String,
+  size: [String, Number],
+  gap: [String, Number],
+  half: Boolean,
+  disabled: Boolean,
+  disabledColor: String,
+  readonly: Boolean,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  clearable: Boolean,
+  rules: Array,
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/rate/rate.css

@@ -0,0 +1 @@
+:root { --rate-color: var(--color-text); --rate-size: 24px; --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 { position: relative; display: flex; padding: var(--rate-action-padding); cursor: pointer; border-radius: 50%; color: var(--rate-color); transition: color 0.25s; -webkit-tap-highlight-color: transparent;}.var-rate__content-icon[var-rate-cover] { font-size: var(--rate-size);}.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/rate/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../../form-details/formDetails.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../rate.css'
+import '../RateSfc.css'

package/es/result/Empty.mjs

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { viewBox: "-4 -4 32 32" };
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    _createElementVNode(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z"
+      },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const __sfc__ = defineComponent({});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/result/Error.mjs

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 2 20 20"
+};
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    _createElementVNode(
+      "path",
+      { d: "M19,3V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const __sfc__ = defineComponent({});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/result/Info.mjs

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 3.6 20 20"
+};
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    _createElementVNode(
+      "path",
+      { d: "M11,9H13V7H11M11,20H13V11H11V20Z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const __sfc__ = defineComponent({});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/result/Question.mjs

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-3 -3 30 30"
+};
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    _createElementVNode(
+      "path",
+      { d: "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" },
+      null,
+      -1
+      /* HOISTED */
+    )
+  ]));
+}
+const __sfc__ = defineComponent({});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};