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

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

import './index.css'
// vue-script:D:\project\_my\vc\src\components\select\index.vue?type=script
import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, isRef as _isRef, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
import { computed as computed2, useCssModule } from "vue";
import { ElOption, ElSelect } 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\select\index.vue?type=script
var select_default = /* @__PURE__ */ _defineComponent({
  __name: "index",
  props: {
    ...preProps,
    block: { type: Boolean, default: false },
    width: { type: String }
  },
  emits: preEmit,
  setup(__props, { emit: emits }) {
    const props = __props;
    _useCssVars((_ctx) => ({
      "6712b8ad-myWidth": _unref(myWidth)
    }));
    const { loading, myOptions, myProps, myValue } = useChoice_default({ props, emits }, "async-picker");
    const $style = useCssModule();
    const className = computed2(() => ({
      [$style.select]: true,
      [$style.block]: props.block
    }));
    const myWidth = computed2(() => {
      return props.width || (props.block ? "100%" : "214px");
    });
    return (_ctx, _cache) => {
      return _openBlock(), _createBlock(_unref(ElSelect), _mergeProps({
        modelValue: _unref(myValue),
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef(myValue) ? myValue.value = $event : null),
        multiple: _ctx.multiple,
        "collapse-tags": "",
        loading: _unref(loading)
      }, { ..._ctx.$attrs }, { class: _unref(className) }), {
        default: _withCtx(() => [
          (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(myOptions), (item, index) => {
            return _openBlock(), _createBlock(_unref(ElOption), {
              key: item[_unref(myProps).key] || item[_unref(myProps).label],
              label: item[_unref(myProps).label],
              value: item[_unref(myProps).value] === void 0 ? index : item[_unref(myProps).value]
            }, null, 8, ["label", "value"]);
          }), 128))
        ]),
        _: 1
      }, 16, ["modelValue", "multiple", "loading", "class"]);
    };
  }
});

// vue-style:D:\project\_my\vc\src\components\select\index.vue?type=style&index=0&isModule=true&isNameImport=true
var select_default2 = { select: "_select_19zt8_1", block: "_block_19zt8_5" };

// src/components/select/index.vue
var cssModules = {};
select_default.__cssModules = cssModules = {};
cssModules["$style"] = select_default2;
var select_default3 = select_default;
export {
  select_default3 as default
};