@wfrog/vc/es/components/choice/index.mjs

`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。

import './index.css'
// vue-script:D:\project\_my\vc\src\components\choice\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { unref as _unref, normalizeClass as _normalizeClass, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, isRef as _isRef, mergeProps as _mergeProps } from "vue";
import { ElCheckboxButton, ElCheckboxGroup, ElRadioButton, ElRadioGroup, vLoading } from "element-plus";

// src/components/choice/useChoice.ts
import { computed, onMounted, ref } from "vue";
import { storage } from "@wfrog/utils";
var preProps = {
  name: { type: String, default: "" },
  multiple: { type: Boolean, default: false },
  modelValue: { type: [String, Number, Boolean, Array], default: "", required: true },
  options: { type: [Array, Function], default: () => [] },
  props: { type: Object, default: () => {
  } },
  expires: { type: [Date, Number], default: 60 * 60 * 2 },
  loadingText: { type: String, default: "\u52A0\u8F7D\u4E2D" }
};
var preEmit = ["update:modelValue", "init"];
var useChoice = ({ props, emits }, storagPrefix) => {
  const loading = ref(false);
  const asyncOptions = ref();
  const myValue = computed({
    get: () => {
      return loading.value ? props.loadingText : props.modelValue;
    },
    set: (val) => emits("update:modelValue", val)
  });
  const myProps = computed(() => ({ label: "label", value: "value", key: "value", ...props.props }));
  const myOptions = computed(() => {
    const options = Array.isArray(props.options) ? props.options : asyncOptions.value || [];
    const [first] = options;
    if (typeof first === "string" || typeof first === "number") {
      return options.map((item) => ({ [myProps.value.label]: item, [myProps.value.value]: item }));
    }
    return options;
  });
  const init = async () => {
    if (Array.isArray(props.options)) {
      return;
    }
    const name = `${storagPrefix}-${props.name}`;
    if (props.name) {
      const val = storage.get(name);
      if (val) {
        asyncOptions.value = val;
        setTimeout(() => {
          emits("init", val);
        }, 0);
        return;
      }
    }
    loading.value = true;
    try {
      asyncOptions.value = await props.options();
      props.name && storage.set(name, asyncOptions.value, { expires: props.expires });
      setTimeout(() => {
        emits("init", asyncOptions.value);
      }, 0);
    } finally {
      loading.value = false;
    }
  };
  onMounted(() => init());
  return { loading, myOptions, myProps, myValue, init };
};
var useChoice_default = useChoice;

// vue-script:D:\project\_my\vc\src\components\choice\index.vue?type=script
var choice_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: preProps,
  emits: preEmit,
  setup(__props, { emit: emits }) {
    const props = __props;
    const { loading, myOptions, myProps, myValue } = useChoice_default({ props, emits }, "choice");
    return (_ctx, _cache) => {
      return _unref(loading) ? _withDirectives((_openBlock(), _createElementBlock("span", {
        key: 0,
        class: _normalizeClass(_ctx.$style.loading)
      }, null, 2)), [
        [_unref(vLoading), _unref(loading)]
      ]) : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
        !props.multiple ? (_openBlock(), _createBlock(_unref(ElRadioGroup), _mergeProps({
          key: 0,
          modelValue: _unref(myValue),
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef(myValue) ? myValue.value = $event : null)
        }, _ctx.$attrs, {
          class: _ctx.$style.radio
        }), {
          default: _withCtx(() => [
            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(myOptions), (item) => {
              return _openBlock(), _createBlock(_unref(ElRadioButton), {
                key: item[_unref(myProps).key] || item[_unref(myProps).label],
                label: item[_unref(myProps).value]
              }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(item[_unref(myProps).label]), 1)
                ]),
                _: 2
              }, 1032, ["label"]);
            }), 128))
          ]),
          _: 1
        }, 16, ["modelValue", "class"])) : (_openBlock(), _createBlock(_unref(ElCheckboxGroup), _mergeProps({
          key: 1,
          modelValue: _unref(myValue),
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _isRef(myValue) ? myValue.value = $event : null)
        }, _ctx.$attrs), {
          default: _withCtx(() => [
            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(myOptions), (item) => {
              return _openBlock(), _createBlock(_unref(ElCheckboxButton), {
                key: item[_unref(myProps).key] || item[_unref(myProps).label],
                label: item[_unref(myProps).value]
              }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(item[_unref(myProps).label]), 1)
                ]),
                _: 2
              }, 1032, ["label"]);
            }), 128))
          ]),
          _: 1
        }, 16, ["modelValue"]))
      ], 64));
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\choice\index.vue?type=style&index=0&isModule=true&isNameImport=true
var choice_default2 = { loading: "_loading_b67q3_1", radio: "_radio_b67q3_6" };

// src/components/choice/index.vue
var cssModules = {};
choice_default.__cssModules = cssModules = {};
cssModules["$style"] = choice_default2;
var choice_default3 = choice_default;
export {
  choice_default3 as default
};