excited-ui/dist/excited-ui.cjs

an excited ui

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$1 = "";
function getButtonClass(props2) {
  const { color, type, outline, text } = props2;
  let className = "";
  if (text) {
    className += `text `;
  }
  if (color) {
    className += `ex-button--colored `;
  } else {
    if (type) {
      className += `ex-button--${type} `;
    }
  }
  if (!outline) {
    className += `border-none `;
  } else {
    className += `outline`;
  }
  return `${className} ${getButtonSize(props2)}  ${getShadow(
    props2
  )}${getButtonRound(props2)} ${getDisabled(props2)}`;
}
function getButtonSize(props2) {
  const { size } = props2;
  let className = "";
  if (size) {
    if (size === "default") {
      className += "text-base";
    }
    if (size === "small") {
      className += "text-sm";
    }
    if (size === "medium") {
      className += "text-xl";
    }
    if (size === "large") {
      className += "text-2xl";
    }
  }
  return className;
}
function getButtonRound(props2) {
  let className = "";
  const { square } = props2;
  if (square) {
    className += "rounded-md";
  } else {
    className += "rounded-xl";
  }
  return className;
}
function getDisabled(props2) {
  let className = "";
  const { disabled } = props2;
  if (disabled) {
    className += " opacity-50 cursor-not-allowed ";
  } else {
    className += " hover:opacity-80 focus:opacity-80 ";
  }
  return className;
}
function getShadow(props2) {
  let className = "";
  const { text } = props2;
  if (!text) {
    className += " shadow-md  ";
  }
  return className;
}
const buttonTypes = ["default", "primary", "success", "warning", "info", "danger"];
const buttonSizes = ["default", "mini", "medium", "large"];
const props = {
  color: {
    type: String
  },
  icon: {
    type: String,
    required: false
  },
  type: {
    type: String,
    values: buttonTypes,
    default: () => "default"
  },
  size: {
    type: String,
    values: buttonSizes
  },
  square: {
    type: Boolean,
    default: false
  },
  outline: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  text: {
    type: Boolean,
    default: false
  }
};
const ExButton = vue.defineComponent({
  name: "ExButton",
  props,
  setup(props2, {
    slots
  }) {
    return () => vue.createVNode("button", {
      "class": `
      ex-button
      py-2
      px-4
      font-semibold 
      text-white 
      cursor-pointer 
      m-1
      ${getButtonClass(props2)}
      `,
      "style": {
        "--ex-button-color": props2.color
      }
    }, [props2.icon && !props2.text && vue.createVNode("i", {
      "class": `i-ic-baseline-${String(props2.icon)} p-3`
    }, null), slots.default ? slots.default() : ""]);
  }
});
const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  ExButton
}, Symbol.toStringTag, { value: "Module" }));
const index = "";
const eColors = ["primary", "success", "info", "warning", "danger"];
function presetThemeDefault() {
  return {
    name: "excited-ui/preset-theme-default",
    theme: {
      colors: {
        default: "hsl(var(--ex-default))",
        primary: "hsl(var(--ex-primary))",
        success: "hsl(var(--ex-success))",
        info: "hsl(var(--ex-info))",
        warning: "hsl(var(--ex-warning))",
        danger: "hsl(var(--ex-danger))",
        a: { border: "hsla(var(--ex-base-color),var(--ex-border-opacity))" }
      }
    },
    safelist: [
      ...eColors.map((c) => `bg-${c}`),
      ...eColors.map((c) => `hover:bg-${c}`),
      ...eColors.map((c) => `border-${c}`),
      ...eColors.map((c) => `text-${c}`),
      ...eColors.map((c) => `shadow-${c}`),
      ...eColors.map((c) => `after:bg-${c}`),
      ...eColors.map((c) => `next:checked:bg-${c}`),
      ...eColors.map((c) => `next:checked:border-${c}`)
    ],
    rules: [
      [
        "overlay",
        {
          position: "absolute",
          inset: 0,
          content: "''",
          background: "currentColor",
          opacity: 0
        }
      ]
    ]
  };
}
function ExComponentResolver() {
  return {
    type: "component",
    resolve: (componentName) => {
      if (componentName.match(/^Ex[A-Z]/))
        return { name: componentName, from: "excited-ui" };
    }
  };
}
const ExcitedUI = {
  install(app) {
    for (const prop in components) {
      const component = components[prop];
      app.component(component.name, component);
    }
  }
};
exports.ExButton = ExButton;
exports.ExComponentResolver = ExComponentResolver;
exports.ExcitedUI = ExcitedUI;
exports.defaultThemeColors = eColors;
exports.presetThemeDefault = presetThemeDefault;
//# sourceMappingURL=excited-ui.cjs.map