@indielayer/ui/lib/composables/useTheme.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { inject as O, computed as c, unref as e, useSlots as P } from "vue";
import { injectThemeKey as T } from "./keys.js";
import { useColors as d } from "./useColors.js";
import { useCSS as A } from "./useCSS.js";
import { mergeRightDeep as D, smartUnref as h, isFunction as S, isObject as $ } from "../common/utils.js";
const U = (s, r = {}, n = {}, l = {}) => {
  const o = O(T, {}), v = c(() => {
    var t, m, a;
    return (m = (t = e(o)) == null ? void 0 : t.components) != null && m[s] ? D(r.classes || {}, ((a = e(o).components) == null ? void 0 : a[s].classes) || {}) : r.classes || {};
  }), p = s.replace(/([A-Z])/g, (t) => `-${t[0].toLowerCase()}`).replace(/^-/, ""), f = c(() => {
    var t;
    return ((t = e(o)) == null ? void 0 : t.classPrefix) ?? "x-";
  }), w = c(() => `${f.value}${p}`), C = c(() => {
    var t;
    return ((t = e(o)) == null ? void 0 : t.rtl) ?? !1;
  }), g = P(), i = d(), u = A(p), y = c(() => b(v.value, {
    props: e(n),
    slots: g,
    data: h(l),
    colors: i,
    css: u,
    rtl: e(C)
  })), N = c(() => {
    var a, x;
    const t = ((x = (a = e(o)) == null ? void 0 : a.components) == null ? void 0 : x[s]) || {}, m = {
      props: e(n),
      slots: g,
      data: h(l),
      colors: i,
      css: u,
      rtl: e(C)
    };
    return [
      j(r.styles, m),
      j(t.styles, m)
    ];
  });
  return {
    classPrefix: f,
    className: w,
    colors: i,
    classes: y,
    styles: N,
    css: u
  };
};
function b(s, r) {
  const n = {};
  return Object.keys(s).forEach((l) => {
    const o = s[l];
    n[l] = S(o) ? o(r) : $(o) ? b(o, r) : o;
  }), n;
}
function j(s, r) {
  return S(s) ? s(r) || {} : $(s) ? s : {};
}
export {
  U as useTheme
};