various-ui/es/components/button/default/src/composable.mjs

This is a test version of the Vue 3 component library

import { computed } from 'vue';
import '../../../../utils/index.mjs';
import { isNumber } from 'lodash-es';

const useComposable = (define, emits) => {
  const status = computed(() => {
    if (define.loading) return { is: true, name: "loading" };
    else if (define.disabled) return { is: false, name: "disabled" };
    else if (define.readonly) return { is: false, name: "readonly" };
    else {
      return { is: false, name: "default" };
    }
  });
  const computeds = {
    //* 主体样式
    style: computed(() => {
      if (!define.width) return {};
      else if (isNumber(define.width)) {
        return { "min-width": define.width + "px" };
      } else {
        return { "min-width": define.width };
      }
    }),
    //* 禁用状态
    disabled: computed(() => {
      return ["loading", "disabled", "readonly"].includes(status.value.name);
    }),
    //* 主体类名
    className: computed(() => {
      const result = [];
      if (define.simple) result.push("ui-button-simple");
      if (define.size != "default") result.push(`ui-${define.size}`);
      if (define.type != "info") result.push(`ui-${define.type}-type`);
      if (status.value.name == "loading") result.push("ui-loading-status");
      else if (status.value.name == "disabled") result.push("ui-disabled-status");
      else if (status.value.name == "readonly") result.push("ui-readonly-status");
      return result.join(" ");
    })
  };
  const methods = {
    click: (ev) => {
      if (computeds.disabled.value) return;
      else {
        emits("click", ev);
      }
    }
  };
  return { status, computeds, methods };
};

export { useComposable };
//# sourceMappingURL=composable.mjs.map